@moda/om 16.2.0 → 16.2.1

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

@@ -6,7 +6,7 @@ import { Stack } from './Stack';
 describe('Stack', () => {
   it('renders correctly', () => {
     render(
-      <Stack space={6} direction='horizontal'>
+      <Stack space={6} direction="horizontal">
         <div>Hello</div>
         <div>World</div>
       </Stack>

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

@@ -8,12 +8,12 @@ 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>
     }
   ];
 

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.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

@@ -6,7 +6,7 @@ import { Text } from './Text';
 describe('Text', () => {
   it('renders correctly', () => {
     render(
-      <Text treatment='body2' color='money-good' family='serif'>
+      <Text treatment="body2" color="money-good" family="serif">
         Hello
       </Text>
     );

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

@@ -5,7 +5,7 @@ import { TextInput } from './TextInput';
 
 describe('TextInput', () => {
   it('renders correctly', () => {
-    render(<TextInput placeholder='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

@@ -5,14 +5,14 @@ import { Textarea } from './Textarea';
 
 describe('Textarea', () => {
   it('renders correctly', () => {
-    render(<Textarea placeholder='Placeholder' defaultValue='Hello' />);
+    render(<Textarea placeholder="Placeholder" defaultValue="Hello" />);
 
     expect(screen.getByRole('textbox')).toHaveValue('Hello');
     expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
   });
 
   it('renders with an error', () => {
-    render(<Textarea placeholder='Placeholder' defaultValue='Hello' label='Label' error='Error' />);
+    render(<Textarea placeholder="Placeholder" defaultValue="Hello" label="Label" error="Error" />);
 
     expect(screen.getByRole('textbox')).toHaveValue('Hello');
     expect(screen.getByRole('textbox')).toHaveClass('Textarea--error');
@@ -20,7 +20,7 @@ describe('Textarea', () => {
 
   it('renders with a className', () => {
     render(
-      <Textarea className='Custom' placeholder='Placeholder' defaultValue='Hello' label='Label' />
+      <Textarea className="Custom" placeholder="Placeholder" defaultValue="Hello" label="Label" />
     );
 
     expect(screen.getByRole('textbox')).toHaveValue('Hello');

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,7 +7,7 @@ describe('Toast', () => {
   it('works correctly', async () => {
     const onRemove = jest.fn();
     render(
-      <Toast theme='success' onRemove={onRemove}>
+      <Toast theme="success" onRemove={onRemove}>
         Hello
       </Toast>
     );

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 />

package/src/components/VerticalDivider/VerticalDivider.test.tsx

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

package/src/hooks/useKeyboardListNavigation.spec.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 import { renderHook, fireEvent } from '@testing-library/react';
-import { useKeyboardListNavigation } from './useKeyboardListNavigation';
 import { useRef } from 'react';
+import { useKeyboardListNavigation } from './useKeyboardListNavigation';
 
 describe('useKeyboardListNavigation', () => {
   const list = ['first', 'second', 'third', 'fourth'];

package/src/hooks/useKeyboardListNavigation.ts

@@ -56,6 +56,7 @@ export type UseKeyboardListNavigationProps<T> = {
     index: number;
   }): void;
   extractValue?(item: T): string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref?: React.MutableRefObject<any>;
 };
 
@@ -138,6 +139,7 @@ export const useKeyboardListNavigation = <T>({
     };
   }, [handleKeyDown, ref, idleTimeout]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => dispatch({ type: 'RESET', payload: { defaultCursor } }), [list.length]);
 
   const interactiveIndex = waitForInteractive && !state.interactive ? -1 : index;

package/src/hooks/useUpdateEffect.ts

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef } from 'react';
 
 export const useUpdateEffect: typeof useEffect = (effect, deps) => {

package/src/index.ts

@@ -2,6 +2,8 @@ import 'focus-visible';
 
 import { colors, typography, space, breakpoints } from '@moda/tokens';
 
+import { States } from './utilities';
+
 export const tokens = {
   colors,
   typography,
@@ -14,6 +16,4 @@ export { FocusOn } from 'react-focus-on';
 export * from './components';
 export * from './hooks';
 
-import { States } from './utilities';
-
 export const Utilities = { States };

package/src/mixins/font-smoothing/font-smoothing.stories.tsx

@@ -9,22 +9,22 @@ export default { title: 'Mixins/font-smoothing' };
 
 export const Default = () => (
   <Stack space={3}>
-    <div className='Story Mixins font-smoothing--antialiased'>
-      <Text treatment='eyebrow'>@include font-smoothing(antialiased);</Text>
+    <div className="Story Mixins font-smoothing--antialiased">
+      <Text treatment="eyebrow">@include font-smoothing(antialiased);</Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--subpixel'>
-      <Text treatment='eyebrow'>@include font-smoothing(subpixel);</Text>
+    <div className="Story Mixins font-smoothing--subpixel">
+      <Text treatment="eyebrow">@include font-smoothing(subpixel);</Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--antialiased' style={{ backgroundColor: 'black' }}>
-      <Text color='snow' treatment='eyebrow'>
+    <div className="Story Mixins font-smoothing--antialiased" style={{ backgroundColor: 'black' }}>
+      <Text color="snow" treatment="eyebrow">
         @include font-smoothing(antialiased);
       </Text>
     </div>
 
-    <div className='Story Mixins font-smoothing--subpixel' style={{ backgroundColor: 'black' }}>
-      <Text color='snow' treatment='eyebrow'>
+    <div className="Story Mixins font-smoothing--subpixel" style={{ backgroundColor: 'black' }}>
+      <Text color="snow" treatment="eyebrow">
         @include font-smoothing(subpixel);
       </Text>
     </div>

package/src/mixins/overflow-scroll/overflow-scroll.stories.tsx

@@ -5,9 +5,9 @@ import './overflow-scroll.stories.scss';
 export default { title: 'Mixins/overflow-scroll' };
 
 export const Default = () => (
-  <div className='Story Mixins overflow-scroll'>Overflowed on the y axis!</div>
+  <div className="Story Mixins overflow-scroll">Overflowed on the y axis!</div>
 );
 
 export const OverflowX = () => (
-  <div className='Story Mixins overflow-scroll-x'>Overflowed on the x axis!</div>
+  <div className="Story Mixins overflow-scroll-x">Overflowed on the x axis!</div>
 );

package/src/mixins/stack/stack.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 import React from 'react';
 import { space } from '@moda/tokens';
 
@@ -6,10 +7,8 @@ import './stack.stories.scss';
 export default { title: 'Mixins/stack' };
 
 export const Default = () => (
-  <div className='Story Mixins stack'>
-    <p>
-      Defaults to {`$space: 4`} === {space.scale[4]}
-    </p>
+  <div className="Story Mixins stack">
+    <p>Defaults to $space: 4 === {space.scale[4]}</p>
 
     <span>Notice the different element tags</span>
 
@@ -18,8 +17,8 @@ export const Default = () => (
 );
 
 export const Horizontal = () => (
-  <div className='Story Mixins stack stack--horizontal'>
-    <p>Accepts {`$direction: horizontal`}</p>
+  <div className="Story Mixins stack stack--horizontal">
+    <p>Accepts $direction: horizontal</p>
 
     <span>Notice the different element tags</span>
 

package/src/mixins/thin-underline/thin-underline.stories.tsx

@@ -4,4 +4,4 @@ import './thin-underline.stories.scss';
 
 export default { title: 'Mixins/thin-underline' };
 
-export const Default = () => <div className='Story Mixins thin-underline'>Hello</div>;
+export const Default = () => <div className="Story Mixins thin-underline">Hello</div>;

package/src/mixins/visually-hidden/visually-hidden.stories.tsx

@@ -4,4 +4,4 @@ import './visually-hidden.stories.scss';
 
 export default { title: 'Mixins/visually-hidden' };
 
-export const Default = () => <div className='Story Mixins visually-hidden'>Hello</div>;
+export const Default = () => <div className="Story Mixins visually-hidden">Hello</div>;