@faststore/ui 1.12.5 → 1.12.11

package/src/molecules/Dropdown/DropdownItem.tsx

@@ -49,7 +49,7 @@ const DropdownItem = forwardRef<HTMLButtonElement, DropdownItemProps>(
 
     return (
       <button
-        data-store-dropdown-item
+        data-fs-dropdown-item
         data-testid={testId}
         ref={addToRefs}
         onFocus={onFocusItem}

package/src/molecules/Dropdown/DropdownMenu.tsx

@@ -115,14 +115,14 @@ const DropdownMenu = ({
     ? createPortal(
         <div
           role="presentation"
-          data-store-dropdown-overlay
+          data-fs-dropdown-overlay
           onKeyDown={handleBackdropKeyDown}
           data-testid={`${testId}-overlay`}
         >
           <div
             role="menu"
             aria-orientation="vertical"
-            data-store-dropdown-menu
+            data-fs-dropdown-menu
             data-testid={testId}
             style={{ ...dropdownPosition, ...style }}
             id={id}

package/src/molecules/Dropdown/stories/Dropdown.mdx

@@ -53,11 +53,11 @@ The `Dropdown` uses the [Compound Component](https://kentcdodds.com/blog/compoun
 ## CSS Selectors
 
 ```css
-[data-store-dropdown-button] {}
+[data-fs-dropdown-button] {}
 
-[data-store-dropdown-item] {}
+[data-fs-dropdown-item] {}
 
-[data-store-dropdown-overlay] {}
+[data-fs-dropdown-overlay] {}
 
-[data-store-dropdown-menu] {}
+[data-fs-dropdown-menu] {}
 ```

package/src/molecules/Form/Form.test.tsx

@@ -37,10 +37,10 @@ const TestForm = ({ onSubmit }: Pick<FormProps, 'onSubmit'>) => (
 )
 
 describe('Form', () => {
-  it('should have `data-store-form` attribute', () => {
+  it('should have `data-fs-form` attribute', () => {
     const { getByTestId } = render(<TestForm />)
 
-    expect(getByTestId('store-form')).toHaveAttribute('data-store-form')
+    expect(getByTestId('store-form')).toHaveAttribute('data-fs-form')
   })
 
   describe('Accessibility', () => {

package/src/molecules/Form/Form.tsx

@@ -14,7 +14,7 @@ const Form = forwardRef<HTMLFormElement, FormProps>(function Form(
   ref
 ) {
   return (
-    <form ref={ref} data-store-form data-testid={testId} {...otherProps}>
+    <form ref={ref} data-fs-form data-testid={testId} {...otherProps}>
       {children}
     </form>
   )

package/src/molecules/Form/stories/Form.mdx

@@ -19,5 +19,5 @@ Besides those attributes, the following prop is also supported:
 ## CSS Selectors
 
 ```css
-[data-store-form] {}
+[data-fs-form] {}
 ```

package/src/molecules/IconButton/IconButton.test.tsx

@@ -6,7 +6,7 @@ import IconButton from './IconButton'
 describe('IconButton', () => {
   const testId = 'store-icon-button'
 
-  it('data-store-icon-button is present', () => {
+  it('data-fs-icon-button is present', () => {
     const { getByTestId } = render(
       <IconButton testId={testId} aria-label="foo" icon={<div>foo</div>} />
     )
@@ -14,7 +14,7 @@ describe('IconButton', () => {
     const iconButton = getByTestId(testId)
 
     expect(iconButton).toBeInTheDocument()
-    expect(iconButton).toHaveAttribute('data-store-icon-button')
+    expect(iconButton).toHaveAttribute('data-fs-icon-button')
   })
 
   it('icon is present', () => {

package/src/molecules/IconButton/IconButton.tsx

@@ -26,7 +26,7 @@ const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
   ref
 ) {
   return (
-    <Button ref={ref} data-store-icon-button testId={testId} {...buttonProps}>
+    <Button ref={ref} data-fs-icon-button testId={testId} {...buttonProps}>
       <Icon component={icon} />
     </Button>
   )

package/src/molecules/IconButton/stories/IconButton.mdx

@@ -21,7 +21,7 @@ import IconButton from '../IconButton'
 
 ## CSS Selectors
 ```css
-[data-store-icon-button] {}
+[data-fs-icon-button] {}
 ```
 
 This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors.

package/src/molecules/LoadingButton/LoadingButton.test.tsx

@@ -4,11 +4,11 @@ import React from 'react'
 import LoadingButton from './LoadingButton'
 
 describe('Loading Button', () => {
-  it('`data-store-loading-button` is present', () => {
+  it('`data-fs-loading-button` is present', () => {
     const { getByTestId } = render(<LoadingButton loading />)
 
     expect(getByTestId('store-loading-button')).toHaveAttribute(
-      'data-store-loading-button'
+      'data-fs-loading-button'
     )
   })
 })

package/src/molecules/LoadingButton/LoadingButton.tsx

@@ -23,7 +23,7 @@ const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
     return (
       <Button
         ref={ref}
-        data-store-loading-button
+        data-fs-loading-button
         testId={testId}
         {...otherProps}
       >

package/src/molecules/LoadingButton/stories/LoadingButton.mdx

@@ -14,7 +14,7 @@ import LoadingButton from '../LoadingButton'
 ## CSS Selectors
 
 ```css
-[data-store-loading-button] {}
+[data-fs-loading-button] {}
 ```
 
 This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors.

package/src/molecules/Modal/Modal.test.tsx

@@ -41,7 +41,7 @@ const TestModal = ({
 }
 
 describe('Modal', () => {
-  it('The attribute data-store-modal-content should be present', () => {
+  it('The attribute data-fs-modal-content should be present', () => {
     const { getByTestId } = render(
       <Modal aria-label="test modal" testId="store-modal" isOpen>
         Foo
@@ -49,7 +49,7 @@ describe('Modal', () => {
     )
 
     expect(getByTestId('store-modal')).toHaveAttribute(
-      'data-store-modal-content'
+      'data-fs-modal-content'
     )
   })
 

package/src/molecules/Modal/ModalContent.tsx

@@ -36,7 +36,7 @@ const ModalContentPure = ({
         aria-hidden="true"
       />
       <div
-        data-store-modal-content
+        data-fs-modal-content
         data-testid={testId}
         ref={trapFocusRef}
         aria-modal="true"

package/src/molecules/Modal/stories/Modal.mdx

@@ -14,7 +14,7 @@ import Modal from '../Modal'
 ## CSS Selectors
 
 ```css
-[data-store-modal-content] {}
+[data-fs-modal-content] {}
 
 [data-modal-overlay] {}
 ```

package/src/molecules/PaymentMethods/PaymentMethods.test.tsx

@@ -17,8 +17,8 @@ describe('Payment methods', () => {
     paymentMethodsData = getByTestId('store-payment-methods')
   })
 
-  it('should have `data-store-payment-methods` attribute', () => {
-    expect(paymentMethodsData).toHaveAttribute('data-store-payment-methods')
+  it('should have `data-fs-payment-methods` attribute', () => {
+    expect(paymentMethodsData).toHaveAttribute('data-fs-payment-methods')
   })
 
   it('Should render PaymentMethods Children', () => {

package/src/molecules/PaymentMethods/PaymentMethods.tsx

@@ -38,7 +38,7 @@ const PaymentMethods = forwardRef<HTMLDivElement, PaymentMethodsProps>(
     return (
       <div
         ref={ref}
-        data-store-payment-methods
+        data-fs-payment-methods
         data-testid={testId}
         {...otherProps}
       >

package/src/molecules/PaymentMethods/stories/PaymentMethods.mdx

@@ -14,6 +14,6 @@ import PaymentMethods from '../PaymentMethods'
 ## CSS Selectors
 
 ```css
-[data-store-payment-methods] {}
+[data-fs-payment-methods] {}
 [data-payment-methods-flags] {}
 ```

package/src/molecules/PriceRange/PriceRange.test.tsx

@@ -25,11 +25,11 @@ const props = {
 }
 
 describe('PriceRange', () => {
-  it('`data-store-price-range` is present', () => {
+  it('`data-fs-price-range` is present', () => {
     const { getByTestId } = render(<PriceRange {...props} />)
 
     expect(getByTestId('store-price-range')).toHaveAttribute(
-      'data-store-price-range'
+      'data-fs-price-range'
     )
   })
 

package/src/molecules/PriceRange/PriceRange.tsx

@@ -57,7 +57,7 @@ const PriceRange = forwardRef<PriceRangeRefType | undefined, PriceRangeProps>(
     }))
 
     return (
-      <div data-store-price-range data-testid={testId} className={className}>
+      <div data-fs-price-range data-testid={testId} className={className}>
         <Slider
           ref={sliderRef}
           min={min}

package/src/molecules/PriceRange/stories/PriceRange.mdx

@@ -15,7 +15,7 @@ import PriceRange from '../PriceRange'
 # CSS Selectors
 
 ```css
-[data-store-price-range] {
+[data-fs-price-range] {
 }
 [data-price-range-values] {
 }

package/src/molecules/ProductCard/ProductCard.test.tsx

@@ -42,8 +42,8 @@ describe('ProductCard', () => {
   })
 
   describe('Data attributes', () => {
-    it('`ProductCard` component should have `data-store-product-card` attribute', () => {
-      expect(productCard).toHaveAttribute('data-store-product-card')
+    it('`ProductCard` component should have `data-fs-product-card` attribute', () => {
+      expect(productCard).toHaveAttribute('data-fs-product-card')
     })
 
     it('`ProductCardContent` component should have `data-product-card-content` attribute', () => {

package/src/molecules/ProductCard/ProductCard.tsx

@@ -16,7 +16,7 @@ const ProductCard = forwardRef<HTMLDivElement, ProductCardProps>(function Card(
   return (
     <article
       ref={ref}
-      data-store-product-card
+      data-fs-product-card
       data-testid={testId}
       {...otherProps}
     >

package/src/molecules/ProductCard/stories/ProductCard.mdx

@@ -41,7 +41,7 @@ All Product Card related components support all attributes also supported by the
 ## CSS Selectors
 
 ```css
-[data-store-product-card] {
+[data-fs-product-card] {
 }
 
 [data-product-card-image] {

package/src/molecules/QuantitySelector/QuantitySelector.tsx

@@ -50,7 +50,7 @@ const QuantitySelector = forwardRef<HTMLDivElement, QuantitySelectorProps>(
   ) {
     return (
       <div
-        data-store-quantity-selector
+        data-fs-quantity-selector
         data-testid={testId}
         ref={ref}
         {...otherProps}

package/src/molecules/QuantitySelector/stories/QuantitySelector.mdx

@@ -17,7 +17,7 @@ import QuantitySelector from '../QuantitySelector'
 # CSS Selectors
 
 ```css
-[data-store-quantity-selector] {
+[data-fs-quantity-selector] {
 }
 [data-quantity-selector-input] {
 }

package/src/molecules/RadioGroup/RadioOption.tsx

@@ -29,9 +29,9 @@ const RadioOption = forwardRef<HTMLInputElement, RadioOptionProps>(
     const { name, selectedValue, onChange } = useRadioGroup()
 
     return (
-      <label aria-label={label} data-store-radio-option>
+      <label aria-label={label} data-fs-radio-option>
         <Radio
-          data-store-radio-option-item
+          data-fs-radio-option-item
           ref={ref}
           name={name}
           checked={value === selectedValue}

package/src/molecules/RadioGroup/stories/RadioGroup.mdx

@@ -34,6 +34,6 @@ import RadioOption from '../RadioOption.tsx'
 ## CSS Selectors
 
 ```css
-[data-store-radio-option] {}
-[data-store-radio-option-item] {}
+[data-fs-radio-option] {}
+[data-fs-radio-option-item] {}
 ```

package/src/molecules/SearchInput/SearchInput.test.tsx

@@ -10,11 +10,11 @@ const Wrapper = (props: Partial<SearchInputProps>) => (
 )
 
 describe('SearchInput', () => {
-  it('`data-store-search-input` is present', () => {
+  it('`data-fs-search-input` is present', () => {
     const { getByTestId } = render(<Wrapper />)
 
     expect(getByTestId('search-input')).toHaveAttribute(
-      'data-store-search-input'
+      'data-fs-search-input'
     )
   })
 

package/src/molecules/SearchInput/SearchInput.tsx

@@ -85,7 +85,7 @@ const SearchInput = forwardRef<SearchInputRef | null, SearchInputProps>(
     return (
       <Form
         ref={formRef}
-        data-store-search-input
+        data-fs-search-input
         data-testid={testId}
         onSubmit={handleSubmit}
         role="search"

package/src/molecules/SearchInput/stories/SearchInput.mdx

@@ -22,7 +22,7 @@ import CustomIcon from './assets/CustomIcon'
 
 ## CSS Selectors
 ```css
-[data-store-search-input] {}
+[data-fs-search-input] {}
 ```
 
 This component inherits [Input](?path=/docs/atoms-input--input#css-selectors), [Button](?path=/docs/atoms-button--button#css-selectors), [Icon](?path=/docs/atoms-icon--icon#css-selectors) css selectors.

package/src/molecules/Table/Table.test.tsx

@@ -41,7 +41,7 @@ describe('Table', () => {
 
       const table = getByTestId('store-table')
 
-      expect(table).toHaveAttribute('data-store-table')
+      expect(table).toHaveAttribute('data-fs-table')
 
       const tableHead = getByTestId('store-table-head')
 

package/src/molecules/Table/Table.tsx

@@ -14,7 +14,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
   ref
 ) {
   return (
-    <table ref={ref} data-store-table data-testid={testId} {...otherProps}>
+    <table ref={ref} data-fs-table data-testid={testId} {...otherProps}>
       {children}
     </table>
   )

package/src/molecules/Table/stories/Table.mdx

@@ -57,7 +57,7 @@ Besides those attributes, the following props are also supported:
 ## CSS Selectors
 
 ```css
-[data-store-table] {}
+[data-fs-table] {}
 
 [data-table-head] {}
 

package/src/organisms/Hero/Hero.test.tsx

@@ -32,8 +32,8 @@ describe('Hero', () => {
     const heroImage = getByTestId('store-hero-image')
     const heroHeading = getByTestId('store-hero-heading')
 
-    it('`Hero` component should have `data-store-hero` attribute', () => {
-      expect(hero).toHaveAttribute('data-store-hero')
+    it('`Hero` component should have `data-fs-hero` attribute', () => {
+      expect(hero).toHaveAttribute('data-fs-hero')
     })
 
     it('`Hero` component should have custom data attribute `data-custom-attribute`', () => {

package/src/organisms/Hero/Hero.tsx

@@ -14,7 +14,7 @@ const Hero = forwardRef<HTMLDivElement, HeroProps>(function Hero(
   ref
 ) {
   return (
-    <article ref={ref} data-store-hero data-testid={testId} {...otherProps}>
+    <article ref={ref} data-fs-hero data-testid={testId} {...otherProps}>
       {children}
     </article>
   )

package/src/organisms/Hero/stories/Hero.mdx

@@ -39,7 +39,7 @@ Besides those attributes, the following props are also supported:
 ## CSS Selectors
 
 ```css
-[data-store-hero] {
+[data-fs-hero] {
 }
 [data-hero-image] {
 }

package/src/organisms/OutOfStock/OutOfStock.test.tsx

@@ -32,7 +32,7 @@ describe('OutOfStock', () => {
     const outOfStockMessage = screen.getByTestId('store-out-of-stock-message')
     const outOfStockForm = screen.getByTestId('store-out-of-stock-form')
 
-    expect(outOfStock).toHaveAttribute('data-store-out-of-stock')
+    expect(outOfStock).toHaveAttribute('data-fs-out-of-stock')
     expect(outOfStockForm).toHaveAttribute('data-out-of-stock-form')
     expect(outOfStockTitle).toHaveAttribute('data-out-of-stock-title')
     expect(outOfStockMessage).toHaveAttribute('data-out-of-stock-message')

package/src/organisms/OutOfStock/OutOfStock.tsx

@@ -28,7 +28,7 @@ const OutOfStock = ({
   ...otherProps
 }: OutOfStockProps) => {
   return (
-    <section data-store-out-of-stock data-testid={testId}>
+    <section data-fs-out-of-stock data-testid={testId}>
       <Form data-out-of-stock-form testId={`${testId}-form`} {...otherProps}>
         {children}
       </Form>

package/src/organisms/OutOfStock/stories/OutOfStock.mdx

@@ -23,7 +23,7 @@ The `OutOfStock` uses the [Compound Component](https://kentcdodds.com/blog/compo
 ## CSS Selectors
 
 ```css
-[data-store-out-of-stock] {
+[data-fs-out-of-stock] {
 }
 
 [data-out-of-stock-form] {