feat: add action to list view item

Author: scriptcoded

.changeset/neat-crabs-make.md

@@ -0,0 +1,5 @@
+---
+"@scouterna/ui-webc": minor
+---
+
+Add action to list view item.

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

@@ -7,8 +7,12 @@ import {
   Prop,
 } from "@stencil/core";
 
+import ChevronRightIcon from "@tabler/icons/outline/chevron-right.svg";
+
 export type ItemType = "button" | "link" | "radio" | "checkbox";
 
+export type ActionType = "chevron" | null;
+
 @Component({
   tag: "scout-list-view-item",
   styleUrl: "list-view-item.css",
@@ -22,6 +26,13 @@ export class ScoutListViewItem {
   @Prop() secondary?: string;
   @Prop() type: ItemType = "button";
 
+  /**
+   * The action to display on the right side of the item. For example, a
+   * chevron. This is purely visual and does not affect the behavior of the item
+   * in any way. Not visible when the type is "radio" or "checkbox".
+   */
+  @Prop() action: ActionType = null;
+
   @Prop() href?: string;
   @Prop() target?: string;
   @Prop() rel?: string;
@@ -109,6 +120,14 @@ export class ScoutListViewItem {
       );
     }
 
+    if (this.action === "chevron") {
+      return (
+        <div class="suffix-icon">
+          <div class="icon" style={{ "--icon": `url(${ChevronRightIcon})` }} />
+        </div>
+      );
+    }
+
     return null;
   }
 }

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

@@ -5,19 +5,20 @@
 
 ## Properties
 
-| Property    | Attribute   | Description | Type                                          | Default     |
-| ----------- | ----------- | ----------- | --------------------------------------------- | ----------- |
-| `checked`   | `checked`   |             | `boolean`                                     | `undefined` |
-| `disabled`  | `disabled`  |             | `boolean`                                     | `undefined` |
-| `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` |
+| Property    | Attribute   | Description                                                                                                                                                                                                     | Type                                          | Default     |
+| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- |
+| `action`    | `action`    | The action to display on the right side of the item. For example, a chevron. This is purely visual and does not affect the behavior of the item in any way. Not visible when the type is "radio" or "checkbox". | `"chevron"`                                   | `null`      |
+| `checked`   | `checked`   |                                                                                                                                                                                                                 | `boolean`                                     | `undefined` |
+| `disabled`  | `disabled`  |                                                                                                                                                                                                                 | `boolean`                                     | `undefined` |
+| `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