@moda/om 20.0.0 → 20.2.0

package/src/components/LoadingItemsPinkGreen/LoadingItems4.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItems4: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#F04E98'
+    />
+    <path d='M12.5109 4.9286L22.0054 0.696629L21.9727 9.23312L12.5109 4.9286Z' fill='#006F62' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#006F62' />
+    <rect x='3.18619' y='4.93651' width='18.8016' height='16.0635' fill='#006F62' />
+  </svg>
+);

package/src/components/LoadingItemsPinkGreen/LoadingItems5.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LoadingItemsProps } from './LoadingItems';
+
+export const LoadingItems5: React.FC<LoadingItemsProps> = () => (
+  <svg width='211' height='21' viewBox='0 0 211 21' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M85.9155 10.414C85.9155 16.1661 81.2537 20.828 75.5015 20.828C69.7494 20.828 65.0875 16.1661 65.0875 10.414C65.0875 4.66186 69.7494 0 75.5015 0C81.2537 0 85.9155 4.66186 85.9155 10.414Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M145.023 20.828V10.0906V7.66566V7.65423C145.017 3.44429 141.874 0 138.032 0C134.192 0 131.047 3.44429 131.043 7.65423V7.66566V10.0906V20.828H145.023Z'
+      fill='#006F62'
+    />
+    <path
+      fillRule='evenodd'
+      clipRule='evenodd'
+      d='M200.468 0L190.056 20.828H210.884L200.468 0Z'
+      fill='#006F62'
+    />
+    <path d='M12.5109 4.9286L22.0054 0.696629L21.9727 9.23312L12.5109 4.9286Z' fill='#006F62' />
+    <path d='M12.6203 4.95946L3.19629 9.27653L3.15215 0.740086L12.6203 4.95946Z' fill='#006F62' />
+    <rect x='3.18616' y='4.93651' width='18.8016' height='16.0635' fill='#006F62' />
+  </svg>
+);

package/src/components/LoadingItemsPinkGreen/index.ts

@@ -0,0 +1,5 @@
+export { LoadingItems1 } from './LoadingItems1';
+export { LoadingItems2 } from './LoadingItems2';
+export { LoadingItems3 } from './LoadingItems3';
+export { LoadingItems4 } from './LoadingItems4';
+export { LoadingItems5 } from './LoadingItems5';

package/src/components/LoadingShapesLavenderBlue/LoadingShapesLavenderBlue.scss

@@ -0,0 +1,9 @@
+@use '~@moda/om';
+
+.LoadingShapesLavenderBlue__item {
+  display: block;
+}
+
+.LoadingShapesLavenderBlue__item--current {
+  display: none;
+}

package/src/components/LoadingShapesLavenderBlue/LoadingShapesLavenderBlue.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { States } from 'storybook-states';
+import { LoadingShapesLavenderBlue } from './LoadingShapesLavenderBlue';
+
+export default { title: 'Components/LoadingShapesLavenderBlue' };
+
+export const Default = () => (
+  <States>
+    <LoadingShapesLavenderBlue />
+  </States>
+);

package/src/components/LoadingShapesLavenderBlue/LoadingShapesLavenderBlue.tsx

@@ -0,0 +1,48 @@
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { useCursor } from 'use-cursor';
+import {
+  LoadingItemsLavenderBlue1,
+  LoadingItemsLavenderBlue2,
+  LoadingItemsLavenderBlue3,
+  LoadingItemsLavenderBlue4,
+  LoadingItemsLavenderBlue5
+} from '../LoadingItemsLavenderBlue';
+
+import './LoadingShapesLavenderBlue.scss';
+
+const INTERVAL_MS = 250;
+
+export const LoadingShapesLavenderBlue = () => {
+  const items = [
+    LoadingItemsLavenderBlue1,
+    LoadingItemsLavenderBlue2,
+    LoadingItemsLavenderBlue3,
+    LoadingItemsLavenderBlue4,
+    LoadingItemsLavenderBlue5
+  ];
+  const { index, handleNext } = useCursor({ max: items.length });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      handleNext();
+    }, INTERVAL_MS);
+
+    return () => clearInterval(interval);
+  }, [handleNext]);
+
+  return (
+    <div>
+      {items.map((Item, itemIndex) => (
+        <div
+          className={classNames('LoadingShapesLavenderBlue__item', {
+            'LoadingShapesLavenderBlue__item--current': itemIndex !== index
+          })}
+          key={itemIndex}
+        >
+          <Item />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/LoadingShapesLavenderBlue/index.ts

@@ -0,0 +1 @@
+export * from './LoadingShapesLavenderBlue';

package/src/components/LoadingShapesPinkGreen/LoadingShapesPinkGreen.scss

@@ -0,0 +1,9 @@
+@use '~@moda/om';
+
+.LoadingShapesPinkGreen__item {
+  display: block;
+}
+
+.LoadingShapesPinkGreen__item--current {
+  display: none;
+}

package/src/components/LoadingShapesPinkGreen/LoadingShapesPinkGreen.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { States } from 'storybook-states';
+import { LoadingShapesPinkGreen } from './LoadingShapesPinkGreen';
+
+export default { title: 'Components/LoadingShapesPinkGreen' };
+
+export const Default = () => (
+  <States>
+    <LoadingShapesPinkGreen />
+  </States>
+);

package/src/components/LoadingShapesPinkGreen/LoadingShapesPinkGreen.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import React, { useEffect } from 'react';
+import { useCursor } from 'use-cursor';
+import {
+  LoadingItems1,
+  LoadingItems2,
+  LoadingItems3,
+  LoadingItems4,
+  LoadingItems5
+} from '../LoadingItemsPinkGreen';
+
+import './LoadingShapesPinkGreen.scss';
+
+const INTERVAL_MS = 250;
+
+export const LoadingShapesPinkGreen = () => {
+  const items = [LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5];
+  const { index, handleNext } = useCursor({ max: items.length });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      handleNext();
+    }, INTERVAL_MS);
+
+    return () => clearInterval(interval);
+  }, [handleNext]);
+
+  return (
+    <div>
+      {items.map((Item, itemIndex) => (
+        <div
+          className={classNames('LoadingShapesPinkGreen__item', {
+            'LoadingShapesPinkGreen__item--current': itemIndex !== index
+          })}
+          key={itemIndex}
+        >
+          <Item />
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/LoadingShapesPinkGreen/index.ts

@@ -0,0 +1 @@
+export * from './LoadingShapesPinkGreen';

package/src/components/Select/Select.scss

@@ -110,9 +110,9 @@
     border-radius: 50%;
     border-width: 1px;
     display: inline-block;
+    margin-left: om.space(1);
+    margin-right: om.space(1);
     height: om.space(4);
-    position: absolute;
-    right: om.space(7);
     transform: translateY(25%);
     width: om.space(4);
   }

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

@@ -45,12 +45,25 @@ export const Default = () => (
 export const Colored = () => (
   <States<Partial<SelectProps>>>
     <Select
-      label='Sort by'
-      disabled
+      label='Color'
       colorSwatch='strawberry'
-      options={OPTIONS}
+      options={[
+        { value: '🍓', label: 'Strawberry', colorSwatch: 'strawberry' },
+        {
+          value: 'ink',
+          label: 'Ink',
+          disabled: true,
+          colorSwatch: 'ink'
+        },
+        {
+          value: 'money-good',
+          label: 'Money Good',
+          disabled: true,
+          colorSwatch: 'money-good'
+        }
+      ]}
       onChange={action('onChange')}
-      value='high'
+      value='🍓'
     />
   </States>
 );

package/src/components/Select/Select.tsx

@@ -11,7 +11,12 @@ import { useSelect } from './useSelect';
 
 import './Select.scss';
 
-export type SelectableOption = { value: string; label: string; disabled?: boolean };
+export type SelectableOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  colorSwatch?: TextColor;
+};
 
 export type SelectProps = Omit<
   React.HTMLAttributes<HTMLDivElement>,
@@ -131,8 +136,6 @@ export const Select: React.FC<SelectProps> = ({
             hasValue={focused != null || selected != null}
           />
 
-          {(focused ?? selected)?.label}
-
           {colorSwatch && (
             <div
               className='Select__selected-color'
@@ -140,6 +143,8 @@ export const Select: React.FC<SelectProps> = ({
             />
           )}
 
+          {(focused ?? selected)?.label}
+
           <span
             className={classNames('Select__icon', { 'Select__icon--shifted': shiftIconLeftwards })}
           >

package/src/components/Select/SelectOption.scss

@@ -26,4 +26,17 @@
       background-color: om.color('snow');
     }
   }
+
+  &__color-swatch {
+    border-color: om.color(ink);
+    border-style: solid;
+    border-radius: 50%;
+    border-width: 1px;
+    display: inline-block;
+    margin-left: om.space(1);
+    margin-right: om.space(1);
+    height: om.space(4);
+    transform: translateY(25%);
+    width: om.space(4);
+  }
 }

package/src/components/Select/SelectOption.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import { colors } from '@moda/tokens';
 import { SelectableOption } from './Select';
+
 import './SelectOption.scss';
 
 export type SelectOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> & {
@@ -16,6 +18,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   active,
   selected,
   option,
+  option: { disabled, colorSwatch, label },
   onClick,
   className,
   dataTestId
@@ -25,9 +28,10 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLLIElement>) => {
       event.preventDefault();
-      if (!option.disabled) onClick(option);
+
+      if (!disabled) onClick(option);
     },
-    [onClick, option]
+    [disabled, onClick, option]
   );
 
   useEffect(() => {
@@ -42,15 +46,22 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
       className={classNames('SelectOption', className, {
         'SelectOption--active': active,
         'SelectOption--selected': selected,
-        'SelectOption--disabled': option.disabled
+        'SelectOption--disabled': disabled
       })}
       onClick={handleClick}
-      data-test-id={dataTestId ? `${dataTestId}--${option.label.replace(' ', '-')}` : undefined}
-      aria-label={option.label}
+      data-test-id={dataTestId ? `${dataTestId}--${label.replace(' ', '-')}` : undefined}
+      aria-label={label}
       aria-selected={selected}
       role='option'
     >
-      {option.label}
+      {colorSwatch && (
+        <div
+          className='SelectOption__color-swatch'
+          style={{ backgroundColor: colors.all[colorSwatch] }}
+        />
+      )}
+
+      {label}
     </li>
   );
 };

package/src/components/Select/SelectOptions.tsx

@@ -6,6 +6,7 @@ import { Text } from '../Text';
 import { SearchInput } from '../SearchInput';
 import { SelectOption } from './SelectOption';
 import { SelectableOption } from './Select';
+
 import './SelectOptions.scss';
 
 export type SelectOptionsProps = Omit<
@@ -70,6 +71,7 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
           onClear={() => setSearchPhrase('')}
         />
       )}
+
       <ul
         className='SelectOptions__list'
         tabIndex={-1}
@@ -88,11 +90,10 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
             active={activeOption?.value === option.value}
             selected={selectedOption?.value === option.value}
             onClick={onSelect}
-          >
-            {option.label}
-          </SelectOption>
+          />
         ))}
       </ul>
+
       {options.length === 0 && (
         <Text className='SelectOptions__none' color='cement'>
           Nothing found

package/src/components/index.ts

@@ -19,6 +19,10 @@ export * from './Label';
 export * from './Loading';
 export * from './LoadingBalls';
 export * from './LoadingShapes';
+export * from './LoadingShapesPinkGreen';
+export * from './LoadingItemsPinkGreen';
+export * from './LoadingShapesLavenderBlue';
+export * from './LoadingItemsLavenderBlue';
 export * from './Modal';
 export * from './ModalOverlay';
 export * from './NavigationPreventer';