@moda/om 17.8.0 → 17.9.1

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/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/DefinitionList/DefinitionList.stories.tsx

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

@@ -7,19 +7,19 @@ 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
@@ -44,7 +44,7 @@ export const ChevronIcon = () => (
 
 export const DarkBackground = () => (
   <div style={{ backgroundColor: 'black', padding: '20px' }}>
-    <Expandable name="Editor’s Note" background="dark">
+    <Expandable name='Editor’s Note' background='dark'>
       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
@@ -57,14 +57,14 @@ export const DarkBackground = () => (
 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>
@@ -73,7 +73,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
@@ -84,11 +84,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

@@ -58,18 +58,18 @@ export const Expandable: React.FC<ExpandableProps> = ({
       )}
       {...rest}
     >
-      <Clickable className="Expandable__name" onClick={handleClick} data-testid={dataTestId}>
+      <Clickable className='Expandable__name' onClick={handleClick} data-testid={dataTestId}>
         {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

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

@@ -6,14 +6,14 @@ 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/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/LoadingBalls/LoadingBalls.tsx

@@ -14,44 +14,44 @@ const defaultSize = 32;
 export const LoadingBalls: React.FC<Props> = ({ className, width, height }: Props) => (
   <svg
     className={classNames('LoadingBalls', className)}
-    viewBox="0 0 32 32"
+    viewBox='0 0 32 32'
     width={width || defaultSize}
     height={height || defaultSize}
   >
-    <circle transform="translate(8 0)" cx="0" cy="16" r="0">
+    <circle transform='translate(8 0)' cx='0' cy='16' r='0'>
       <animate
-        attributeName="r"
-        values="0; 4; 0; 0"
-        dur="1.2s"
-        repeatCount="indefinite"
-        begin="0"
-        keyTimes="0;0.2;0.7;1"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        calcMode="spline"
+        attributeName='r'
+        values='0; 4; 0; 0'
+        dur='1.2s'
+        repeatCount='indefinite'
+        begin='0'
+        keyTimes='0;0.2;0.7;1'
+        keySplines='0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8'
+        calcMode='spline'
       />
     </circle>
-    <circle transform="translate(16 0)" cx="0" cy="16" r="0">
+    <circle transform='translate(16 0)' cx='0' cy='16' r='0'>
       <animate
-        attributeName="r"
-        values="0; 4; 0; 0"
-        dur="1.2s"
-        repeatCount="indefinite"
-        begin="0.3"
-        keyTimes="0;0.2;0.7;1"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        calcMode="spline"
+        attributeName='r'
+        values='0; 4; 0; 0'
+        dur='1.2s'
+        repeatCount='indefinite'
+        begin='0.3'
+        keyTimes='0;0.2;0.7;1'
+        keySplines='0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8'
+        calcMode='spline'
       />
     </circle>
-    <circle transform="translate(24 0)" cx="0" cy="16" r="0">
+    <circle transform='translate(24 0)' cx='0' cy='16' r='0'>
       <animate
-        attributeName="r"
-        values="0; 4; 0; 0"
-        dur="1.2s"
-        repeatCount="indefinite"
-        begin="0.6"
-        keyTimes="0;0.2;0.7;1"
-        keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8"
-        calcMode="spline"
+        attributeName='r'
+        values='0; 4; 0; 0'
+        dur='1.2s'
+        repeatCount='indefinite'
+        begin='0.6'
+        keyTimes='0;0.2;0.7;1'
+        keySplines='0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8'
+        calcMode='spline'
       />
     </circle>
   </svg>

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/Paginator/Paginator.tsx

@@ -66,7 +66,7 @@ export const Paginator: React.FC<Props> = ({
   const prevPage = (page: number) => onGoToPage(page - 1);
 
   return (
-    <section className={classNames('Paginator', className)} aria-label="Pagination">
+    <section className={classNames('Paginator', className)} aria-label='Pagination'>
       <button
         disabled={!canDoPrev(selectedPage)}
         onClick={() => {
@@ -75,7 +75,7 @@ export const Paginator: React.FC<Props> = ({
         }}
         className={classNames('Paginator__button', 'Paginator__button--previous')}
       >
-        <ChevronLeftIcon className="Paginator__previous-chevron" /> Previous
+        <ChevronLeftIcon className='Paginator__previous-chevron' /> Previous
       </button>
 
       {pages.map((page, index) => (
@@ -108,7 +108,7 @@ export const Paginator: React.FC<Props> = ({
         }}
         className={classNames('Paginator__button', 'Paginator__button--next')}
       >
-        Next <ChevronRightIcon className="Paginator__next-chevron" />
+        Next <ChevronRightIcon className='Paginator__next-chevron' />
       </button>
     </section>
   );

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -6,6 +6,6 @@ export default { title: 'Components/PasswordInput' };
 
 export const Default = () => (
   <States<Partial<PasswordInputProps>> states={[{}, { error: 'Password cannot be empty.' }]}>
-    <PasswordInput id="signInPassword" placeholder="Password" />
+    <PasswordInput id='signInPassword' placeholder='Password' />
   </States>
 );

package/src/components/PasswordInput/PasswordInput.tsx

@@ -15,23 +15,23 @@ export const PasswordInput = forwardRef(
     };
 
     return (
-      <div className="PasswordInput">
+      <div className='PasswordInput'>
         <Input
-          className="PasswordInput__editor"
+          className='PasswordInput__editor'
           ref={ref}
           type={passwordShown ? 'text' : 'password'}
           {...rest}
         />
 
         <Clickable
-          className="PasswordInput__password-action"
+          className='PasswordInput__password-action'
           onClick={togglePasswordVisiblity}
-          type="button"
+          type='button'
         >
           {passwordShown ? (
-            <Text treatment="eyebrow">HIDE</Text>
+            <Text treatment='eyebrow'>HIDE</Text>
           ) : (
-            <Text treatment="eyebrow">SHOW</Text>
+            <Text treatment='eyebrow'>SHOW</Text>
           )}
         </Clickable>
       </div>

package/src/components/Popover/Popover.stories.tsx

@@ -33,7 +33,7 @@ export const Default = () => (
     >
       <Popover content={Content} style={{ display: 'inline-block' }}>
         <Text>
-          <ControlLink href="https://www.modaoperandi.com/women">Hover on Link</ControlLink>
+          <ControlLink href='https://www.modaoperandi.com/women'>Hover on Link</ControlLink>
         </Text>
       </Popover>
     </States>

package/src/components/Popover/Popover.tsx

@@ -128,7 +128,7 @@ export const Popover: React.FC<PopoverProps> = ({
       onMouseLeave={handleMouseLeave}
       {...rest}
     >
-      <span className="Popover__trigger">
+      <span className='Popover__trigger'>
         {isOpen && (
           <div
             className={classNames('Popover__box', {
@@ -137,11 +137,11 @@ export const Popover: React.FC<PopoverProps> = ({
             })}
           >
             <div
-              className="Popover__caret"
+              className='Popover__caret'
               style={{ zIndex: zIndex != null ? zIndex + 1 : undefined }}
             />
 
-            <div className="Popover__content" style={{ zIndex }}>
+            <div className='Popover__content' style={{ zIndex }}>
               {content}
             </div>
           </div>

package/src/components/PromoBanner/PromoBanner.stories.tsx

@@ -9,22 +9,22 @@ export const Default = () => (
     states={[
       { children: <span>Center</span> },
       {
-        children: [<span key="left">Left</span>, <span key="right">Right</span>]
+        children: [<span key='left'>Left</span>, <span key='right'>Right</span>]
       },
       {
         children: [
-          <span key="left">Left</span>,
-          <span key="center">Center</span>,
-          <span key="right">Right</span>
+          <span key='left'>Left</span>,
+          <span key='center'>Center</span>,
+          <span key='right'>Right</span>
         ]
       },
       {
         children: [
-          <span key="left">Currency: USA (USD $)</span>,
-          <span key="center" className="FOO">
-            Order by Dec. 12 for delivery by Dec. 25 — <a href="#">LEARN MORE</a>
+          <span key='left'>Currency: USA (USD $)</span>,
+          <span key='center' className='FOO'>
+            Order by Dec. 12 for delivery by Dec. 25 — <a href='#'>LEARN MORE</a>
           </span>,
-          <span key="right">Hi, Friend</span>
+          <span key='right'>Hi, Friend</span>
         ]
       }
     ]}
@@ -38,7 +38,7 @@ export const Mobile = () => (
     <PromoBanner>
       <span>Currency: USA (USD $)</span>
       <span>
-        Order by Dec. 12 for delivery by Dec. 25 — <a href="#">LEARN MORE</a>
+        Order by Dec. 12 for delivery by Dec. 25 — <a href='#'>LEARN MORE</a>
       </span>
       <span>Hi, Friend</span>
     </PromoBanner>

package/src/components/PromoBanner/PromoBanner.tsx

@@ -11,7 +11,7 @@ export const PromoBanner: React.FC<PromoBannerProps> = ({ className, children, .
   const length = Children.count(children);
   return (
     <div className={classNames('PromoBanner', className)} {...rest}>
-      <Constrain className="PromoBanner__constrain">
+      <Constrain className='PromoBanner__constrain'>
         {Children.map(children, (child: JSX.Element, index) => {
           const isCenter = length % 2 !== 0 && Math.floor(length / 2) === index;
           return cloneElement(child, {