Feat: Adds tokens to ImageGallery (#143)

* Removes unused icons file * Removes unnecessary data-attr * Adds default stories mdx * Renames data-store-image to data-fs-image * Moves image styles to layout.scss * Adjusts tokens for image-gallery * Renames `data-thumbnail-button` to `data-fs-image-gallery-selector-thumbnail` * Adds `data-fs-image-gallery-selector-control-button` data-attr` * Adds image-gallery-selector-elements tokens * Adds tokens data-fs-image-gallery-selector-thumbnail data-attr * Adds tokens documentation * Removes unused args paramenter * Convert px to rem * Updates title * Adds `-mobile` * Updates description * Updates changelog * Updates tokens variables with global tokens * Renames thumbnail selected border color token * Adding Variants section * Reorders Variants section place
vtex-sites · Jun 27, 2022 · 26bd042 · 26bd042 · vercel · Jun 27, 2022
1 parent 2d958da
commit 26bd042
Show file tree

Hide file tree

Showing 11 changed files with 292 additions and 123 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies new local tokens to `ImageGallery` ([#143](https://github.com/vtex-sites/nextjs.store/pull/143))
 - Creates Doc page for `Regionalization` Feature ([#110](https://github.com/vtex-sites/nextjs.store/pull/110))
 - Applies new local tokens to `RegionalizationBar` ([#104](https://github.com/vtex-sites/nextjs.store/pull/104))
 - Applies new local tokens to `Modal` and `RegionalizationModal` ([#128](https://github.com/vtex-sites/nextjs.store/pull/128))

diff --git a/src/components/ui/Image/Image.tsx b/src/components/ui/Image/Image.tsx
@@ -45,7 +45,7 @@ const Image = forwardRef<HTMLImageElement, Props>(
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           ref={ref}
-          data-store-image
+          data-fs-image
           {...imgProps}
           alt={imgProps.alt}
           fetchpriority={fetchPriority}

diff --git a/src/components/ui/Image/image.scss b/src/components/ui/Image/image.scss
diff --git a/src/components/ui/ImageGallery/Icons.tsx b/src/components/ui/ImageGallery/Icons.tsx
diff --git a/src/components/ui/ImageGallery/ImageGallery.stories.mdx b/src/components/ui/ImageGallery/ImageGallery.stories.mdx
@@ -0,0 +1,167 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { ImageGallery } from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta title="Organisms/ImageGallery" />
+
+export const Template = () => {
+  const productImages = [
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000',
+      alternateName: 'Magicwhite',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190923/lena-de-fanti-nQ_j5d-klVU-unsplash.jpg?v=637867501523500000',
+      alternateName: 'magicbox',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190924/anthony-choren-e7dG26YCrZU-unsplash.jpg?v=637867501835430000',
+      alternateName: 'magicblackwhite',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190925/maheshkumar-painam-GZdfLeL-MDk-unsplash.jpg?v=637867502064000000',
+      alternateName: 'magiccombo',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190926/math-0U9fBLGP3EY-unsplash.jpg?v=637867502325830000',
+      alternateName: 'magicback',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190927/marek-levak-YPeqMN_wfw0-unsplash.jpg?v=637867502641430000',
+      alternateName: 'magictable',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190928/mouse8.jpg?v=637867504048970000',
+      alternateName: 'magichand',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190929/harpal-singh-KuvEVL7lXYQ-unsplash.jpg?v=637867509459130000',
+      alternateName: 'magicstyle',
+    },
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190930/chris-hardy-182PzOtcmWc-unsplash.jpg?v=637867509778300000',
+      alternateName: 'magicscale',
+    },
+  ]
+  return <ImageGallery images={productImages} />
+}
+
+export const TemplateWithoutSelector = () => {
+  const productImages = [
+    {
+      url: 'https://storeframework.vtexassets.com/arquivos/ids/190902/unsplash-magic-mouse.jpg?v=637800136963870000',
+      alternateName: 'Magicwhite',
+    },
+  ]
+  return <ImageGallery images={productImages} />
+}
+
+<header>
+
+# Image Gallery
+
+An `ImageGallery` is used when you want to display a series of photos in a gallery on a post or page.
+
+</header>
+
+## Overview
+
+According to the quantity of `Image` to be displayed, the `ImageGallerySelector` will be displayed.
+
+---
+
+## Usage
+
+`import { ImageGallery } from 'src/components/ui/ImageGallery'`
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-image-gallery-width"
+    value="calc(100% + (2 * var(--fs-grid-padding)))"
+  />
+  <TokenRow
+    token="--fs-image-gallery-image-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-image-gallery-gap-mobile" value="var(--fs-spacing-2)" />
+  <TokenRow
+    token="--fs-image-gallery-gap-notebook"
+    value="var(--fs-spacing-3)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Selector
+
+<TokenTable>
+  <TokenRow token="--fs-image-gallery-selector-max-height" value="33.125rem" />
+</TokenTable>
+
+### Selector Elements
+
+<TokenTable>
+  <TokenRow
+    token="--fs-image-gallery-selector-elements-gap"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-elements-gap-notebook"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-elements-padding"
+    value="var(--fs-spacing-0)"
+  />
+</TokenTable>
+
+### Selector Thumbnail
+
+<TokenTable>
+  <TokenRow
+    token="--fs-image-gallery-selector-thumbnail-width-mobile"
+    value="3.5rem"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-thumbnail-width-notebook"
+    value="4.5rem"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-thumbnail-border-radius"
+    value="var(--fs-border-radius)"
+  />
+  <TokenRow
+    token="--fs-image-gallery-selector-thumbnail-selected-border-color"
+    value="var(--fs-border-color-active)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### With Selector (More than 1 Image)
+
+<Canvas>
+  <Story name="overview-default">{Template.bind({})}</Story>
+</Canvas>
+
+### Without Selector
+
+<Canvas>
+  <Story name="overview-default-2">{TemplateWithoutSelector.bind({})}</Story>
+</Canvas>
diff --git a/src/components/ui/ImageGallery/ImageGallerySelector.tsx b/src/components/ui/ImageGallery/ImageGallerySelector.tsx
@@ -62,6 +62,7 @@ function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
     >
       {elementHasScroll && !firstImageInView && (
         <IconButton
+          data-fs-image-gallery-selector-control-button
           aria-label="backward slide image selector"
           icon={<Icon name="ArrowLeft" width={24} height={24} />}
           onClick={() => moveScroll(elementsRef.current, -SCROLL_MARGIN_VALUE)}
@@ -79,13 +80,13 @@ function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
           return (
             <Button
               key={idx}
-              data-thumbnail-button={
-                idx === currentImageIdx ? 'selected' : 'true'
-              }
               aria-label={`${image.alternateName} - Image ${idx + 1} of ${
                 images.length
               }`}
               onClick={() => onSelect(idx)}
+              data-fs-image-gallery-selector-thumbnail={
+                idx === currentImageIdx ? 'selected' : 'true'
+              }
             >
               <Image
                 ref={ref}
@@ -102,6 +103,7 @@ function ImageGallerySelector({ images, onSelect, currentImageIdx }: Props) {
       </div>
       {elementHasScroll && !lastImageInView && (
         <IconButton
+          data-fs-image-gallery-selector-control-button
           aria-label="forward slide image selector"
           icon={<Icon name="ArrowLeft" width={24} height={24} />}
           onClick={() => moveScroll(elementsRef.current, +SCROLL_MARGIN_VALUE)}