Fix: Components styles and update data attributes

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)'`

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.

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 `<div
 Besides those attributes, the following props are also supported:
 
 ### Banner
-  
+
 <PropsSection name="Banner" />
 
 
 ### BannerImage
-  
+
 <PropsSection name="BannerImage" />
 
 
 ### BannerContent
-  
+
 <PropsSection name="Banner" />
 
 ## 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`

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)'`

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'`

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')

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;

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

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

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

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