@faststore/ui 1.12.4 → 1.12.11

package/src/atoms/List/List.test.tsx

@@ -7,7 +7,7 @@ import List from './List'
 const optionsArray = ['Great', 'Ok', 'Bad']
 
 describe('List', () => {
-  it('should have `data-store-list` attribute', () => {
+  it('should have `data-fs-list` attribute', () => {
     const { getByTestId } = render(
       <List>
         {optionsArray.map((value) => {
@@ -16,7 +16,7 @@ describe('List', () => {
       </List>
     )
 
-    expect(getByTestId('store-list')).toHaveAttribute('data-store-list')
+    expect(getByTestId('store-list')).toHaveAttribute('data-fs-list')
   })
 
   it('should be empty if no children are provided', () => {
@@ -35,7 +35,7 @@ describe('List', () => {
     )
 
     expect(getByTestId('store-list')).toHaveAttribute(
-      'data-store-list',
+      'data-fs-list',
       'ordered'
     )
 
@@ -48,7 +48,7 @@ describe('List', () => {
     )
 
     expect(getByTestId('store-list')).toHaveAttribute(
-      'data-store-list',
+      'data-fs-list',
       'unordered'
     )
 
@@ -61,7 +61,7 @@ describe('List', () => {
     )
 
     expect(getByTestId('store-list')).toHaveAttribute(
-      'data-store-list',
+      'data-fs-list',
       'description'
     )
   })

package/src/atoms/List/List.tsx

@@ -27,7 +27,7 @@ const List = forwardRef<HTMLUListElement, ListProps>(function List(
 ) {
   const dataAttributes = {
     'data-testid': testId,
-    'data-store-list': variant,
+    'data-fs-list': variant,
   }
 
   const Component = MaybeComponent ?? variantToElement[variant] ?? 'ul'

package/src/atoms/List/stories/List.mdx

@@ -28,6 +28,6 @@ import List from '../List'
 ## CSS Selectors
 
 ```css
-[data-store-list] {}
-[data-store-list='(description|ordered|unordered)'] {}
+[data-fs-list] {}
+[data-fs-list='(description|ordered|unordered)'] {}
 ```

package/src/atoms/Overlay/Overlay.test.tsx

@@ -7,10 +7,10 @@ import Overlay from './Overlay'
 describe('Overlay', () => {
   const testId = 'store-overlay'
 
-  it('data-store-overlay is present', () => {
+  it('data-fs-overlay is present', () => {
     const { getByTestId } = render(<Overlay testId={testId} />)
 
-    expect(getByTestId(testId)).toHaveAttribute('data-store-overlay')
+    expect(getByTestId(testId)).toHaveAttribute('data-fs-overlay')
   })
 
   describe('Accessibility', () => {

package/src/atoms/Overlay/Overlay.tsx

@@ -15,7 +15,7 @@ const Overlay = forwardRef<HTMLDivElement, Props>(function Overlay(
   return (
     <div
       role="presentation"
-      data-store-overlay
+      data-fs-overlay
       data-testid={testId}
       ref={ref}
       {...otherProps}

package/src/atoms/Overlay/stories/Overlay.mdx

@@ -14,5 +14,5 @@ import Overlay from '../Overlay'
 ## CSS Selectors
 
 ```css
-[data-store-overlay] {}
+[data-fs-overlay] {}
 ```

package/src/atoms/Popover/Popover.test.tsx

@@ -21,10 +21,10 @@ const PopoverTemplate = (props: any) => {
 }
 
 describe('Popover', () => {
-  it('`data-store-popover` is present', () => {
+  it('`data-fs-popover` is present', () => {
     const { getByTestId } = render(<PopoverTemplate />)
 
-    expect(getByTestId('store-popover')).toHaveAttribute('data-store-popover')
+    expect(getByTestId('store-popover')).toHaveAttribute('data-fs-popover')
   })
 
   describe('Accessibility', () => {

package/src/atoms/Popover/Popover.tsx

@@ -23,7 +23,7 @@ const Popover = ({
 }: PopoverProps) => {
   return (
     <ReachPopover
-      data-store-popover
+      data-fs-popover
       data-testid={testId}
       position={positionDefault}
       targetRef={targetRef}

package/src/atoms/Popover/stories/Popover.mdx

@@ -14,5 +14,5 @@ import Popover from '../Popover'
 ## CSS Selectors
 
 ```css
-[data-store-popover] {}
+[data-fs-popover] {}
 ```

package/src/atoms/Price/Price.test.tsx

@@ -5,10 +5,10 @@ import React from 'react'
 import Price from './Price'
 
 describe('Price', () => {
-  it('`data-store-price` is present', () => {
+  it('`data-fs-price` is present', () => {
     const { getByTestId } = render(<Price value={32.5} />)
 
-    expect(getByTestId('store-price')).toHaveAttribute('data-store-price')
+    expect(getByTestId('store-price')).toHaveAttribute('data-fs-price')
   })
 
   it('`data-variant` is equal to `selling` if no variant is defined', () => {

package/src/atoms/Price/Price.tsx

@@ -51,7 +51,7 @@ export const Price = forwardRef<Omit<HTMLSpanElement, 'children'>, PriceProps>(
     return (
       <Component
         ref={ref}
-        data-store-price
+        data-fs-price
         data-testid={testId}
         data-variant={variant}
         {...otherProps}

package/src/atoms/Price/stories/Price.mdx

@@ -34,7 +34,7 @@ import Price from '../Price'
 ## CSS Selectors
 
 ```css
-[data-store-price] {}
+[data-fs-price] {}
 
 [data-variant='('selling'|'listing'|'spot'|'savings'|'installment')'] {}
 ```

package/src/atoms/Price/stories/Price.stories.tsx

@@ -53,7 +53,7 @@ const INTLFormattedToPartsTemplate: Story<PriceProps> = ({
         .formatToParts(price)
         .map((part) => {
           const props = {
-            [`data-store-price-${part.type}`]: true,
+            [`data-fs-price-${part.type}`]: true,
           } as Record<string, unknown>
 
           if (part.type === 'integer') {

package/src/atoms/Radio/Radio.test.tsx

@@ -5,10 +5,10 @@ import { axe } from 'jest-axe'
 import Radio from './Radio'
 
 describe('Radio', () => {
-  it('data-store-radio is present', () => {
+  it('data-fs-radio is present', () => {
     const { getByTestId } = render(<Radio testId="store-radio" />)
 
-    expect(getByTestId('store-radio')).toHaveAttribute('data-store-radio')
+    expect(getByTestId('store-radio')).toHaveAttribute('data-fs-radio')
   })
 
   it('type radio is present', () => {

package/src/atoms/Radio/Radio.tsx

@@ -13,7 +13,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
   return (
     <input
       ref={ref}
-      data-store-radio
+      data-fs-radio
       data-testid={testId}
       type="radio"
       {...otherProps}

package/src/atoms/Radio/stories/Radio.mdx

@@ -14,5 +14,5 @@ import Radio from '../Radio'
 ## CSS Selectors
 
 ```css
-[data-store-radio] {}
+[data-fs-radio] {}
 ```

package/src/atoms/Select/Select.test.tsx

@@ -19,7 +19,7 @@ const mapPairToOption = (value: string, label: string) => {
 }
 
 describe('Select', () => {
-  it('`data-store-select` is present', () => {
+  it('`data-fs-select` is present', () => {
     const { getByTestId } = render(
       <Select testId="store-select">
         {optionsArray.map(([value, label]) => {
@@ -28,7 +28,7 @@ describe('Select', () => {
       </Select>
     )
 
-    expect(getByTestId('store-select')).toHaveAttribute('data-store-select')
+    expect(getByTestId('store-select')).toHaveAttribute('data-fs-select')
   })
 
   it('select is empty when no options are given', () => {

package/src/atoms/Select/Select.tsx

@@ -13,7 +13,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
   ref
 ) {
   return (
-    <select ref={ref} data-store-select data-testid={testId} {...otherProps}>
+    <select ref={ref} data-fs-select data-testid={testId} {...otherProps}>
       {children}
     </select>
   )

package/src/atoms/Select/stories/Select.mdx

@@ -36,5 +36,5 @@ import Select from '../Select'
 ## CSS Selectors
 
 ```css
-[data-store-select] {}
+[data-fs-select] {}
 ```

package/src/atoms/Skeleton/Skeleton.test.tsx

@@ -4,10 +4,10 @@ import React from 'react'
 import Skeleton from './Skeleton'
 
 describe('Skeleton', () => {
-  it('`data-store-skeleton` is present', () => {
+  it('`data-fs-skeleton` is present', () => {
     const { getByTestId } = render(<Skeleton testId="store-skeleton" />)
     const skeleton = getByTestId('store-skeleton')
 
-    expect(skeleton).toHaveAttribute('data-store-skeleton')
+    expect(skeleton).toHaveAttribute('data-fs-skeleton')
   })
 })

package/src/atoms/Skeleton/Skeleton.tsx

@@ -13,7 +13,7 @@ const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(function Skeleton(
   ref
 ) {
   return (
-    <div ref={ref} data-store-skeleton data-testid={testId} {...otherProps} />
+    <div ref={ref} data-fs-skeleton data-testid={testId} {...otherProps} />
   )
 })
 

package/src/atoms/Skeleton/stories/Skeleton.mdx

@@ -14,5 +14,5 @@ import Skeleton from '../Skeleton'
 ## CSS Selectors
 
 ```css
-[data-store-skeleton] {}
+[data-fs-skeleton] {}
 ```

package/src/atoms/Slider/Slider.test.tsx

@@ -16,10 +16,10 @@ const props = {
 }
 
 describe('Slider', () => {
-  it('`data-store-slider` is present', () => {
+  it('`data-fs-slider` is present', () => {
     const { getByTestId } = render(<Slider {...props} />)
 
-    expect(getByTestId('store-slider')).toHaveAttribute('data-store-slider')
+    expect(getByTestId('store-slider')).toHaveAttribute('data-fs-slider')
   })
 
   describe('Accessibility', () => {

package/src/atoms/Slider/Slider.tsx

@@ -120,7 +120,7 @@ const Slider = forwardRef<SliderRefType | undefined, SliderProps>(
     }))
 
     return (
-      <div data-store-slider data-testid={testId} className={className}>
+      <div data-fs-slider data-testid={testId} className={className}>
         <div
           data-slider-range
           style={{

package/src/atoms/Slider/stories/Slider.mdx

@@ -14,7 +14,7 @@ import Slider from '../Slider'
 # CSS Selectors
 
 ```css
-[data-store-slider] {
+[data-fs-slider] {
 }
 [data-slider-range] {
 }

package/src/atoms/Spinner/Spinner.test.tsx

@@ -4,9 +4,9 @@ import React from 'react'
 import Spinner from './Spinner'
 
 describe('Spinner', () => {
-  it('`data-store-spinner` is present', () => {
+  it('`data-fs-spinner` is present', () => {
     const { getByTestId } = render(<Spinner />)
 
-    expect(getByTestId('store-spinner')).toHaveAttribute('data-store-spinner')
+    expect(getByTestId('store-spinner')).toHaveAttribute('data-fs-spinner')
   })
 })

package/src/atoms/Spinner/Spinner.tsx

@@ -11,7 +11,7 @@ export type SpinnerProps = {
 const Spinner = forwardRef<HTMLDivElement, PropsWithChildren<SpinnerProps>>(
   function Spinner({ children, testId = 'store-spinner', ...otherProps }, ref) {
     return (
-      <span ref={ref} data-store-spinner data-testid={testId} {...otherProps} />
+      <span ref={ref} data-fs-spinner data-testid={testId} {...otherProps} />
     )
   }
 )

package/src/atoms/Spinner/stories/Spinner.mdx

@@ -14,5 +14,5 @@ import Spinner from '../Spinner'
 ## CSS Selectors
 
 ```css
-[data-store-spinner] {}
+[data-fs-spinner] {}
 ```

package/src/atoms/TextArea/TextArea.test.tsx

@@ -7,10 +7,10 @@ import TextArea from './TextArea'
 const testId = 'store-textarea'
 
 describe('TextArea', () => {
-  it('data-store-textarea is present', () => {
+  it('data-fs-textarea is present', () => {
     const { getByTestId } = render(<TextArea testId={testId} />)
 
-    expect(getByTestId(testId)).toHaveAttribute('data-store-textarea')
+    expect(getByTestId(testId)).toHaveAttribute('data-fs-textarea')
   })
 
   it('state is error', () => {

package/src/atoms/TextArea/TextArea.tsx

@@ -26,7 +26,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     return (
       <textarea
         ref={ref}
-        data-store-textarea
+        data-fs-textarea
         data-testid={testId}
         {...variants}
         {...otherProps}

package/src/atoms/TextArea/stories/TextArea.mdx

@@ -14,7 +14,7 @@ import TextArea from '../TextArea'
 ## CSS Selectors
 
 ```css
-[data-store-textarea] {}
+[data-fs-textarea] {}
 
 [data-success] {}
 

package/src/molecules/Accordion/Accordion.test.tsx

@@ -127,8 +127,8 @@ describe('Accordion', () => {
   })
 
   describe('Data attributes', () => {
-    it('`Accordion` component should have `data-store-accordion` attribute', () => {
-      expect(accordion).toHaveAttribute('data-store-accordion')
+    it('`Accordion` component should have `data-fs-accordion` attribute', () => {
+      expect(accordion).toHaveAttribute('data-fs-accordion')
     })
 
     it('`AccordionItem` component should have `data-accordion-item` attribute', () => {

package/src/molecules/Accordion/Accordion.tsx

@@ -50,7 +50,7 @@ const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(
     <AccordionContext.Provider value={context}>
       <div
         ref={ref}
-        data-store-accordion
+        data-fs-accordion
         data-testid={testId}
         role="region"
         {...otherProps}

package/src/molecules/Accordion/stories/Accordion.mdx

@@ -53,7 +53,7 @@ Besides those attributes, the following props are also supported:
 ## CSS Selectors
 
 ```css
-[data-store-accordion] {}
+[data-fs-accordion] {}
 [data-accordion-item] {}
 [data-accordion-button] {}
 [data-accordion-panel] {}

package/src/molecules/AggregateRating/AggregateRating.test.tsx

@@ -17,7 +17,7 @@ const fillCheck = (value: number) => {
 }
 
 describe('AggregateRating', () => {
-  it('`data-store-aggregate-rating` is present', () => {
+  it('`data-fs-aggregate-rating` is present', () => {
     const { getByTestId } = render(
       <AggregateRating value={2}>
         <span />
@@ -29,7 +29,7 @@ describe('AggregateRating', () => {
     )
 
     expect(getByTestId('store-aggregate-rating')).toHaveAttribute(
-      'data-store-aggregate-rating'
+      'data-fs-aggregate-rating'
     )
   })
 
@@ -64,7 +64,7 @@ describe('AggregateRating', () => {
         currentItemNumber += 1
       ) {
         expect(ratingItems[currentItemNumber]).toHaveAttribute(
-          'data-store-aggregate-rating-item',
+          'data-fs-aggregate-rating-item',
           fillCheck(value - currentItemNumber)
         )
       }

package/src/molecules/AggregateRating/AggregateRating.tsx

@@ -16,7 +16,7 @@ export interface AggregateRatingProps extends ListProps<HTMLUListElement> {
 }
 
 export interface RatingItemProps {
-  'data-store-aggregate-rating-item'?: 'full' | 'partial' | 'empty'
+  'data-fs-aggregate-rating-item'?: 'full' | 'partial' | 'empty'
   'data-testid'?: string
 }
 
@@ -56,7 +56,7 @@ const AggregateRating = forwardRef<HTMLUListElement, AggregateRatingProps>(
 
     return (
       <List
-        data-store-aggregate-rating
+        data-fs-aggregate-rating
         variant={variant}
         ref={ref}
         data-testid={testId}
@@ -69,7 +69,7 @@ const AggregateRating = forwardRef<HTMLUListElement, AggregateRatingProps>(
           return (
             <RatingItem
               key={`aggregate-rating-${index}`}
-              data-store-aggregate-rating-item={fill}
+              data-fs-aggregate-rating-item={fill}
               data-testid={`${testId}-item`}
             >
               {child}

package/src/molecules/AggregateRating/stories/AggregateRating.mdx

@@ -27,7 +27,7 @@ import AggregateRating from '../AggregateRating'
 ## CSS Selectors
 
 ```css
-[data-store-aggregate-rating] {}
+[data-fs-aggregate-rating] {}
 
 [data-aggregate-rating-item=(full|partial|empty)] {}
 ```

package/src/molecules/AggregateRating/stories/AggregateRating.stories.tsx

@@ -31,7 +31,7 @@ const RatingIcon: FC<RatingItemProps> = (props) => {
         d="M20.388,10.918L32,12.118l-8.735,7.749L25.914,
              31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,
              12.118l11.547-1.2L16.026,0.6L20.388,10.918z"
-        fill={fillColor[props['data-store-aggregate-rating-item']!]}
+        fill={fillColor[props['data-fs-aggregate-rating-item']!]}
         strokeWidth="2"
         stroke="#ffb100"
       />

package/src/molecules/Alert/Alert.test.tsx

@@ -6,10 +6,10 @@ import Alert from './Alert'
 
 describe('Alert', () => {
   describe('Data attributes', () => {
-    it('should have `data-store-alert` attribute', () => {
+    it('should have `data-fs-alert` attribute', () => {
       const { getByTestId } = render(<Alert>Testing</Alert>)
 
-      expect(getByTestId('store-alert')).toHaveAttribute('data-store-alert')
+      expect(getByTestId('store-alert')).toHaveAttribute('data-fs-alert')
     })
   })
 

package/src/molecules/Alert/Alert.tsx

@@ -18,7 +18,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
     <div
       ref={ref}
       role="alert"
-      data-store-alert
+      data-fs-alert
       data-testid={testId}
       {...otherProps}
     >

package/src/molecules/Alert/stories/Alert.mdx

@@ -21,6 +21,6 @@ import Alert from '../Alert'
 ## CSS Selectors
 
 ```css
-[data-store-alert] {
+[data-fs-alert] {
 }
 ```

package/src/molecules/Banner/Banner.test.tsx

@@ -36,8 +36,8 @@ describe('Banner', () => {
     const bannerContent = getByTestId('store-banner-content')
     const bannerLink = getByTestId('store-banner-link')
 
-    it('`Banner` component should have `data-store-banner` attribute', () => {
-      expect(banner).toHaveAttribute('data-store-banner')
+    it('`Banner` component should have `data-fs-banner` attribute', () => {
+      expect(banner).toHaveAttribute('data-fs-banner')
     })
 
     it('`Banner` component should have custom data attribute `data-custom-attribute`', () => {

package/src/molecules/Banner/Banner.tsx

@@ -19,7 +19,7 @@ const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
   return (
     <article
       ref={ref}
-      data-store-banner={variant}
+      data-fs-banner={variant}
       data-testid={testId}
       {...otherProps}
     >

package/src/molecules/Banner/stories/Banner.mdx

@@ -50,9 +50,9 @@ Besides those attributes, the following props are also supported:
 ## CSS Selectors
 
 ```css
-[data-store-banner] {
+[data-fs-banner] {
 }
-[data-store-banner='(vertical|horizontal)'] {
+[data-fs-banner='(vertical|horizontal)'] {
 }
 [data-banner-image] {
 }

package/src/molecules/Breadcrumb/Breadcrumb.test.tsx

@@ -5,11 +5,11 @@ import React from 'react'
 import Breadcrumb from './Breadcrumb'
 
 describe('Breadcrumb', () => {
-  it('`data-store-breadcrumb` is present', () => {
+  it('`data-fs-breadcrumb` is present', () => {
     const { getByTestId } = render(<Breadcrumb />)
 
     expect(getByTestId('store-breadcrumb')).toHaveAttribute(
-      'data-store-breadcrumb'
+      'data-fs-breadcrumb'
     )
   })
 

package/src/molecules/Breadcrumb/Breadcrumb.tsx

@@ -81,7 +81,7 @@ const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
         aria-label="Breadcrumb"
         role="navigation"
         ref={ref}
-        data-store-breadcrumb
+        data-fs-breadcrumb
         data-testid={testId}
         {...otherProps}
       >

package/src/molecules/Breadcrumb/stories/Breadcrumb.mdx

@@ -15,7 +15,7 @@ import Breadcrumb from '../Breadcrumb'
 ## CSS Selectors
 
 ```css
-[data-store-breadcrumb] {}
+[data-fs-breadcrumb] {}
 
 [data-breadcrumb-list] {}
 

package/src/molecules/Bullets/Bullets.test.tsx

@@ -5,12 +5,12 @@ import React from 'react'
 import Bullets from './Bullets'
 
 describe('Bullets', () => {
-  it('should have `data-store-bullets` attribute', () => {
+  it('should have `data-fs-bullets` attribute', () => {
     const { getByTestId } = render(
       <Bullets totalQuantity={5} activeBullet={2} onClick={() => null} />
     )
 
-    expect(getByTestId('store-bullets')).toHaveAttribute('data-store-bullets')
+    expect(getByTestId('store-bullets')).toHaveAttribute('data-fs-bullets')
   })
 
   it('should render 5 bullets with `data-bullet-item` attribute', () => {

package/src/molecules/Bullets/Bullets.tsx

@@ -59,7 +59,7 @@ const Bullets = forwardRef<HTMLDivElement, BulletsProps>(function Bullets(
   return (
     <div
       ref={ref}
-      data-store-bullets
+      data-fs-bullets
       data-testid={testId}
       role="tablist"
       {...otherProps}

package/src/molecules/Bullets/stories/Bullets.mdx

@@ -15,7 +15,7 @@ import Bullets from '../Bullets'
 ## CSS Selectors
 
 ```css
-[data-store-bullets] {}
+[data-fs-bullets] {}
 
 [data-bullet-item] {}
 

package/src/molecules/Card/Card.test.tsx

@@ -43,8 +43,8 @@ describe('Card', () => {
   })
 
   describe('Data attributes', () => {
-    it('`Card` component should have `data-store-card` attribute', () => {
-      expect(card).toHaveAttribute('data-store-card')
+    it('`Card` component should have `data-fs-card` attribute', () => {
+      expect(card).toHaveAttribute('data-fs-card')
     })
 
     it('`CardContent` component should have `data-card-content` attribute', () => {