Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/image title attr #24

Merged
merged 5 commits into from Sep 9, 2020
Merged

Fix/image title attr #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f0c489c
adding title attr to image
vitorflg Sep 2, 2020
142b80d
adding title attr to image slider
vitorflg Sep 2, 2020
f8cb758
Update log and version
vitorflg Sep 2, 2020
ebeefc1
Remove date from log
vitorflg Sep 2, 2020
0085402
Remove version update
vitorflg Sep 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Expand Up @@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Fixed
- `title` prop to `Image` component
kaisermann marked this conversation as resolved.
Show resolved Hide resolved

## [0.5.0] - 2020-08-10
### Added
- `experimentalPreventLayoutShift` prop to `Image` component
Expand Down
9 changes: 5 additions & 4 deletions messages/en.json
View file
Open in desktop
Expand Up @@ -7,14 +7,15 @@
"admin/editor.store-image.title.description": "Title to be shown on hover",
"admin/editor.image-list.title": "Image List",
"admin/editor.image-list.description": "Show a list of images",
"admin/editor.image-list.images.title": "Images",
"admin/editor.image-list.images.image.title": "Image",
"admin/editor.image-list.images.mobileImage.title": "Image for mobile",
"admin/editor.image-list.images.description.title": "Alt image description",
"admin/editor.image-list.images.description.title": "Image alt text",
"admin/editor.image-list.images.title.title": "Image title",
"admin/editor.image-list.images.link.url.title": "Image link URL",
"admin/editor.image-list.images.link.openNewTab.title": "Should open on new tab",
"admin/editor.image-list.images.link.noFollow.title": "Shuold be a nofollow link",
"admin/editor.image-list.images.link.title.title": "Title for the image",
"admin/editor.image-list.images.title": "Images",
"admin/editor.image-list.images.link.noFollow.title": "Should be a nofollow link",
"admin/editor.image-list.images.link.title.title": "Title for the link",
Comment on lines +17 to +18
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not being used, is it?

Copy link
Contributor Author

@vitorflg vitorflg Sep 2, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think not but I don't have 100% sure. Do you think we can remove that(All link messages)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@klzns

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there's no reference to this string in this project, yes

"admin/editor.image-list.height.title": "Maximum height for each image (px)",
"admin/editor.image-slider.title": "Image Slider",
"admin/editor.image-slider.description": "Image Slider",
Expand Down
7 changes: 4 additions & 3 deletions messages/es.json
View file
Open in desktop
Expand Up @@ -7,14 +7,15 @@
"admin/editor.store-image.title.description": "T铆tulo que se mostrar谩 al pasar el mouse sobre la imagen",
"admin/editor.image-list.title": "Lista de imagenes",
"admin/editor.image-list.description": "Mostrar una lista de im谩genes",
"admin/editor.image-list.images.title": "Im谩genes",
"admin/editor.image-list.images.image.title": "Imagen",
"admin/editor.image-list.images.mobileImage.title": "Imagen para m贸vil",
"admin/editor.image-list.images.description.title": "Descripci贸n de la imagen alternativa",
"admin/editor.image-list.images.title.title": "T铆tulo de la imagen.",
"admin/editor.image-list.images.link.url.title": "URL del enlace de imagen",
"admin/editor.image-list.images.link.openNewTab.title": "Deber铆a abrir en una pesta帽a nueva",
"admin/editor.image-list.images.link.noFollow.title": "Deber铆a ser un enlace nofollow",
"admin/editor.image-list.images.link.title.title": "T铆tulo de la imagen.",
"admin/editor.image-list.images.title": "Im谩genes",
"admin/editor.image-list.images.link.title.title": "T铆tulo de la link.",
"admin/editor.image-list.height.title": "Altura m谩xima para cada imagen (px)",
"admin/editor.image-slider.title": "Control deslizante de imagen",
"admin/editor.image-slider.description": "Control deslizante de imagen",
Expand All @@ -23,4 +24,4 @@
"admin/editor.image-slider.slider.showNavigation": "Mostrar flechas de navegaci贸n",
"admin/editor.image-slider.slider.showPaginationDots": "Mostrar puntos de paginaci贸n",
"admin/editor.image-slider.slider.usePagination": "Usar paginaci贸n"
}
}
7 changes: 4 additions & 3 deletions messages/pt.json
View file
Open in desktop
Expand Up @@ -7,14 +7,15 @@
"admin/editor.store-image.title.description": "T铆tulo a ser mostrado quando voc锚 passa o mouse pela imagem",
"admin/editor.image-list.title": "Lista de imagens",
"admin/editor.image-list.description": "Exiba uma lista de imagens",
"admin/editor.image-list.images.title": "Imagens",
"admin/editor.image-list.images.image.title": "Imagem",
"admin/editor.image-list.images.mobileImage.title": "Imagem para mobile",
"admin/editor.image-list.images.description.title": "Descri莽茫o alternativa para a imagem",
"admin/editor.image-list.images.title.title": "T铆tulo para a imagem",
"admin/editor.image-list.images.link.url.title": "URL do link da imagem",
"admin/editor.image-list.images.link.openNewTab.title": "Abrir em uma nova aba",
"admin/editor.image-list.images.link.noFollow.title": "Link nofollow",
"admin/editor.image-list.images.link.title.title": "T铆tulo para a imagem",
"admin/editor.image-list.images.title": "Imagens",
"admin/editor.image-list.images.link.title.title": "T铆tulo para o link",
"admin/editor.image-list.height.title": "Altura m谩xima de cada imagem (px)",
"admin/editor.image-slider.title": "Slider de imagens",
"admin/editor.image-slider.description": "Slider de imagens",
Expand All @@ -23,4 +24,4 @@
"admin/editor.image-slider.slider.showNavigation": "Mostrar setas para navega莽茫o",
"admin/editor.image-slider.slider.showPaginationDots": "Mostrar indicadores de pagina莽茫o",
"admin/editor.image-slider.slider.usePagination": "Usar pagina莽茫o"
}
}
2 changes: 1 addition & 1 deletion react/Image.tsx
View file
Open in desktop
Expand Up @@ -119,7 +119,7 @@ function Image(props: ImageProps) {
href={formatIOMessage({ id: link.url, intl })}
rel={link.noFollow ? 'nofollow' : ''}
target={shouldOpenLinkInNewTab ? '_blank' : undefined}
title={formatIOMessage({ id: link.title, intl })}
title={formatIOMessage({ id: link?.attributeTitle, intl })}
kaisermann marked this conversation as resolved.
Show resolved Hide resolved
className={handles.imageElementLink}
>
{imgElement}
Expand Down
9 changes: 7 additions & 2 deletions react/ImageList.tsx
View file
Open in desktop
Expand Up @@ -19,12 +19,13 @@ const ImageList: StorefrontFunctionComponent<Props> = ({
const list = useListContext()?.list ?? []

const imageListContent = images.map(
({ link, image, mobileImage, description }, idx) => (
({ image, mobileImage, link, title, description }, idx) => (
<Image
key={idx}
src={isMobile && mobileImage ? mobileImage : image}
alt={description}
link={link}
title={title}
alt={description}
maxHeight={height}
width="100%"
experimentalPreventLayoutShift
Expand Down Expand Up @@ -59,6 +60,10 @@ const messages = defineMessages({
id: 'admin/editor.image-list.images.description.title',
defaultMessage: '',
},
imagesImageAttributeTitle: {
id: 'admin/editor.image-list.images.title.title',
defaultMessage: '',
},
imagesImageLinkUrl: {
id: 'admin/editor.image-list.images.link.url.title',
defaultMessage: '',
Expand Down
10 changes: 8 additions & 2 deletions react/ImageSlider.tsx
View file
Open in desktop
Expand Up @@ -15,7 +15,8 @@ interface Image {
}
image: string
mobileImage: string
description: string
description: string,
title?: string
}

interface SliderConfig {
Expand Down Expand Up @@ -61,7 +62,7 @@ function ImageSlider(props: Props) {

return (
<SliderLayout {...sliderLayoutConfig} totalItems={images.length}>
{images.map(({ link, image, mobileImage, description }, idx) => {
{images.map(({ image, mobileImage, link, title, description }, idx) => {
const imageUrl = getImageUrl(
isMobile,
formatIOMessage({ id: image, intl }),
Expand All @@ -80,6 +81,7 @@ function ImageSlider(props: Props) {
src={imageUrl}
alt={imageAltDescription}
link={imageLink}
title={title}
maxHeight={height}
width="100%"
/>
Expand Down Expand Up @@ -107,6 +109,10 @@ const messages = defineMessages({
id: 'admin/editor.image-list.images.description.title',
defaultMessage: '',
},
imagesImageAttributeTitle: {
id: 'admin/editor.image-list.images.title.title',
defaultMessage: '',
},
imagesImageLinkUrl: {
id: 'admin/editor.image-list.images.link.url.title',
defaultMessage: '',
Expand Down
5 changes: 3 additions & 2 deletions react/typings/image.d.ts
View file
Open in desktop
@@ -1,7 +1,7 @@
interface Link {
url: string
noFollow: boolean
title: string
attributeTitle?: string
/**
* These two properties need to both exist because
* there was a mismatch in the API defined by this component,
Expand All @@ -16,6 +16,7 @@ interface Link {
interface Image {
image: string
mobileImage: string
description: string
link?: Link
title?: string
description: string
}
5 changes: 5 additions & 0 deletions store/contentSchemas.json
View file
Open in desktop
Expand Up @@ -55,6 +55,11 @@
"default": "",
"title": "admin/editor.image-list.images.description.title"
},
"title": {
"title": "admin/editor.image-list.images.title.title",
"$ref": "app:vtex.native-types#/definitions/text",
"default": ""
},
"link": {
"default": "",
"title": "",
Expand Down