@moda/om 17.7.0 → 17.9.0

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

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

@@ -8,7 +8,7 @@ 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/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

@@ -7,7 +7,7 @@ import './stack.stories.scss';
 export default { title: 'Mixins/stack' };
 
 export const Default = () => (
-  <div className="Story Mixins stack">
+  <div className='Story Mixins stack'>
     <p>Defaults to $space: 4 === {space.scale[4]}</p>
 
     <span>Notice the different element tags</span>
@@ -17,7 +17,7 @@ export const Default = () => (
 );
 
 export const Horizontal = () => (
-  <div className="Story Mixins stack stack--horizontal">
+  <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>;

package/src/utilities/States/State.tsx

@@ -14,10 +14,10 @@ export const State: React.FC<Props> = ({ props, children, ...rest }) => {
   const innerChildren = isRenderProps(children) ? children(props) : children;
 
   return (
-    <div className="State" {...rest}>
+    <div className='State' {...rest}>
       {Specimen}
 
-      <code className="State__props">
+      <code className='State__props'>
         <StatesProps props={props}>{innerChildren}</StatesProps>
       </code>
     </div>

package/src/utilities/States/States.tsx

@@ -11,7 +11,7 @@ export interface Props {
 
 export const States: React.FC<Props> = ({ states = [{}], children, ...rest }) => {
   return (
-    <div className="States">
+    <div className='States'>
       {states.map((props, index) => (
         <State key={index} props={props} {...rest}>
           {children}

package/src/utilities/States/StatesProps.tsx

@@ -19,7 +19,7 @@ export const StatesProps: React.FC<Props> = ({ props, children }) => {
   const childrenProps = omit(children.props, ...Object.keys(props || {}));
 
   return (
-    <Stack className="StatesProps" space={2} direction="horizontal">
+    <Stack className='StatesProps' space={2} direction='horizontal'>
       <span>{children.type.displayName || children.type.name}</span>
       {!isEmpty(props) && <strong>{stringifyProps(props)}</strong>}
       {!isRenderProps(children) && !isEmpty(childrenProps) && (