docs(uui-checkbox): Indeterminate checkbox story (#860)

* Update story for checkbox indeterminate state

* Adjust functions

* Remove key

* Adjust updating values

* Update checked state

* docs: add a container element to trigger state between checkboxes

* docs: use the same UUIBooleanInputEvent as the checkbox element does

* docs: use correct import path

* docs: fix type error

* docs: add description to the story

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: bjarnef

packages/uui-checkbox/lib/uui-checkbox-indeterminate.example.ts

@@ -0,0 +1,88 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { UUIBooleanInputEvent } from '@umbraco-ui/uui-boolean-input/lib';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import '@umbraco-ui/uui-checkbox/lib';
+
+export type Option = {
+  value: string;
+  label: string;
+};
+
+@defineElement('uui-checkbox-indeterminate-example')
+export default class UUICheckboxIndeterminateExample extends LitElement {
+  @property()
+  label = 'Indeterminate';
+
+  @property({ attribute: false })
+  parent!: Option;
+
+  @property({ type: Array, attribute: false })
+  options!: Option[];
+
+  @property({ type: Array })
+  values: string[] = [];
+
+  private _handleParentChange(e: Event) {
+    e.stopPropagation();
+    const parent = e.target as HTMLInputElement;
+    let values: string[] = [];
+    if (parent.checked) {
+      values = this.options.map(option => option.value);
+    }
+    this.values = values;
+    this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));
+  }
+
+  private _handleOptionChange(e: Event) {
+    e.stopPropagation();
+    const option = e.target as HTMLInputElement;
+    let values = this.values;
+    if (option.checked) {
+      values = values.concat(option.value);
+    } else {
+      values = values.filter(v => v !== option.value);
+    }
+    this.values = values;
+    this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));
+  }
+
+  render() {
+    return html`
+      <fieldset name="Indeterminate" style="border: none;">
+        <legend>${this.label}</legend>
+        <uui-checkbox
+          value=${this.parent.value}
+          label=${this.parent.label}
+          @change=${this._handleParentChange}
+          name="indeterminate-parent"
+          ?indeterminate=${this.values.length > 0 &&
+          this.values.length < this.options.length}
+          ?checked=${this.values.length === this.options.length}></uui-checkbox>
+        <ul style="list-style: none; margin: 0;">
+          ${repeat(
+            this.options,
+            option => option.value,
+            option =>
+              html` <li>
+                <uui-checkbox
+                  value=${option.value}
+                  label=${option.label}
+                  @change=${this._handleOptionChange}
+                  name="indeterminate-child"
+                  ?checked=${this.values.includes(option.value)}></uui-checkbox>
+              </li>`,
+          )}
+        </ul>
+      </fieldset>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-checkbox-indeterminate-example': UUICheckboxIndeterminateExample;
+  }
+}

packages/uui-checkbox/lib/uui-checkbox.story.ts

@@ -1,6 +1,8 @@
 import '.';
+import './uui-checkbox-indeterminate.example.js';
 
 import { StoryFn } from '@storybook/web-components';
+import { withActions } from '@storybook/addon-actions/decorator';
 import { html } from 'lit';
 import readme from '../README.md?raw';
 
@@ -31,7 +33,11 @@ export default {
         code: `<uui-checkbox label="Checkbox"></uui-checkbox>`,
       },
     },
+    actions: {
+      handles: ['change'],
+    },
   },
+  decorators: [withActions as any],
 };
 
 export const AAAOverview: StoryFn = props => html`
@@ -177,15 +183,46 @@ Readonly.parameters = {
   },
 };
 
-export const Indeterminate: Story = props => html`
-  <uui-checkbox
-    ?indeterminate=${props.indeterminate}
-    .label=${'Indeterminate'}></uui-checkbox>
-`;
-Indeterminate.args = { indeterminate: true };
+export const Indeterminate: StoryFn = props => {
+  return html` <uui-checkbox-indeterminate-example
+    .label=${props.label}
+    .parent=${props.parent}
+    .options=${props.options}
+    .values=${props.values}></uui-checkbox-indeterminate-example>`;
+};
+
+Indeterminate.args = {
+  label: 'Choose your favorite fruits',
+  values: ['mango'],
+  parent: {
+    label: 'All fruits',
+    value: 'all',
+  },
+  options: [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Banana',
+      value: 'banana',
+    },
+    {
+      label: 'Mango',
+      value: 'mango',
+    },
+  ],
+};
+
 Indeterminate.parameters = {
-  controls: { include: ['indeterminate'] },
+  controls: {
+    include: ['values', 'parent', 'options', 'label'],
+  },
   docs: {
+    description: {
+      story:
+        'A checkbox group with an indeterminate state. See the `UUICheckboxIndeterminateExample` component for more details.',
+    },
     source: {
       code: `<uui-checkbox label="Indeterminate" indeterminate></uui-checkbox>`,
     },