@moda/om 16.1.0 → 16.2.1

package/src/components/Shape/ArcWindow.tsx

@@ -3,18 +3,18 @@ import { ShapeProps } from './Shape';
 
 export const ArcWindow: React.FC<ShapeProps> = () => (
   <svg
-    className='ArcWindow'
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
+    className="ArcWindow"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fillRule='evenodd'
-      clipRule='evenodd'
-      d='M20.1097 24V11.6273V8.8331V8.81993C20.1018 3.96884 16.4806 0 12.0536 0C7.6291 0 4.00527 3.96884 4 8.81993V8.8331V11.6273V24H20.1097Z'
-      fill='#003728'
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20.1097 24V11.6273V8.8331V8.81993C20.1018 3.96884 16.4806 0 12.0536 0C7.6291 0 4.00527 3.96884 4 8.81993V8.8331V11.6273V24H20.1097Z"
+      fill="#003728"
     />
   </svg>
 );

package/src/components/Shape/Bradley.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ShapeProps } from './Shape';
 
-export const Bradley: React.FC<ShapeProps> = (props) => (
+export const Bradley: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 110 211'
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 110 211"
     {...props}
   >
-    <path d='M110 .336H0v210h45.11v-52.595h19.78v52.595H110V105.147z' />
+    <path d="M110 .336H0v210h45.11v-52.595h19.78v52.595H110V105.147z" />
   </svg>
 );

package/src/components/Shape/Brancusi.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ShapeProps } from './Shape';
 
-export const Brancusi: React.FC<ShapeProps> = (props) => (
+export const Brancusi: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 111 210'
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 111 210"
     {...props}
   >
-    <path d='M110.575 210l-27.5-105 27.5-105h-110l27.501 105L.575 210z' />
+    <path d="M110.575 210l-27.5-105 27.5-105h-110l27.501 105L.575 210z" />
   </svg>
 );

package/src/components/Shape/Circle.tsx

@@ -3,18 +3,18 @@ import { ShapeProps } from './Shape';
 
 export const Circle: React.FC<ShapeProps> = () => (
   <svg
-    className='Circle'
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
+    className="Circle"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fillRule='evenodd'
-      clipRule='evenodd'
-      d='M24 12C24 18.6282 18.6282 24 12 24C5.37184 24 0 18.6282 0 12C0 5.37184 5.37184 0 12 0C18.6282 0 24 5.37184 24 12Z'
-      fill='#D7B3D0'
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M24 12C24 18.6282 18.6282 24 12 24C5.37184 24 0 18.6282 0 12C0 5.37184 5.37184 0 12 0C18.6282 0 24 5.37184 24 12Z"
+      fill="#D7B3D0"
     />
   </svg>
 );

package/src/components/Shape/Diamond.tsx

@@ -3,18 +3,18 @@ import { ShapeProps } from './Shape';
 
 export const Diamond: React.FC<ShapeProps> = () => (
   <svg
-    className='Diamond'
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
+    className="Diamond"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fillRule='evenodd'
-      clipRule='evenodd'
-      d='M12 24.0026L0 12.0026L12 0L24 12.0026L12 24.0026Z'
-      fill='#C44CB0'
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 24.0026L0 12.0026L12 0L24 12.0026L12 24.0026Z"
+      fill="#C44CB0"
     />
   </svg>
 );

package/src/components/Shape/Keyhole.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ShapeProps } from './Shape';
 
-export const Keyhole: React.FC<ShapeProps> = (props) => (
+export const Keyhole: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 111 210'
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 111 210"
     {...props}
   >
-    <path d='M.8 210h110V86.403h-9.317c5.88-8.833 9.317-19.46 9.317-30.902C110.8 24.85 86.175 0 55.8 0S.8 24.85.8 55.501c0 11.441 3.436 22.069 9.315 30.902H.8V210z' />
+    <path d="M.8 210h110V86.403h-9.317c5.88-8.833 9.317-19.46 9.317-30.902C110.8 24.85 86.175 0 55.8 0S.8 24.85.8 55.501c0 11.441 3.436 22.069 9.315 30.902H.8V210z" />
   </svg>
 );

package/src/components/Shape/Mirror.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ShapeProps } from './Shape';
 
-export const Mirror: React.FC<ShapeProps> = (props) => (
+export const Mirror: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 111 210'
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 111 210"
     {...props}
   >
-    <path d='M110.03 105c0-22.7-3.786-43.7-10.2-60.874V15.97H84.176C75.724 5.862 65.739 0 55.03 0 44.323 0 34.336 5.862 25.885 15.969H10.23v28.157C3.817 61.3.03 82.3.03 105c0 22.7 3.787 43.7 10.2 60.874v28.157h15.655C34.336 204.138 44.323 210 55.03 210c10.708 0 20.693-5.862 29.146-15.969h15.652v-28.157C106.244 148.7 110.03 127.7 110.03 105z' />
+    <path d="M110.03 105c0-22.7-3.786-43.7-10.2-60.874V15.97H84.176C75.724 5.862 65.739 0 55.03 0 44.323 0 34.336 5.862 25.885 15.969H10.23v28.157C3.817 61.3.03 82.3.03 105c0 22.7 3.787 43.7 10.2 60.874v28.157h15.655C34.336 204.138 44.323 210 55.03 210c10.708 0 20.693-5.862 29.146-15.969h15.652v-28.157C106.244 148.7 110.03 127.7 110.03 105z" />
   </svg>
 );

package/src/components/Shape/Oval.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ShapeProps } from './Shape';
 
-export const Oval: React.FC<ShapeProps> = (props) => (
+export const Oval: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 110 210'
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 110 210"
     {...props}
   >
-    <path d='M110 105C110 47.01 85.376 0 55 0S0 47.01 0 105s24.624 105 55 105 55-47.01 55-105z' />
+    <path d="M110 105C110 47.01 85.376 0 55 0S0 47.01 0 105s24.624 105 55 105 55-47.01 55-105z" />
   </svg>
 );

package/src/components/Shape/Triangle.tsx

@@ -3,13 +3,13 @@ import { ShapeProps } from './Shape';
 
 export const Triangle: React.FC<ShapeProps> = () => (
   <svg
-    className='Triangle'
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
+    className="Triangle"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <path fillRule='evenodd' clipRule='evenodd' d='M11.9986 0L0 24H24L11.9986 0Z' fill='#D56B27' />
+    <path fillRule="evenodd" clipRule="evenodd" d="M11.9986 0L0 24H24L11.9986 0Z" fill="#D56B27" />
   </svg>
 );

package/src/components/Shape/Window.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ShapeProps } from './Shape';
 
-export const Window: React.FC<ShapeProps> = (props) => (
+export const Window: React.FC<ShapeProps> = props => (
   <svg
     style={{ fill: 'currentcolor' }}
-    xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 110 210'
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 110 210"
     {...props}
   >
-    <path d='M110 187.673V21.948H98.87C88.873 8.64 73.08 0 55.247 0 37.412 0 21.619 8.64 11.622 21.948H0v165.725h11.34C21.32 201.198 37.245 210 55.248 210c18 0 33.924-8.802 43.904-22.327H110z' />
+    <path d="M110 187.673V21.948H98.87C88.873 8.64 73.08 0 55.247 0 37.412 0 21.619 8.64 11.622 21.948H0v165.725h11.34C21.32 201.198 37.245 210 55.248 210c18 0 33.924-8.802 43.904-22.327H110z" />
   </svg>
 );

package/src/components/Stack/Stack.stories.tsx

@@ -6,7 +6,7 @@ import { Stack, StackProps } from './Stack';
 export default { title: 'Components/Stack' };
 
 export const Vertical = () => (
-  <States<StackProps> states={space.scale.map((_, i) => ({ space: i }))}>
+  <States<StackProps> states={space.scale.map((_, index) => ({ space: index }))}>
     <Stack space={0}>
       <div style={{ backgroundColor: 'yellow' }}>One</div>
       <div style={{ backgroundColor: 'yellow' }}>Two</div>
@@ -17,8 +17,8 @@ export const Vertical = () => (
 
 export const Horizontal = () => (
   <States<StackProps>
-    states={space.scale.map((_, i) => ({
-      space: i,
+    states={space.scale.map((_, index) => ({
+      space: index,
       direction: 'horizontal'
     }))}
   >

package/src/components/Stack/Stack.test.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Stack } from './Stack';
 
 describe('Stack', () => {
   it('renders correctly', () => {
-    const component = shallow(
-      <Stack space={6} direction='horizontal'>
+    render(
+      <Stack space={6} direction="horizontal">
         <div>Hello</div>
         <div>World</div>
       </Stack>
     );
 
-    expect(component.html()).toContain('Stack--horizontal-6');
-    expect(component.text()).toContain('HelloWorld');
+    expect(screen.getByText('Hello')).toBeVisible();
+    expect(screen.getByText('World')).toBeVisible();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('Hello').parentNode).toHaveClass('Stack--horizontal-6');
   });
 });

package/src/components/Tabs/TabList.tsx

@@ -10,7 +10,7 @@ export type TabListProps = {
 
 export const TabList: React.FC<TabListProps> = ({ tabs, onTabSelected, activePanel }) => {
   return (
-    <div className='TabList'>
+    <div className="TabList">
       {tabs.map(tab => (
         <Tab key={tab.name} tab={tab} onTabChosen={onTabSelected} activeTab={activePanel} />
       ))}

package/src/components/Tabs/TabPanel.tsx

@@ -6,5 +6,5 @@ export type TabPanelProps = {
 };
 
 export const TabPanel: React.FC<TabPanelProps> = ({ children }) => {
-  return <div className='TabPanel'>{children}</div>;
+  return <div className="TabPanel">{children}</div>;
 };

package/src/components/Tabs/TabPanels.tsx

@@ -9,7 +9,7 @@ export type TabPanelsProps = {
 
 export const TabPanels: React.FC<TabPanelsProps> = ({ panels, activePanel }) => {
   return (
-    <div className='TabPanels'>
+    <div className="TabPanels">
       {panels
         .filter(tab => tab.name === activePanel)
         .map(tab => (

package/src/components/Tabs/Tabs.stories.tsx

@@ -47,9 +47,9 @@ export const WithCallback = () => {
   return (
     <States<TabsProps>>
       <>
-        <Text treatment='h5'>Selected Tab:</Text>
+        <Text treatment="h5">Selected Tab:</Text>
         <Text> {tabName} </Text>
-        <Tabs tabs={TAB_LIST} onTabClicked={handleTabClick} activeTab="tab2"/>
+        <Tabs tabs={TAB_LIST} onTabClicked={handleTabClick} activeTab="tab2" />
       </>
     </States>
   );

package/src/components/Tabs/Tabs.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Tabs } from './Tabs';
 
@@ -8,20 +8,19 @@ describe('Tabs', () => {
     {
       name: 'tab1',
       title: 'Tab 1',
-      panel: <div className='test'>I am a panel</div>
+      panel: <div className="test">I am a panel</div>
     },
     {
       name: 'tab2',
       title: 'Tab 2',
-      panel: <div className='test'>I am also a panel</div>
+      panel: <div className="test">I am also a panel</div>
     }
   ];
 
   it('renders correctly with first tab displayed', () => {
-    const component = render(<Tabs tabs={testList} />);
+    render(<Tabs tabs={testList} />);
 
-    expect(component.html()).toEqual(
-      '<div class="TabList"><button class="Clickable Tab Tab--active">Tab 1</button><button class="Clickable Tab ">Tab 2</button></div><div class="TabPanels"><div class="TabPanel"><div class="test">I am a panel</div></div></div>'
-    );
+    expect(screen.getByRole('button', { name: 'Tab 1' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Tab 2' })).toBeVisible();
   });
 });

package/src/components/Tabs/Tabs.tsx

@@ -9,7 +9,13 @@ export type TabsProps = React.HTMLAttributes<HTMLDivElement> & {
   activeTab?: string;
 };
 
-export const Tabs: React.FC<TabsProps> = ({ tabs, onTabClicked, activeTab, className, ...rest }) => {
+export const Tabs: React.FC<TabsProps> = ({
+  tabs,
+  onTabClicked,
+  activeTab,
+  className,
+  ...rest
+}) => {
   const [activePanel, setActivePanel] = useState(activeTab || tabs[0].name);
   const handleTabClick = (tabName: string) => {
     setActivePanel(tabName);

package/src/components/Tag/Tag.test.tsx

@@ -8,7 +8,7 @@ describe('Tag', () => {
     const onRemove = jest.fn();
     render(<Tag onRemove={onRemove}>Hello</Tag>);
 
-    expect(screen.getByText('Hello')).toBeTruthy();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button'));
     expect(onRemove).toBeCalled();

package/src/components/Tag/Tag.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Clickable } from '../Clickable';
 import ExitIcon from '@moda/icons/exit-16';
+import { Clickable } from '../Clickable';
 import './Tag.scss';
 
-export type TagProps = { disabled?: boolean; onRemove?: () => void } & React.HTMLAttributes<
-  HTMLDivElement
->;
+export type TagProps = {
+  disabled?: boolean;
+  onRemove?: () => void;
+} & React.HTMLAttributes<HTMLDivElement>;
 
 export const Tag: React.FC<TagProps> = ({ className, disabled, onRemove, children, ...rest }) => (
   <div className={classNames('Tag', className, { 'Tag--disabled': disabled })} {...rest}>
     <div>{children}</div>
     {onRemove && (
-      <Clickable disabled={disabled} aria-label='Remove' onClick={onRemove}>
+      <Clickable disabled={disabled} aria-label="Remove" onClick={onRemove}>
         <ExitIcon />
       </Clickable>
     )}

package/src/components/Text/Text.stories.tsx

@@ -23,24 +23,24 @@ export const Treatments = () => (
 
 export const Colors = () => (
   <States<Partial<TextProps>> states={COLORS}>
-    <Text treatment='h5'>Moda Operandi</Text>
+    <Text treatment="h5">Moda Operandi</Text>
   </States>
 );
 
 export const Families = () => (
   <States<Partial<TextProps>> states={FAMILIES}>
-    <Text treatment='h5'>Moda Operandi</Text>
+    <Text treatment="h5">Moda Operandi</Text>
   </States>
 );
 
 export const Complex = () => (
   <Text>
-    <Text treatment='h6' color='fuchsia' family='serif'>
+    <Text treatment="h6" color="fuchsia" family="serif">
       Moda Operandi
     </Text>
     {' — '}
-    <Text color='money-good' treatment='eyebrow'>
-      Happy <Text color='code-red'>Holidays</Text>
+    <Text color="money-good" treatment="eyebrow">
+      Happy <Text color="code-red">Holidays</Text>
     </Text>
   </Text>
 );

package/src/components/Text/Text.test.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Text } from './Text';
 
 describe('Text', () => {
   it('renders correctly', () => {
-    const component = shallow(
-      <Text treatment='body2' color='money-good' family='serif'>
+    render(
+      <Text treatment="body2" color="money-good" family="serif">
         Hello
       </Text>
     );
-    expect(component.html()).toEqual(
-      '<span class="Text Text--body2 Text--serif" style="color:rgb(4, 108, 0)">Hello</span>'
-    );
+    expect(screen.getByText('Hello')).toBeVisible();
   });
 });

package/src/components/TextInput/TextInput.stories.tsx

@@ -14,6 +14,6 @@ export const Default = () => (
       { error: 'Error', defaultValue: 'With value' }
     ]}
   >
-    <TextInput placeholder='An input' />
+    <TextInput placeholder="An input" />
   </States>
 );

package/src/components/TextInput/TextInput.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { TextInput } from './TextInput';
 
 describe('TextInput', () => {
   it('renders correctly', () => {
-    const component = shallow(<TextInput placeholder='Hello' />);
-    expect(component.html()).toEqual(
-      '<input class="TextInput" placeholder="Hello" aria-label="Hello"/>'
-    );
+    render(<TextInput placeholder="Hello" />);
+    expect(screen.getByRole('textbox')).toHaveValue('');
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Hello');
   });
 });

package/src/components/Textarea/Textarea.stories.tsx

@@ -18,6 +18,6 @@ export const Default = () => (
       { defaultValue: MULTI_LINE_TEXT_EXAMPLE }
     ]}
   >
-    <Textarea placeholder='A textarea' />
+    <Textarea placeholder="A textarea" />
   </States>
 );

package/src/components/Textarea/Textarea.test.tsx

@@ -1,34 +1,29 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Textarea } from './Textarea';
 
 describe('Textarea', () => {
   it('renders correctly', () => {
-    const component = shallow(<Textarea placeholder='Placeholder' defaultValue='Hello' />);
+    render(<Textarea placeholder="Placeholder" defaultValue="Hello" />);
 
-    expect(component.html()).toEqual(
-      '<textarea class="Textarea" placeholder="Placeholder" aria-label="Placeholder">Hello</textarea>'
-    );
+    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
   });
 
   it('renders with an error', () => {
-    const component = shallow(
-      <Textarea placeholder='Placeholder' defaultValue='Hello' label='Label' error='Error' />
-    );
+    render(<Textarea placeholder="Placeholder" defaultValue="Hello" label="Label" error="Error" />);
 
-    expect(component.html()).toEqual(
-      '<textarea class="Textarea Textarea--error" placeholder="Placeholder" aria-label="Label">Hello</textarea>'
-    );
+    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+    expect(screen.getByRole('textbox')).toHaveClass('Textarea--error');
   });
 
   it('renders with a className', () => {
-    const component = shallow(
-      <Textarea className='Custom' placeholder='Placeholder' defaultValue='Hello' label='Label' />
+    render(
+      <Textarea className="Custom" placeholder="Placeholder" defaultValue="Hello" label="Label" />
     );
 
-    expect(component.html()).toEqual(
-      '<textarea class="Textarea Custom" placeholder="Placeholder" aria-label="Label">Hello</textarea>'
-    );
+    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+    expect(screen.getByRole('textbox')).toHaveClass('Custom');
   });
 });

package/src/components/Toast/Toast.stories.tsx

@@ -7,7 +7,7 @@ export default { title: 'Components/Toast' };
 
 export const Default = () => (
   <States<ToastProps> states={[{ theme: 'success' }, { theme: 'warning' }, { theme: 'error' }]}>
-    <Toast theme='success' onRemove={() => action('removed')}>
+    <Toast theme="success" onRemove={() => action('removed')}>
       This is a toast notification.
     </Toast>
   </States>

package/src/components/Toast/Toast.test.tsx

@@ -7,12 +7,12 @@ describe('Toast', () => {
   it('works correctly', async () => {
     const onRemove = jest.fn();
     render(
-      <Toast theme='success' onRemove={onRemove}>
+      <Toast theme="success" onRemove={onRemove}>
         Hello
       </Toast>
     );
 
-    expect(screen.getByText('Hello')).toBeTruthy();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
     expect(onRemove).toBeCalled();

package/src/components/Toast/Toast.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
+import ExitIcon from '@moda/icons/exit-16';
 import { Clickable } from '../Clickable';
 import { Text } from '../Text';
 import { Stack, StackProps } from '../Stack';
-import ExitIcon from '@moda/icons/exit-16';
 import './Toast.scss';
 
 export type ToastProps = {
@@ -14,17 +14,17 @@ export type ToastProps = {
 export const Toast: React.FC<ToastProps> = ({ theme, className, onRemove, children, ...rest }) => (
   <Stack
     className={classNames('Toast', `Toast--${theme}`, className)}
-    direction='horizontal'
+    direction="horizontal"
     space={2}
-    alignItems='center'
-    justifyContent='space-between'
+    alignItems="center"
+    justifyContent="space-between"
     {...rest}
   >
-    <Text treatment='bold1' color='snow'>
+    <Text treatment="bold1" color="snow">
       {children}
     </Text>
     {onRemove && (
-      <Clickable aria-label='Remove' onClick={onRemove}>
+      <Clickable aria-label="Remove" onClick={onRemove}>
         <ExitIcon />
       </Clickable>
     )}

package/src/components/VerticalDivider/VerticalDivider.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
 import { States } from 'storybook-states';
-import { VerticalDivider } from './VerticalDivider';
 import { Stack } from '../Stack';
+import { VerticalDivider } from './VerticalDivider';
 
 export default { title: 'Components/VerticalDivider' };
 
 export const Default = () => (
   <States>
-    <Stack direction='horizontal' space={4}>
+    <Stack direction="horizontal" space={4}>
       <div> Lorem ipsum dolor sit amet</div>
 
       <VerticalDivider />
@@ -20,7 +20,7 @@ export const Default = () => (
 
 export const Double = () => (
   <States>
-    <Stack direction='horizontal' space={4}>
+    <Stack direction="horizontal" space={4}>
       <div> Lorem ipsum dolor sit amet</div>
 
       <VerticalDivider double />