@moda/om 17.7.0 → 17.9.0

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, {

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -29,7 +29,7 @@ export const Select = () => {
   return (
     <States>
       <Stack space={3}>
-        <Text color="burnt-orange">{selected}</Text>
+        <Text color='burnt-orange'>{selected}</Text>
 
         {EXAMPLES.map(value => (
           <RadioButton

package/src/components/RadioButton/RadioButton.tsx

@@ -36,16 +36,16 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
       <input
         ref={inputRef}
         tabIndex={-1}
-        className="RadioButton__input"
-        type="radio"
-        role="radio"
+        className='RadioButton__input'
+        type='radio'
+        role='radio'
         checked={checked}
         value={value}
         disabled={disabled}
         {...rest}
       />
       {children && (
-        <span className="RadioButton__label" tabIndex={-1}>
+        <span className='RadioButton__label' tabIndex={-1}>
           {children}
         </span>
       )}

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -9,7 +9,7 @@ export default { title: 'Components/SearchInput' };
 export const Default = () => (
   <States<SearchInputProps> states={[{}, { value: 'prada' }, { autoFocus: true }]}>
     <SearchInput
-      placeholder="Search"
+      placeholder='Search'
       onChange={action('onChange')}
       onChangeValue={action('onChangeValue')}
     />
@@ -34,7 +34,7 @@ export const DropdownExample = () => {
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <SearchInput placeholder="Search" onChangeValue={setQuery} value={query} autoFocus />
+      <SearchInput placeholder='Search' onChangeValue={setQuery} value={query} autoFocus />
 
       {query && (
         <Text style={{ border: '1px solid gray', marginTop: '-1px', padding: '1rem' }}>

package/src/components/SearchInput/SearchInput.test.tsx

@@ -6,7 +6,7 @@ import { SearchInput } from './SearchInput';
 
 describe('SearchInput', () => {
   it('clears the input when the button is clicked', async () => {
-    render(<SearchInput value="Hello" />);
+    render(<SearchInput value='Hello' />);
 
     expect(screen.getByRole('textbox')).toHaveValue('Hello');
 

package/src/components/SearchInput/SearchInput.tsx

@@ -50,12 +50,12 @@ export const SearchInput: React.FC<SearchInputProps> = ({
 
   return (
     <div className={classNames('SearchInput', className)}>
-      <div className="SearchInput__icon">
+      <div className='SearchInput__icon'>
         <SearchIcon />
       </div>
 
       <TextInput
-        className="SearchInput__input"
+        className='SearchInput__input'
         onChange={handleChange}
         value={controlledValue}
         ref={ref}
@@ -63,7 +63,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
       />
 
       {controlledValue && (
-        <Clickable className="SearchInput__clear" onClick={handleClick} type="reset">
+        <Clickable className='SearchInput__clear' onClick={handleClick} type='reset'>
           <ExitIcon />
         </Clickable>
       )}

package/src/components/Select/MultiSelect.tsx

@@ -85,16 +85,16 @@ export const MultiSelect: React.FC<Props> = ({
       ref={selectRef}
       {...rest}
     >
-      <Clickable className="MultiSelect__search" disabled={disabled} onClick={handleToggle}>
-        <div className="MultiSelect__selected-items">
+      <Clickable className='MultiSelect__search' disabled={disabled} onClick={handleToggle}>
+        <div className='MultiSelect__selected-items'>
           {values.map((value, index) => (
-            <span className="MultiSelect__selected-item" key={index}>
-              <span className="MultiSelect__selected-value">
+            <span className='MultiSelect__selected-item' key={index}>
+              <span className='MultiSelect__selected-value'>
                 {options.find(option => option.value === value)?.label || value}
               </span>
               <ExitIcon
                 style={{ width: '8px', height: '8px', position: 'relative' }}
-                className="MultiSelect__exit"
+                className='MultiSelect__exit'
                 onClick={() => handleRemove(value)}
               />
             </span>