@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

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-dialog/ic-dialog.css

@@ -497,9 +497,10 @@ video {
 }
 
 .dialog {
-  background-color: var(--ic-architectural-white);
-  color: var(--ic-architectural-black);
-  border: var(--ic-border-default);
+  background-color: var(--ic-dialog-background);
+  color: var(--ic-dialog-text-primary);
+  --ic-typography-color: var(--ic-dialog-text-primary);
+  border: var(--ic-space-1px) solid var(--ic-dialog-border);
   border-radius: var(--ic-border-radius);
   padding: var(--ic-space-xs) 0 var(--ic-space-md);
   display: flex;
@@ -543,18 +544,16 @@ video {
   margin-left: auto;
 }
 
+.close-icon > svg {
+  color: var(--ic-dialog-clear-button);
+}
+
 .content-area {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
   padding: 0 var(--ic-space-md);
   margin: 0;
   overflow-y: auto;
 }
 
-.content-area::-webkit-scrollbar {
-  display: none;
-}
-
 #dialog-content {
   margin-bottom: var(--ic-space-sm);
 }
@@ -593,6 +592,14 @@ video {
   padding-bottom: 16px;
 }
 
+.heading ic-typography {
+  --ic-typography-color: var(--ic-dialog-text-primary);
+}
+
+.label ic-typography {
+  --ic-typography-color: var(--ic-dialog-label);
+}
+
 @media (min-width: 800px) {
   :host([size="large"]) .dialog:not(.disable-width-constraint) > .content-area {
     width: 75%;

package/dist/collection/components/ic-dialog/ic-dialog.js

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import closeIcon from "../../assets/close-icon.svg";
-import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, getSlotElements, } from "../../utils/helpers";
 /**
  * @slot dialog-controls - Content will be place at the bottom of the dialog.
  * @slot heading - Content will be placed at the top of the dialog.
@@ -9,6 +9,7 @@ import { isSlotUsed, checkResizeObserver, onComponentRequiredPropUndefined, } fr
  */
 export class Dialog {
     constructor() {
+        this.contentAreaMutationObserver = null;
         this.DATA_GETS_FOCUS = "data-gets-focus";
         this.DATA_GETS_FOCUS_SELECTOR = "[data-gets-focus]";
         this.DIALOG_CONTROLS = "dialog-controls";
@@ -62,12 +63,26 @@ export class Dialog {
             }
         };
         this.refreshInteractiveElementsOnSlotChange = () => {
-            this.contentArea = this.el.shadowRoot.querySelector("#dialog-content slot");
+            const contentWrapper = this.el.shadowRoot.querySelector("#dialog-content");
+            this.contentArea = contentWrapper.querySelector("slot");
+            // Detect changes to slotted elements
             this.contentArea.addEventListener("slotchange", this.getInteractiveElements);
+            this.contentAreaMutationObserver = new MutationObserver(() => {
+                this.getInteractiveElements();
+            });
+            // Detect changes to children of slotted elements
+            getSlotElements(contentWrapper).forEach((el) => {
+                this.contentAreaMutationObserver.observe(el, {
+                    childList: true,
+                    subtree: true,
+                });
+            });
         };
         this.removeSlotChangeListener = () => {
+            var _a;
             if (this.contentArea) {
                 this.contentArea.removeEventListener("slotchange", this.getInteractiveElements);
+                (_a = this.contentAreaMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
             }
         };
         this.setInitialFocus = () => {
@@ -107,10 +122,10 @@ export class Dialog {
         };
         this.getInteractiveElements = () => {
             this.interactiveElementList = Array.from(this.el.shadowRoot.querySelectorAll("ic-button"));
-            const slottedInteractiveElements = Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]), 
-          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group, 
-          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button, 
-          ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion`));
+            const slottedInteractiveElements = Array.from(this.el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]),
+          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-group, ic-radio-group,
+          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,
+          ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker`));
             if (slottedInteractiveElements.length > 0) {
                 if (slottedInteractiveElements[0].slot !== this.DIALOG_CONTROLS) {
                     slottedInteractiveElements[0].setAttribute(this.DATA_GETS_FOCUS, "");
@@ -126,6 +141,10 @@ export class Dialog {
         this.getNextFocusEl = (focusedElementIndex) => this.interactiveElementList[focusedElementIndex];
         this.focusNextInteractiveElement = (shiftKey) => {
             this.getFocusedElementIndex();
+            if (this.interactiveElementList[this.focusedElementIndex].tagName ===
+                "IC-SEARCH-BAR") {
+                return false;
+            }
             this.setFocusIndexBasedOnShiftKey(shiftKey);
             this.loopNextFocusIndexIfLastElement();
             let nextFocusEl = this.getNextFocusEl(this.focusedElementIndex);
@@ -151,6 +170,7 @@ export class Dialog {
                     nextFocusEl.focus();
                 }
             }
+            return true;
         };
         this.renderDialog = () => {
             const { buttons, size, heading, label, destructive, dismissLabel, hideCloseButton, } = this;
@@ -179,6 +199,7 @@ export class Dialog {
         this.label = undefined;
         this.open = undefined;
         this.size = "small";
+        this.theme = "inherit";
     }
     watchOpenHandler() {
         if (this.open) {
@@ -224,8 +245,9 @@ export class Dialog {
         if (this.dialogRendered) {
             switch (ev.key) {
                 case "Tab":
-                    ev.preventDefault();
-                    this.focusNextInteractiveElement(ev.shiftKey);
+                    if (this.focusNextInteractiveElement(ev.shiftKey)) {
+                        ev.preventDefault();
+                    }
                     break;
                 case "Escape":
                     if (!ev.repeat) {
@@ -283,6 +305,7 @@ export class Dialog {
                 ["ic-dialog-hidden"]: !this.dialogRendered,
                 ["ic-dialog-fade-in"]: this.fadeIn,
                 ["disable-height-constraint"]: this.disableHeightConstraint,
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, this.disableHeightConstraint ? (h("div", { class: "backdrop", ref: (el) => (this.backdropEl = el) }, this.renderDialog())) : (this.renderDialog())));
     }
     static get is() { return "ic-dialog"; }
@@ -311,7 +334,7 @@ export class Dialog {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If set to `false`, default buttons or slotted dialog controls will not be displayed."
+                    "text": "If set to `false`, default buttons will not be shown, but slotted dialog controls will still be displayed."
                 },
                 "attribute": "buttons",
                 "reflect": false,
@@ -347,7 +370,7 @@ export class Dialog {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button."
+                    "text": "If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button."
                 },
                 "attribute": "destructive",
                 "reflect": false,
@@ -494,6 +517,30 @@ export class Dialog {
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"small\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "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."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }