feat: add checkbox and radio button types to list view item

Author: scriptcoded

packages/storybook/src/stories/list-view.stories.tsx

@@ -67,3 +67,43 @@ export const WithSections = meta.story({
     </div>
   ),
 });
+
+export const WithRadioButtons = meta.story({
+  args: {},
+  render: (args) => (
+    <div style={{ maxWidth: "20rem", width: "100vw" }}>
+      <ScoutListView {...args}>
+        <ScoutListViewItem
+          type="radio"
+          primary="First item"
+          value="first"
+          name="list-view-radio-group"
+        />
+        <ScoutListViewItem
+          type="radio"
+          primary="Second item"
+          value="second"
+          name="list-view-radio-group"
+        />
+        <ScoutListViewItem
+          type="radio"
+          primary="Third item"
+          value="third"
+          name="list-view-radio-group"
+        />
+      </ScoutListView>
+    </div>
+  ),
+});
+
+export const WithCheckboxes = meta.story({
+  render: (args) => (
+    <div style={{ maxWidth: "20rem", width: "100vw" }}>
+      <ScoutListView {...args}>
+        <ScoutListViewItem type="checkbox" primary="First item" />
+        <ScoutListViewItem type="checkbox" primary="Second item" />
+        <ScoutListViewItem type="checkbox" primary="Third item" />
+      </ScoutListView>
+    </div>
+  ),
+});

packages/ui-webc/src/components.d.ts

@@ -166,6 +166,7 @@ export namespace Components {
     interface ScoutListViewItem {
         "href"?: string;
         "icon"?: string;
+        "name"?: string;
         "primary"?: string;
         "rel"?: string;
         "secondary"?: string;
@@ -174,6 +175,7 @@ export namespace Components {
           * @default "button"
          */
         "type": ItemType1;
+        "value"?: string;
     }
     interface ScoutListViewSubheader {
         /**
@@ -720,6 +722,7 @@ declare namespace LocalJSX {
     interface ScoutListViewItem {
         "href"?: string;
         "icon"?: string;
+        "name"?: string;
         "onScoutClick"?: (event: ScoutListViewItemCustomEvent<void>) => void;
         "primary"?: string;
         "rel"?: string;
@@ -729,6 +732,7 @@ declare namespace LocalJSX {
           * @default "button"
          */
         "type"?: ItemType1;
+        "value"?: string;
     }
     interface ScoutListViewSubheader {
         /**

packages/ui-webc/src/components/checkbox/readme.md

@@ -23,6 +23,19 @@
 | `scoutChecked` |                                                 | `CustomEvent<{ checked: boolean; element: HTMLInputElement; }>` |
 
 
+## Dependencies
+
+### Used by
+
+ - [scout-list-view-item](../list-view-item)
+
+### Graph
+```mermaid
+graph TD;
+  scout-list-view-item --> scout-checkbox
+  style scout-checkbox fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/ui-webc/src/components/list-view-item/list-view-item.tsx

@@ -7,7 +7,7 @@ import {
   Prop,
 } from "@stencil/core";
 
-export type ItemType = "button" | "link";
+export type ItemType = "button" | "link" | "radio" | "checkbox";
 
 @Component({
   tag: "scout-list-view-item",
@@ -26,10 +26,18 @@ export class ScoutListViewItem {
   @Prop() target?: string;
   @Prop() rel?: string;
 
+  @Prop() name?: string;
+  @Prop() value?: string;
+
   @Event() scoutClick: EventEmitter<void>;
 
   render() {
-    const Tag = this.type === "link" ? "a" : "button";
+    const Tag =
+      this.type === "link"
+        ? "a"
+        : this.type === "radio" || this.type === "checkbox"
+          ? "label"
+          : "button";
 
     const linkProps =
       this.type === "link"
@@ -76,18 +84,13 @@ export class ScoutListViewItem {
   }
 
   private getSuffix() {
-    // if (this.type === "link") {
-    //   return (
-    //     <div class="suffix-icon">
-    //       <span
-    //         class="icon"
-    //         style={{
-    //           "--icon": `url(${ChevronRightIcon})`,
-    //         }}
-    //       />
-    //     </div>
-    //   );
-    // }
+    if (this.type === "radio") {
+      return <scout-radio-button name={this.name} value={this.value} />;
+    }
+
+    if (this.type === "checkbox") {
+      return <scout-checkbox name={this.name} value={this.value} />;
+    }
 
     return null;
   }

packages/ui-webc/src/components/list-view-item/readme.md

@@ -5,15 +5,17 @@
 
 ## Properties
 
-| Property    | Attribute   | Description | Type                 | Default     |
-| ----------- | ----------- | ----------- | -------------------- | ----------- |
-| `href`      | `href`      |             | `string`             | `undefined` |
-| `icon`      | `icon`      |             | `string`             | `undefined` |
-| `primary`   | `primary`   |             | `string`             | `undefined` |
-| `rel`       | `rel`       |             | `string`             | `undefined` |
-| `secondary` | `secondary` |             | `string`             | `undefined` |
-| `target`    | `target`    |             | `string`             | `undefined` |
-| `type`      | `type`      |             | `"button" \| "link"` | `"button"`  |
+| Property    | Attribute   | Description | Type                                          | Default     |
+| ----------- | ----------- | ----------- | --------------------------------------------- | ----------- |
+| `href`      | `href`      |             | `string`                                      | `undefined` |
+| `icon`      | `icon`      |             | `string`                                      | `undefined` |
+| `name`      | `name`      |             | `string`                                      | `undefined` |
+| `primary`   | `primary`   |             | `string`                                      | `undefined` |
+| `rel`       | `rel`       |             | `string`                                      | `undefined` |
+| `secondary` | `secondary` |             | `string`                                      | `undefined` |
+| `target`    | `target`    |             | `string`                                      | `undefined` |
+| `type`      | `type`      |             | `"button" \| "checkbox" \| "link" \| "radio"` | `"button"`  |
+| `value`     | `value`     |             | `string`                                      | `undefined` |
 
 
 ## Events
@@ -23,6 +25,21 @@
 | `scoutClick` |             | `CustomEvent<void>` |
 
 
+## Dependencies
+
+### Depends on
+
+- [scout-radio-button](../radio-button)
+- [scout-checkbox](../checkbox)
+
+### Graph
+```mermaid
+graph TD;
+  scout-list-view-item --> scout-radio-button
+  scout-list-view-item --> scout-checkbox
+  style scout-list-view-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/ui-webc/src/components/list-view/list-view.tsx

@@ -1,4 +1,4 @@
-import { Component, Host, h } from "@stencil/core";
+import { Component, Element, Host, h, Listen } from "@stencil/core";
 
 @Component({
   tag: "scout-list-view",
@@ -8,6 +8,39 @@ import { Component, Host, h } from "@stencil/core";
   },
 })
 export class ScoutListView {
+  @Element() el: HTMLElement;
+
+  @Listen("scoutChecked")
+  onScoutChecked(
+    event: CustomEvent<{ checked: boolean; element: HTMLInputElement }>,
+  ) {
+    const { checked, element } = event.detail;
+
+    if (element.type !== "radio" || !element.name || !checked) {
+      return;
+    }
+
+    const listItems = this.el.querySelectorAll("scout-list-view-item");
+
+    const otherRadios: HTMLInputElement[] = [];
+
+    listItems.forEach((item) => {
+      const radios = item.shadowRoot.querySelectorAll<HTMLInputElement>(
+        `input[type="radio"][name="${element.name}"]`,
+      );
+
+      radios.forEach((r) => {
+        if (r !== element) {
+          otherRadios.push(r);
+        }
+      });
+    });
+
+    for (const radio of otherRadios) {
+      radio.checked = false;
+    }
+  }
+
   render() {
     return (
       <Host role="list">

packages/ui-webc/src/components/radio-button/readme.md

@@ -23,6 +23,19 @@
 | `scoutChecked` |                                                 | `CustomEvent<{ checked: boolean; element: HTMLInputElement; }>` |
 
 
+## Dependencies
+
+### Used by
+
+ - [scout-list-view-item](../list-view-item)
+
+### Graph
+```mermaid
+graph TD;
+  scout-list-view-item --> scout-radio-button
+  style scout-radio-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*