@moda/om 16.2.0 → 17.0.0

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

@@ -13,6 +13,9 @@ export type PopoverProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 
 export const POPOVER_MOUSEOUT_DELAY_MS = 200;
+const THREE_QUARTER_SECOND_DELAY = 750;
+const ONE_SECOND_DELAY = 1000;
+const FIVE_SECOND_DELAY = 5000;
 
 enum Mode {
   Opening = 'opening',
@@ -80,7 +83,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.Closing) return;
 
-    const closingTimeout = setTimeout(() => setMode(Mode.Closed), 750);
+    const closingTimeout = setTimeout(() => setMode(Mode.Closed), THREE_QUARTER_SECOND_DELAY);
 
     return () => clearTimeout(closingTimeout);
   }, [mode]);
@@ -88,7 +91,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.AutoOpening) return;
 
-    const openingTimeout = setTimeout(() => setMode(Mode.AutoOpen), 1000);
+    const openingTimeout = setTimeout(() => setMode(Mode.AutoOpen), ONE_SECOND_DELAY);
 
     return () => clearTimeout(openingTimeout);
   }, [mode]);
@@ -96,7 +99,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.Opening) return;
 
-    const openingTimeout = setTimeout(() => setMode(Mode.Open), 750);
+    const openingTimeout = setTimeout(() => setMode(Mode.Open), THREE_QUARTER_SECOND_DELAY);
 
     return () => clearTimeout(openingTimeout);
   }, [mode]);
@@ -104,7 +107,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.AutoOpen) return;
 
-    const stayingTimeout = setTimeout(handleClose, 5000);
+    const stayingTimeout = setTimeout(handleClose, FIVE_SECOND_DELAY);
 
     return () => clearTimeout(stayingTimeout);
   }, [handleClose, mode, smoothTransitioning]);
@@ -125,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', {
@@ -134,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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { States } from 'storybook-states';
 import { Text } from '../Text';
-import { RadioButton, RadioButtonProps } from './RadioButton';
 import { Stack } from '../Stack';
+import { RadioButton, RadioButtonProps } from './RadioButton';
 
 export default { title: 'Components/RadioButton' };
 
@@ -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

@@ -4,11 +4,11 @@ import { uniq } from 'ramda';
 import ChevronDownIcon from '@moda/icons/chevron-down-12';
 import ChevronUpIcon from '@moda/icons/chevron-up-12';
 import ExitIcon from '@moda/icons/exit-16';
-import { SelectableOption } from '.';
+import { Clickable } from '../Clickable';
 import { SelectOptions } from './SelectOptions';
 import { useSelect } from './useSelect';
+import { SelectableOption } from '.';
 import './MultiSelect.scss';
-import { Clickable } from '../Clickable';
 
 type Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'value' | 'onChange'> & {
   defaultValue?: string[] | undefined;
@@ -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>

package/src/components/Select/Select.stories.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
+import { useCallback } from 'react';
+import { Input } from '../Field';
 import { Select, SelectProps } from './Select';
 import { MultiSelect } from './MultiSelect';
-import { Input } from '../Field';
-import { useCallback } from 'react';
 
 export default { title: 'Components/Select' };
 
@@ -38,7 +38,7 @@ export const Default = () => (
       { idRef: '7', label: undefined, placeholder: 'Placeholder' }
     ]}
   >
-    <Select label='Sort by' options={OPTIONS} onChange={action('onChange')} />
+    <Select label="Sort by" options={OPTIONS} onChange={action('onChange')} />
   </States>
 );
 
@@ -47,15 +47,16 @@ export const ChangingValue = () => {
 
   const values = OPTIONS.map(({ value }) => value);
   const value = values[cursor % values.length];
+  const HALF_SECOND_INTERVAL = 500;
 
   useEffect(() => {
     const interval = setInterval(() => {
       setCursor(prevCursor => prevCursor + 1);
-    }, 500);
+    }, HALF_SECOND_INTERVAL);
     return () => clearInterval(interval);
   }, []);
 
-  return <Select label='Sort by' options={OPTIONS} onChange={action('onChange')} value={value} />;
+  return <Select label="Sort by" options={OPTIONS} onChange={action('onChange')} value={value} />;
 };
 
 const COUNTRIES = [
@@ -259,16 +260,16 @@ const COUNTRIES = [
 
 export const Long = () => (
   <Select
-    label='Choose country'
+    label="Choose country"
     options={COUNTRIES.map(country => ({ label: country, value: country }))}
   />
 );
 
 export const AutoFill = () => (
   <>
-    <Input label='Address*' name='addressLine1' />
-    <Input label='City' name='city' />
-    <Input label='Choose country' name='country'>
+    <Input label="Address*" name="addressLine1" />
+    <Input label="City" name="city" />
+    <Input label="Choose country" name="country">
       <Select
         options={COUNTRIES.map(country => ({ label: country, value: country }))}
         allowAutoFill
@@ -279,7 +280,7 @@ export const AutoFill = () => (
 
 export const InsideInputComponent = () => (
   <Input error>
-    <Select options={OPTIONS}></Select>
+    <Select options={OPTIONS} />
   </Input>
 );
 
@@ -312,7 +313,7 @@ export const MultiSelectWithDefaultsComponent = () => {
     <MultiSelect
       onChange={handleSetItems}
       value={selectedItems}
-      placeholder='United States'
+      placeholder="United States"
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />
@@ -322,7 +323,7 @@ export const MultiSelectWithDefaultsComponent = () => {
 export const MultiSelectUncontrolledComponent = () => {
   return (
     <MultiSelect
-      placeholder='United States'
+      placeholder="United States"
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />
@@ -332,8 +333,8 @@ export const MultiSelectUncontrolledComponent = () => {
 export const MultiSelectUncontrolledSearchComponent = () => {
   return (
     <MultiSelect
-      searchable={true}
-      placeholder='United States'
+      searchable
+      placeholder="United States"
       defaultValue={['Canada', 'Albania', 'Greece']}
       options={COUNTRIES.map(country => ({ label: country, value: country }))}
     />

package/src/components/Select/Select.test.tsx

@@ -13,7 +13,7 @@ describe('Select', () => {
 
   it('renders correctly', () => {
     const { container } = render(
-      <Select idRef='1' name='name-1' label='Sort by' options={options} />
+      <Select idRef="1" name="name-1" label="Sort by" options={options} />
     );
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
@@ -22,7 +22,7 @@ describe('Select', () => {
 
   it('expands when clicked', async () => {
     const { container } = render(
-      <Select idRef='1' name='name-1' label='Sort by' options={options} />
+      <Select idRef="1" name="name-1" label="Sort by" options={options} />
     );
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
@@ -36,9 +36,9 @@ describe('Select', () => {
       <Select
         defaultValue={undefined}
         disabled
-        idRef='1'
-        name='name-1'
-        label='Sort by'
+        idRef="1"
+        name="name-1"
+        label="Sort by"
         options={options}
       />
     );
@@ -54,9 +54,9 @@ describe('Select', () => {
     render(
       <Select
         defaultValue={undefined}
-        idRef='1'
-        label='Sort by'
-        name='name-1'
+        idRef="1"
+        label="Sort by"
+        name="name-1"
         options={options}
         onChange={onChange}
       />
@@ -73,9 +73,9 @@ describe('Select', () => {
     render(
       <Select
         defaultValue={undefined}
-        idRef='1'
-        label='Sort by'
-        name='name-1'
+        idRef="1"
+        label="Sort by"
+        name="name-1"
         options={options}
         onChange={onChange}
       />
@@ -89,7 +89,7 @@ describe('Select', () => {
 
   it('renders correctly with ":" between label and value if value is not undefined', async () => {
     const { container } = render(
-      <Select idRef='1' name='name-1' label='Sort by' options={options} />
+      <Select idRef="1" name="name-1" label="Sort by" options={options} />
     );
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
@@ -101,7 +101,7 @@ describe('Select', () => {
   });
 
   it('renders correctly when there is no label', async () => {
-    const { container } = render(<Select idRef='1' name='name-1' options={options} />);
+    const { container } = render(<Select idRef="1" name="name-1" options={options} />);
     const button = screen.getByRole('button', { name: 'Select' });
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');

package/src/components/Select/Select.tsx

@@ -29,6 +29,7 @@ export type SelectProps = Omit<
   searchable?: boolean;
   shiftIconLeftwards?: boolean;
   value?: string | undefined;
+  dataTestId?: string;
 };
 
 export const Select: React.FC<SelectProps> = ({
@@ -48,6 +49,7 @@ export const Select: React.FC<SelectProps> = ({
   searchable,
   shiftIconLeftwards = false,
   value,
+  dataTestId,
   ...rest
 }) => {
   const { state, dispatch, Mode, selectRef } = useSelect({ value, defaultValue });
@@ -103,19 +105,20 @@ export const Select: React.FC<SelectProps> = ({
         {...rest}
       >
         {!allowAutoFill && name && (
-          <input id={idRef} name={name} type='hidden' value={state.value} />
+          <input id={idRef} name={name} type="hidden" value={state.value} />
         )}
 
         <Clickable
           id={`Select__value--${idRef}`}
-          className='Select__value'
+          className="Select__value"
           disabled={disabled}
           onClick={handleToggle}
-          aria-haspopup='listbox'
+          data-test-id={dataTestId}
+          aria-haspopup="listbox"
           aria-expanded={state.mode === Mode.Open}
           aria-labelledby={`Select__label--${idRef} Select__value--${idRef}`}
-          type='button'
-          title='Select'
+          type="button"
+          title="Select"
         >
           <SelectLabel
             idRef={idRef}
@@ -139,6 +142,7 @@ export const Select: React.FC<SelectProps> = ({
               'Select__options--up': dropDirection === 'up',
               'Select__options--down': dropDirection === 'down'
             })}
+            dataTestId={dataTestId}
             searchable={searchable}
             options={options}
             onSelect={handleSelect}
@@ -150,11 +154,11 @@ export const Select: React.FC<SelectProps> = ({
 
       {allowAutoFill && (
         <input
-          className='Select__hidden-field'
+          className="Select__hidden-field"
           name={name}
           onChange={({ target }) => handleAutofill(target.value)}
           value={value}
-          aria-hidden='true'
+          aria-hidden="true"
           tabIndex={-1}
         />
       )}

package/src/components/Select/SelectOption.tsx

@@ -9,6 +9,7 @@ export type SelectOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onCli
   selected: boolean;
   option: SelectableOption;
   onClick: (option: SelectableOption) => void;
+  dataTestId?: string;
 };
 
 export const SelectOption: React.FC<SelectOptionProps> = ({
@@ -16,7 +17,8 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   selected,
   option,
   onClick,
-  className
+  className,
+  dataTestId
 }) => {
   const ref = useRef<HTMLLIElement>(null);
 
@@ -43,9 +45,10 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
         'SelectOption--disabled': option.disabled
       })}
       onClick={handleClick}
+      data-test-id={dataTestId ? `${dataTestId}--${option.label.replace(' ', '-')}` : undefined}
       aria-label={option.label}
       aria-selected={selected}
-      role='option'
+      role="option"
     >
       {option.label}
     </li>

package/src/components/Select/SelectOptions.tsx

@@ -19,6 +19,7 @@ export type SelectOptionsProps = Omit<
   selectedOption?: SelectableOption | undefined;
   onFocus?(option: SelectableOption): void;
   onSelect(option: SelectableOption): void;
+  dataTestId?: string;
 };
 
 export const SelectOptions: React.FC<SelectOptionsProps> = ({
@@ -30,6 +31,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
   onSelect,
   onFocus,
   className,
+  dataTestId,
   ...rest
 }) => {
   const [searchPhrase, setSearchPhrase] = useState('');
@@ -61,17 +63,17 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
     <div className={classNames('SelectOptions', className)}>
       {searchable && (
         <SearchInput
-          className='SelectOptions__search'
-          placeholder='Search'
+          className="SelectOptions__search"
+          placeholder="Search"
           value={searchPhrase}
           onChange={setSearchPhrase}
           onClear={() => setSearchPhrase('')}
         />
       )}
       <ul
-        className='SelectOptions__list'
+        className="SelectOptions__list"
         tabIndex={-1}
-        role='listbox'
+        role="listbox"
         ref={ref}
         aria-labelledby={`Select__label--${idRef}`}
         aria-activedescendant={`SelectOption--${activeOption?.value}-${idRef}`}
@@ -82,6 +84,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
             id={`SelectOption--${option.value}-${idRef}`}
             key={option.value}
             option={option}
+            dataTestId={dataTestId}
             active={activeOption?.value === option.value}
             selected={selectedOption?.value === option.value}
             onClick={onSelect}
@@ -91,7 +94,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
         ))}
       </ul>
       {options.length === 0 && (
-        <Text className='SelectOptions__none' color='cement'>
+        <Text className="SelectOptions__none" color="cement">
           Nothing found
         </Text>
       )}