@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-hero/ic-hero.stories.js

@@ -0,0 +1,448 @@
+import { html } from "lit-html";
+
+import image from "./assets/example-background.png";
+
+export default {
+  title: "Web Components/Hero",
+  component: "ic-hero",
+};
+
+export const LeftAligned = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+      <ic-link
+        href="https://google.com"
+        slot="interaction"
+        style="margin-top: var(--ic-space-sm)"
+        >Help</ic-link
+      >
+    </ic-hero>`,
+
+  name: "Left aligned",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const CenterAligned = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      aligned="center"
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+      <ic-link
+        href="https://google.com"
+        slot="interaction"
+        style="margin-top: var(--ic-space-sm)"
+        >Help</ic-link
+      >
+    </ic-hero>`,
+
+  name: "Center aligned",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const SlottedHeadingAndSubheading = {
+  render: () =>
+    html`<ic-hero>
+      <ic-typography slot="heading" variant="h1">Slotted heading</ic-typography>
+      <ic-typography slot="subheading">Slotted subheading</ic-typography>
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+      <ic-link
+        href="https://google.com"
+        slot="interaction"
+        style="margin-top: var(--ic-space-sm)"
+        >Help</ic-link
+      >
+    </ic-hero>`,
+
+  name: "Slotted heading and subheading",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const LongHeading = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading. This is a Hero component, it should be used as a page heading."
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      aligned="center"
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+      <ic-link
+        href="https://google.com"
+        slot="interaction"
+        style="margin-top: var(--ic-space-sm)"
+        >Help</ic-link
+      >
+      <ic-card-vertical
+        heading="Latest announcement"
+        message="This is some example text that can be included in the card copy."
+        slot="secondary"
+      ></ic-card-vertical>
+    </ic-hero>`,
+
+  name: "Long heading",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const FullWidth = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      aligned="full-width"
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+    </ic-hero>`,
+
+  name: "Full width",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const ContentCenterAligned = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      aligned="center"
+      content-aligned="center"
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+    </ic-hero>`,
+
+  name: "Content center aligned",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Small = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      aligned="center"
+      size="small"
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+    </ic-hero>`,
+
+  name: "Small",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const SecondaryHeading = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      secondary-heading="Secondary Heading"
+      secondary-subheading="This is a secondary description."
+      aligned="center"
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+    </ic-hero>`,
+
+  name: "Secondary heading",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const SearchBarInteraction = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      aligned="center"
+    >
+      <ic-search-bar
+        slot="interaction"
+        full-width
+        style="max-width: 322px;"
+      ></ic-search-bar>
+    </ic-hero>`,
+
+  name: "Search bar interaction",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const CardRightContent = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      aligned="full-width"
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+      <ic-card-vertical
+        heading="Latest announcement"
+        message="This is some example text that can be included in the card copy."
+        slot="secondary"
+      ></ic-card-vertical>
+    </ic-hero>`,
+
+  name: "Card right content",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const ImageRightContent = {
+  render: () =>
+    html`<ic-hero
+      heading="Hero heading"
+      subheading="Hero description. This is a Hero component, it should be used as a page heading."
+      aligned="center"
+    >
+      <ic-button variant="primary" slot="interaction">Button</ic-button>
+      <ic-button variant="secondary" slot="interaction">Button</ic-button>
+      <svg
+        slot="secondary"
+        style="width:300px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="900" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" />
+      </svg>
+    </ic-hero>`,
+
+  name: "Image right content",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Brand = {
+  render: () =>
+    html`<ic-theme
+        brand-color="rgb(255, 201, 60)"
+        id="brand-story-ic-theme"
+      ></ic-theme>
+      <ic-hero
+        heading="Hero heading"
+        subheading="Hero description. This is a Hero component, it should be used as a page heading."
+        aligned="center"
+      >
+        <div slot="interaction" style="display: flex">
+          <ic-text-field
+            placeholder="Filter display"
+            label="Filter display"
+            hide-label
+          ></ic-text-field>
+          <ic-button variant="primary" style="margin-left: var(--ic-space-md)"
+            >Filter</ic-button
+          >
+        </div>
+        <ic-card-vertical
+          heading="Latest announcement"
+          message="This is some example text that can be included in the card copy."
+          slot="secondary"
+        >
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-card-vertical>
+      </ic-hero>
+      <br />
+      <ic-button variant="primary" id="default-btn" onClick="changeBrand()">
+        Default brand
+      </ic-button>
+      <ic-button
+        variant="primary"
+        id="custom-btn"
+        onClick="changeSunriseBrand()"
+      >
+        Sunrise brand
+      </ic-button>
+      <script>
+        var theme = document.querySelector("#brand-story-ic-theme");
+        function changeBrand() {
+          theme.brandColor = "rgb(27, 60, 121)";
+        }
+        function changeSunriseBrand() {
+          theme.brandColor = "rgb(255, 201, 60)";
+        }
+      </script>`,
+
+  name: "Brand",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const WithBackgroundImageParallaxEffect = {
+  render: () =>
+    html`<ic-theme brand-color="rgb(27, 60, 121)"></ic-theme>
+      <ic-top-navigation app-title="Application Name">
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+      </ic-top-navigation>
+      <ic-hero
+        heading="Hero heading"
+        subheading="Hero description. This is a Hero component, it should be used as a page heading."
+        background-image="${image}"
+      >
+        <div slot="interaction">
+          <ic-button variant="primary" style="margin-right: var(--ic-space-md)"
+            >Button</ic-button
+          >
+          <ic-button
+            variant="secondary"
+            style="margin-right: var(--ic-space-md)"
+            >Button</ic-button
+          >
+          <ic-link
+            href="https://google.com"
+            style="margin-top: var(--ic-space-sm)"
+            >Help</ic-link
+          >
+        </div>
+      </ic-hero>
+      <br />
+      <ic-typography>You can scroll.</ic-typography>
+      <ic-button
+        variant="primary"
+        id="default-btn"
+        onClick="document.querySelector('ic-theme').brandColor='rgb(27, 60, 121)'"
+        style="margin-bottom:1300px"
+      >
+        Reset theme
+      </ic-button>`,
+
+  name: "With background image (parallax effect)",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const WithBackgroundImageNoParallaxEffect = {
+  render: () =>
+    html`<ic-theme brand-color="rgb(27, 60, 121)"></ic-theme>
+      <ic-top-navigation app-title="Application Name">
+        <svg
+          slot="app-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+      </ic-top-navigation>
+      <ic-hero
+        heading="Hero heading"
+        subheading="Hero description. This is a Hero component, it should be used as a page heading."
+        background-image="${image}"
+        disable-background-parallax
+      >
+        <div slot="interaction">
+          <ic-button variant="primary" style="margin-right: var(--ic-space-md)"
+            >Button</ic-button
+          >
+          <ic-button
+            variant="secondary"
+            style="margin-right: var(--ic-space-md)"
+            >Button</ic-button
+          >
+          <ic-link
+            href="https://google.com"
+            style="margin-top: var(--ic-space-sm)"
+            >Help</ic-link
+          >
+        </div>
+      </ic-hero>
+      <br />
+      <ic-typography>You can scroll.</ic-typography>
+      <ic-button
+        variant="primary"
+        id="default-btn"
+        onClick="document.querySelector('ic-theme').brandColor='rgb(27, 60, 121)'"
+        style="margin-bottom:1300px"
+      >
+        Reset theme
+      </ic-button>`,
+
+  name: "With background image (no parallax effect)",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js

@@ -8,6 +8,23 @@ const SCROLL_DELAY_MS = 200;
 export class HorizontalScroll {
     constructor() {
         this.buttonStateSet = false;
+        this.firstItemVisible = true;
+        this.itemOverflow = false;
+        this.lastItemVisible = false;
+        /**
+         * The appearance of the horizontal scroll, e.g. dark, light or the default.
+         */
+        this.appearance = "default";
+        /** @internal Determines whether black variant of the tabs should be displayed. */
+        this.monochrome = false;
+        /**
+         * @internal  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";
+        /**
+         * @internal The name of the event that triggers focus handler logic.
+         */
+        this.focusTrigger = "focus";
         this.focusHandler = (event) => {
             this.itemFocusHandler(Array.from(this.items).indexOf(event.target));
         };
@@ -76,13 +93,6 @@ export class HorizontalScroll {
             }
             this.buttonStateSet = false;
         };
-        this.firstItemVisible = true;
-        this.itemOverflow = false;
-        this.lastItemVisible = false;
-        this.appearance = "default";
-        this.monochrome = false;
-        this.theme = "inherit";
-        this.focusTrigger = "focus";
     }
     componentWillLoad() {
         this.itemsContainerEl = this.el.children[0];
@@ -95,6 +105,7 @@ export class HorizontalScroll {
         });
     }
     componentDidLoad() {
+        var _a;
         let runningTotal = 0;
         this.itemOffsets = this.items.map((item) => {
             runningTotal += item.offsetWidth;
@@ -104,26 +115,26 @@ export class HorizontalScroll {
         // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)
         // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons
         // - 'mouseup' otherwise not detected and scrolling not stopped
-        const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
+        const scrollArrows = Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("div")) || []);
         ["mouseup", "mouseleave"].forEach((event) => {
             scrollArrows.forEach((arrow) => arrow.addEventListener(event, this.arrowMouseUpHandler));
         });
     }
     disconnectedCallback() {
-        var _a, _b;
+        var _a, _b, _c;
         if (this.resizeObserver !== undefined) {
             this.resizeObserver.disconnect();
         }
-        const scrollArrows = Array.from(this.el.shadowRoot.querySelectorAll("div"));
+        const scrollArrows = Array.from(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("div")) || []);
         ["mouseup", "mouseleave"].forEach((event) => {
             scrollArrows.forEach((arrow) => arrow.removeEventListener(event, this.arrowMouseUpHandler));
         });
-        (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
+        (_b = this.items) === null || _b === void 0 ? void 0 : _b.forEach((item) => {
             if (item.removeEventListener) {
                 item.removeEventListener(this.focusTrigger, this.focusHandler);
             }
         });
-        (_b = this.itemsContainerEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", this.scrollHandler);
+        (_c = this.itemsContainerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("scroll", this.scrollHandler);
     }
     /**
      * @internal if side scrolling enabled, scrolls the specified item into view.
@@ -144,22 +155,22 @@ export class HorizontalScroll {
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (h(Host, { class: {
+        return (h(Host, { key: '66144a5088edf38f0c3ed6f7778d636c15ffe8cb', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { "aria-hidden": "true", class: {
+            } }, h("div", { key: '905ca2842a4d4de15c8a9c7cae4a9feceaa99e28', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, h("ic-button", { class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("ic-button", { key: '4f395c74ccd5bebef7263448761959d9bd8aedf0', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
-                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { class: "scroll-splitter-left" })), h("slot", null), h("div", { "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: 'b40a0bac23d87acf17880e488d93a2df6cb6ab39', class: "scroll-splitter-left" })), h("slot", { key: 'c99b76e7ff9b22b340bdefbd018db4a3f7d88307' }), h("div", { key: '9db134cc1449592ebc34d22999ab7d030464fc6f', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, h("span", { class: "scroll-splitter-right" }), h("ic-button", { class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("span", { key: '552499a981a450ba3e75f498ba5a01b134f5252d', class: "scroll-splitter-right" }), h("ic-button", { key: '8eba5e488232737d3ccb61ee07e84c0fcaf511d7', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
                 : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }
@@ -182,7 +193,7 @@ export class HorizontalScroll {
                 "mutable": false,
                 "complexType": {
                     "original": "IcBrandForeground",
-                    "resolved": "\"dark\" | \"default\" | \"light\"",
+                    "resolved": "\"dark\" | \"default\" | \"light\" | undefined",
                     "references": {
                         "IcBrandForeground": {
                             "location": "import",
@@ -197,6 +208,8 @@ export class HorizontalScroll {
                     "tags": [],
                     "text": "The appearance of the horizontal scroll, e.g. dark, light or the default."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "appearance",
                 "reflect": false,
                 "defaultValue": "\"default\""
@@ -206,7 +219,7 @@ export class HorizontalScroll {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -218,6 +231,8 @@ export class HorizontalScroll {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "monochrome",
                 "reflect": false,
                 "defaultValue": "false"
@@ -227,7 +242,7 @@ export class HorizontalScroll {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -245,6 +260,8 @@ export class HorizontalScroll {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -254,7 +271,7 @@ export class HorizontalScroll {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -266,6 +283,8 @@ export class HorizontalScroll {
                         }],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "focus-trigger",
                 "reflect": false,
                 "defaultValue": "\"focus\""