@moda/om 16.2.0 → 17.0.0

package/src/components/Clickable/Clickable.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
-import { Clickable, ClickableProps } from './Clickable';
 import { BrowserRouter } from 'react-router-dom';
+import { Clickable, ClickableProps } from './Clickable';
 
 export default { title: 'Components/Clickable' };
 
@@ -16,14 +16,14 @@ export const Button = () => (
 
 export const Anchor = () => (
   <States<ClickableProps>>
-    <Clickable href={'#'}>Useful to extend in place of &lt;a/&gt;. Click me.</Clickable>
+    <Clickable href="#">Useful to extend in place of &lt;a/&gt;. Click me.</Clickable>
   </States>
 );
 
 export const Link = () => (
   <BrowserRouter>
     <States<ClickableProps>>
-      <Clickable to='#href'>Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
+      <Clickable to="#href">Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
     </States>
   </BrowserRouter>
 );

package/src/components/ColorSwatch/ColorSwatch.stories.tsx

@@ -20,33 +20,33 @@ const STATES = [
 
 export const Default = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch color='yellow' onClick={action('onClick')} />
+    <ColorSwatch color="yellow" onClick={action('onClick')} />
   </States>
 );
 
 export const Small = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch size='small' color='yellow' onClick={action('onClick')} />
+    <ColorSwatch size="small" color="yellow" onClick={action('onClick')} />
   </States>
 );
 
 export const White = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch size='small' color='white' onClick={action('onClick')} />
+    <ColorSwatch size="small" color="white" onClick={action('onClick')} />
   </States>
 );
 
 export const Swatches = () => (
   <States<ColorSwatchProps>>
-    <Stack space={1} direction='horizontal'>
-      <ColorSwatch onClick={action('onClick')} color='red' />
-      <ColorSwatch onClick={action('onClick')} color='white' />
-      <ColorSwatch onClick={action('onClick')} color='bronze' soldOut disabled />
-      <ColorSwatch onClick={action('onClick')} color='nude' onSale />
+    <Stack space={1} direction="horizontal">
+      <ColorSwatch onClick={action('onClick')} color="red" />
+      <ColorSwatch onClick={action('onClick')} color="white" />
+      <ColorSwatch onClick={action('onClick')} color="bronze" soldOut disabled />
+      <ColorSwatch onClick={action('onClick')} color="nude" onSale />
       <ColorSwatch
         onClick={action('onClick')}
-        backgroundUrl='https://www.modaoperandi.com/assets/images/products/730581/340267/sw/prada-animal-leopard-print-shell-shoulder-bag.jpg?_v=1581323237'
-        color='nude'
+        backgroundUrl="https://www.modaoperandi.com/assets/images/products/730581/340267/sw/prada-animal-leopard-print-shell-shoulder-bag.jpg?_v=1581323237"
+        color="nude"
         onSale
         onMouseEnter={action('onMouseEnter')}
         onMouseLeave={action('onMouseLeave')}
@@ -56,7 +56,7 @@ export const Swatches = () => (
 );
 
 export const Constrained = () => (
-  <Stack direction='horizontal' space={3}>
+  <Stack direction="horizontal" space={3}>
     {Object.keys(SKU_COLORS).map(color => (
       <ColorSwatch key={color} onClick={action('onClick')} color={color} />
     ))}

package/src/components/ColorSwatch/ColorSwatch.test.tsx

@@ -5,7 +5,7 @@ import { ColorSwatch } from './ColorSwatch';
 
 describe('ColorSwatch', () => {
   it('renders correctly', () => {
-    render(<ColorSwatch color='nude' />);
+    render(<ColorSwatch color="nude" />);
     expect(screen.getByRole('button')).toBeVisible();
   });
 });

package/src/components/ColorSwatch/ColorSwatch.tsx

@@ -83,7 +83,7 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
       disabled={disabled}
       {...rest}
     >
-      <div className='ColorSwatch__chip' style={styles} />
+      <div className="ColorSwatch__chip" style={styles} />
     </Clickable>
   );
 };

package/src/components/Constrain/Constrain.stories.tsx

@@ -26,7 +26,7 @@ const Constrained = () => {
   return (
     <Constrain>
       <div ref={ref} style={{ backgroundColor: 'black', color: 'white', padding: '1rem' }}>
-        <Text color='snow'>
+        <Text color="snow">
           window: {windowWidth}px
           <br />
           constrained: {constrainWidth}px

package/src/components/Constrain/ExceedConstrain.stories.tsx

@@ -10,10 +10,10 @@ const Constrained = () => {
   return (
     <Constrain>
       <div style={{ backgroundColor: 'black', color: 'white', padding: '1rem' }}>
-        <Text color='snow'>This div is constrained.</Text>
+        <Text color="snow">This div is constrained.</Text>
       </div>
       <ExceedConstrain style={{ backgroundColor: 'gray', color: 'white', padding: '1rem' }}>
-        <Text color='snow'>This exceeds the constrain.</Text>
+        <Text color="snow">This exceeds the constrain.</Text>
       </ExceedConstrain>
     </Constrain>
   );

package/src/components/ControlLink/ControlLink.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
-import { ControlLink, ControlLinkProps } from './ControlLink';
 import { BrowserRouter } from 'react-router-dom';
+import { ControlLink, ControlLinkProps } from './ControlLink';
 
 export default { title: 'Components/ControlLink' };
 

package/src/components/ControlLink/index.ts

@@ -1 +1 @@
-export * from './ControlLink';
+export * from './ControlLink';

package/src/components/CreditCardNumberInput/CreditCardNumberInput.stories.tsx

@@ -13,6 +13,6 @@ export const Default = () => (
       { maskChar: '' }
     ]}
   >
-    <CreditCardNumberInput label='Card Number' />
+    <CreditCardNumberInput label="Card Number" />
   </States>
 );

package/src/components/CreditCardNumberInput/CreditCardNumberInput.test.tsx

@@ -5,14 +5,14 @@ import { CreditCardNumberInput } from './CreditCardNumberInput';
 
 describe('credit card number input', () => {
   it('renders without errors', () => {
-    render(<CreditCardNumberInput label='Card Number' />);
+    render(<CreditCardNumberInput label="Card Number" />);
     const input = screen.getByLabelText('Card Number');
     expect(input).toBeInTheDocument();
   });
 
   // TODO: userEvent.type does not work here for some reason
   xit('does not allow non-numeric characters', async () => {
-    render(<CreditCardNumberInput label='Card Number' />);
+    render(<CreditCardNumberInput label="Card Number" />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
     await userEvent.type(input, 'foo1234');
@@ -22,7 +22,7 @@ describe('credit card number input', () => {
 
   // TODO: userEvent.type does not work here for some reason
   xit('puts spaces between the numbers', async () => {
-    render(<CreditCardNumberInput label='Card Number' />);
+    render(<CreditCardNumberInput label="Card Number" />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
     await userEvent.type(input, '5510000000000000');
@@ -32,7 +32,7 @@ describe('credit card number input', () => {
 
   // TODO: userEvent.type does not work here for some reason
   xit('does not allow more characters than required', async () => {
-    render(<CreditCardNumberInput label='Card Number' />);
+    render(<CreditCardNumberInput label="Card Number" />);
     const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
     await userEvent.type(input, '5510000000000000251');

package/src/components/CreditCardNumberInput/CreditCardNumberInput.tsx

@@ -62,6 +62,7 @@ export const CreditCardNumberInput: React.FC<CreditCardNumberInputProps> = ({
   );
 
   // TODO: get rid of the any, the types of react-input-mask are incorrect here, it should expect a function as a child, but it expects a ReactNode
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const renderInputField: any = (inputProps: CreditCardNumberInputFieldProps) => (
     <CreditCardNumberInputField {...rest} {...inputProps} />
   );

package/src/components/DefinitionList/DefinitionList.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { States } from 'storybook-states';
-import { DefinitionList, DefinitionListProps } from './DefinitionList';
 import { Text } from '../Text';
+import { DefinitionList, DefinitionListProps } from './DefinitionList';
 
 export default { title: 'Components/DefinitionList' };
 
@@ -14,13 +14,13 @@ export const Default = () => (
         term: 'Size',
         children: (
           <>
-            US 2 — <Text color='code-red'>Only 2 Left</Text>
+            US 2 — <Text color="code-red">Only 2 Left</Text>
           </>
         )
       },
       {
         term: 'Supports',
-        children: <a href='#link'>Links</a>
+        children: <a href="#link">Links</a>
       }
     ]}
   >

package/src/components/DefinitionList/DefinitionList.test.tsx

@@ -5,7 +5,7 @@ import { DefinitionList } from './DefinitionList';
 
 describe('DefinitionList', () => {
   it('renders correctly', () => {
-    render(<DefinitionList term='Foo'>Bar</DefinitionList>);
+    render(<DefinitionList term="Foo">Bar</DefinitionList>);
     expect(screen.getByText('Foo')).toBeVisible();
     expect(screen.getByText('Bar')).toBeVisible();
   });

package/src/components/Divider/Divider.stories.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 import { States } from 'storybook-states';
-import { Divider, NoLineDivider, TwoLineDivider } from './';
 import { DividerProps } from './Divider';
+import { Divider, NoLineDivider, TwoLineDivider } from './';
 
 export default { title: 'Components/Divider' };
 
 export const Default = () => (
   <States<Partial<DividerProps>> states={[{}, { type: 'no-line' }, { type: 'two-line' }]}>
-    <Divider text='Moda Operandi' />
+    <Divider text="Moda Operandi" />
   </States>
 );
 
 export const WithNoLine = () => (
   <States>
-    <NoLineDivider text='Divider with No Line' />
+    <NoLineDivider text="Divider with No Line" />
   </States>
 );
 
 export const WithDoubleLine = () => (
   <States>
-    <TwoLineDivider text='Divider with Double Line' />
+    <TwoLineDivider text="Divider with Double Line" />
   </States>
 );
 

package/src/components/Divider/Divider.test.tsx

@@ -5,7 +5,7 @@ import { Divider } from './Divider';
 
 describe('Divider', () => {
   it('renders correctly', () => {
-    render(<Divider style={{ padding: '30px 0' }} text='Hello' />);
+    render(<Divider style={{ padding: '30px 0' }} text="Hello" />);
     expect(screen.getByText('Hello')).toBeVisible();
     // eslint-disable-next-line testing-library/no-node-access
     expect(screen.getByText('Hello').parentNode).toHaveStyle('padding: 30px 0px;');

package/src/components/Divider/Divider.tsx

@@ -29,7 +29,7 @@ export const Divider: React.FC<DividerProps> = ({
     <div className={classNames('Divider', type ? `Divider--${type}` : '', className)} {...rest}>
       {text && (
         <Text
-          className='Divider__text'
+          className="Divider__text"
           treatment={treatment ?? defaultTreatment}
           color={color}
           family={family ?? defaultFamily}

package/src/components/Divider/NoLineDivider.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Divider, DividerProps } from './Divider';
 
 export const NoLineDivider: React.FC<DividerProps> = props => {
-  return <Divider {...props} type={'no-line'} />;
+  return <Divider {...props} type="no-line" />;
 };

package/src/components/Divider/TwoLineDivider.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Divider, DividerProps } from './Divider';
 
 export const TwoLineDivider: React.FC<DividerProps> = props => {
-  return <Divider {...props} type={'two-line'} />;
+  return <Divider {...props} type="two-line" />;
 };

package/src/components/Expandable/Expandable.stories.tsx

@@ -7,7 +7,7 @@ export default { title: 'Components/Expandable' };
 
 export const Default = () => (
   <States<Partial<ExpandableProps>> states={[{}, { expanded: true }]}>
-    <Expandable name='Editor’s Note'>
+    <Expandable name="Editor’s Note">
       Mark Cross’ ‘Cole’ duffle bag is crafted from textured grain leather with ample space for your
       long-haul travels. It opens to reveal red twill lining and ample compartments for your
       essentials. It has polished silver-tone palladium hardware and is stamped with the label’s
@@ -20,7 +20,7 @@ export const Default = () => (
 // Push content into the DOM only after epanding component
 export const VirtualizeContent = () => (
   <States<Partial<ExpandableProps>> states={[{}, { expanded: false, virtual: true }]}>
-    <Expandable name='Editor’s Note'>
+    <Expandable name="Editor’s Note">
       Mark Cross’ ‘Cole’ duffle bag is crafted from textured grain leather with ample space for your
       long-haul travels. It opens to reveal red twill lining and ample compartments for your
       essentials. It has polished silver-tone palladium hardware and is stamped with the label’s
@@ -32,7 +32,7 @@ export const VirtualizeContent = () => (
 
 export const ChevronIcon = () => (
   <States<Partial<ExpandableProps>> states={[{}, { expanded: true }]}>
-    <Expandable icon='chevron' name='Editor’s Note'>
+    <Expandable icon="chevron" name="Editor’s Note">
       Mark Cross’ ‘Cole’ duffle bag is crafted from textured grain leather with ample space for your
       long-haul travels. It opens to reveal red twill lining and ample compartments for your
       essentials. It has polished silver-tone palladium hardware and is stamped with the label’s
@@ -45,14 +45,14 @@ export const ChevronIcon = () => (
 export const Stacked = () => (
   <States>
     <Stack space={0}>
-      <Expandable name='Editor’s Note' expanded>
+      <Expandable name="Editor’s Note" expanded>
         <p>
           Acne Studios’ ‘1996’ jeans are fitted with a high-rise waist and straight-leg silhouette.
           Designed in a dark-blue wash, this five-pocket style is detailed with contrast
           top-stitching to mirror vintage pairs.
         </p>
       </Expandable>
-      <Expandable name='Product Details'>
+      <Expandable name="Product Details">
         <ul>
           <li>Belt loops, five-pocket style</li>
           <li>Button and concealed zip fastening at front</li>
@@ -61,7 +61,7 @@ export const Stacked = () => (
         </ul>
         <p>Made in Italy Product Code 684196</p>
       </Expandable>
-      <Expandable name='Size &amp; Fit'>
+      <Expandable name="Size &amp; Fit">
         <ul>
           <li>
             Model measurements: height 6&apos;2&quot;/188cm - neck 15.5&quot;/39cm - waist
@@ -72,11 +72,11 @@ export const Stacked = () => (
           <li>We suggest taking your normal size</li>
         </ul>
         <p>
-          Questions? Please contact <a href='mailto:care@modaoperandi.com'>care@modaoperandi.com</a>
+          Questions? Please contact <a href="mailto:care@modaoperandi.com">care@modaoperandi.com</a>
           .
         </p>
       </Expandable>
-      <Expandable name='Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...'>
+      <Expandable name="Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum laoreet urna nec
         consequat. Morbi et volutpat nulla, a vehicula nisl. Nullam tincidunt ac neque ornare
         mattis. Donec eget dapibus enim. Aliquam ut tortor pretium dui pretium tincidunt. Donec quis

package/src/components/Expandable/Expandable.test.tsx

@@ -9,7 +9,7 @@ describe('Expandable', () => {
     const user = userEvent.setup();
 
     render(
-      <Expandable virtual name='Hello'>
+      <Expandable virtual name="Hello">
         Goodbye
       </Expandable>
     );

package/src/components/Expandable/Expandable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState, ReactNode } from 'react';
+import React, { useEffect, useCallback, useState, ReactNode } from 'react';
 import classNames from 'classnames';
 import ChevronDownIcon from '@moda/icons/chevron-down-12';
 import ChevronUpIcon from '@moda/icons/chevron-up-12';
@@ -7,6 +7,7 @@ import './Expandable.scss';
 
 export type ExpandableProps = React.HTMLAttributes<HTMLDivElement> & {
   name: string | ReactNode;
+  defaultExpanded?: boolean;
   expanded?: boolean;
   children: ReactNode;
   icon?: 'chevron' | 'plus-minus';
@@ -21,10 +22,16 @@ export const Expandable: React.FC<ExpandableProps> = ({
   virtual = false,
   icon = 'plus-minus',
   'data-testid': dataTestId,
-  expanded: __expanded__ = false,
+  defaultExpanded = false,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  expanded: __expanded__,
   ...rest
 }) => {
-  const [expanded, setExpanded] = useState(__expanded__);
+  const [expanded, setExpanded] = useState(defaultExpanded);
+
+  useEffect(() => {
+    if (__expanded__ != null && __expanded__ !== expanded) setExpanded(__expanded__);
+  }, [expanded, __expanded__]);
 
   const handleClick = useCallback(() => setExpanded(expanded => !expanded), []);
 
@@ -43,14 +50,14 @@ export const Expandable: React.FC<ExpandableProps> = ({
         {name}
 
         {icon !== 'plus-minus' && (
-          <div className='Expandable__icon'>
+          <div className="Expandable__icon">
             {icon === 'chevron' && expanded && <ChevronUpIcon />}
             {icon === 'chevron' && !expanded && <ChevronDownIcon />}
           </div>
         )}
       </Clickable>
 
-      <div className='Expandable__contents'>{expanded || !virtual ? children : null}</div>
+      <div className="Expandable__contents">{expanded || !virtual ? children : null}</div>
     </div>
   );
 };

package/src/components/Field/Field.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { States } from 'storybook-states';
-import { Field, FieldProps } from './Field';
+import { action } from '@storybook/addon-actions';
 import { Textarea } from '../Textarea';
 import { Select } from '../Select';
-import { action } from '@storybook/addon-actions';
+import { Field, FieldProps } from './Field';
 
 export default { title: 'Components/Field' };
 
@@ -19,7 +19,7 @@ export const Default = () => (
       { label: 'Name of input', error: 'Something went wrong' }
     ]}
   >
-    <Field placeholder='An input' />
+    <Field placeholder="An input" />
   </States>
 );
 
@@ -36,7 +36,7 @@ export const AribitraryChildren = () => (
     ]}
   >
     <Field>
-      <Textarea placeholder='A textarea' />
+      <Textarea placeholder="A textarea" />
     </Field>
   </States>
 );

package/src/components/Field/Field.test.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { Field } from './Field';
 import { Select } from '../Select';
+import { Field } from './Field';
 
 describe('Field', () => {
   it('renders correctly', () => {
-    render(<Field placeholder='Placeholder' defaultValue='Hello' />);
+    render(<Field placeholder="Placeholder" defaultValue="Hello" />);
 
     expect(screen.getByRole('textbox')).toBeVisible();
     expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
   });
 
   it('renders with a label', () => {
-    render(<Field placeholder='Placeholder' defaultValue='Hello' label='Label' />);
+    render(<Field placeholder="Placeholder" defaultValue="Hello" label="Label" />);
 
     expect(screen.getByRole('textbox')).toBeVisible();
     expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
@@ -21,7 +21,7 @@ describe('Field', () => {
   });
 
   it('renders with an error', () => {
-    render(<Field placeholder='Placeholder' defaultValue='Hello' label='Label' error='Error' />);
+    render(<Field placeholder="Placeholder" defaultValue="Hello" label="Label" error="Error" />);
 
     expect(screen.getByRole('textbox')).toBeVisible();
     expect(screen.getByRole('textbox')).toHaveClass('TextInput--error');
@@ -37,7 +37,7 @@ describe('Field', () => {
 
     render(
       <Field>
-        <Select idRef='1' name='name-1' label='Sort by' options={options} />
+        <Select idRef="1" name="name-1" label="Sort by" options={options} />
       </Field>
     );
 
@@ -46,7 +46,7 @@ describe('Field', () => {
 
   it('renders with a className', () => {
     render(
-      <Field className='Custom' placeholder='Placeholder' defaultValue='Hello' label='Label' />
+      <Field className="Custom" placeholder="Placeholder" defaultValue="Hello" label="Label" />
     );
 
     expect(screen.getByRole('textbox')).toBeVisible();
@@ -56,7 +56,7 @@ describe('Field', () => {
 
   it('supports custom children', () => {
     render(
-      <Field placeholder='Placeholder' defaultValue='Hello' label='Label'>
+      <Field placeholder="Placeholder" defaultValue="Hello" label="Label">
         <textarea />
       </Field>
     );

package/src/components/Field/Field.tsx

@@ -17,10 +17,10 @@ export const Field = React.forwardRef(
   ) => {
     return (
       <label className={classNames('Field', className)}>
-        {label && <span className='Field__label'>{label}</span>}
+        {label && <span className="Field__label">{label}</span>}
 
         {/* TODO: Codify some kind of IconWrapper component */}
-        <span className='Field__context'>
+        <span className="Field__context">
           {children ? (
             <>
               {React.cloneElement(children, {
@@ -34,7 +34,7 @@ export const Field = React.forwardRef(
               })}
 
               {error && (
-                <span className='Field__icon'>
+                <span className="Field__icon">
                   <WarningIcon />
                 </span>
               )}
@@ -49,7 +49,7 @@ export const Field = React.forwardRef(
                 {...rest}
               />
               {error && (
-                <span className='Field__icon'>
+                <span className="Field__icon">
                   <WarningIcon />
                 </span>
               )}
@@ -57,7 +57,7 @@ export const Field = React.forwardRef(
           )}
         </span>
 
-        {error && <span className='Field__error'>{error}</span>}
+        {error && <span className="Field__error">{error}</span>}
       </label>
     );
   }

package/src/components/Field/index.ts

@@ -1,3 +1,4 @@
 import { Field } from './Field';
+
 export { Field as Input };
 export * from './Field';

package/src/components/Loading/Loading.test.tsx

@@ -5,7 +5,7 @@ import { Loading } from './Loading';
 
 describe('Loading', () => {
   it('renders correctly', () => {
-    render(<Loading aria-label='Loading' />);
+    render(<Loading aria-label="Loading" />);
     expect(screen.getByLabelText('Loading')).toBeVisible();
   });
 });

package/src/components/Loading/Loading.tsx

@@ -11,9 +11,10 @@ const FRAMES = [Triangle, Diamond, ArcWindow, Circle];
 
 export const Loading: React.FC<LoadingProps> = ({ className, ...rest }) => {
   const { index, handleNext } = useCursor({ max: FRAMES.length });
+  const ONE_SECOND_INTERVAL = 1000;
 
   useEffect(() => {
-    const interval = setInterval(handleNext, 1000);
+    const interval = setInterval(handleNext, ONE_SECOND_INTERVAL);
     return () => clearInterval(interval);
   }, [handleNext]);
 

package/src/components/Modal/Modal.test.tsx

@@ -14,8 +14,8 @@ describe('Modal', () => {
     const onClose = jest.fn();
     const onClickButton = jest.fn();
     render(
-      <Modal data-testid='modal' onClose={onClose}>
-        <button data-testid='button' onClick={onClickButton}>
+      <Modal data-testid="modal" onClose={onClose}>
+        <button data-testid="button" onClick={onClickButton}>
           Click Me
         </button>
       </Modal>

package/src/components/ModalOverlay/ModalOverlay.test.tsx

@@ -8,11 +8,11 @@ const ModalComponent: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
 
   return showModal ? (
-    <ModalOverlay data-testid='modal' onClose={() => setShowModal(false)}>
+    <ModalOverlay data-testid="modal" onClose={() => setShowModal(false)}>
       Modal Content
     </ModalOverlay>
   ) : (
-    <button data-testid='button' onClick={() => setShowModal(true)}>
+    <button data-testid="button" onClick={() => setShowModal(true)}>
       Click Me
     </button>
   );

package/src/components/ModalOverlay/ModalOverlay.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
-import { Modal, ModalProps } from '../Modal';
-import { OverlayProps, Overlay } from '../Overlay';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
+import { Modal, ModalProps } from '../Modal';
+import { OverlayProps, Overlay } from '../Overlay';
 
 import './ModalOverlay.scss';
 

package/src/components/Overlay/Overlay.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
 import { States } from 'storybook-states';
-import { Overlay } from './Overlay';
 import { Button } from '../Button';
+import { Overlay } from './Overlay';
 
 export default { title: 'Components/Overlay' };