feat: adds octuple spinner component (#114)

EightfoldAI · May 12, 2022 · 702931d · 702931d
1 parent 362dc1b
commit 702931d
Show file tree

Hide file tree

Showing 11 changed files with 261 additions and 6 deletions.
diff --git a/src/__snapshots__/storybook.test.js.snap b/src/__snapshots__/storybook.test.js.snap
@@ -3828,6 +3828,50 @@ exports[`Storyshots ConfigProvider Theming 1`] = `
       5
     </p>
   </div>
+  <br />
+  <br />
+  <span
+    aria-hidden={false}
+    className="spinner iconWrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "48px",
+          "width": "48px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <style>
+        @keyframes spin { to { transform: rotate(360deg) } }
+      </style>
+      <g
+        style={
+          Object {
+            "animation": "spin linear 0.8s infinite",
+            "transformOrigin": "center",
+          }
+        }
+      >
+        <path
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+        <rect
+          fill="transparent"
+          height="24"
+          width="24"
+        />
+      </g>
+    </svg>
+  </span>
 </div>
 `;
 
@@ -10579,6 +10623,149 @@ exports[`Storyshots Snackbar Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Spinner Default 1`] = `
+Array [
+  <h1>
+    Spinner
+  </h1>,
+  <p>
+    Small
+  </p>,
+  <span
+    aria-hidden={false}
+    className="spinner iconWrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "30px",
+          "width": "30px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <style>
+        @keyframes spin { to { transform: rotate(360deg) } }
+      </style>
+      <g
+        style={
+          Object {
+            "animation": "spin linear 0.8s infinite",
+            "transformOrigin": "center",
+          }
+        }
+      >
+        <path
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+        <rect
+          fill="transparent"
+          height="24"
+          width="24"
+        />
+      </g>
+    </svg>
+  </span>,
+  <p>
+    Default
+  </p>,
+  <span
+    aria-hidden={false}
+    className="spinner iconWrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "48px",
+          "width": "48px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <style>
+        @keyframes spin { to { transform: rotate(360deg) } }
+      </style>
+      <g
+        style={
+          Object {
+            "animation": "spin linear 0.8s infinite",
+            "transformOrigin": "center",
+          }
+        }
+      >
+        <path
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+        <rect
+          fill="transparent"
+          height="24"
+          width="24"
+        />
+      </g>
+    </svg>
+  </span>,
+  <p>
+    Large
+  </p>,
+  <span
+    aria-hidden={false}
+    className="spinner iconWrapper"
+    role="presentation"
+  >
+    <svg
+      role="presentation"
+      style={
+        Object {
+          "height": "64px",
+          "width": "64px",
+        }
+      }
+      viewBox="0 0 24 24"
+    >
+      <style>
+        @keyframes spin { to { transform: rotate(360deg) } }
+      </style>
+      <g
+        style={
+          Object {
+            "animation": "spin linear 0.8s infinite",
+            "transformOrigin": "center",
+          }
+        }
+      >
+        <path
+          d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
+          style={
+            Object {
+              "fill": "currentColor",
+            }
+          }
+        />
+        <rect
+          fill="transparent"
+          height="24"
+          width="24"
+        />
+      </g>
+    </svg>
+  </span>,
+]
+`;
+
 exports[`Storyshots Tabs Default 1`] = `
 Array [
   <p>

diff --git a/src/components/ConfigProvider/ConfigProvider.stories.tsx b/src/components/ConfigProvider/ConfigProvider.stories.tsx
@@ -10,6 +10,7 @@ import { IconName } from '../Icon';
 import { CompactPicker } from 'react-color';
 import { ConfigProvider, OcThemeNames, useConfig } from './';
 import { MatchScore } from '../MatchScore';
+import { Spinner } from '../Spinner';
 
 export default {
     title: 'ConfigProvider',
@@ -193,6 +194,9 @@ const ThemedComponents = () => {
             <br />
             <br />
             <MatchScore score={3} />
+            <br />
+            <br />
+            <Spinner />
         </>
     );
 };

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -19,6 +19,7 @@ export const Icon: FC<IconProps> = ({
     spin,
     title,
     vertical,
+    'data-test-id': dataTestId,
 }) => {
     const iconClassNames: string = mergeClasses([
         classNames,
@@ -27,6 +28,7 @@ export const Icon: FC<IconProps> = ({
 
     return (
         <span
+            data-test-id={dataTestId}
             aria-hidden={ariaHidden}
             className={iconClassNames}
             id={id}

diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts
@@ -1,5 +1,6 @@
 import { IconName } from './mdi';
 import { IconProps as MdiIconProps } from '@mdi/react/dist/IconProps';
+import { OcBaseProps } from '../OcBase';
 
 export enum IconSize {
     Large = '24px',
@@ -8,7 +9,7 @@ export enum IconSize {
     XSmall = '14px',
 }
 
-export interface IconProps extends MdiIconProps {
+export interface IconProps extends OcBaseProps<HTMLSpanElement>, MdiIconProps {
     /**
      * The icon svg path name.
      */
@@ -18,10 +19,6 @@ export interface IconProps extends MdiIconProps {
      * @default false
      */
     ariaHidden?: boolean;
-    /**
-     * The icon class names.
-     */
-    classNames?: string;
     /**
      * The icon color.
      */
@@ -53,7 +50,7 @@ export interface IconProps extends MdiIconProps {
      * The icon size.
      * @default IconSize.Medium
      */
-    size?: IconSize;
+    size?: IconSize | string;
     /**
      * The icon spin animation timer in milliseconds, seconds.
      * @default false

diff --git a/src/components/Icon/mdi.ts b/src/components/Icon/mdi.ts
@@ -235,6 +235,7 @@ export enum IconName {
     mdiLightningBoltOutline = 'M11 9.47V11H14.76L13 14.53V13H9.24L11 9.47M13 1L6 15H11V23L18 9H13V1Z',
     mdiLink = 'M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z',
     mdiLinkVariant = 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z',
+    mdiLoading = 'M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z',
     mdiLock = 'M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z',
     mdiLockOpen = 'M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,0 14,15A2,2 0 0,0 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17Z',
     mdiLockOpenOutline = 'M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,1 10,15A2,2 0 0,1 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17Z',

diff --git a/src/components/Spinner/Spinner.stories.tsx b/src/components/Spinner/Spinner.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Spinner, SpinnerSize } from './';
+
+export default {
+    title: 'Spinner',
+    component: Spinner,
+};
+
+export const Default = () => (
+    <>
+        <h1>Spinner</h1>
+        <p>Small</p>
+        <Spinner size={SpinnerSize.Small} />
+        <p>Default</p>
+        <Spinner />
+        <p>Large</p>
+        <Spinner size={SpinnerSize.Large} />
+    </>
+);
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import { SpinnerProps, SpinnerSize } from './Spinner.types';
+import { Icon, IconName } from '../Icon';
+import { mergeClasses } from '../../shared/utilities';
+
+import styles from './spinner.module.scss';
+
+export const Spinner: FC<SpinnerProps> = ({
+    size = SpinnerSize.Default,
+    classNames,
+    ...rest
+}) => (
+    <Icon
+        {...rest}
+        classNames={mergeClasses([styles.spinner, classNames])}
+        spin={0.8}
+        size={size}
+        path={IconName.mdiLoading}
+    />
+);
diff --git a/src/components/Spinner/Spinner.types.ts b/src/components/Spinner/Spinner.types.ts
@@ -0,0 +1,15 @@
+import { OcBaseProps } from '../OcBase';
+
+export enum SpinnerSize {
+    Large = '64px',
+    Default = '48px',
+    Small = '30px',
+}
+
+export interface SpinnerProps extends OcBaseProps<HTMLElement> {
+    /**
+     * Size of the spinner
+     * @default SpinnerSize.Default
+     */
+    size?: SpinnerSize | string;
+}
diff --git a/src/components/Spinner/index.ts b/src/components/Spinner/index.ts
@@ -0,0 +1,2 @@
+export * from './Spinner';
+export * from './Spinner.types';
diff --git a/src/components/Spinner/spinner.module.scss b/src/components/Spinner/spinner.module.scss
@@ -0,0 +1,4 @@
+.spinner {
+    color: var(--primary-color);
+    width: fit-content;
+}
diff --git a/src/octuple.ts b/src/octuple.ts
@@ -45,6 +45,8 @@ import { InfoBar, InfoBarType } from './components/InfoBar';
 
 import { SnackbarContainer, Snackbar, snack } from './components/Snackbar';
 
+import { Spinner, SpinnerSize } from './components/Spinner';
+
 import { Tabs, Tab, TabVariant } from './components/Tabs';
 
 import { Tooltip, TooltipTheme } from './components/Tooltip';
@@ -102,6 +104,8 @@ export {
     snack,
     Snackbar,
     SnackbarContainer,
+    Spinner,
+    SpinnerSize,
     Tabs,
     Tab,
     TabVariant,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './Spinner';
		export * from './Spinner.types';