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/docs/docs/reference/ui/molecules/Accordion.mdx b/docs/docs/reference/ui/molecules/Accordion.mdx index 0877015e83..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 @@ -192,10 +195,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/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/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/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/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; diff --git a/themes/theme-b2c-tailwind/src/molecules/accordion.css b/themes/theme-b2c-tailwind/src/molecules/accordion.css index 3c4c8a356a..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-store-accordion-button] { - @apply bg-transparent text-gray-800; - @apply hover:text-pink-600; +[data-accordion-button] { + color: #171a1c; + background-color: transparent; } -[data-store-icon] { - @apply align-top ml-2; + +[data-accordion-button]:hover { + color: #db2777; } -[data-store-accordion-button][aria-expanded='true'] { - @apply text-pink-600; + +[data-accordion-button] [data-store-icon] { + margin-left: 0.5rem; + vertical-align: middle; } -[data-store-accordion-button][aria-expanded='true'] [data-store-icon] { - @apply transform rotate-180; + +[data-accordion-button][aria-expanded='true'] { + color: #db2777; } -[data-store-accordion-panel] > ul { - @apply list-none my-0 pl-10; + +[data-accordion-button][aria-expanded='true'] [data-store-icon] { + transform: rotate(180deg); + transition: transform .8s ease-in-out; } -[data-store-accordion-panel] a { - @apply text-gray-500 no-underline hover:text-blue-700; + +[data-accordion-panel] > ul { + padding-left: 2.5rem; + margin-top: 0px; + margin-bottom: 0px; + list-style-type: none; +} + +[data-accordion-panel] a { + text-decoration: none; + color: #74808b; +} + +[data-accordion-panel] a:hover { + color: #00419e; } 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; } 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; } 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; }