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;
}