npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.1 → 3.0.0-alpha.10 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (966) hide show

package/dist/collection/components/ic-back-to-top/ic-back-to-top.css CHANGED Viewed

@@ -454,7 +454,7 @@ video {
 ic-button {
   height: 2.5rem;
   align-items: center;
-  background-color: var(--ic-architectural-white);
+  background-color: var(--ic-color-background-primary);
   border-radius: 5rem;
   box-shadow: var(--ic-elevation-overlay);
   visibility: hidden;
@@ -467,9 +467,12 @@ ic-button {
   z-index: var(--ic-z-index-back-to-top);
 }
+:host([variant="icon"]) ic-button::part(button) {
+  margin: 0;
+}
 ic-button::part(button) {
   border-radius: 5rem;
-  border: var(--ic-border-width) solid var(--ic-action-default);
 }
 ic-button.show {

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import ArrowUpward from "./assets/ArrowUpward.svg";
 import { onComponentPropUndefinedChange, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 const backToTopLabel = "Back to top";
@@ -87,6 +87,7 @@ export class BackToTop {
         this.footerVisible = false;
         this.targetElVisible = true;
         this.target = undefined;
+        this.theme = "inherit";
         this.variant = "default";
     }
     watchPropHandler(newValue, oldValue) {
@@ -115,15 +116,17 @@ export class BackToTop {
     }
     render() {
         const { variant, bannerOffset, targetElVisible, footerVisible } = this;
-        const btnVariant = variant === "icon" ? "icon" : "tertiary";
+        const btnVariant = variant === "icon" ? "icon-secondary" : "secondary";
         const size = variant === "icon" ? "large" : "medium";
         const label = variant === "icon" ? "" : backToTopLabel;
-        return (h("ic-button", { "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
+        return (h(Host, { class: {
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
+            } }, h("ic-button", { "aria-label": backToTopLabel, variant: btnVariant, size: size, onClick: this.handleClick, class: {
                 ["offset-banner"]: bannerOffset,
                 ["show"]: !targetElVisible,
                 ["by-footer"]: footerVisible,
                 ["icon-only"]: variant === "icon",
-            } }, h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label));
+            }, theme: this.theme }, h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), label)));
     }
     static get is() { return "ic-back-to-top"; }
     static get encapsulation() { return "shadow"; }
@@ -157,6 +160,30 @@ export class BackToTop {
                 "attribute": "target",
                 "reflect": false
             },
+            "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\""
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BackToTop {\n private isTargetElNull: boolean;\n private targetEl: Element;\n private topObserver: IntersectionObserver = null;\n\n @Element() el: HTMLIcBackToTopElement;\n\n @State() bannerOffset: boolean = false;\n @State() footerVisible: boolean = false;\n @State() targetElVisible: boolean = true;\n\n /*\n The ID of the element to jump back to when the link is clicked.\n /\n @Prop() target!: string;\n\n /\n The variant of the button to render\n */\n @Prop() variant: IcBackToTopVariants = \"default\";\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n this.checkForClassificationBanner();\n\n //observer for when footer scrolls into view\n let footers = document.querySelectorAll(\n \"ic-footer\"\n ) as NodeListOf<HTMLElement>;\n if (footers.length === 0) {\n footers = document.querySelectorAll(\"footer\");\n }\n\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n private getObservedEl = () => {\n return document.querySelector(\"#ic-back-to-top-target\");\n };\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n this.footerVisible =\n typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null \|\| target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = this.getObservedEl();\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n // Get virtual cursor to move\n (this.getObservedEl() as HTMLElement).focus();\n };\n\n private checkForClassificationBanner = () => {\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n this.bannerOffset = banners.length > 0;\n };\n\n render() {\n const { variant, bannerOffset, targetElVisible, footerVisible } = this;\n const btnVariant = variant === \"icon\" ? \"icon\" : \"tertiary\";\n const size = variant === \"icon\" ? \"large\" : \"medium\";\n const label = variant === \"icon\" ? \"\" : backToTopLabel;\n\n return (\n <ic-button\n aria-label={backToTopLabel}\n variant={btnVariant}\n size={size}\n onClick={this.handleClick}\n class={{\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n [\"icon-only\"]: variant === \"icon\",\n }}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n {label}\n </ic-button>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EACL,8BAA8B,EAC9B,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAI7B,MAAM,cAAc,GAAG,aAAa,CAAC;AASrC,MAAM,OAAO,SAAS;;QAGZ,gBAAW,GAAyB,IAAI,CAAC;QA6DzC,kBAAa,GAAG,GAAG,EAAE;YAC3B,OAAO,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAC1D,CAAC,CAAC;QAEM,uBAAkB,GAAG,CAAC,OAAgB,EAAE,EAAE;YAChD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;QACjC,CAAC,CAAC;QAEM,qBAAgB,GAAG,CAAC,OAAgB,EAAE,EAAE;YAC9C,IAAI,CAAC,4BAA4B,EAAE,CAAC;YACpC,IAAI,CAAC,aAAa;gBAChB,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;QAC5E,CAAC,CAAC;QAEM,6BAAwB,GAAG,CAAC,OAAoC,EAAE,EAAE;YAC1E,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACrD,CAAC,CAAC;QAEM,2BAAsB,GAAG,CAAC,OAAoC,EAAE,EAAE;YACxE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QACnD,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,MAAc,EAAW,EAAE;YACjD,IAAI,aAAa,GAAY,IAAI,CAAC;YAClC,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;gBAC5C,OAAO,CAAC,GAAG,CACT,qFAAqF,CACtF,CAAC;YACJ,CAAC;iBAAM,CAAC;gBACN,aAAa,GAAG,QAAQ,CAAC,aAAa,CACpC,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,GAAG,MAAM,EAAE,CAChD,CAAC;gBACF,IAAI,aAAa,KAAK,IAAI,EAAE,CAAC;oBAC3B,OAAO,CAAC,GAAG,CACT,sCAAsC,MAAM,yCAAyC,CACtF,CAAC;gBACJ,CAAC;YACH,CAAC;YACD,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE;YAC7C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC1C,IAAI,SAAsB,CAAC;YAE3B,+BAA+B;YAC/B,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE,CAAC;gBAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;gBACxC,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;oBACxB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;oBACvC,UAAU,CAAC,MAAM,EAAE,CAAC;gBACtB,CAAC;YACH,CAAC;YAED,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAC3B,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC;gBAC1B,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,iBAAiB,CAAC;gBAC5C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAyB,CAAC;gBACpD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC9B,CAAC;YAED,6GAA6G;YAC7G,MAAM,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC3D,oBAAoB,CAAC,YAAY,CAAC,IAAI,EAAE,uBAAuB,CAAC,CAAC;YACjE,oBAAoB,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,8CAA8C;YACnG,SAAS,CAAC,YAAY,CAAC,oBAAoB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAE5D,qEAAqE;YACrE,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC;YAC5D,IAAI,CAAC,WAAW,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,wBAAwB,EAAE;gBACzE,SAAS,EAAE,CAAC,CAAC,CAAC;gBACd,UAAU,EAAE,GAAG,SAAS,cAAc;aACvC,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;QACjD,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YACxB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;YACjC,CAAC;YACD,6BAA6B;YAC5B,IAAI,CAAC,aAAa,EAAkB,CAAC,KAAK,EAAE,CAAC;QAChD,CAAC,CAAC;QAEM,iCAA4B,GAAG,GAAG,EAAE;YAC1C,qDAAqD;YACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CACvC,+CAA+C,CAChD,CAAC;YACF,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;QACzC,CAAC,CAAC;4BAvJ+B,KAAK;6BACJ,KAAK;+BACH,IAAI;;qBAUV,SAAS;uBAKA,SAAS;;IAGhD,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;QACjD,uGAAuG;QACvG,8BAA8B,CAAC,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE;YACtD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,CAAC,4BAA4B,EAAE,CAAC;QAEpC,4CAA4C;QAC5C,IAAI,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CACrC,WAAW,CACe,CAAC;QAC7B,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,GAAG,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;YACnB,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/C,MAAM,cAAc,GAAG,IAAI,oBAAoB,CAC7C,IAAI,CAAC,sBAAsB,EAC3B,EAAE,SAAS,EAAE,CAAC,SAAS,CAAC,EAAE,CAC3B,CAAC;YACF,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAC3C,aAAa,CACd,CAAC;IACJ,CAAC;IAkGD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,GAAG,IAAI,CAAC;QACvE,MAAM,UAAU,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,CAAC;QACvE,MAAM,IAAI,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC;QACrD,MAAM,KAAK,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;QAEvD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aACrD;YAED,+BACc,cAAc,EAC1B,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;oBACL,CAAC,eAAe,CAAC,EAAE,YAAY;oBAC/B,CAAC,MAAM,CAAC,EAAE,CAAC,eAAe;oBAC1B,CAAC,WAAW,CAAC,EAAE,aAAa;oBAC5B,CAAC,WAAW,CAAC,EAAE,OAAO,KAAK,MAAM;iBAClC,EACD,KAAK,EAAE,IAAI,CAAC,KAAK;gBAEjB,YAAM,KAAK,EAAC,qBAAqB,EAAC,SAAS,EAAE,WAAW,GAAI;gBAC3D,KAAK,CACI,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n onComponentPropUndefinedChange,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { IcBackToTopVariants } from \"./ic-back-to-top.types\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n tag: \"ic-back-to-top\",\n styleUrl: \"ic-back-to-top.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BackToTop {\n private isTargetElNull: boolean;\n private targetEl: Element;\n private topObserver: IntersectionObserver = null;\n\n @Element() el: HTMLIcBackToTopElement;\n\n @State() bannerOffset: boolean = false;\n @State() footerVisible: boolean = false;\n @State() targetElVisible: boolean = true;\n\n /*\n The ID of the element to jump back to when the link is clicked.\n /\n @Prop() target!: string;\n\n /\n 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.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The variant of the button to render\n */\n @Prop() variant: IcBackToTopVariants = \"default\";\n\n @Watch(\"target\")\n watchPropHandler(newValue: string, oldValue: string): void {\n //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n onComponentPropUndefinedChange(oldValue, newValue, () => {\n this.createTopObserver(newValue);\n });\n }\n\n componentWillLoad(): void {\n this.createTopObserver(this.target);\n this.checkForClassificationBanner();\n\n //observer for when footer scrolls into view\n let footers = document.querySelectorAll(\n \"ic-footer\"\n ) as NodeListOf<HTMLElement>;\n if (footers.length === 0) {\n footers = document.querySelectorAll(\"footer\");\n }\n\n if (footers.length) {\n const footerEl = footers[footers.length - 1];\n const threshold = this.bannerOffset ? 0.15 : 0;\n const footerObserver = new IntersectionObserver(\n this.footerObserverCallback,\n { threshold: [threshold] }\n );\n footerObserver.observe(footerEl);\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.target, propName: \"target\" }],\n \"Back to Top\"\n );\n }\n\n private getObservedEl = () => {\n return document.querySelector(\"#ic-back-to-top-target\");\n };\n\n private setTargetElVisible = (visible: boolean) => {\n this.targetElVisible = visible;\n };\n\n private setFooterVisible = (visible: boolean) => {\n this.checkForClassificationBanner();\n this.footerVisible =\n typeof window !== \"undefined\" && window.scrollY === 0 ? false : visible;\n };\n\n private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setTargetElVisible(entries[0].isIntersecting);\n };\n\n private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n this.setFooterVisible(entries[0].isIntersecting);\n };\n\n private findTargetEl = (target: string): Element => {\n let targetElement: Element = null;\n if (target === null \|\| target === undefined) {\n console.log(\n \"Error: No target ID specified for back to top component - defaulting to top of page\"\n );\n } else {\n targetElement = document.querySelector(\n `${target.startsWith(\"#\") ? \"\" : \"#\"}${target}`\n );\n if (targetElement === null) {\n console.log(\n `Error: Back to top target element '${target}' not found - defaulting to top of page`\n );\n }\n }\n return targetElement;\n };\n\n private createTopObserver = (target: string) => {\n this.targetEl = this.findTargetEl(target);\n let objParent: HTMLElement;\n\n //remove old element & observer\n if (this.topObserver !== null) {\n const observedEl = this.getObservedEl();\n if (observedEl !== null) {\n this.topObserver.unobserve(observedEl);\n observedEl.remove();\n }\n }\n\n if (this.targetEl === null) {\n objParent = document.body;\n this.targetEl = objParent.firstElementChild;\n this.isTargetElNull = true;\n } else {\n objParent = this.targetEl.parentNode as HTMLElement;\n this.isTargetElNull = false;\n }\n\n //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n const objBackToTopTargetEl = document.createElement(\"div\");\n objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n objBackToTopTargetEl.setAttribute(\"tabindex\", \"-1\"); // Needed for virtual cursor behaviour to work\n objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n // resize observer needs to factor in any top margin on the target el\n const marginTop = getComputedStyle(this.targetEl).marginTop;\n this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n threshold: [0],\n rootMargin: `${marginTop} 0px 0px 0px`,\n });\n this.topObserver.observe(objBackToTopTargetEl);\n };\n\n private handleClick = () => {\n if (this.isTargetElNull) {\n window.scrollTo(0, 0);\n } else {\n this.targetEl.scrollIntoView();\n }\n // Get virtual cursor to move\n (this.getObservedEl() as HTMLElement).focus();\n };\n\n private checkForClassificationBanner = () => {\n //adjust position for classification banner at bottom\n const banners = document.querySelectorAll(\n \"ic-classification-banner:not([inline='true'])\"\n );\n this.bannerOffset = banners.length > 0;\n };\n\n render() {\n const { variant, bannerOffset, targetElVisible, footerVisible } = this;\n const btnVariant = variant === \"icon\" ? \"icon-secondary\" : \"secondary\";\n const size = variant === \"icon\" ? \"large\" : \"medium\";\n const label = variant === \"icon\" ? \"\" : backToTopLabel;\n\n return (\n <Host\n class={{\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ic-button\n aria-label={backToTopLabel}\n variant={btnVariant}\n size={size}\n onClick={this.handleClick}\n class={{\n [\"offset-banner\"]: bannerOffset,\n [\"show\"]: !targetElVisible,\n [\"by-footer\"]: footerVisible,\n [\"icon-only\"]: variant === \"icon\",\n }}\n theme={this.theme}\n >\n <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n {label}\n </ic-button>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-back-to-top/ic-back-to-top.stories.js ADDED Viewed

@@ -0,0 +1,162 @@
+import { html } from "lit-html";
+export default {
+  title: "Web Components/Back to top",
+  component: "ic-back-to-top",
+};
+export const Default = {
+  render: () => html`
+    <div id="topEl" style="margin-top:-20px;">
+      <ic-typography variant="h2">Top of the page</ic-typography>
+    </div>
+    <div style="height:1200px;"></div>
+    <ic-back-to-top target="topEl"></ic-back-to-top>
+  `,
+  name: "Default",
+};
+export const IconOnly = {
+  render: () => html`
+    <div id="topEl" style="margin-top:-20px;">
+      <ic-typography variant="h2">Top of the page</ic-typography>
+    </div>
+    <div style="height:1200px;"></div>
+    <ic-back-to-top target="topEl" variant="icon"></ic-back-to-top>
+  `,
+  name: "Icon Only",
+};
+export const PageExample = {
+  render: () => html`
+    <div
+      id="header"
+      style="width:100%;height:100px;background-color:#23508e;color:var(--ic-architectural-white)"
+    >
+      <ic-typography variant="h1">Header</ic-typography>
+      <ic-button variant="secondary" appearance="light">Button</ic-button>
+    </div>
+    <div id="topPageEl">
+      <ic-typography variant="h2">Top of the page</ic-typography>
+    </div>
+    <ic-typography variant="h3">Some content</ic-typography>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit
+      turpis. Cras ac ligula et lectus mollis molestie in a enim. In ac turpis
+      in leo rutrum eleifend. Fusce consectetur posuere ligula, vitae semper
+      lorem mollis vitae. Fusce vel blandit turpis. Nulla justo ligula, egestas
+      quis rutrum id, vulputate eget diam. Integer mattis quis nisi id blandit.
+      Duis nisi lectus, suscipit elementum iaculis sed, porta et risus.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">More content</ic-typography>
+    <p>
+      Phasellus accumsan ligula enim, a iaculis sapien rhoncus vitae. Curabitur
+      pulvinar posuere diam in luctus. Sed blandit diam id odio aliquam aliquet.
+      Pellentesque eros enim, tristique vel mattis eu, blandit at enim.
+      Pellentesque sollicitudin pellentesque tellus vel eleifend. Nulla mauris
+      lorem, porttitor vel orci eu, iaculis maximus nunc. Ut rhoncus ex ipsum.
+      Mauris ultricies, augue sed eleifend pellentesque, leo purus efficitur
+      orci, sit amet volutpat tortor diam non lorem. Morbi venenatis neque vel
+      accumsan sagittis. Nunc rutrum augue non urna tincidunt auctor in at
+      libero. Sed in risus sit amet nisl tempor viverra. Phasellus maximus
+      sapien eu erat maximus iaculis. Praesent ultricies id orci eu euismod.
+      Fusce eu urna turpis. Praesent ut neque tincidunt, porta sem id, accumsan
+      massa.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Some other content</ic-typography>
+    <p>
+      Curabitur eu tempor justo. Nunc congue viverra tristique. Maecenas massa
+      enim, tincidunt consequat maximus at, fermentum vel lectus. Curabitur at
+      ligula tellus. Ut a elit sit amet augue sagittis feugiat. Mauris mi enim,
+      viverra id turpis ac, auctor vulputate ipsum. Nunc efficitur volutpat
+      augue eget sollicitudin. Pellentesque eget pharetra ligula. Integer
+      finibus feugiat sapien a pulvinar. Phasellus fermentum est lacus, quis
+      volutpat justo pellentesque vitae. Sed vitae diam porta, facilisis metus
+      ut, dictum lorem. Proin sed bibendum libero. Maecenas justo neque,
+      ultricies sed magna ac, mattis vehicula elit. Donec ac lacus eget sapien
+      luctus ultricies in in nibh.
+    </p>
+    <p>
+      Curabitur in nulla urna. Donec ligula est, suscipit eget malesuada vitae,
+      elementum et quam. Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Nulla eu dui a quam mollis porta. Nulla ante nunc, ultrices luctus
+      dolor at, ullamcorper convallis erat. Aenean viverra semper arcu nec
+      semper. Sed non magna purus. Integer accumsan dui et volutpat auctor.
+      Phasellus nec risus ultricies, maximus nunc eu, placerat diam. Etiam
+      pulvinar lacinia urna eget molestie. Suspendisse semper hendrerit ipsum,
+      vel porttitor lacus venenatis sit amet. Nullam non elit in sem vestibulum
+      molestie tempor eget augue. Sed neque ligula, tempus ac mollis bibendum,
+      ultrices suscipit risus. Duis suscipit pulvinar varius.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Some more</ic-typography>
+    <p>
+      Etiam accumsan nibh erat, condimentum tempus metus suscipit nec. Duis
+      placerat varius dolor eget ornare. Vestibulum egestas tellus non tellus
+      ornare, eu scelerisque erat pulvinar. Nam tempus lacus eu libero
+      consequat, in elementum magna ultricies. Etiam at suscipit odio. Duis quis
+      quam vitae quam varius luctus. Aliquam erat volutpat. Fusce laoreet
+      consectetur tortor, ac suscipit sem feugiat non. Etiam tempus tellus
+      aliquet orci pretium, nec pretium nulla faucibus
+    </p>
+    <br />
+    <ic-button>Button</ic-button>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Nearly there</ic-typography>
+    <p>
+      Curabitur eu tempor justo. Nunc congue viverra tristique. Maecenas massa
+      enim, tincidunt consequat maximus at, fermentum vel lectus. Curabitur at
+      ligula tellus. Ut a elit sit amet augue sagittis feugiat. Mauris mi enim,
+      viverra id turpis ac, auctor vulputate ipsum. Nunc efficitur volutpat
+      augue eget sollicitudin. Pellentesque eget pharetra ligula. Integer
+      finibus feugiat sapien a pulvinar. Phasellus fermentum est lacus, quis
+      volutpat justo pellentesque vitae. Sed vitae diam porta, facilisis metus
+      ut, dictum lorem. Proin sed bibendum libero. Maecenas justo neque,
+      ultricies sed magna ac, mattis vehicula elit. Donec ac lacus eget sapien
+      luctus ultricies in in nibh.
+    </p>
+    <p>
+      Curabitur in nulla urna. Donec ligula est, suscipit eget malesuada vitae,
+      elementum et quam. Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Nulla eu dui a quam mollis porta. Nulla ante nunc, ultrices luctus
+      dolor at, ullamcorper convallis erat. Aenean viverra semper arcu nec
+      semper. Sed non magna purus. Integer accumsan dui et volutpat auctor.
+      Phasellus nec risus ultricies, maximus nunc eu, placerat diam. Etiam
+      pulvinar lacinia urna eget molestie. Suspendisse semper hendrerit ipsum,
+      vel porttitor lacus venenatis sit amet. Nullam non elit in sem vestibulum
+      molestie tempor eget augue. Sed neque ligula, tempus ac mollis bibendum,
+      ultrices suscipit risus. Duis suscipit pulvinar varius.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">The end</ic-typography>
+    <br />
+    <ic-back-to-top target="topPageEl"></ic-back-to-top>
+    <footer>
+      <div
+        id="footer"
+        style="width:100%;height:200px;background-color:#23508e;color:var(--ic-architectural-white)"
+      >
+        <ic-typography variant="h3">Footer</ic-typography>
+      </div>
+    </footer>
+    <ic-classification-banner
+      classification="official"
+    ></ic-classification-banner>
+  `,
+  name: "Page example",
+};

package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js CHANGED Viewed

@@ -23,6 +23,20 @@ describe("ic-back-to-top", () => {
         });
         expect(page.root).toMatchSnapshot("should render");
     });
+    it("should render with light theme", async () => {
+        const page = await newSpecPage({
+            components: [BackToTop, Button],
+            html: `<div id="topEl"><ic-back-to-top target="topEl" theme="light"></ic-back-to-top></div>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with light theme");
+    });
+    it("should render with dark theme", async () => {
+        const page = await newSpecPage({
+            components: [BackToTop, Button],
+            html: `<div id="topEl"><ic-back-to-top target="topEl" theme="dark"></ic-back-to-top></div>`,
+        });
+        expect(page.root).toMatchSnapshot("should render with dark theme");
+    });
     it("should render with footer", async () => {
         const page = await newSpecPage({
             components: [BackToTop, Button, Footer],

package/dist/collection/components/ic-back-to-top/test/basic/ic-back-to-top.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-back-to-top.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-back-to-top/test/basic/ic-back-to-top.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ClassificationBanner } from \"../../../ic-classification-banner/ic-classification-banner\";\nimport { Footer } from \"../../../ic-footer/ic-footer\";\nimport { BackToTop } from \"../../ic-back-to-top\";\nimport { Button } from \"../../../ic-button/ic-button\";\n\nbeforeAll(() => {\n // IntersectionObserver isn't available in test environment\n const mockIntersectionObserver = jest.fn();\n mockIntersectionObserver.mockReturnValue({\n observe: jest.fn().mockReturnValue(null),\n unobserve: jest.fn().mockReturnValue(null),\n disconnect: jest.fn().mockReturnValue(null),\n });\n\n Object.defineProperty(global, \"IntersectionObserver\", {\n value: mockIntersectionObserver,\n });\n});\n\ndescribe(\"ic-back-to-top\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render\");\n });\n\n it(\"should render with footer\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button, Footer],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div><ic-footer></ic-footer>`,\n });\n\n expect(page.body).toMatchSnapshot(\"should render with footer\");\n });\n\n it(\"should render with no targetId set\", async () => {\n jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<ic-back-to-top></ic-back-to-top>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with no targetId set\");\n });\n\n it(\"should render when target starts with #\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"#topEl\"></ic-back-to-top></div>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"should render when target starts with #\"\n );\n });\n\n it(\"should offset due to classification banner\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, ClassificationBanner],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top><ic-classification-banner></ic-classification-banner></div>`,\n });\n\n expect(page.rootInstance.bannerOffset).toBe(true);\n });\n\n it(\"should scroll to 0,0 if target is null\", async () => {\n jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n });\n\n expect(page.rootInstance.isTargetElNull).toBe(true);\n\n page.root.shadowRoot.querySelector(\"ic-button\").click();\n expect(page.win.screenX).toBe(0);\n expect(page.win.screenY).toBe(0);\n });\n\n it(\"should scroll targetEl into view\", async () => {\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n page.root.shadowRoot.querySelector(\"ic-button\").click();\n expect(page.rootInstance.targetElVisible).toBe(true);\n });\n\n it(\"should return null targetElement when there's no target matching that given in back to top\", async () => {\n jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n const findTarget = page.rootInstance.findTargetEl(\"topEl\");\n\n expect(findTarget).toBeNull();\n });\n\n it(\"should stop observing observedEl when topObserver exists\", async () => {\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n page.rootInstance.watchPropHandler(undefined, \"topEl\");\n page.rootInstance.createTopObserver(\"topEl\");\n expect(page.rootInstance.topObserver).not.toBeNull();\n });\n\n it(\"should set footerVisible\", async () => {\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n page.rootInstance.footerObserverCallback([{ isIntersecting: true }]);\n //value is false as scrollY is always 0\n expect(page.rootInstance.footerVisible).toBe(false);\n\n page.rootInstance.footerObserverCallback([{ isIntersecting: false }]);\n expect(page.rootInstance.footerVisible).toBe(false);\n });\n\n it(\"should set targetElVisible\", async () => {\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n page.rootInstance.targetElObserverCallback([{ isIntersecting: true }]);\n expect(page.rootInstance.targetElVisible).toBe(true);\n\n page.rootInstance.targetElObserverCallback([{ isIntersecting: false }]);\n expect(page.rootInstance.targetElVisible).toBe(false);\n });\n\n it(\"should test update of target from undefined to value\", async () => {\n jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n });\n\n page.root.target = \"topEl\";\n await page.waitForChanges();\n\n expect(page.rootInstance.target).toBe(\"topEl\");\n });\n\n it(\"should render with an icon only\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\" variant=\"icon\"></ic-back-to-top></div>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with an icon only\");\n });\n});\n"]}
1	+ {"version":3,"file":"ic-back-to-top.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-back-to-top/test/basic/ic-back-to-top.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ClassificationBanner } from \"../../../ic-classification-banner/ic-classification-banner\";\nimport { Footer } from \"../../../ic-footer/ic-footer\";\nimport { BackToTop } from \"../../ic-back-to-top\";\nimport { Button } from \"../../../ic-button/ic-button\";\n\nbeforeAll(() => {\n // IntersectionObserver isn't available in test environment\n const mockIntersectionObserver = jest.fn();\n mockIntersectionObserver.mockReturnValue({\n observe: jest.fn().mockReturnValue(null),\n unobserve: jest.fn().mockReturnValue(null),\n disconnect: jest.fn().mockReturnValue(null),\n });\n\n Object.defineProperty(global, \"IntersectionObserver\", {\n value: mockIntersectionObserver,\n });\n});\n\ndescribe(\"ic-back-to-top\", () => {\n it(\"should render\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render\");\n });\n\n it(\"should render with light theme\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\" theme=\"light\"></ic-back-to-top></div>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with light theme\");\n });\n\n it(\"should render with dark theme\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\" theme=\"dark\"></ic-back-to-top></div>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with dark theme\");\n });\n\n it(\"should render with footer\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button, Footer],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div><ic-footer></ic-footer>`,\n });\n\n expect(page.body).toMatchSnapshot(\"should render with footer\");\n });\n\n it(\"should render with no targetId set\", async () => {\n jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<ic-back-to-top></ic-back-to-top>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with no targetId set\");\n });\n\n it(\"should render when target starts with #\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"#topEl\"></ic-back-to-top></div>`,\n });\n\n expect(page.root).toMatchSnapshot(\n \"should render when target starts with #\"\n );\n });\n\n it(\"should offset due to classification banner\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, ClassificationBanner],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top><ic-classification-banner></ic-classification-banner></div>`,\n });\n\n expect(page.rootInstance.bannerOffset).toBe(true);\n });\n\n it(\"should scroll to 0,0 if target is null\", async () => {\n jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n });\n\n expect(page.rootInstance.isTargetElNull).toBe(true);\n\n page.root.shadowRoot.querySelector(\"ic-button\").click();\n expect(page.win.screenX).toBe(0);\n expect(page.win.screenY).toBe(0);\n });\n\n it(\"should scroll targetEl into view\", async () => {\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n page.root.shadowRoot.querySelector(\"ic-button\").click();\n expect(page.rootInstance.targetElVisible).toBe(true);\n });\n\n it(\"should return null targetElement when there's no target matching that given in back to top\", async () => {\n jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n const findTarget = page.rootInstance.findTargetEl(\"topEl\");\n\n expect(findTarget).toBeNull();\n });\n\n it(\"should stop observing observedEl when topObserver exists\", async () => {\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n page.rootInstance.watchPropHandler(undefined, \"topEl\");\n page.rootInstance.createTopObserver(\"topEl\");\n expect(page.rootInstance.topObserver).not.toBeNull();\n });\n\n it(\"should set footerVisible\", async () => {\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n page.rootInstance.footerObserverCallback([{ isIntersecting: true }]);\n //value is false as scrollY is always 0\n expect(page.rootInstance.footerVisible).toBe(false);\n\n page.rootInstance.footerObserverCallback([{ isIntersecting: false }]);\n expect(page.rootInstance.footerVisible).toBe(false);\n });\n\n it(\"should set targetElVisible\", async () => {\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\"></ic-back-to-top></div>`,\n });\n\n page.rootInstance.targetElObserverCallback([{ isIntersecting: true }]);\n expect(page.rootInstance.targetElVisible).toBe(true);\n\n page.rootInstance.targetElObserverCallback([{ isIntersecting: false }]);\n expect(page.rootInstance.targetElVisible).toBe(false);\n });\n\n it(\"should test update of target from undefined to value\", async () => {\n jest.spyOn(console, \"error\").mockImplementation(jest.fn());\n const page = await newSpecPage({\n components: [BackToTop],\n html: `<div id=\"topEl\"><ic-back-to-top></ic-back-to-top></div>`,\n });\n\n page.root.target = \"topEl\";\n await page.waitForChanges();\n\n expect(page.rootInstance.target).toBe(\"topEl\");\n });\n\n it(\"should render with an icon only\", async () => {\n const page = await newSpecPage({\n components: [BackToTop, Button],\n html: `<div id=\"topEl\"><ic-back-to-top target=\"topEl\" variant=\"icon\"></ic-back-to-top></div>`,\n });\n\n expect(page.root).toMatchSnapshot(\"should render with an icon only\");\n });\n});\n"]}

package/dist/collection/components/ic-badge/ic-badge.css CHANGED Viewed

@@ -23,15 +23,15 @@
 }
 :host(.ic-badge-neutral) {
-  background-color: var(--ic-badge-neutral) !important;
+  background-color: var(--ic-badge-dark) !important;
 }
 :host(.ic-badge-light) ic-typography {
-  --ic-typography-color: var(--ic-badge-light-text);
+  --ic-typography-color: var(--ic-badge-text-monochrome);
 }
 :host(.ic-badge-light) ::slotted(*) {
-  fill: var(--ic-badge-light-icon);
+  fill: var(--ic-badge-icon-monochrome);
 }
 :host(.ic-badge-info) {
@@ -95,7 +95,7 @@
 }
 :host(.ic-badge-foreground-dark) ::slotted(*) {
-  fill: var(--ic-color-primary-text-light);
+  fill: var(--ic-color-text-primary-light);
 }
 :host(.ic-badge-foreground-light) ::slotted(*) {
@@ -103,7 +103,7 @@
 }
 :host(.ic-badge-foreground-dark) ic-typography {
-  --ic-typography-color: var(--ic-color-primary-text-light);
+  --ic-typography-color: var(--ic-color-text-primary-light);
 }
 :host(.ic-badge-foreground-light) ic-typography {

package/dist/collection/components/ic-badge/ic-badge.js CHANGED Viewed

@@ -1,5 +1,7 @@
-import { Host, h } from "@stencil/core";
-import { convertToRGBA, getThemeForegroundColor, isPropDefined, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+import { Host, h, } from "@stencil/core";
+import { convertToRGBA, getBrandForegroundAppearance, isPropDefined, onComponentRequiredPropUndefined, } from "../../utils/helpers";
+const NAVIGATION_BUTTON = "IC-NAVIGATION-BUTTON";
+const TOP_NAVIGATION = "IC-TOP-NAVIGATION";
 /**
  * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.
  */
@@ -11,7 +13,7 @@ export class Badge {
             if (colorRGBA) {
                 const { r, g, b, a } = colorRGBA;
                 this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
-                this.foregroundColour = getThemeForegroundColor((r * 299 + g * 587 + b * 114) / 1000);
+                this.foregroundColour = getBrandForegroundAppearance((r * 299 + g * 587 + b * 114) / 1000);
             }
         };
         this.getLabel = () => this.maxNumber && Number(this.label) > this.maxNumber
@@ -40,6 +42,18 @@ export class Badge {
                 }
             }
         };
+        this.setPositionInTopNavigation = () => {
+            const parentTopNavEl = this.el.parentElement.parentElement;
+            parentTopNavEl.classList.contains("mobile-mode")
+                ? (this.position = "inline")
+                : (this.position = "near");
+        };
+        this.isInTopNav = () => {
+            const parentEl = this.el.parentElement;
+            const grandparentEl = parentEl.parentElement;
+            return (parentEl.tagName === NAVIGATION_BUTTON &&
+                grandparentEl.tagName === TOP_NAVIGATION);
+        };
         this.isAccessibleLabelDefined = () => isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
         this.accessibleLabel = undefined;
         this.customColor = null;
@@ -78,6 +92,15 @@ export class Badge {
         this.type === "text" &&
             onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Badge");
     }
+    componentWillRender() {
+        this.isInTopNav() && this.setPositionInTopNavigation();
+    }
+    navBarMenuOpenHandler() {
+        this.isInTopNav() && (this.position = "inline");
+    }
+    navBarMenuCloseHandler() {
+        this.isInTopNav() && (this.position = "near");
+    }
     render() {
         const { ariaLabel, el, foregroundColour, getLabel, position, size, label, type, variant, visible, theme, } = this;
         return (h(Host, { class: {
@@ -165,7 +188,7 @@ export class Badge {
             },
             "position": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "IcBadgePositions",
                     "resolved": "\"far\" | \"inline\" | \"near\"",
@@ -336,5 +359,20 @@ export class Badge {
                 "methodName": "visibleHandler"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "icNavigationMenuOpened",
+                "method": "navBarMenuOpenHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "icNavigationMenuClosed",
+                "method": "navBarMenuCloseHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=ic-badge.js.map

package/dist/collection/components/ic-badge/ic-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-badge.js","sourceRoot":"","sources":["../../../src/components/ic-badge/ic-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcSizes,\n IcThemeForeground,\n IcColor,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getThemeForegroundColor,\n isPropDefined,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string = null;\n private foregroundColour: IcThemeForeground;\n private parentAriaLabel: string;\n\n @Element() el: HTMLIcBadgeElement;\n\n /\n The accessible label of the badge component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string;\n\n @Watch(\"accessibleLabel\")\n accessibleLabelHandler(): void {\n this.setAccessibleLabel();\n }\n\n /\n The custom badge colour. This will only style the badge component if variant=\"custom\".\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() customColor?: IcColor = null;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n }\n\n /\n The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and label is not empty.\n /\n @Prop() maxNumber?: number;\n\n /\n The positioning of the badge in reference to the parent element.\n /\n @Prop() position?: IcBadgePositions = \"far\";\n\n /\n The size of the badge to be displayed.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The text displayed in the badge. This will only be displayed if type=\"text\".\n /\n @Prop() label?: string;\n\n /\n 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.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The type of badge to be displayed.\n /\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /\n The variant of the badge to be displayed.\n /\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n @Watch(\"variant\")\n variantHandler(): void {\n if (this.variant === \"custom\") {\n this.setBadgeColour();\n }\n }\n\n /\n If `true`, the badge will be displayed.\n /\n @Prop() visible: boolean = true;\n\n @Watch(\"visible\")\n visibleHandler(): void {\n this.setAccessibleLabel();\n }\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n const ariaLabel = this.el.parentElement?.ariaLabel;\n if (ariaLabel) this.parentAriaLabel = ariaLabel;\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Badge\"\n );\n }\n\n private setBadgeColour = () => {\n const colorRGBA = convertToRGBA(this.customColor);\n\n if (colorRGBA) {\n const { r, g, b, a } = colorRGBA;\n this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n this.foregroundColour = getThemeForegroundColor(\n (r 299 + g * 587 + b * 114) / 1000\n );\n }\n };\n\n private getLabel = () =>\n this.maxNumber && Number(this.label) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.label;\n\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n private setAccessibleLabel = () => {\n const parentEl = this.el.parentElement;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.label \|\| \"with badge being displayed\";\n\n if (parentEl) {\n const { tagName } = parentEl;\n if (\n tagName !== \"IC-CARD\" &&\n (tagName !== \"IC-TAB\" \|\| (tagName === \"IC-TAB\" && this.parentAriaLabel))\n ) {\n const ariaLabelPrefix = this.parentAriaLabel\n ? `${this.parentAriaLabel} ,`\n : \"\";\n parentEl.ariaLabel = this.visible\n ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n : undefined;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private isAccessibleLabelDefined = () =>\n isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n render() {\n const {\n ariaLabel,\n el,\n foregroundColour,\n getLabel,\n position,\n size,\n label,\n type,\n variant,\n visible,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-badge-${position}`]: true,\n [`ic-badge-${size}`]: true,\n [`ic-badge-${variant}`]: true,\n [`ic-badge-${type}`]: true,\n [`ic-badge-foreground-${foregroundColour}`]:\n foregroundColour !== null && variant === \"custom\",\n [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n id={el.id \|\| null}\n aria-label={ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && label && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {getLabel()}\n </ic-typography>\n )}\n {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-badge.js","sourceRoot":"","sources":["../../../src/components/ic-badge/ic-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Host,\n Prop,\n Watch,\n h,\n Listen,\n} from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n IcSizes,\n IcBrandForeground,\n IcColor,\n IcThemeMode,\n} from \"../../utils/types\";\nimport {\n convertToRGBA,\n getBrandForegroundAppearance,\n isPropDefined,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst NAVIGATION_BUTTON = \"IC-NAVIGATION-BUTTON\";\nconst TOP_NAVIGATION = \"IC-TOP-NAVIGATION\";\n\n/*\n @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n /\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private ariaLabel: string = null;\n private foregroundColour: IcBrandForeground;\n private parentAriaLabel: string;\n\n @Element() el: HTMLIcBadgeElement;\n\n /\n The accessible label of the badge component to provide context for screen reader users.\n /\n @Prop() accessibleLabel?: string;\n\n @Watch(\"accessibleLabel\")\n accessibleLabelHandler(): void {\n this.setAccessibleLabel();\n }\n\n /\n The custom badge colour. This will only style the badge component if variant=\"custom\".\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n /\n @Prop() customColor?: IcColor = null;\n\n @Watch(\"customColor\")\n customColorHandler(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n }\n\n /\n The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and label is not empty.\n /\n @Prop() maxNumber?: number;\n\n /\n The positioning of the badge in reference to the parent element.\n /\n @Prop({ mutable: true }) position?: IcBadgePositions = \"far\";\n\n /\n The size of the badge to be displayed.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The text displayed in the badge. This will only be displayed if type=\"text\".\n /\n @Prop() label?: string;\n\n /\n 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.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The type of badge to be displayed.\n /\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /\n The variant of the badge to be displayed.\n /\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n @Watch(\"variant\")\n variantHandler(): void {\n if (this.variant === \"custom\") {\n this.setBadgeColour();\n }\n }\n\n /\n If `true`, the badge will be displayed.\n /\n @Prop() visible: boolean = true;\n\n @Watch(\"visible\")\n visibleHandler(): void {\n this.setAccessibleLabel();\n }\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n const ariaLabel = this.el.parentElement?.ariaLabel;\n if (ariaLabel) this.parentAriaLabel = ariaLabel;\n this.setAccessibleLabel();\n }\n\n componentDidLoad(): void {\n this.type === \"text\" &&\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Badge\"\n );\n }\n\n componentWillRender(): void {\n this.isInTopNav() && this.setPositionInTopNavigation();\n }\n\n @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n navBarMenuOpenHandler(): void {\n this.isInTopNav() && (this.position = \"inline\");\n }\n\n @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n navBarMenuCloseHandler(): void {\n this.isInTopNav() && (this.position = \"near\");\n }\n\n private setBadgeColour = () => {\n const colorRGBA = convertToRGBA(this.customColor);\n\n if (colorRGBA) {\n const { r, g, b, a } = colorRGBA;\n this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n this.foregroundColour = getBrandForegroundAppearance(\n (r 299 + g * 587 + b * 114) / 1000\n );\n }\n };\n\n private getLabel = () =>\n this.maxNumber && Number(this.label) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.label;\n\n // Set aria-label on badge and / or parent element\n // Aria-describedby seems to not work, probably due to shadow DOM\n private setAccessibleLabel = () => {\n const parentEl = this.el.parentElement;\n const defaultAriaLabel = this.isAccessibleLabelDefined()\n ? this.accessibleLabel\n : this.label \|\| \"with badge being displayed\";\n\n if (parentEl) {\n const { tagName } = parentEl;\n if (\n tagName !== \"IC-CARD\" &&\n (tagName !== \"IC-TAB\" \|\| (tagName === \"IC-TAB\" && this.parentAriaLabel))\n ) {\n const ariaLabelPrefix = this.parentAriaLabel\n ? `${this.parentAriaLabel} ,`\n : \"\";\n parentEl.ariaLabel = this.visible\n ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n : undefined;\n } else {\n this.ariaLabel = `, ${defaultAriaLabel}`;\n }\n }\n };\n\n private setPositionInTopNavigation = () => {\n const parentTopNavEl = this.el.parentElement.parentElement;\n parentTopNavEl.classList.contains(\"mobile-mode\")\n ? (this.position = \"inline\")\n : (this.position = \"near\");\n };\n\n private isInTopNav = (): boolean => {\n const parentEl = this.el.parentElement;\n const grandparentEl = parentEl.parentElement;\n return (\n parentEl.tagName === NAVIGATION_BUTTON &&\n grandparentEl.tagName === TOP_NAVIGATION\n );\n };\n\n private isAccessibleLabelDefined = () =>\n isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n render() {\n const {\n ariaLabel,\n el,\n foregroundColour,\n getLabel,\n position,\n size,\n label,\n type,\n variant,\n visible,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-badge-${position}`]: true,\n [`ic-badge-${size}`]: true,\n [`ic-badge-${variant}`]: true,\n [`ic-badge-${type}`]: true,\n [`ic-badge-foreground-${foregroundColour}`]:\n foregroundColour !== null && variant === \"custom\",\n [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n id={el.id \|\| null}\n aria-label={ariaLabel}\n role=\"status\"\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && label && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {getLabel()}\n </ic-typography>\n )}\n {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n </Host>\n );\n }\n}\n"]}