feat: expanded and pressed state for web component button

nl-design-system · Oct 16, 2023 · 78ec679 · 78ec679
1 parent a8c0ba8
commit 78ec679
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 15 deletions.
diff --git a/packages/storybook-web-component/src/Button.stories.tsx b/packages/storybook-web-component/src/Button.stories.tsx
@@ -13,10 +13,25 @@ interface ButtonStoryProps {
   appearance?: string;
   busy?: boolean;
   disabled?: boolean;
+  expanded?: boolean | string;
+  pressed?: boolean | string;
   type?: string;
 }
-const ButtonStory = ({ appearance, busy, children, disabled, type }: PropsWithChildren<ButtonStoryProps>) => (
-  <UtrechtButton appearance={appearance} busy={busy || null} disabled={disabled || null} type={type || null}>
+const ButtonStory = ({
+  appearance,
+  busy,
+  children,
+  disabled,
+  type,
+  ...restProps
+}: PropsWithChildren<ButtonStoryProps>) => (
+  <UtrechtButton
+    appearance={appearance}
+    busy={busy || null}
+    disabled={disabled || null}
+    type={type || null}
+    {...restProps}
+  >
     {children}
   </UtrechtButton>
 );
@@ -43,6 +58,24 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    expanded: {
+      description: 'Expanded',
+      control: 'select',
+      options: {
+        '': undefined,
+        false: 'false',
+        true: 'true',
+      },
+    },
+    pressed: {
+      description: 'Pressed',
+      control: 'select',
+      options: {
+        '': undefined,
+        false: 'false',
+        true: 'true',
+      },
+    },
     type: {
       description: 'Type',
       type: {
@@ -98,4 +131,32 @@ export const Busy: Story = {
   },
 };
 
+export const ToggleButton: Story = {
+  args: {
+    children: 'Open menu',
+    pressed: false,
+  },
+};
+
+export const ToggleButtonPressed: Story = {
+  args: {
+    children: 'Open menu',
+    pressed: true,
+  },
+};
+
+export const ExpandButton: Story = {
+  args: {
+    children: 'Open section',
+    expanded: false,
+  },
+};
+
+export const CollapseButton: Story = {
+  args: {
+    children: 'Close section',
+    expanded: true,
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/web-component-library-stencil/src/components.d.ts b/packages/web-component-library-stencil/src/components.d.ts
@@ -34,6 +34,7 @@ export namespace Components {
         "appearance": string;
         "busy": boolean;
         "disabled": boolean;
+        "expanded": boolean | string | 'false' | 'true';
         "form": string;
         "formAction": string;
         "formEnctype": string;
@@ -43,6 +44,7 @@ export namespace Components {
         "name": string;
         "popoverTarget": string;
         "popoverTargetAction": string;
+        "pressed": boolean | string | 'false' | 'true';
         "type": string;
         "value": string;
     }
@@ -108,6 +110,9 @@ export namespace Components {
     }
     interface UtrechtEmphasis {
     }
+    interface UtrechtFlexWrapFallback {
+        "flexTarget"?: string;
+    }
     interface UtrechtForm {
         "action"?: string;
         "autocomplete"?: string;
@@ -720,8 +725,6 @@ export namespace Components {
     }
     interface UtrechtUrlData {
     }
-    interface UtrechtWrapAlternative {
-    }
 }
 export interface UtrechtButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -936,6 +939,12 @@ declare global {
         prototype: HTMLUtrechtEmphasisElement;
         new (): HTMLUtrechtEmphasisElement;
     };
+    interface HTMLUtrechtFlexWrapFallbackElement extends Components.UtrechtFlexWrapFallback, HTMLStencilElement {
+    }
+    var HTMLUtrechtFlexWrapFallbackElement: {
+        prototype: HTMLUtrechtFlexWrapFallbackElement;
+        new (): HTMLUtrechtFlexWrapFallbackElement;
+    };
     interface HTMLUtrechtFormElement extends Components.UtrechtForm, HTMLStencilElement {
     }
     var HTMLUtrechtFormElement: {
@@ -2488,12 +2497,6 @@ declare global {
         prototype: HTMLUtrechtUrlDataElement;
         new (): HTMLUtrechtUrlDataElement;
     };
-    interface HTMLUtrechtWrapAlternativeElement extends Components.UtrechtWrapAlternative, HTMLStencilElement {
-    }
-    var HTMLUtrechtWrapAlternativeElement: {
-        prototype: HTMLUtrechtWrapAlternativeElement;
-        new (): HTMLUtrechtWrapAlternativeElement;
-    };
     interface HTMLElementTagNameMap {
         "utrecht-alert": HTMLUtrechtAlertElement;
         "utrecht-article": HTMLUtrechtArticleElement;
@@ -2525,6 +2528,7 @@ declare global {
         "utrecht-eherkenning-logo": HTMLUtrechtEherkenningLogoElement;
         "utrecht-eidas-logo": HTMLUtrechtEidasLogoElement;
         "utrecht-emphasis": HTMLUtrechtEmphasisElement;
+        "utrecht-flex-wrap-fallback": HTMLUtrechtFlexWrapFallbackElement;
         "utrecht-form": HTMLUtrechtFormElement;
         "utrecht-form-field-checkbox": HTMLUtrechtFormFieldCheckboxElement;
         "utrecht-form-field-description": HTMLUtrechtFormFieldDescriptionElement;
@@ -2781,7 +2785,6 @@ declare global {
         "utrecht-textarea": HTMLUtrechtTextareaElement;
         "utrecht-textbox": HTMLUtrechtTextboxElement;
         "utrecht-url-data": HTMLUtrechtUrlDataElement;
-        "utrecht-wrap-alternative": HTMLUtrechtWrapAlternativeElement;
     }
 }
 declare namespace LocalJSX {
@@ -2813,6 +2816,7 @@ declare namespace LocalJSX {
         "appearance"?: string;
         "busy"?: boolean;
         "disabled"?: boolean;
+        "expanded"?: boolean | string | 'false' | 'true';
         "form"?: string;
         "formAction"?: string;
         "formEnctype"?: string;
@@ -2824,6 +2828,7 @@ declare namespace LocalJSX {
         "onUtrechtRequestSubmit"?: (event: UtrechtButtonCustomEvent<any>) => void;
         "popoverTarget"?: string;
         "popoverTargetAction"?: string;
+        "pressed"?: boolean | string | 'false' | 'true';
         "type"?: string;
         "value"?: string;
     }
@@ -2891,6 +2896,9 @@ declare namespace LocalJSX {
     }
     interface UtrechtEmphasis {
     }
+    interface UtrechtFlexWrapFallback {
+        "flexTarget"?: string;
+    }
     interface UtrechtForm {
         "action"?: string;
         "autocomplete"?: string;
@@ -3527,8 +3535,6 @@ declare namespace LocalJSX {
     }
     interface UtrechtUrlData {
     }
-    interface UtrechtWrapAlternative {
-    }
     interface IntrinsicElements {
         "utrecht-alert": UtrechtAlert;
         "utrecht-article": UtrechtArticle;
@@ -3560,6 +3566,7 @@ declare namespace LocalJSX {
         "utrecht-eherkenning-logo": UtrechtEherkenningLogo;
         "utrecht-eidas-logo": UtrechtEidasLogo;
         "utrecht-emphasis": UtrechtEmphasis;
+        "utrecht-flex-wrap-fallback": UtrechtFlexWrapFallback;
         "utrecht-form": UtrechtForm;
         "utrecht-form-field-checkbox": UtrechtFormFieldCheckbox;
         "utrecht-form-field-description": UtrechtFormFieldDescription;
@@ -3816,7 +3823,6 @@ declare namespace LocalJSX {
         "utrecht-textarea": UtrechtTextarea;
         "utrecht-textbox": UtrechtTextbox;
         "utrecht-url-data": UtrechtUrlData;
-        "utrecht-wrap-alternative": UtrechtWrapAlternative;
     }
 }
 export { LocalJSX as JSX };
@@ -3853,6 +3859,7 @@ declare module "@stencil/core" {
             "utrecht-eherkenning-logo": LocalJSX.UtrechtEherkenningLogo & JSXBase.HTMLAttributes<HTMLUtrechtEherkenningLogoElement>;
             "utrecht-eidas-logo": LocalJSX.UtrechtEidasLogo & JSXBase.HTMLAttributes<HTMLUtrechtEidasLogoElement>;
             "utrecht-emphasis": LocalJSX.UtrechtEmphasis & JSXBase.HTMLAttributes<HTMLUtrechtEmphasisElement>;
+            "utrecht-flex-wrap-fallback": LocalJSX.UtrechtFlexWrapFallback & JSXBase.HTMLAttributes<HTMLUtrechtFlexWrapFallbackElement>;
             "utrecht-form": LocalJSX.UtrechtForm & JSXBase.HTMLAttributes<HTMLUtrechtFormElement>;
             "utrecht-form-field-checkbox": LocalJSX.UtrechtFormFieldCheckbox & JSXBase.HTMLAttributes<HTMLUtrechtFormFieldCheckboxElement>;
             "utrecht-form-field-description": LocalJSX.UtrechtFormFieldDescription & JSXBase.HTMLAttributes<HTMLUtrechtFormFieldDescriptionElement>;
@@ -4125,7 +4132,6 @@ declare module "@stencil/core" {
             "utrecht-textarea": LocalJSX.UtrechtTextarea & JSXBase.HTMLAttributes<HTMLUtrechtTextareaElement>;
             "utrecht-textbox": LocalJSX.UtrechtTextbox & JSXBase.HTMLAttributes<HTMLUtrechtTextboxElement>;
             "utrecht-url-data": LocalJSX.UtrechtUrlData & JSXBase.HTMLAttributes<HTMLUtrechtUrlDataElement>;
-            "utrecht-wrap-alternative": LocalJSX.UtrechtWrapAlternative & JSXBase.HTMLAttributes<HTMLUtrechtWrapAlternativeElement>;
         }
     }
 }
diff --git a/packages/web-component-library-stencil/src/components/button.tsx b/packages/web-component-library-stencil/src/components/button.tsx
@@ -10,6 +10,8 @@ export class Button {
   @Prop() appearance: string;
   @Prop() busy: boolean;
   @Prop() disabled: boolean;
+  @Prop() expanded: boolean | string | 'false' | 'true';
+  @Prop() pressed: boolean | string | 'false' | 'true';
   @Prop({ attribute: 'readonly', reflect: true }) form: string;
   @Prop({ attribute: 'formaction', reflect: true }) formAction: string;
   @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;
@@ -55,6 +57,8 @@ export class Button {
 
     const {
       hostElement,
+      expanded,
+      pressed,
       name,
       value,
       form,
@@ -124,12 +128,19 @@ export class Button {
           'utrecht-button',
           this.busy && 'utrecht-button--busy',
           this.disabled && 'utrecht-button--disabled',
+          pressed && 'utrecht-button--pressed',
           this.type === 'submit' && 'utrecht-button--submit',
           this.appearance === 'primary-action-button' && 'utrecht-button--primary-action',
           this.appearance === 'secondary-action-button' && 'utrecht-button--secondary-action',
           this.appearance === 'subtle-button' && 'utrecht-button--subtle',
         )}
         aria-busy={this.busy ? 'true' : null}
+        aria-expanded={
+          typeof this.expanded === 'boolean' ? String(expanded) : typeof expanded === 'string' ? expanded : null
+        }
+        aria-pressed={
+          typeof this.pressed === 'boolean' ? String(pressed) : typeof pressed === 'string' ? pressed : null
+        }
         disabled={this.disabled}
         type={this.type || 'button'}
         onClick={handleClick}