feat: busy state for button

nl-design-system · Sep 19, 2021 · 48c5a17 · 48c5a17
1 parent b69b853
commit 48c5a17
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 6 deletions.
diff --git a/components/button/bem.js b/components/button/bem.js
@@ -7,15 +7,24 @@
 import clsx from 'clsx';
 
 export const defaultArgs = {
+  busy: false,
   disabled: false,
   focus: false,
   hover: false,
   textContent: '',
   type: 'button',
 };
 
-export const Button = ({ textContent = '', focus = false, hover = false, disabled = false, type = 'button' }) =>
+export const Button = ({
+  textContent = '',
+  busy = false,
+  focus = false,
+  hover = false,
+  disabled = false,
+  type = 'button',
+}) =>
   `<button class="${clsx('utrecht-button', {
+    'utrecht-button--busy': busy,
     'utrecht-button--hover': hover,
     'utrecht-button--focus': focus,
     'utrecht-button--disabled': disabled,

diff --git a/components/button/bem.scss b/components/button/bem.scss
@@ -35,6 +35,10 @@
   cursor: var(--utrecht-action-submit-cursor);
 }
 
+.utrecht-button--busy {
+  cursor: var(--utrecht-action-busy-cursor);
+}
+
 .utrecht-button:disabled,
 .utrecht-button--disabled {
   background-color: var(--utrecht-button-disabled-background-color);

diff --git a/components/button/bem.stories.mdx b/components/button/bem.stories.mdx
@@ -16,6 +16,10 @@ import "./bem.scss";
       description: "Button text",
       control: "text",
     },
+    busy: {
+      description: "Busy",
+      control: "boolean",
+    },
     focus: {
       description: "Focus",
       control: "boolean",
@@ -106,3 +110,22 @@ Styling via the `.utrecht-button--disabled` class name:
     {Button.bind({})}
   </Story>
 </Canvas>
+
+### Busy
+
+Styling via the `.utrecht-button--busy` class name:
+
+<Canvas>
+  <Story
+    name="Button busy"
+    args={{
+      busy: true,
+      textContent: "Read more...",
+    }}
+    parameters={{
+      percy: { skip: true },
+    }}
+  >
+    {Button.bind({})}
+  </Story>
+</Canvas>
diff --git a/components/button/html.js b/components/button/html.js
@@ -4,10 +4,13 @@
  */
 
 export const defaultArgs = {
+  busy: false,
   disabled: false,
   textContent: '',
   type: 'button',
 };
 
-export const Button = ({ disabled = false, textContent = '', type = 'button' }) =>
-  `<button type="${type || 'button'}"${disabled ? ' disabled' : ''}>${textContent}</button>`;
+export const Button = ({ busy = false, disabled = false, textContent = '', type = 'button' }) =>
+  `<button type="${type || 'button'}"${busy ? ' aria-busy="true"' : ''}${
+    disabled ? ' disabled' : ''
+  }>${textContent}</button>`;
diff --git a/components/button/html.scss b/components/button/html.scss
@@ -14,6 +14,10 @@
   @extend .utrecht-button--submit;
 }
 
+.utrecht-html button[aria-busy="true"] {
+  @extend .utrecht-button--busy;
+}
+
 .utrecht-html button:hover {
   @extend .utrecht-button--hover;
 }

diff --git a/components/button/html.stories.mdx b/components/button/html.stories.mdx
@@ -14,6 +14,10 @@ import { defaultArgs, Button } from "./html";
       description: "Content of the button",
       control: "text",
     },
+    disabled: {
+      description: "Busy",
+      control: "boolean",
+    },
     disabled: {
       description: "Disabled",
       control: "boolean",
@@ -53,6 +57,10 @@ Styling via the `<button>` element:
 
 <ArgsTable story="Button" />
 
+## States
+
+### Disabled
+
 Button with `disabled` state:
 
 <Canvas>
@@ -66,3 +74,43 @@ Button with `disabled` state:
     {Button.bind({})}
   </Story>
 </Canvas>
+
+### Busy
+
+Button with `aria-busy` state:
+
+<Canvas>
+  <Story
+    name="Busy button"
+    args={{
+      busy: true,
+      textContent: "The Quick Brown Fox Jumps Over The Lazy Dog",
+    }}
+    parameters={{
+      percy: { skip: true },
+    }}
+  >
+    {Button.bind({})}
+  </Story>
+</Canvas>
+
+## Types
+
+### Submit
+
+Button with `submit` type:
+
+<Canvas>
+  <Story
+    name="Submit button"
+    args={{
+      textContent: "The Quick Brown Fox Jumps Over The Lazy Dog",
+      type: "submit",
+    }}
+    parameters={{
+      percy: { skip: true },
+    }}
+  >
+    {Button.bind({})}
+  </Story>
+</Canvas>
diff --git a/components/button/stencil.stories.mdx b/components/button/stencil.stories.mdx
@@ -8,8 +8,17 @@ import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
 
 import "./bem.scss";
 
-export const Template = ({ disabled = false, textContent = "", type = "" }) =>
-  `<utrecht-button${disabled ? " disabled" : ""}${type ? ` type="${type}"` : ""}>${textContent}</utrecht-button>`;
+export const defaultArgs = {
+  busy: false,
+  disabled: false,
+  textContent: "",
+  type: "",
+};
+
+export const Template = ({ busy = false, disabled = false, textContent = "", type = "" }) =>
+  `<utrecht-button${busy ? ' busy="true"' : ""}${disabled ? " disabled" : ""}${
+    type ? ` type="${type}"` : ""
+  }>${textContent}</utrecht-button>`;
 
 <Meta
   title="Web Component/Button"
@@ -18,6 +27,10 @@ export const Template = ({ disabled = false, textContent = "", type = "" }) =>
       description: "Button text",
       control: "text",
     },
+    busy: {
+      description: "Busy",
+      control: "boolean",
+    },
     disabled: {
       description: "Disabled",
       control: "boolean",
@@ -46,7 +59,7 @@ export const Template = ({ disabled = false, textContent = "", type = "" }) =>
   <Story
     name="Button"
     args={{
-      disabled: false,
+      ...defaultArgs,
       textContent: "Read more...",
       type: "",
     }}
@@ -61,10 +74,32 @@ export const Template = ({ disabled = false, textContent = "", type = "" }) =>
   <Story
     name="Submit button"
     args={{
+      ...defaultArgs,
       textContent: "Send",
       type: "submit",
     }}
   >
     {Template.bind({})}
   </Story>
 </Canvas>
+
+## State
+
+### Busy
+
+<Canvas>
+  <Story
+    name="Busy button"
+    args={{
+      ...defaultArgs,
+      busy: true,
+      textContent: "Send",
+      type: "submit",
+    }}
+    parameters={{
+      percy: { skip: true },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
diff --git a/components/button/stencil.tsx b/components/button/stencil.tsx
@@ -7,6 +7,7 @@ import clsx from "clsx";
   shadow: true,
 })
 export class Button {
+  @Prop() busy: boolean;
   @Prop() disabled: boolean;
   @Event({ cancelable: true }) utrechtRequestReset: EventEmitter;
   @Event({ cancelable: true }) utrechtRequestSubmit: EventEmitter;
@@ -40,9 +41,11 @@ export class Button {
       <button
         class={clsx(
           "utrecht-button",
+          this.busy && "utrecht-button--busy",
           this.disabled && "utrecht-button--disabled",
           this.type === "submit" && "utrecht-button--submit"
         )}
+        aria-busy={this.busy ? "true" : null}
         disabled={this.disabled}
         type={this.type || "button"}
         onClick={handleClick}

diff --git a/components/common/action.tokens.json b/components/common/action.tokens.json
@@ -1,6 +1,14 @@
 {
   "utrecht": {
     "action": {
+      "busy": {
+        "cursor": {
+          "css": {
+            "syntax": "*",
+            "inherits": true
+          }
+        }
+      },
       "disabled": {
         "cursor": {
           "css": {

diff --git a/proprietary/design-tokens/src/common/utrecht/action.tokens.json b/proprietary/design-tokens/src/common/utrecht/action.tokens.json
@@ -1,6 +1,7 @@
 {
   "utrecht": {
     "action": {
+      "busy": { "cursor": { "value": "wait" } },
       "disabled": { "cursor": { "value": "not-allowed" } },
       "submit": { "cursor": { "value": "pointer" } }
     }