@ukic/web-components 3.0.0 → 3.1.0

package/dist/collection/components/ic-data-list/ic-data-list.stories.js

@@ -0,0 +1,493 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  heading: "Details",
+  size: "medium",
+  label: "Name",
+  rowSize: "default",
+  value: "Michael Johnson",
+  endCompSlot: "end-component",
+  theme: "inherit",
+  rowTheme: "inherit",
+};
+
+export default {
+  title: "Web Components/Data list",
+  component: "ic-data-list",
+};
+
+export const Default = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+      <ic-data-row label="Name" value="Michael Johnson"></ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995"></ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873"></ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov"></ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Default",
+};
+
+export const SlottedHeadingAndLabel = {
+  render: () =>
+    html`<ic-data-list>
+      <ic-typography variant="h3" slot="heading"
+        >Personal details</ic-typography
+      >
+      <ic-data-row value="Michael Johnson">
+        <ic-typography variant="subtitle-large" slot="label"
+          >Name</ic-typography
+        >
+      </ic-data-row>
+      <ic-data-row value="16 October 1995">
+        <ic-typography variant="subtitle-large" slot="label"
+          >Date of birth</ic-typography
+        >
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Slotted heading and label",
+};
+
+export const LongTextValues = {
+  render: () =>
+    html`<ic-data-list
+      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
+    >
+      <ic-data-row
+        label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+        value="Michael Johnson"
+      ></ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995"></ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873"></ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov"></ic-data-row>
+      <ic-data-row
+        label="Address"
+        value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+      ></ic-data-row>
+      <ic-data-row label="Second address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Long text values",
+};
+
+export const Small = {
+  render: () =>
+    html`<ic-data-list heading="Personal details" size="small">
+      <ic-data-row label="Name" value="Michael Johnson"></ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995"></ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873"></ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov"></ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Small",
+};
+
+export const WithLink = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+      <ic-data-row label="Name" value="Michael Johnson">
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995">
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873">
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov">
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+        <ic-link href="#" slot="end-component"> Edit </ic-link>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Link",
+};
+
+export const IconButton = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+      <ic-data-row label="Name" value="Michael Johnson">
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995">
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873">
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov">
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+        <ic-button variant="icon" aria-label="Edit" slot="end-component">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Icon button",
+};
+
+export const Adornment = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+      <ic-data-row label="Name" value="Michael Johnson">
+        <ic-status-tag
+          status="success"
+          label="confirmed"
+          variant="filled"
+          slot="end-component"
+        >
+        </ic-status-tag>
+      </ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995">
+        <ic-status-tag
+          status="warning"
+          label="in review"
+          variant="filled"
+          slot="end-component"
+        />
+      </ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873">
+        <ic-status-tag
+          status="warning"
+          label="in review"
+          variant="filled"
+          slot="end-component"
+        />
+      </ic-data-row>
+      <ic-data-row label="Email" value="mjohnson@coffee.gov">
+        <ic-status-tag
+          status="success"
+          label="confirmed"
+          variant="filled"
+          slot="end-component"
+        />
+      </ic-data-row>
+      <ic-data-row label="Address">
+        <ic-typography variant="body" slot="value">
+          383 Coffee Drive
+          <br />
+          London
+          <br />
+          SW7 988
+          <br />
+          United Kingdom
+        </ic-typography>
+        <ic-status-tag
+          label="not confirmed"
+          variant="filled"
+          slot="end-component"
+        />
+      </ic-data-row>
+    </ic-data-list>`,
+
+  name: "Adornment",
+};
+
+export const WithStatusTag = {
+  render: () =>
+    html` <ic-data-list heading="Personal details">
+      <ic-data-row label="Name"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+      <ic-data-row label="Date of birth"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+      <ic-data-row label="Telephone"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+      <ic-data-row label="Address"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+      <ic-data-row label="Email"
+        ><ic-status-tag
+          status="success"
+          label="approved"
+          variant="filled"
+          slot="value"
+      /></ic-data-row>
+    </ic-data-list>`,
+
+  name: "Status tag",
+};
+
+export const EditableExample = {
+  render: () =>
+    html`<ic-data-list heading="Personal details">
+        <ic-data-row label="Name">
+          <ic-text-field
+            slot="value"
+            label="Name"
+            value="Michael Johnson"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+        <ic-data-row label="Date of birth">
+          <ic-text-field
+            slot="value"
+            label="Date of birth"
+            value="16 October 1995"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+        <ic-data-row label="Telephone">
+          <ic-text-field
+            slot="value"
+            label="Telephone"
+            value="07449 7654873"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+        <ic-data-row label="Email">
+          <ic-text-field
+            slot="value"
+            label="Email"
+            value="mjohnson@coffee.gov"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+        <ic-data-row label="Address">
+          <ic-text-field
+            slot="value"
+            label="Address"
+            value="383 Coffee Drive, London, SW7 988, United Kingdom"
+            readonly
+            hide-label
+            full-width
+          />
+        </ic-data-row>
+      </ic-data-list>
+      <ic-button
+        onclick="
+        var textFields = document.querySelectorAll('ic-text-field');
+        for (var i=0; i < textFields.length; i++) {
+          textFields[i].setAttribute('readonly', '');
+        }"
+        style="margin-right: var(--ic-space-md);margin-top: var(--ic-space-lg);"
+      >
+        Confirm
+      </ic-button>
+      <ic-button
+        onclick="
+        var textFields = document.querySelectorAll('ic-text-field');
+        for (var i=0; i < textFields.length; i++) {
+          textFields[i].removeAttribute('readonly');
+        }"
+        variant="secondary"
+        style="margin-top: var(--ic-space-lg);"
+      >
+        Edit
+      </ic-button>`,
+
+  name: "Editable example",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-data-list
+      heading=${args.heading}
+      size=${args.size}
+      theme=${args.theme}
+    >
+      <ic-data-row
+        label=${args.label}
+        value=${args.value}
+        size=${args.rowSize}
+        theme=${args.rowTheme}
+      >
+        <ic-button variant="icon" aria-label="Edit" slot=${args.endCompSlot}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z"
+            />
+          </svg>
+        </ic-button>
+      </ic-data-row>
+      <ic-data-row label="Date of birth" value="16 October 1995"></ic-data-row>
+      <ic-data-row label="Telephone" value="07449 7654873"></ic-data-row>
+    </ic-data-list>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    size: {
+      options: ["medium", "small"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    rowSize: {
+      options: ["medium", "small"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    endCompSlot: {
+      options: ["end-component", ""],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    rowTheme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-data-row/ic-data-row.css

@@ -455,13 +455,16 @@ video {
   display: flex;
   flex-grow: 1;
   min-width: 0;
+
+  --ic-typography-color: var(--ic-data-list-text-cell);
 }
 
 .label {
   width: 12.5rem;
   min-width: 12.5rem;
   margin-right: var(--ic-space-md);
-  color: var(--ic-color-tertiary-text);
+
+  --ic-typography-color: var(--ic-data-list-text-label);
 }
 
 .value {
@@ -489,7 +492,7 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 .divider {
   margin-top: var(--ic-space-md);
   height: var(--ic-border-width);
-  background-color: var(--ic-architectural-300);
+  background-color: var(--ic-data-list-keyline-cell);
 }
 
 :host(.ic-data-row-small) .divider {

package/dist/collection/components/ic-data-row/ic-data-row.js

@@ -9,6 +9,15 @@ export class DataRow {
     constructor() {
         this.hasEndComponent = false;
         this.resizeObserver = null;
+        this.deviceSize = DEVICE_SIZES.XL;
+        /**
+         * The size of the data row component.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
         this.runResizeObserver = () => {
             this.resizeObserver = new ResizeObserver(() => {
                 this.checkLabelAbove();
@@ -23,11 +32,6 @@ export class DataRow {
                         ? "label"
                         : "subtitle-large" }, isValue ? this.value : this.label))));
         };
-        this.deviceSize = DEVICE_SIZES.XL;
-        this.listSize = undefined;
-        this.label = undefined;
-        this.size = "default";
-        this.value = undefined;
     }
     disconnectedCallback() {
         var _a;
@@ -45,24 +49,31 @@ export class DataRow {
     }
     checkLabelAbove() {
         var _a;
-        const rowSize = ((_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth) + 46;
-        if (rowSize) {
-            this.listSize =
-                rowSize < DEVICE_SIZES.S ? "xs" : rowSize < DEVICE_SIZES.M ? "m" : "xl";
+        const row = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".data");
+        if (row) {
+            const rowSize = (row === null || row === void 0 ? void 0 : row.clientWidth) + 46;
+            if (rowSize) {
+                this.listSize =
+                    rowSize < DEVICE_SIZES.S
+                        ? "xs"
+                        : rowSize < DEVICE_SIZES.M
+                            ? "m"
+                            : "xl";
+            }
         }
     }
     labelEndComponent() {
-        this.el.shadowRoot
-            .querySelectorAll("slot[name=end-component]")
-            .forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
+        var _a;
+        (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("slot[name=end-component]").forEach((child) => child.setAttribute("aria-label", `for ${this.label} row`));
     }
     render() {
-        const { el, listSize, hasEndComponent, label, renderCellContent, size, value, } = this;
-        return (h(Host, { class: {
+        const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
+        return (h(Host, { key: '9d08ae62826d35bd401020ba98068b96c81f6fa5', class: {
                 ["ic-data-row-small"]: size === "small",
                 ["breakpoint-medium"]: listSize === "m",
                 ["breakpoint-xs"]: listSize === "xs",
-            }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { class: "end-component" }, h("slot", { name: "end-component" })))), h("div", { class: "divider" })));
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, role: "listitem" }, h("div", { key: 'ba92ceb189252d76f4ad43dca48b7092c9172a2e', class: "data" }, h("div", { key: '29272fb6366444499d5e25864a81e64cc43c113c', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: 'fc83095282fc9e82d57edf8ee94b2d6fa3f48eb6', class: "end-component" }, h("slot", { key: '8e55af6d6c919f89b4b780fe254371f77700debb', name: "end-component" })))), h("div", { key: 'ab54a6f84262b3ccf9f351b37c71efaf6810344a', class: "divider" })));
     }
     static get is() { return "ic-data-row"; }
     static get encapsulation() { return "shadow"; }
@@ -83,15 +94,17 @@ export class DataRow {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The label in the leftmost cell of the row."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -100,7 +113,7 @@ export class DataRow {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"default\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -115,24 +128,54 @@ export class DataRow {
                     "tags": [],
                     "text": "The size of the data row component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             },
             "value": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The value of the middle (right if no end-component supplied) cell of the row."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             }