Merge pull request #9 from vtex-apps/feature/image-title

Add title prop to the image component
vtex-apps · Feb 10, 2020 · ecbd77c · ecbd77c
2 parents eb39746 + 87403b6
commit ecbd77c
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 9 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,5 @@
 {
   "editor.formatOnSave": true,
-  "prettier.eslintIntegration": true,
   "eslint.validate": [
     {
       "language": "javascript",
@@ -31,5 +30,8 @@
       "directory": "node",
       "changeProcessCWD": true
     }
-  ]
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- `title` prop to the `Image` component.
 
 ## [0.3.1] - 2019-11-22
 ### Removed

diff --git a/messages/en.json b/messages/en.json
@@ -5,6 +5,8 @@
   "admin/editor.store-image.alt.title": "Alternative text",
   "admin/editor.store-image.blockClass.title": "CSS Block Class",
   "admin/editor.store-image.blockClass.description": "Adds an extra class name to ease styling",
+  "admin/editor.store-image.title.title": "Image title",
+  "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.image.title": "Image",

diff --git a/messages/es.json b/messages/es.json
@@ -5,6 +5,8 @@
   "admin/editor.store-image.alt.title": "Texto alternativo",
   "admin/editor.store-image.blockClass.title": "CSS Block Class",
   "admin/editor.store-image.blockClass.description": "Agrega un nombre de clase extra para facilitar la estilización",
+  "admin/editor.store-image.title.title": "Título de la imagen",
+  "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.image.title": "Imagen",

diff --git a/messages/pt.json b/messages/pt.json
@@ -5,6 +5,8 @@
   "admin/editor.store-image.alt.title": "Texto alternativo",
   "admin/editor.store-image.blockClass.title": "CSS Block Class",
   "admin/editor.store-image.blockClass.description": "Adiciona um nome de classe extra para facilitar a estilização",
+  "admin/editor.store-image.title.title": "Título da imagem",
+  "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.image.title": "Imagem",

diff --git a/react/Image.tsx b/react/Image.tsx
@@ -33,6 +33,7 @@ const Image: StorefrontFunctionComponent<ImageProps> = ({
   sizes = '',
   link,
   intl,
+  title,
 }) => {
   const handles = useCssHandles(CSS_HANDLES, {
     migrationFrom: '[email protected]',
@@ -51,9 +52,10 @@ const Image: StorefrontFunctionComponent<ImageProps> = ({
 
   const imgElement = (
     <img
-      src={formattedSrc}
-      srcSet={srcSet}
+      title={title}
       sizes={sizes}
+      srcSet={srcSet}
+      src={formattedSrc}
       alt={formattedAlt}
       style={imageDimensions}
       className={handles.imageElement}

diff --git a/react/package.json b/react/package.json
@@ -18,7 +18,7 @@
     "eslint": "5.x",
     "eslint-config-vtex-react": "^5.x",
     "prettier": "^1.18.2",
-    "typescript": "3.5.2",
+    "typescript": "3.7.3",
     "vtex.render-runtime": "http://vtex.vteximg.com.br/_v/public/typings/v1/[email protected]/public/_types/react",
     "vtex.native-types": "http://vtex.vteximg.com.br/_v/public/typings/v1/[email protected]/public/_types/react"
   },

diff --git a/react/yarn.lock b/react/yarn.lock
@@ -5092,10 +5092,10 @@ type-fest@^0.5.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
   integrity sha512-DWkS49EQKVX//Tbupb9TFa19c7+MK1XmzkrZUR8TAktmE/DizXoaoJV6TZ/tSIPXipqNiRI6CyAe7x69Jb6RSw==
 
-typescript@3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.2.tgz#a09e1dc69bc9551cadf17dba10ee42cf55e5d56c"
-  integrity sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA==
+typescript@3.7.3:
+  version "3.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.3.tgz#b36840668a16458a7025b9eabfad11b66ab85c69"
+  integrity sha512-Mcr/Qk7hXqFBXMN7p7Lusj1ktCBydylfQM/FZCk5glCNQJrCUKPkMHdo9R0MTFWsC/4kPFvDS0fDPvukfCkFsw==
 
 typescript@^3.3.3333:
   version "3.5.3"

diff --git a/store/contentSchemas.json b/store/contentSchemas.json
@@ -18,6 +18,12 @@
           "title": "admin/editor.image.alt.title",
           "$ref": "app:vtex.native-types#/definitions/text",
           "default": ""
+        },
+        "title": {
+          "title": "admin/editor.image.title.title",
+          "description": "admin/editor.image.title.description",
+          "$ref": "app:vtex.native-types#/definitions/text",
+          "default": ""
         }
       }
     },