chore: loading state for Button (#67)

* feat: add loading spinner to Button

* feat: provide loading spinner & ARIA message for Button

* chore: simplify screen reader markup

src/actions/Button.scss

@@ -219,4 +219,43 @@
     outline: var(--seeds-focus-ring-outline);
     box-shadow: var(--seeds-focus-ring-box-shadow);
   }
+
+  // loading indicator
+  &::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 1.5em;
+    height: 1.5em;
+    top: calc(50% - .75em);
+    left: calc(50% - .75em);
+    border: 3px solid var(--seeds-color-on-inverse);
+    border-left-color: transparent;
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 250ms;
+  }
+
+  &[data-loading="true"] {
+    position: relative;
+    color: transparent;
+
+    &::after {
+      opacity: 1;
+      animation: spinning-rotation 1s linear infinite;
+    }
+
+    .btnSubmit-text {
+      visibility: hidden;
+    }
+  }
 }
+
+@keyframes spinning-rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/actions/Button.tsx

@@ -49,6 +49,8 @@ export interface ButtonProps {
   ariaHidden?: boolean
   /** Accessible label if button doesn't contain text content */
   ariaLabel?: string
+  /** Show loading spinner and set ARIA live message while disabling clicks */
+  loadingMessage?: string | null
   /** Element ID */
   id?: string
   /** Additional CSS classes */
@@ -77,11 +79,13 @@ const setupButtonProps = (props: ButtonProps) => {
     updatedProps: {
       "data-variant": props.variant || "primary",
       "data-size": props.size || "md",
+      "data-loading": props.loadingMessage ? "true" : undefined,
       id: props.id,
       className: classNames.join(" "),
       target: props.newWindowTarget ? "_blank" : undefined,
       "aria-label": props.ariaLabel,
       "aria-hidden": props.ariaHidden,
+      "aria-disabled": props.loadingMessage ? "true" : undefined,
       tabIndex: props.ariaHidden ? -1 : null,
     },
     inner: {
@@ -132,10 +136,11 @@ const Button = (props: ButtonProps) => {
       <ButtonElement
         type={props.type || "button"}
         disabled={props.disabled}
-        onClick={props.onClick}
+        onClick={props.loadingMessage ? (event) => event.preventDefault : props.onClick}
         {...updatedProps}
       >
         {buttonInner}
+        <span className="seeds-screen-reader-only" aria-live="assertive">{props.loadingMessage}</span>
       </ButtonElement>
     )
   }

src/actions/__stories__/Button.stories.tsx

@@ -189,3 +189,11 @@ export const textButtons = () => (
 
   </>
 )
+
+export const loadingButton = () => {
+  const [loading, setLoading] = React.useState<null | string>(null)
+  return <Button loadingMessage={loading} onClick={() => {
+    setLoading("Saving form")
+    setTimeout(() => setLoading(null), 3000)
+  }}>Click to Spin</Button>
+}