From 29d3c22aeff85a1f3fc4d1968750ec692a1cf126 Mon Sep 17 00:00:00 2001 From: Fanny Chien Date: Wed, 11 May 2022 20:29:33 -0300 Subject: [PATCH 1/7] Fixes `Accordion` components data-attributes --- docs/docs/reference/ui/molecules/Accordion.mdx | 6 +++--- themes/theme-b2c-tailwind/src/molecules/accordion.css | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/docs/reference/ui/molecules/Accordion.mdx b/docs/docs/reference/ui/molecules/Accordion.mdx index 0877015e83..dec7d3d521 100644 --- a/docs/docs/reference/ui/molecules/Accordion.mdx +++ b/docs/docs/reference/ui/molecules/Accordion.mdx @@ -192,10 +192,10 @@ Besides those attributes, the following props are also supported: `data-store-accordion` -`data-store-accordion-item` +`data-accordion-item` -`data-store-accordion-button` +`data-accordion-button` -`data-store-accordion-panel` +`data-accordion-panel` The `AccordionButton` component inherits [Button](/reference/ui/atoms/Button) css selectors. diff --git a/themes/theme-b2c-tailwind/src/molecules/accordion.css b/themes/theme-b2c-tailwind/src/molecules/accordion.css index 3c4c8a356a..8c7e6f95ac 100644 --- a/themes/theme-b2c-tailwind/src/molecules/accordion.css +++ b/themes/theme-b2c-tailwind/src/molecules/accordion.css @@ -1,19 +1,19 @@ -[data-store-accordion-button] { +[data-accordion-button] { @apply bg-transparent text-gray-800; @apply hover:text-pink-600; } [data-store-icon] { @apply align-top ml-2; } -[data-store-accordion-button][aria-expanded='true'] { +[data-accordion-button][aria-expanded='true'] { @apply text-pink-600; } -[data-store-accordion-button][aria-expanded='true'] [data-store-icon] { +[data-accordion-button][aria-expanded='true'] [data-store-icon] { @apply transform rotate-180; } -[data-store-accordion-panel] > ul { +[data-accordion-panel] > ul { @apply list-none my-0 pl-10; } -[data-store-accordion-panel] a { +[data-accordion-panel] a { @apply text-gray-500 no-underline hover:text-blue-700; } From f49960133a3ba44dcde1515c700e707e3c0b2471 Mon Sep 17 00:00:00 2001 From: Fanny Chien Date: Wed, 11 May 2022 20:44:20 -0300 Subject: [PATCH 2/7] Updates `Accordion` style --- .../src/molecules/accordion.css | 35 ++++++++++++++----- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/themes/theme-b2c-tailwind/src/molecules/accordion.css b/themes/theme-b2c-tailwind/src/molecules/accordion.css index 8c7e6f95ac..f9c552dcd2 100644 --- a/themes/theme-b2c-tailwind/src/molecules/accordion.css +++ b/themes/theme-b2c-tailwind/src/molecules/accordion.css @@ -1,19 +1,38 @@ [data-accordion-button] { - @apply bg-transparent text-gray-800; - @apply hover:text-pink-600; + color: #171a1c; + background-color: transparent; } -[data-store-icon] { - @apply align-top ml-2; + +[data-accordion-button]:hover { + color: #db2777; } + +[data-accordion-button] [data-store-icon] { + margin-left: 0.5rem; + vertical-align: middle; +} + [data-accordion-button][aria-expanded='true'] { - @apply text-pink-600; + color: #db2777; } + [data-accordion-button][aria-expanded='true'] [data-store-icon] { - @apply transform rotate-180; + transform: rotate(180deg); + transition: transform .8s ease-in-out; } + [data-accordion-panel] > ul { - @apply list-none my-0 pl-10; + padding-left: 2.5rem; + margin-top: 0px; + margin-bottom: 0px; + list-style-type: none; } + [data-accordion-panel] a { - @apply text-gray-500 no-underline hover:text-blue-700; + text-decoration: none; + color: #74808b; +} + +[data-accordion-panel] a:hover { + color: #00419e; } From e05fedcb68c544a7c79bc7d570a1c17cdf60bbeb Mon Sep 17 00:00:00 2001 From: Fanny Chien Date: Wed, 11 May 2022 20:51:21 -0300 Subject: [PATCH 3/7] Fixes `Banner` components data-attributes --- docs/docs/reference/ui/molecules/Banner.mdx | 14 +++---- .../src/molecules/banner.css | 40 +++++++++---------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/docs/reference/ui/molecules/Banner.mdx b/docs/docs/reference/ui/molecules/Banner.mdx index 58a79e2d89..17a78d4a80 100644 --- a/docs/docs/reference/ui/molecules/Banner.mdx +++ b/docs/docs/reference/ui/molecules/Banner.mdx @@ -7,7 +7,7 @@ Banners are used for advertising brands, products, and/or collections. They comp - `BannerImage`: the component that wraps the image displayed in the component. - `BannerContent`: the content of the banner, including a title, description, and `BannerLink`. - `BannerLink`: the banner's call-to-action link. - + ## Import ```tsx @@ -95,17 +95,17 @@ All banner-related components support all attributes also supported by the `
### BannerImage - + ### BannerContent - + ## Customization @@ -114,8 +114,8 @@ Besides those attributes, the following props are also supported: `data-store-banner=('vertical'|'horizontal')` -`data-store-banner-image` +`data-banner-image` -`data-store-banner-content` +`data-banner-content` -`data-store-banner-link` +`data-banner-link` diff --git a/themes/theme-b2c-tailwind/src/molecules/banner.css b/themes/theme-b2c-tailwind/src/molecules/banner.css index 28f4784638..580537160c 100644 --- a/themes/theme-b2c-tailwind/src/molecules/banner.css +++ b/themes/theme-b2c-tailwind/src/molecules/banner.css @@ -1,45 +1,45 @@ -[data-store-banner-image] { - @apply w-full h-64; +[data-store-banner='vertical'] { + @apply flex flex-col; } -[data-store-banner-image] img { - @apply object-cover w-full h-full; +[data-store-banner='vertical'] [data-banner-link] { + @apply ml-auto; } -[data-store-banner-content] { - @apply flex p-7; +[data-store-banner='horizontal'] { + @apply grid grid-cols-2; } -[data-store-banner-content] h3 { - @apply font-medium text-xl; +[data-store-banner='horizontal'] [data-banner-content] { + @apply flex-col justify-between; } -[data-store-banner='vertical'] { - @apply flex flex-col; +[data-store-banner='horizontal'] [data-banner-link] { + @apply mr-auto; } -[data-store-banner='vertical'] [data-store-banner-link] { - @apply ml-auto; +[data-banner-image] { + @apply w-full h-64; } -[data-store-banner='horizontal'] { - @apply grid grid-cols-2; +[data-banner-image] img { + @apply object-cover w-full h-full; } -[data-store-banner='horizontal'] [data-store-banner-content] { - @apply flex-col justify-between; +[data-banner-content] { + @apply flex p-7; } -[data-store-banner='horizontal'] [data-store-banner-link] { - @apply mr-auto; +[data-banner-content] h3 { + @apply font-medium text-xl; } -[data-store-banner-link] { +[data-banner-link] { @apply px-6 py-2 rounded border-0 cursor-pointer inline-flex items-center; @apply bg-blue-800 text-white; @apply text-lg; } -[data-store-banner-link] [data-store-icon] { +[data-banner-link] [data-store-icon] { @apply m-auto ml-2 align-middle; } From 0cbcfa8c126551ef54b14ed87ea73b90668a277f Mon Sep 17 00:00:00 2001 From: Fanny Chien Date: Wed, 11 May 2022 21:14:21 -0300 Subject: [PATCH 4/7] Fixes `Slider` components data-attributes --- docs/docs/reference/ui/atoms/Slider.mdx | 4 ++-- themes/theme-b2c-tailwind/src/atoms/slider.css | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/reference/ui/atoms/Slider.mdx b/docs/docs/reference/ui/atoms/Slider.mdx index bfd9de0b1e..60e9dbbab9 100644 --- a/docs/docs/reference/ui/atoms/Slider.mdx +++ b/docs/docs/reference/ui/atoms/Slider.mdx @@ -27,6 +27,6 @@ import { Slider } from '@faststore/ui' `data-store-slider` -`data-store-slider-range` +`data-slider-range` -`data-store-slider-thumb='(left|right)'` +`data-slider-thumb='(left|right)'` diff --git a/themes/theme-b2c-tailwind/src/atoms/slider.css b/themes/theme-b2c-tailwind/src/atoms/slider.css index 9a8daec5b7..ea201560b0 100644 --- a/themes/theme-b2c-tailwind/src/atoms/slider.css +++ b/themes/theme-b2c-tailwind/src/atoms/slider.css @@ -2,44 +2,44 @@ @apply bg-gray-200 rounded-full relative h-2 w-full; } -[data-store-slider-range] { +[data-slider-range] { @apply bg-blue-500 absolute; height: inherit; } /* Removing the default appearance */ -[data-store-slider-thumb], -[data-store-slider-thumb]::-webkit-slider-thumb { +[data-slider-thumb], +[data-slider-thumb]::-webkit-slider-thumb { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; } -[data-store-slider-thumb] { +[data-slider-thumb] { @apply pointer-events-none h-0 outline-none absolute; width: inherit; } -[data-store-slider-thumb='left'] { +[data-slider-thumb='left'] { @apply z-10; } -[data-store-slider-thumb='right'] { +[data-slider-thumb='right'] { @apply z-20; } /* For Chrome browsers */ -[data-store-slider-thumb]::-webkit-slider-thumb { +[data-slider-thumb]::-webkit-slider-thumb { @apply bg-gray-100 border-none rounded-full pointer-events-auto h-4 w-4 relative mt-1; box-shadow: 0 0 1px 1px #ced4da; cursor: col-resize; } -[data-store-slider-thumb='left']::-webkit-slider-thumb { +[data-slider-thumb='left']::-webkit-slider-thumb { @apply -ml-2; } /* For Firefox browsers */ -[data-store-slider-thumb]::-moz-range-thumb { +[data-slider-thumb]::-moz-range-thumb { @apply bg-gray-100 border-none rounded-full pointer-events-auto h-4 w-4 relative mt-1; box-shadow: 0 0 1px 1px #ced4da; cursor: col-resize; From fe3f8ddb05a840db91b8adf5f2967292adf5a13b Mon Sep 17 00:00:00 2001 From: Fanny Chien Date: Wed, 11 May 2022 21:16:09 -0300 Subject: [PATCH 5/7] Updates `PriceRange` components data-attributes --- docs/docs/reference/ui/molecules/PriceRange.mdx | 4 ++-- themes/theme-b2c-tailwind/src/molecules/price-range.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/reference/ui/molecules/PriceRange.mdx b/docs/docs/reference/ui/molecules/PriceRange.mdx index e38162f1db..6fab6e43ee 100644 --- a/docs/docs/reference/ui/molecules/PriceRange.mdx +++ b/docs/docs/reference/ui/molecules/PriceRange.mdx @@ -37,6 +37,6 @@ function Component () { `data-store-price-range` -`data-store-price-range-values` +`data-price-range-values` -`data-store-price-range-values = '(min|max)'` +`data-price-range-values = '(min|max)'` diff --git a/themes/theme-b2c-tailwind/src/molecules/price-range.css b/themes/theme-b2c-tailwind/src/molecules/price-range.css index e2e56c2a7a..002fef2004 100644 --- a/themes/theme-b2c-tailwind/src/molecules/price-range.css +++ b/themes/theme-b2c-tailwind/src/molecules/price-range.css @@ -1,3 +1,3 @@ -[data-store-price-range-values] { +[data-price-range-values] { @apply mt-4 flex justify-between; } From cecb71c51f2ca61b742019fcce29af0e91c87803 Mon Sep 17 00:00:00 2001 From: Fanny Chien Date: Wed, 11 May 2022 21:21:05 -0300 Subject: [PATCH 6/7] Updates `Table` components data-attributes --- docs/docs/reference/ui/molecules/Table.mdx | 10 +++++----- packages/ui/src/molecules/Table/Table.test.tsx | 2 +- themes/theme-b2c-tailwind/src/molecules/table.css | 14 +++++++------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/docs/reference/ui/molecules/Table.mdx b/docs/docs/reference/ui/molecules/Table.mdx index c00c526ca0..5ba6202094 100644 --- a/docs/docs/reference/ui/molecules/Table.mdx +++ b/docs/docs/reference/ui/molecules/Table.mdx @@ -116,14 +116,14 @@ All table-related components support all attributes also supported by their resp `data-store-table` -`data-store-table-head` +`data-table-head` `data-store-table-row` -`data-store-table-footer` +`data-table-footer` -`data-store-table-body` +`data-table-body` -`data-store-table-cell='head'` +`data-table-cell='head'` -`data-store-table-cell='data'` +`data-table-cell='data'` diff --git a/packages/ui/src/molecules/Table/Table.test.tsx b/packages/ui/src/molecules/Table/Table.test.tsx index caf5ac6f35..e2651c4688 100644 --- a/packages/ui/src/molecules/Table/Table.test.tsx +++ b/packages/ui/src/molecules/Table/Table.test.tsx @@ -65,7 +65,7 @@ describe('Table', () => { const tableCells = queryAllByTestId('store-table-cell') // Make sure 8 cells were rendered and all contain the - // data-store-table-cell attribute. + // data-table-cell attribute. expect(tableCells).toHaveLength(8) tableCells.forEach((row) => { expect(row).toHaveAttribute('data-table-cell') diff --git a/themes/theme-b2c-tailwind/src/molecules/table.css b/themes/theme-b2c-tailwind/src/molecules/table.css index 35072609d1..8f9d0756a0 100644 --- a/themes/theme-b2c-tailwind/src/molecules/table.css +++ b/themes/theme-b2c-tailwind/src/molecules/table.css @@ -2,30 +2,30 @@ @apply table-auto divide-y divide-gray-200; } -[data-store-table-head]{ +[data-table-head]{ @apply bg-gray-50; } -[data-store-table-body] { +[data-table-body] { @apply bg-white divide-y divide-gray-200; } -[data-store-table-cell="header"]{ +[data-table-cell="header"]{ @apply px-6 py-3 text-left text-xs text-gray-900 font-bold uppercase tracking-wider; } -[data-store-table-cell="data"]{ +[data-table-cell="data"]{ @apply px-6 py-4; } -[data-store-table-cell] > [data-store-price][data-selling] { +[data-table-cell] > [data-store-price][data-selling] { @apply text-sm font-medium text-gray-900; } -[data-store-table-footer]{ +[data-table-footer]{ @apply bg-gray-50; } -[data-store-table-footer] [data-store-table-cell="data"]{ +[data-table-footer] [data-table-cell="data"]{ @apply px-6 py-3 text-left text-xs text-gray-900 font-bold uppercase tracking-wider; } From 29de70e7ea11ab2b0514e5886e9d73b40f7ca054 Mon Sep 17 00:00:00 2001 From: Mariana Caetano Pereira <67270558+Mariana-Caetano@users.noreply.github.com> Date: Thu, 12 May 2022 10:12:41 -0300 Subject: [PATCH 7/7] Update Accordion.mdx --- docs/docs/reference/ui/molecules/Accordion.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/docs/reference/ui/molecules/Accordion.mdx b/docs/docs/reference/ui/molecules/Accordion.mdx index dec7d3d521..6f806fd026 100644 --- a/docs/docs/reference/ui/molecules/Accordion.mdx +++ b/docs/docs/reference/ui/molecules/Accordion.mdx @@ -5,8 +5,11 @@ import PropsSection from "@site/src/components/PropsSection/PropsSection"; Accordions display an expandable/collapsible list of items. The final Accordion component is a compound of the following: - `Accordion`: wraps a series of `AccordionItem`s in a single component. + - `AccordionItem`: wraps an `AccordionButton` and an `AccordionPanel`. + - `AccordionButton`: contains the top-level items of the Accordion list. It is a clickable button that shows or hides the child items of a given `AccordionItem`. + - `AccordionPanel`: contains the child items of a given `AccordionItem`. ## Import