feat(list-item): add unavailable property (#10377)

**Related Issue:** #5664

## Summary

- add `unavailable` property to `list-item`.
- add e2e test
- add entry in story
- update demo

Author: driskull

packages/calcite-components/src/components.d.ts

@@ -3312,6 +3312,10 @@ export namespace Components {
           * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
          */
         "setSize": number;
+        /**
+          * When `true`, the component's content appears inactive.
+         */
+        "unavailable": boolean;
         /**
           * The component's value.
          */
@@ -11440,6 +11444,10 @@ declare namespace LocalJSX {
           * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
          */
         "setSize"?: number;
+        /**
+          * When `true`, the component's content appears inactive.
+         */
+        "unavailable"?: boolean;
         /**
           * The component's value.
          */

packages/calcite-components/src/components/list-item/list-item.e2e.ts

@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests";
+import { defaults, disabled, focusable, hidden, reflects, renders, slots } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
 
@@ -56,6 +56,19 @@ describe("calcite-list-item", () => {
         propertyName: "filterHidden",
         defaultValue: false,
       },
+      {
+        propertyName: "unavailable",
+        defaultValue: false,
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-list-item", [
+      {
+        propertyName: "unavailable",
+        value: true,
+      },
     ]);
   });
 
@@ -75,6 +88,20 @@ describe("calcite-list-item", () => {
     expect(await page.find(`calcite-list-item >>> .${CSS.containerHover}`)).not.toBeNull();
   });
 
+  it("adds unavailable class", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-list-item></calcite-list-item>`);
+    await page.waitForChanges();
+
+    expect(await page.find(`calcite-list-item >>> .${CSS.contentContainerUnavailable}`)).toBeNull();
+
+    const item = await page.find("calcite-list-item");
+    item.setProperty("unavailable", true);
+    await page.waitForChanges();
+
+    expect(await page.find(`calcite-list-item >>> .${CSS.contentContainerUnavailable}`)).not.toBeNull();
+  });
+
   it("renders dragHandle when property is true", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-list-item></calcite-list-item>`);

packages/calcite-components/src/components/list-item/list-item.scss

@@ -75,6 +75,10 @@
     p-0;
 }
 
+.content-container--unavailable {
+  @apply opacity-disabled;
+}
+
 tr,
 td {
   @apply focus-base;

packages/calcite-components/src/components/list-item/list-item.tsx

@@ -196,6 +196,11 @@ export class ListItem
     this.calciteInternalListItemSelect.emit();
   }
 
+  /**
+   * When `true`, the component's content appears inactive.
+   */
+  @Prop({ reflect: true }) unavailable = false;
+
   /**
    * The component's value.
    */
@@ -613,7 +618,7 @@ export class ListItem
   }
 
   renderContentContainer(): VNode {
-    const { description, label, selectionMode, hasCustomContent } = this;
+    const { description, label, selectionMode, hasCustomContent, unavailable } = this;
     const hasCenterContent = hasCustomContent || !!label || !!description;
     const content = [
       this.renderContentStart(),
@@ -627,6 +632,7 @@ export class ListItem
         aria-label={label}
         class={{
           [CSS.contentContainer]: true,
+          [CSS.contentContainerUnavailable]: unavailable,
           [CSS.contentContainerSelectable]: selectionMode !== "none",
           [CSS.contentContainerHasCenterContent]: hasCenterContent,
         }}

packages/calcite-components/src/components/list-item/resources.ts

@@ -7,6 +7,7 @@ export const CSS = {
   containerBorderSelected: "container--border-selected",
   containerBorderUnselected: "container--border-unselected",
   contentContainer: "content-container",
+  contentContainerUnavailable: "content-container--unavailable",
   contentContainerSelectable: "content-container--selectable",
   contentContainerHasCenterContent: "content-container--has-center-content",
   nestedContainer: "nested-container",

packages/calcite-components/src/components/list/list.stories.ts

@@ -90,6 +90,11 @@ export const simple = (args: ListStoryArgs): string => html`
       description="Vestibulum auctor dapibus neque.
     "
     ></calcite-list-item>
+    <calcite-list-item
+      unavailable
+      label="Vestibulum commodo felis quis tortor."
+      description="Vestibulum auctor dapibus neque."
+    ></calcite-list-item>
   </calcite-list>
 `;
 
@@ -286,6 +291,14 @@ export const startAndEndContentSlots = (): string =>
         <calcite-chip class="list-chip" icon="bell" scale="s">Halp!</calcite-chip>
       </div>
     </calcite-list-item>
+    <calcite-list-item unavailable>
+      <calcite-action slot="actions-end" icon="ellipsis"> </calcite-action>
+      <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
+      <span slot="content-start">Some value or something and a <b>thing</b>.</span>
+      <div slot="content-end" style="display: flex; justify-content: flex-end">
+        <calcite-chip class="list-chip" icon="bell" scale="s">Halp!</calcite-chip>
+      </div>
+    </calcite-list-item>
   </calcite-list> `;
 
 export const contentBottomSlots = (): string =>
@@ -299,6 +312,9 @@ export const contentBottomSlots = (): string =>
     <calcite-list-item label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
       <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
     </calcite-list-item>
+    <calcite-list-item unavailable label="Princess Bubblegum" description="Ruler of The Candy Kingdom">
+      <span slot="content-bottom">Some value or something and a <b>thing</b>.</span>
+    </calcite-list-item>
   </calcite-list> `;
 
 export const contentBottomSlotsNested = (): string =>

packages/calcite-components/src/demos/list.html

@@ -90,7 +90,14 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
                 --calcite-color-status-success
               ></calcite-icon>
             </calcite-list-item>
-            <calcite-list-item disabled label="test4" value="test4" description="hello world 4">
+            <calcite-list-item disabled label="test4" value="test4" description="hello world 4: disabled">
+              <calcite-icon
+                icon="compass"
+                slot="content-start"
+                style="color: var(--calcite-color-status-success)"
+              ></calcite-icon>
+            </calcite-list-item>
+            <calcite-list-item unavailable label="test4" value="test5" description="hello world 5: unavailable">
               <calcite-icon
                 icon="compass"
                 slot="content-start"