@ukic/web-components 3.0.0 → 3.2.0

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

@@ -0,0 +1,384 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Web Components/Footer",
+  component: "ic-footer",
+};
+
+export const UngroupedLinks = {
+  render: () => html`
+    <ic-footer
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+      caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+    >
+      <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+      <ic-footer-link slot="link" href="/" target="_blank"
+        >Components</ic-footer-link
+      >
+      <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+      <div
+        slot="logo"
+        style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+      >
+        Logo
+      </div>
+    </ic-footer>
+  `,
+
+  name: "Ungrouped links",
+};
+
+export const GroupedLinks = {
+  render: () => html`
+    <ic-footer
+      group-links
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+      caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+    >
+      <ic-footer-link-group slot="link" label="Links 1">
+        <ic-footer-link href="/">Get Started</ic-footer-link>
+        <ic-footer-link href="/">Accessibility</ic-footer-link>
+        <ic-footer-link href="/">Styles</ic-footer-link>
+        <ic-footer-link href="/" target="_blank">Components</ic-footer-link>
+        <ic-footer-link href="/">Patterns</ic-footer-link>
+        <ic-footer-link href="/">Design toolkit</ic-footer-link>
+      </ic-footer-link-group>
+      <ic-footer-link-group slot="link" label="Links 2">
+        <ic-footer-link href="/">Get Started</ic-footer-link>
+        <ic-footer-link href="/">Accessibility</ic-footer-link>
+        <ic-footer-link href="/">Styles</ic-footer-link>
+        <ic-footer-link href="/">Components</ic-footer-link>
+        <ic-footer-link href="/">Patterns</ic-footer-link>
+        <ic-footer-link href="/">Design toolkit</ic-footer-link>
+      </ic-footer-link-group>
+      <ic-footer-link-group slot="link" label="Links 3">
+        <ic-footer-link href="/">Get Started</ic-footer-link>
+        <ic-footer-link href="/">Accessibility</ic-footer-link>
+        <ic-footer-link href="/">Styles</ic-footer-link>
+        <ic-footer-link href="/">Components</ic-footer-link>
+        <ic-footer-link href="/">Patterns</ic-footer-link>
+        <ic-footer-link href="/">Design toolkit</ic-footer-link>
+      </ic-footer-link-group>
+      <div
+        slot="logo"
+        style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+      >
+        Logo
+      </div>
+    </ic-footer>
+  `,
+
+  name: "Grouped links",
+};
+
+export const WithClassificationBanner = {
+  render: () =>
+    html` <ic-classification-banner
+        classification="official"
+      ></ic-classification-banner>
+      <ic-footer
+        aligned="full-width"
+        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+        caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        style="position:fixed;bottom:0;left:0;right:0;"
+      >
+        <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+        <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+        >
+          Logo
+        </div>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+        >
+          Logo
+        </div>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+        >
+          Logo
+        </div>
+      </ic-footer>`,
+
+  name: "With classification banner",
+};
+
+export const Brand = {
+  render: () =>
+    html` <ic-theme brand-color="rgb(27, 60, 121)" id="brand-story-ic-theme">
+      <ic-button
+        variant="primary"
+        id="default-btn"
+        onClick="document.querySelector('#brand-story-ic-theme').brandColor='rgb(27, 60, 121)'"
+      >
+        Default brand
+      </ic-button>
+      <ic-button
+        variant="primary"
+        id="custom-btn"
+        onClick="document.querySelector('#brand-story-ic-theme').brandColor='rgb(255, 201, 60)'"
+      >
+        Sunrise brand
+      </ic-button>
+      <ic-footer
+        group-links
+        aligned="full-width"
+        description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+            please get in touch."
+        caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        style="position:fixed;bottom:0;left:0;right:0;"
+      >
+        <ic-footer-link-group slot="link" label="Links 1">
+          <ic-footer-link href="/">Get Started</ic-footer-link>
+          <ic-footer-link href="/">Accessibility</ic-footer-link>
+          <ic-footer-link href="/">Styles</ic-footer-link>
+          <ic-footer-link href="/">Components</ic-footer-link>
+          <ic-footer-link href="/">Patterns</ic-footer-link>
+          <ic-footer-link href="/">Design toolkit</ic-footer-link>
+        </ic-footer-link-group>
+        <ic-footer-link-group slot="link" label="Links 2">
+          <ic-footer-link href="/">Get Started</ic-footer-link>
+          <ic-footer-link href="/">Accessibility</ic-footer-link>
+          <ic-footer-link href="/">Styles</ic-footer-link>
+          <ic-footer-link href="/">Components</ic-footer-link>
+          <ic-footer-link href="/">Patterns</ic-footer-link>
+          <ic-footer-link href="/">Design toolkit</ic-footer-link>
+        </ic-footer-link-group>
+        <ic-footer-link-group slot="link" label="Links 3">
+          <ic-footer-link href="/">Get Started</ic-footer-link>
+          <ic-footer-link href="/">Accessibility</ic-footer-link>
+          <ic-footer-link href="/">Styles</ic-footer-link>
+          <ic-footer-link href="/">Components</ic-footer-link>
+          <ic-footer-link href="/">Patterns</ic-footer-link>
+          <ic-footer-link href="/">Design toolkit</ic-footer-link>
+        </ic-footer-link-group>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+            background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+        >
+          Logo
+        </div>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+            background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+        >
+          Logo
+        </div>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+            background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
+        >
+          Logo
+        </div>
+      </ic-footer>
+    </ic-theme>`,
+
+  name: "Brand",
+};
+
+export const WithLogoLinks = {
+  render: () => html`
+    <ic-footer
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+      caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+    >
+      <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+      <div slot="logo" style="display:flex;gap:var(--ic-space-sm);">
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+            />
+          </svg>
+        </ic-footer-link>
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+            />
+          </svg>
+        </ic-footer-link>
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+            />
+          </svg>
+        </ic-footer-link>
+      </div>
+    </ic-footer>
+  `,
+
+  name: "With logo links",
+};
+
+export const FooterWithNoCaptionOrLogoOrCopyright = {
+  render: () => html`
+    <ic-footer
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+      copyright="false"
+    >
+      <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+      <ic-footer-link slot="link" href="/" target="_blank"
+        >Components</ic-footer-link
+      >
+      <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+    </ic-footer>
+  `,
+
+  name: "Footer with no caption or logo or copyright",
+};
+
+export const FooterWithNoLinks = {
+  render: () => html`
+    <ic-footer
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+      caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+    >
+    </ic-footer>
+  `,
+
+  name: "Footer with no links",
+};
+
+export const Breakpoint = {
+  render: () => html`
+    <ic-footer
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+      caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+      breakpoint="extra large"
+    >
+      <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+      <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+      <div slot="logo" style="display:flex;gap:var(--ic-space-sm);">
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+            />
+          </svg>
+        </ic-footer-link>
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+            />
+          </svg>
+        </ic-footer-link>
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+            />
+          </svg>
+        </ic-footer-link>
+      </div>
+    </ic-footer>
+  `,
+
+  name: "Breakpoint",
+};
+
+export const SlottedDescriptionAndCaption = {
+  render: () => html`
+    <ic-footer>
+      <ic-typography slot="description"
+        >The ICDS is maintained by the Design Practice Team. If you've got a
+        question or want to feedback, please get in touch.</ic-typography
+      >
+      <ic-typography slot="caption"
+        >All content is available under the Open Government Licence v3.0, except
+        source code and code examples which are available under the MIT
+        Licence.</ic-typography
+      >
+    </ic-footer>
+  `,
+
+  name: "Slotted description and caption",
+};

package/dist/collection/components/ic-footer-link/ic-footer-link.css

@@ -477,7 +477,7 @@ video {
 }
 
 .ic-link > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink);
+  fill: var(--ic-color-hyperlink-default);
 }
 
 .ic-link-open-in-new-icon > svg {
@@ -487,11 +487,11 @@ video {
 }
 
 .ic-link:visited > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink-visited);
+  fill: var(--ic-color-hyperlink-visited);
 }
 
 .ic-link.light:visited > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink-contrast-visited);
+  fill: var(--ic-color-hyperlink-contrast-visited);
 }
 
 :host(.breadcrumb-link) .ic-link {
@@ -521,12 +521,35 @@ video {
 }
 
 :host(.breadcrumb-link.current-page) .ic-link:visited {
-  color: var(--ic-color-primary-text);
+  color: var(--ic-color-text-primary);
+}
+
+:host(.footer-link-light) ::part(link),
+:host(.footer-link-dark) ::part(link) {
+  color: var(--ic-footer-link);
 }
 
 :host(.footer-link-light) ::slotted(svg),
 :host(.footer-link-dark) ::slotted(svg) {
-  fill: var(--ic-theme-text);
+  fill: var(--ic-footer-icon);
+}
+
+:host(.footer-logo-link) {
+  transition: var(--ic-easing-transition-fast);
+}
+
+:host(.footer-logo-link:hover) {
+  background-color: var(--ic-footer-hover);
+}
+
+:host(.footer-logo-link:active) {
+  background-color: var(--ic-footer-pressed);
+}
+
+:host(.footer-logo-link:focus) {
+  box-shadow: var(--ic-border-focus);
+  border-radius: var(--ic-border-radius);
+  outline: var(--ic-hc-focus-outline);
 }
 
 @media (forced-colors: active) {

package/dist/collection/components/ic-footer-link/ic-footer-link.js

@@ -1,16 +1,14 @@
 import { Host, h, } from "@stencil/core";
-import { DEVICE_SIZES, getThemeForegroundColor } from "../../utils/helpers";
+import { DEVICE_SIZES, getBrandForegroundAppearance, } from "../../utils/helpers";
 export class FooterLink {
     constructor() {
         this.deviceSize = DEVICE_SIZES.XL;
         this.footerConfig = { small: false, grouped: false };
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
+        /**
+         * If `true`, the user can save the linked URL instead of navigating to it.
+         */
         this.download = false;
-        this.href = null;
-        this.hreflang = undefined;
-        this.referrerpolicy = undefined;
-        this.rel = undefined;
-        this.target = undefined;
     }
     componentWillLoad() {
         this.footerConfig = this.inferConfig(this.el);
@@ -18,9 +16,8 @@ export class FooterLink {
     footerResizeHandler() {
         this.footerConfig = this.inferConfig(this.el);
     }
-    footerThemeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.foregroundColor = theme.mode;
+    footerBrandChangeHandler(ev) {
+        this.foregroundColor = ev.detail.mode;
     }
     inferConfig(e) {
         if (e.parentElement !== null) {
@@ -41,11 +38,13 @@ export class FooterLink {
     render() {
         const { footerConfig, href, hreflang, referrerpolicy, rel, target, download, } = this;
         const { small, grouped } = footerConfig;
-        return (h(Host, { class: {
+        const isLogoLink = !!this.el.closest("div[slot='logo']");
+        return (h(Host, { key: 'b8797484e397b1a952f2df6f644c985deec5be65', class: {
                 "footer-link": true,
                 [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
                 [`footer-link-${this.foregroundColor}`]: true,
-            }, role: "listitem" }, h("ic-link", { href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : null, target: target }, h("slot", null))));
+                "footer-logo-link": isLogoLink,
+            }, role: "listitem" }, h("ic-link", { key: '1cd559f7c768a70d2bc0c92845ad6ae6761b584a', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, h("slot", { key: 'f2104f33d9651f96414a4963b30ea2e6c2414b18' }))));
     }
     static get is() { return "ic-footer-link"; }
     static get encapsulation() { return "shadow"; }
@@ -67,7 +66,7 @@ export class FooterLink {
                 "mutable": false,
                 "complexType": {
                     "original": "string | boolean",
-                    "resolved": "boolean | string",
+                    "resolved": "boolean | string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -76,6 +75,8 @@ export class FooterLink {
                     "tags": [],
                     "text": "If `true`, the user can save the linked URL instead of navigating to it."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "download",
                 "reflect": false,
                 "defaultValue": "false"
@@ -85,7 +86,7 @@ export class FooterLink {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -94,16 +95,17 @@ export class FooterLink {
                     "tags": [],
                     "text": "The URL that the link points to."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
-                "reflect": false,
-                "defaultValue": "null"
+                "reflect": false
             },
             "hreflang": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -112,6 +114,8 @@ export class FooterLink {
                     "tags": [],
                     "text": "The human language of the linked URL."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hreflang",
                 "reflect": false
             },
@@ -120,7 +124,7 @@ export class FooterLink {
                 "mutable": false,
                 "complexType": {
                     "original": "ReferrerPolicy",
-                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\" | undefined",
                     "references": {
                         "ReferrerPolicy": {
                             "location": "global",
@@ -134,6 +138,8 @@ export class FooterLink {
                     "tags": [],
                     "text": "How much of the referrer to send when following the link."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "referrerpolicy",
                 "reflect": false
             },
@@ -142,7 +148,7 @@ export class FooterLink {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -151,6 +157,8 @@ export class FooterLink {
                     "tags": [],
                     "text": "The relationship of the linked URL as space-separated link types."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "rel",
                 "reflect": false
             },
@@ -159,7 +167,7 @@ export class FooterLink {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -168,6 +176,8 @@ export class FooterLink {
                     "tags": [],
                     "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": false
             }
@@ -189,8 +199,8 @@ export class FooterLink {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "themeChange",
-                "method": "footerThemeChangeHandler",
+                "name": "brandChange",
+                "method": "footerBrandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false

package/dist/collection/components/ic-footer-link/ic-footer-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-footer-link.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link/ic-footer-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,CAAC,EACD,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAY5E,MAAM,OAAO,UAAU;;0BAGS,YAAY,CAAC,EAAE;4BACP,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE;+BACxB,uBAAuB,EAAE;wBAKjC,KAAK;oBAKnB,IAAI;;;;;;IAsB5B,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC;IAGD,mBAAmB;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC;IAGD,wBAAwB,CAAC,EAAe;QACtC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;IACpC,CAAC;IAEO,WAAW,CAAC,CAAc;QAChC,IAAI,CAAC,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;YAC7B,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;gBACpD,OAAO;oBACL,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC;oBAC5D,OAAO,EAAE,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC;iBACjE,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,OAAO,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC1C,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,GAAG,EACH,MAAM,EACN,QAAQ,GACT,GAAG,IAAI,CAAC;QACT,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QAExC,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,eAAe,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,IAC/C,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QACpB,EAAE,CAAC,EAAE,IAAI;gBACT,CAAC,eAAe,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;aAC9C,EACD,IAAI,EAAC,UAAU;YAEf,eACE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC9C,MAAM,EAAE,MAAM;gBAEd,eAAQ,CACA,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"ic-footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"ic-footer-small\"),\n          grouped: e.parentElement.classList.contains(\"ic-footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n        role=\"listitem\"\n      >\n        <ic-link\n          href={href}\n          hreflang={hreflang}\n          referrerpolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : null}\n          target={target}\n        >\n          <slot />\n        </ic-link>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-footer-link.js","sourceRoot":"","sources":["../../../src/components/ic-footer-link/ic-footer-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport {\n  DEVICE_SIZES,\n  getBrandForegroundAppearance,\n} from \"../../utils/helpers\";\nimport { IcBrand, IcBrandForeground } from \"../../utils/types\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"ic-footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"ic-footer-small\"),\n          grouped: e.parentElement.classList.contains(\"ic-footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    const isLogoLink = !!this.el.closest(\"div[slot='logo']\");\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n          \"footer-logo-link\": isLogoLink,\n        }}\n        role=\"listitem\"\n      >\n        <ic-link\n          class=\"footer-link\"\n          href={href}\n          hreflang={hreflang}\n          referrerpolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : undefined}\n          target={target}\n        >\n          <slot />\n        </ic-link>\n      </Host>\n    );\n  }\n}\n"]}