npm - @scania/tegel - Versions diffs - 0.0.4 → 0.0.6 - Mend

@scania/tegel 0.0.4 → 0.0.6

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 (1252) hide show

package/dist/collection/components/footer/footer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,~~WAAW,EAAE,qBAAqB;MAClC,~~KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,~~6CAA6C~~;~~MAC1D~~,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;~~MACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;~~KACF;GACF;EACD,IAAI,EAAC;IACH,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,KAAK;GACjB;CACA,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAC,EAAE,EAAE,CAC3C,iBAAiB,CACf;;;;;;;;;;;IAWA,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE,CAAA,CAAC,CAAC,EAAE;;MAG1F,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCH;EACC,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;GAkBD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Footer',\n parameters: {\n notes: readme,\n layout: 'fullscreen',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n ~~description: 'Footer mode variant',\n~~ table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n topPart: {\n name: 'Top part',\n description: 'Adds top part of the footer with more links',\n ~~table~~: {\n ~~defaultValue~~: ~~{ summary: false }~~,\n },\n ~~control~~: {\n ~~type~~: ~~'boolean'~~,\n },\n },\n },\n args:{\n modeVariant: 'Inherit from parent', \n topPart: false,\n}\n};\n\nconst Template = ({ topPart, modeVariant}) =>\n formatHtmlPreview(\n `\n <style>\n .demo-wrapper {\n padding: 0;\n margin: 0;\n font-size: 14px;\n }\n </style>\n\n <div class=\"demo-wrapper\">\n <div class=\"sdds-footer \n ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}`: ''}\n \">\n ${\n topPart\n ? `\n <div class=\"sdds-footer-top sdds-container-fluid\">\n <div class=\"sdds-row\">\n <div class=\"sdds-footer-top-col sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n <div class=\"sdds-footer-title opened\">\n <span>Title 1</span>\n <span class=\"sdds-footer-top-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </span>\n </div>\n <ul class=\"sdds-footer-main-links opened\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n </div>\n\n <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n <div class=\"sdds-footer-title\">\n <span>Title 2</span>\n <span class=\"sdds-footer-top-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </span>\n </div>\n <ul class=\"sdds-footer-main-links\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n </div>\n </div>\n </div>\n `\n : ''\n }\n <div class=\"sdds-footer-main\">\n <ul class=\"sdds-footer-main-links\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n <ul class=\"sdds-footer-social-links\">\n <li><a href=\"#\">Social link</a></li>\n <li><a href=\"#\">Social link</a></li>\n <li><a href=\"#\">Social link</a></li>\n </ul>\n <div class=\"sdds-footer-main-brand\">\n <p>Copyright © 2022 Scania</p>\n </div>\n </div>\n </div>\n </div>\n `,\n );\n\nexport const Native = Template.bind({});\n"]}
1	+ {"version":3,"file":"footer.stories.js","sourceRoot":"","sources":["../../../src/components/footer/footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAC;IACH,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,KAAK;GACjB;CACA,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAC,EAAE,EAAE,CAC3C,iBAAiB,CACf;;;;;;;;;;;IAWA,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE,CAAA,CAAC,CAAC,EAAE;;MAG1F,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCH;EACC,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;GAkBD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Footer',\n parameters: {\n notes: readme,\n layout: 'fullscreen',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n topPart: {\n name: 'Top part',\n description: 'Adds the top part of the footer with more links.',\n control: {\n type: 'boolean',\n },\n table: {\n defaultValue: { summary: false },\n },\n },\n },\n args:{\n modeVariant: 'Inherit from parent', \n topPart: false,\n}\n};\n\nconst Template = ({ topPart, modeVariant}) =>\n formatHtmlPreview(\n `\n <style>\n .demo-wrapper {\n padding: 0;\n margin: 0;\n font-size: 14px;\n }\n </style>\n\n <div class=\"demo-wrapper\">\n <div class=\"sdds-footer \n ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}`: ''}\n \">\n ${\n topPart\n ? `\n <div class=\"sdds-footer-top sdds-container-fluid\">\n <div class=\"sdds-row\">\n <div class=\"sdds-footer-top-col sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n <div class=\"sdds-footer-title opened\">\n <span>Title 1</span>\n <span class=\"sdds-footer-top-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </span>\n </div>\n <ul class=\"sdds-footer-main-links opened\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n </div>\n\n <div class=\"sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12\">\n <div class=\"sdds-footer-title\">\n <span>Title 2</span>\n <span class=\"sdds-footer-top-icon\">\n <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n </span>\n </div>\n <ul class=\"sdds-footer-main-links\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n </div>\n </div>\n </div>\n `\n : ''\n }\n <div class=\"sdds-footer-main\">\n <ul class=\"sdds-footer-main-links\">\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n <li><a href=\"#\">Legal link</a></li>\n </ul>\n <ul class=\"sdds-footer-social-links\">\n <li><a href=\"#\">Social link</a></li>\n <li><a href=\"#\">Social link</a></li>\n <li><a href=\"#\">Social link</a></li>\n </ul>\n <div class=\"sdds-footer-main-brand\">\n <p>Copyright © 2022 Scania</p>\n </div>\n </div>\n </div>\n </div>\n `,\n );\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/footer/webcomponent/{sdds-footer-link-group/sdds-footer-link-group.css → sdds-footer-group/sdds-footer-group.css} RENAMED Viewed

@@ -1,6 +1,5 @@
 :host {
   display: block;
-  width: 100%;
 }
 :host .footer-top-title {
   font: var(--sdds-headline-07);
@@ -34,6 +33,10 @@
 :host button.footer-top-title-button:active {
   background-color: var(--sdds-footer-top-button-active);
 }
+:host button.footer-top-title-button:focus-visible {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
 :host button.footer-top-title-button sdds-icon {
   transition: transform 0.2s ease-in-out;
 }
@@ -44,6 +47,9 @@
   display: flex;
   gap: 8px;
 }
+:host [role=list].left, :host [role=list].right {
+  gap: 24px;
+}
 :host [role=list].top-part-child {
   flex-direction: column;
 }
@@ -51,6 +57,9 @@
   :host [role=list].left:not(.top-part-child) {
     flex-direction: column;
   }
+  :host [role=list].left:not(.top-part-child).left, :host [role=list].left:not(.top-part-child).right {
+    gap: 8px;
+  }
   :host [role=list].top-part-child.closed {
     display: none;
   }

package/dist/collection/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { Host, h } from '@stencil/core';
+export class SddsFooterGroup {
+  constructor() {
+    /** If the group is placed in the main part of the footer it can have either left or right as a slot position otherwise undefined. */
+    this.slotPostion = null;
+    /** Indicates the if group is part of the top part of the footer. */
+    this.topPartGroup = false;
+    this.titleText = undefined;
+    this.open = false;
+  }
+  connectedCallback() {
+    this.topPartGroup = this.host.parentElement.slot === 'top';
+    if (!this.topPartGroup) {
+      this.slotPostion = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';
+    }
+  }
+  render() {
+    return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
+        this.open = !this.open;
+      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("sdds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPostion ? this.slotPostion : ''}
+            ${this.topPartGroup ? 'top-part-child' : ''}
+            ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-footer-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-footer-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-footer-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "titleText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title text for the link group, only valid on top part of footer."
+        },
+        "attribute": "title-text",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-footer-group.js.map

package/dist/collection/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sdds-footer-group.js","sourceRoot":"","sources":["../../../../../src/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAe,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAO5D,MAAM,OAAO,eAAe;;IAS1B,qIAAqI;IAC7H,gBAAW,GAAqB,IAAI,CAAC;IAE7C,oEAAoE;IAC5D,iBAAY,GAAY,KAAK,CAAC;;gBANb,KAAK;;EAQ9B,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;IAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;KACrF;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,IAAI,CACtC,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD;MAEA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,IAAI,CACtC,cACE,OAAO,EAAE,GAAG,EAAE;UACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,CAAC,EACD,KAAK,EAAE,4BAA4B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE;QAErE,IAAI,CAAC,SAAS;QACf,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAChD,CACV;MACD,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;cAC9C,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;cACzC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE;QAEvC,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer-group',\n styleUrl: 'sdds-footer-group.scss',\n shadow: true,\n})\nexport class SddsFooterGroup {\n @Element() host: HostElement;\n\n /** Title text for the link group, only valid on top part of footer. */\n @Prop() titleText: string;\n\n /** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */\n @State() open: boolean = false;\n\n /** If the group is placed in the main part of the footer it can have either left or right as a slot position otherwise undefined. */\n private slotPostion: 'left' | 'right' = null;\n\n /** Indicates the if group is part of the top part of the footer. */\n private topPartGroup: boolean = false;\n\n connectedCallback() {\n this.topPartGroup = this.host.parentElement.slot === 'top';\n if (!this.topPartGroup) {\n this.slotPostion = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';\n }\n }\n\n render() {\n return (\n <Host>\n {this.titleText && this.topPartGroup && (\n <div class=\"footer-top-title\">{this.titleText}</div>\n )}\n\n {this.titleText && this.topPartGroup && (\n <button\n onClick={() => {\n this.open = !this.open;\n }}\n class={`footer-top-title-button ${this.open ? 'expanded' : 'closed'}`}\n >\n {this.titleText}\n <sdds-icon name=\"chevron_down\" size=\"20px\"></sdds-icon>\n </button>\n )}\n <div\n role=\"list\"\n class={`${this.slotPostion ? this.slotPostion : ''}\n ${this.topPartGroup ? 'top-part-child' : ''}\n ${this.open ? 'expanded' : 'closed'}`}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/footer/webcomponent/{sdds-footer-link/sdds-footer-link.css → sdds-footer-item/sdds-footer-item.css} RENAMED Viewed

@@ -1,25 +1,25 @@
-[role=listitem] a {
+[role=listitem] ::slotted(*) {
   font: var(--sdds-headline-06);
   letter-spacing: var(--sdds-headline-06-ls);
   color: var(--sdds-footer-main-links);
   opacity: var(--sdds-footer-main-links-opacity);
   text-decoration: none;
 }
-[role=listitem] a:focus {
+[role=listitem] ::slotted(*:focus-visible) {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
-[role=listitem] a:hover {
+[role=listitem] ::slotted(*:hover) {
   text-decoration: underline;
 }
-[role=listitem].top-part-child a {
+[role=listitem].top-part-child ::slotted(*) {
   color: var(--sdds-footer-top-links);
   font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
   font-weight: bold;
   font-size: 14px;
   line-height: 18px;
 }
-[role=listitem].top-part-child a:focus {
+[role=listitem].top-part-child ::slotted(*:focus-visible) {
   outline: 2px solid var(--sdds-blue-400);
   outline-offset: -2px;
 }
@@ -28,17 +28,17 @@
   [role=listitem].top-part-child {
     border-bottom: 1px solid var(--sdds-footer-top-divider);
   }
-  [role=listitem].top-part-child a {
+  [role=listitem].top-part-child ::slotted(*) {
     display: block;
     height: 100%;
     padding: 19px 40px;
     font-weight: normal;
   }
-  [role=listitem].top-part-child a:hover {
+  [role=listitem].top-part-child ::slotted(*:hover) {
     text-decoration: underline;
     background-color: var(--sdds-footer-top-links-background-hover);
   }
-  [role=listitem].top-part-child a:focus {
+  [role=listitem].top-part-child ::slotted(*:focus-visible) {
     outline: 2px solid var(--sdds-blue-400);
     outline-offset: -2px;
   }

package/dist/collection/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.js ADDED Viewed

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+export class SddsFooterItem {
+  constructor() {
+    this.parentIsTopPart = false;
+  }
+  connectedCallback() {
+    this.parentIsTopPart = this.host.closest('sdds-footer-group').parentElement.slot === 'top';
+  }
+  render() {
+    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-footer-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-footer-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-footer-item.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-footer-item.js.map

package/dist/collection/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sdds-footer-item.js","sourceRoot":"","sources":["../../../../../src/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQtD,MAAM,OAAO,cAAc;EAL3B;IAQU,oBAAe,GAAY,KAAK,CAAC;GAa1C;EAXC,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;EAC7F,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EAAE;MAC3E,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer-item',\n styleUrl: 'sdds-footer-item.scss',\n shadow: true,\n})\nexport class SddsFooterItem {\n @Element() host: HostElement;\n\n private parentIsTopPart: boolean = false;\n\n connectedCallback() {\n this.parentIsTopPart = this.host.closest('sdds-footer-group').parentElement.slot === 'top';\n }\n\n render() {\n return (\n <div role=\"listitem\" class={`${this.parentIsTopPart ? 'top-part-child' : ''}`}>\n <slot></slot>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/footer/webcomponent/sdds-footer.js CHANGED Viewed

@@ -6,8 +6,7 @@ export class SddsFooter {
     this.hasTopPart = undefined;
   }
   connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasTopPart = children.some((element) => element.slot === 'top');
+    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');
   }
   render() {
     return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, this.hasTopPart && (h("div", { class: "footer-top" }, h("slot", { name: "top" }))), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, h("div", { class: "footer-bottom-left" }, h("slot", { name: "main-left" })), h("div", { class: "footer-bottom-right" }, h("slot", { name: "main-right" }))), h("div", { class: "footer-main-bottom" }, h("small", { class: "copyright" }, "Copyright \u00A9 ", new Date().getFullYear(), " Scania"), h("div", { class: "brand" }, h("p", null, "Scania")))))));

package/dist/collection/components/footer/webcomponent/sdds-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdds-footer.js","sourceRoot":"","sources":["../../../../src/components/footer/webcomponent/sdds-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAe,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAOjE,MAAM,OAAO,UAAU;;~~uBAE0B~~,IAAI;;;~~EAMnD~~,iBAAiB;IACf,~~MAAM~~,~~QAAQ~~,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC~~;IAChD~~,IAAI,CAAC,~~UAAU,GAAG,QAAQ,~~CAAC,~~IAAI,CAAC,CAAC,~~OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;~~EACvE~~,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;MAC/E;QACG,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAC,YAAY;UACrB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP;QACD,WAAK,KAAK,EAAC,aAAa;UACtB,WAAK,KAAK,EAAC,iBAAiB;YAC1B,WAAK,KAAK,EAAC,oBAAoB;cAC7B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,WAAK,KAAK,EAAC,qBAAqB;cAC9B,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF;UACN,WAAK,KAAK,EAAC,oBAAoB;YAC7B,aAAO,KAAK,EAAC,WAAW;;cAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;wBAAgB;YACnF,WAAK,KAAK,EAAC,OAAO;cAChB,sBAAa,CACT,CACF,CACF,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer',\n styleUrl: 'sdds-footer.scss',\n shadow: true,\n})\nexport class SddsFooter {\n /** Mode variant of the component, based on current mode. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n ~~@State()~~ ~~hasTopPart:~~ ~~boolean;\~~n\n @~~Element~~() ~~host~~: ~~HostElement~~;\n\n connectedCallback() {\n ~~const~~ ~~children~~ = Array.from(this.host.children)~~;\n this~~.~~hasTopPart = children.~~some((element) => element.slot === 'top');\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n <footer>\n {this.hasTopPart && (\n <div class=\"footer-top\">\n <slot name=\"top\"></slot>\n </div>\n )}\n <div class=\"footer-main\">\n <div class=\"footer-main-top\">\n <div class=\"footer-bottom-left\">\n <slot name=\"main-left\"></slot>\n </div>\n <div class=\"footer-bottom-right\">\n <slot name=\"main-right\"></slot>\n </div>\n </div>\n <div class=\"footer-main-bottom\">\n <small class=\"copyright\">Copyright © {new Date().getFullYear()} Scania</small>\n <div class=\"brand\">\n <p>Scania</p>\n </div>\n </div>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"sdds-footer.js","sourceRoot":"","sources":["../../../../src/components/footer/webcomponent/sdds-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAe,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAOjE,MAAM,OAAO,UAAU;;uBAI0B,IAAI;;;EAKnD,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;EAC7F,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;MAC/E;QACG,IAAI,CAAC,UAAU,IAAI,CAClB,WAAK,KAAK,EAAC,YAAY;UACrB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP;QACD,WAAK,KAAK,EAAC,aAAa;UACtB,WAAK,KAAK,EAAC,iBAAiB;YAC1B,WAAK,KAAK,EAAC,oBAAoB;cAC7B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;YACN,WAAK,KAAK,EAAC,qBAAqB;cAC9B,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF;UACN,WAAK,KAAK,EAAC,oBAAoB;YAC7B,aAAO,KAAK,EAAC,WAAW;;cAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;wBAAgB;YACnF,WAAK,KAAK,EAAC,OAAO;cAChB,sBAAa,CACT,CACF,CACF,CACC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer',\n styleUrl: 'sdds-footer.scss',\n shadow: true,\n})\nexport class SddsFooter {\n @Element() host: HostElement;\n\n /** Mode variant of the component, based on current mode. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Indictes whether or not the footer has a top part. */\n @State() hasTopPart: boolean;\n\n connectedCallback() {\n this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n <footer>\n {this.hasTopPart && (\n <div class=\"footer-top\">\n <slot name=\"top\"></slot>\n </div>\n )}\n <div class=\"footer-main\">\n <div class=\"footer-main-top\">\n <div class=\"footer-bottom-left\">\n <slot name=\"main-left\"></slot>\n </div>\n <div class=\"footer-bottom-right\">\n <slot name=\"main-right\"></slot>\n </div>\n </div>\n <div class=\"footer-main-bottom\">\n <small class=\"copyright\">Copyright © {new Date().getFullYear()} Scania</small>\n <div class=\"brand\">\n <p>Scania</p>\n </div>\n </div>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { formatHtmlPreview } from '../../../utils/utils';
 import readme from './readme.md';
-import readmeLink from './sdds-footer-link/readme.md';
-import readmeLinkGroup from './sdds-footer-link-group/readme.md';
+import readmeItem from './sdds-footer-item/readme.md';
+import readmeLinkGroup from './sdds-footer-group/readme.md';
 export default {
   title: 'Components/Footer',
   parameters: {
-    notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer link': readmeLink },
+    notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer item': readmeItem },
     layout: 'fullscreen',
     design: [
       {
@@ -23,18 +23,18 @@ export default {
   argTypes: {
     modeVariant: {
       name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
         type: 'radio',
       },
       options: ['Inherit from parent', 'Primary', 'Secondary'],
-      description: 'Footer mode variant',
       table: {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
     topPart: {
       name: 'Top part',
-      description: 'Adds the top part of the footer',
+      description: 'Adds the top part of the footer with more links.',
       control: {
         type: 'boolean',
       },
@@ -42,7 +42,7 @@ export default {
   },
   args: {
     modeVariant: 'Inherit from parent',
-    topPart: true,
+    topPart: false,
   },
 };
 const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
@@ -59,57 +59,84 @@ const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
       ${topPart
   ? `
       <div slot="top">
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group title-text="Title">
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group title-text="Title">
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group title-text="Title">
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
-        <sdds-footer-link-group title-text="Title">
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group title-text="Title">
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
       </div>
       `
   : ''}
       <div slot="main-left">
-        <sdds-footer-link-group>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-          <sdds-footer-link link-href="#">Link text</sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> Link text</a>
+          </sdds-footer-item>
+        </sdds-footer-group>
       </div>
       <div slot="main-right">
-        <sdds-footer-link-group>
-          <sdds-footer-link link-href="#">
-          <sdds-icon name="truck"></sdds-icon>
-          </sdds-footer-link>
-          <sdds-footer-link link-href="#">
-            <sdds-icon name="truck"></sdds-icon>
-          </sdds-footer-link>
-          <sdds-footer-link link-href="#">
-            <sdds-icon name="truck"></sdds-icon>
-          </sdds-footer-link>
-        </sdds-footer-link-group>
+        <sdds-footer-group>
+          <sdds-footer-item >
+            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
+          </sdds-footer-item>
+          <sdds-footer-item >
+            <a href="#"> <sdds-icon name="truck"></sdds-icon></a>
+          </sdds-footer-item>
+        </sdds-footer-group>
       </div>
     </sdds-footer>

package/dist/collection/components/footer/webcomponent/sdds-footer.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sdds-footer.stories.js","sourceRoot":"","sources":["../../../../src/components/footer/webcomponent/sdds-footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,eAAe,MAAM,~~oCAAoC,~~CAAC;~~AAEjE~~,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE;IAC5F,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,~~WAAW,EAAE,qBAAqB;MAClC,~~KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,~~iCAAiC~~;~~MAC9C~~,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,~~IAAI~~;~~GACd~~;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CACf;;;;;;;;;MASE,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;QAGxF,OAAO;EACL,CAAC,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCL~~;EACG,CAAC,CAAC,EACN~~;;;;;;;;;;;;;;;;;;;;;;;GAuBH~~,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport ~~readmeLink~~ from './sdds-footer-~~link~~/readme.md';\nimport readmeLinkGroup from './sdds-footer-~~link-~~group/readme.md';\n\nexport default {\n title: 'Components/Footer',\n parameters: {\n notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer ~~link~~': ~~readmeLink~~ },\n layout: 'fullscreen',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n ~~description: 'Footer mode variant',\n~~ table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n topPart: {\n name: 'Top part',\n description: 'Adds the top part of the footer',\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n modeVariant: 'Inherit from parent',\n topPart: ~~true~~,\n },\n};\n\nconst Template = ({ topPart, modeVariant }) =>\n formatHtmlPreview(\n `\n <main>\n <div class=\"sdds-u-p3 \">\n <div class=\"sdds-body-01\">\n Resize the window to see how the footer behaves on smaller/bigger screens.\n </div>\n </div>\n </main>\n <sdds-footer\n ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n >\n ${\n topPart\n ? `\n <div slot=\"top\">\n <sdds-footer-~~link-~~group title-text=\"Title\">\n <sdds-footer-~~link~~ ~~link-href=\"#\">Link text</sdds-footer-link~~>\n <~~sdds-footer-link~~ ~~link-~~href=\"#\">Link text</~~sdds-footer-link~~>\n ~~<sdds-footer-link link-href=\"#\">Link text~~</sdds-footer-~~link~~>\n ~~</sdds-footer-link-group>\n\n~~ <sdds-footer-~~link-group~~ ~~title-text=\"Title\"~~>\n <~~sdds-footer-link~~ ~~link-~~href=\"#\">Link text</~~sdds-footer-link~~>\n ~~<sdds-footer-link link-href=\"#\">Link text~~</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n </sdds-footer-~~link-~~group>\n\n <sdds-footer-~~link-~~group title-text=\"Title\">\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n </sdds-footer-~~link-~~group>\n\n <sdds-footer-~~link-~~group title-text=\"Title\">\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n </sdds-footer-~~link-~~group>\n\n <sdds-footer-~~link-~~group title-text=\"Title\">\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n </sdds-footer-~~link-~~group>\n </div>\n `\n : ''\n }\n <div slot=\"main-left\">\n <sdds-footer-~~link-~~group>\n <sdds-footer-~~link~~ ~~link~~-href=\"#\">Link text</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\">Link text</sdds-footer-~~link~~>\n </sdds-footer-~~link-~~group>\n </div>\n <div slot=\"main-right\">\n <sdds-footer-~~link-~~group>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\"~~>\n~~ <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\"~~>\n~~ <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-~~link~~>\n <sdds-footer-~~link~~ ~~link-~~href=\"#\"~~>\n~~ <sdds-icon name=\"truck\"></sdds-icon>\n </sdds-footer-~~link~~>\n </sdds-footer-~~link-~~group>\n </div>\n </sdds-footer>\n \n `,\n );\n\nexport const WebComponent = Template.bind({});\n"]}
1	+ {"version":3,"file":"sdds-footer.stories.js","sourceRoot":"","sources":["../../../../src/components/footer/webcomponent/sdds-footer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,eAAe,MAAM,+BAA+B,CAAC;AAE5D,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE;IAC5F,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,0GAA0G;MAC5G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,OAAO,EAAE;MACP,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,KAAK;GACf;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5C,iBAAiB,CACf;;;;;;;;;MASE,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;QAGxF,OAAO;EACL,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkDL;EACG,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCH,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './sdds-footer-item/readme.md';\nimport readmeLinkGroup from './sdds-footer-group/readme.md';\n\nexport default {\n title: 'Components/Footer',\n parameters: {\n notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer item': readmeItem },\n layout: 'fullscreen',\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n modeVariant: {\n name: 'Mode variant',\n description:\n 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n control: {\n type: 'radio',\n },\n options: ['Inherit from parent', 'Primary', 'Secondary'],\n table: {\n defaultValue: { summary: 'Inherit from parent' },\n },\n },\n topPart: {\n name: 'Top part',\n description: 'Adds the top part of the footer with more links.',\n control: {\n type: 'boolean',\n },\n },\n },\n args: {\n modeVariant: 'Inherit from parent',\n topPart: false,\n },\n};\n\nconst Template = ({ topPart, modeVariant }) =>\n formatHtmlPreview(\n `\n <main>\n <div class=\"sdds-u-p3 \">\n <div class=\"sdds-body-01\">\n Resize the window to see how the footer behaves on smaller/bigger screens.\n </div>\n </div>\n </main>\n <sdds-footer\n ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n >\n ${\n topPart\n ? `\n <div slot=\"top\">\n <sdds-footer-group title-text=\"Title\">\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n </sdds-footer-group>\n\n <sdds-footer-group title-text=\"Title\">\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n </sdds-footer-group>\n\n <sdds-footer-group title-text=\"Title\">\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n </sdds-footer-group>\n\n <sdds-footer-group title-text=\"Title\">\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n </sdds-footer-group>\n </div>\n `\n : ''\n }\n <div slot=\"main-left\">\n <sdds-footer-group>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> Link text</a>\n </sdds-footer-item>\n </sdds-footer-group>\n </div>\n <div slot=\"main-right\">\n <sdds-footer-group>\n <sdds-footer-item >\n <a href=\"#\"> <sdds-icon name=\"truck\"></sdds-icon></a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> <sdds-icon name=\"truck\"></sdds-icon></a>\n </sdds-footer-item>\n <sdds-footer-item >\n <a href=\"#\"> <sdds-icon name=\"truck\"></sdds-icon></a>\n </sdds-footer-item>\n </sdds-footer-group>\n </div>\n </sdds-footer>\n \n `,\n );\n\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/header/header-all.stories.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
-  title: 'Components/Header',
+  title: 'Components/Header/Native',
   parameters: {
     notes: readme,
     layout: 'fullscreen',
@@ -26,8 +26,10 @@ export default {
   argTypes: {
     siteName: {
       name: 'Site name',
-      description: 'Set a custom title for the header',
-      type: 'string',
+      description: 'Sets a custom title for the header.',
+      control: {
+        type: 'text',
+      },
     },
   },
   args: {
@@ -57,7 +59,7 @@ const AllMenusTemplate = ({ siteName }) => formatHtmlPreview(`
                   </a>
               </li>
-              <li class='sdds-nav__item sdds-nav__item--active'>
+              <li class='sdds-nav__item sdds-nav__item--selected'>
                   <a class='sdds-nav__item-core ' href='#'>
                       <span class='sdds-nav__item-core-text'>Item 2</span>
                   </a>
@@ -73,7 +75,7 @@ const AllMenusTemplate = ({ siteName }) => formatHtmlPreview(`
               <ul class='sdds-nav__dropdown-menu'>
                   <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
                   <li class='sdds-nav__dropdown-item'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></li>
-                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
+                  <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--selected'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>
               </ul>
               </li>
           </ul>

package/dist/collection/components/header/header-all.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header-all.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-all.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,mCAAmC;MAChD,IAAI,EAAE,QAAQ;KACf;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,aAAa;GACxB;CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACxC,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwK/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Header',\n parameters: {\n notes: readme,\n layout: 'fullscreen',\n docs: {\n source: {\n state: 'closed',\n },\n },\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n siteName: {\n name: 'Site name',\n description: 'Set a custom title for the header',\n type: 'string',\n },\n },\n args: {\n siteName: 'Application',\n },\n};\n\nconst AllMenusTemplate = ({ siteName }) =>\n formatHtmlPreview(\n `\n <nav class='sdds-nav'>\n <div class='sdds-nav__left'>\n <div class=\"sdds-nav__overlay\" onclick=\"closeDropdownsFromOverlay()\"></div>\n <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>\n <span id='sdds-nav__mob-menu-icon'>\n <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>\n <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>\n <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>\n </span>\n </button>\n <div class='sdds-nav__app-name'>${siteName}</div>\n </div>\n\n <div class='sdds-nav__center'>\n <ul class='sdds-nav__inline-menu'>\n\n <li class='sdds-nav__item'>\n <a class='sdds-nav__item-core' href='#'>\n <span class='sdds-nav__item-core-text'>Item 1</span>\n </a>\n </li>\n\n <li class='sdds-nav__item sdds-nav__item--active'>\n <a class='sdds-nav__item-core ' href='#'>\n <span class='sdds-nav__item-core-text'>Item 2</span>\n </a>\n </li>\n\n <li class='sdds-nav__item sdds-nav__dropdown'>\n <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>\n <span class='sdds-nav__item-core-text'>Item 3</span>\n <span class='sdds-nav__dropdown-icon'>\n <sdds-icon class=\"sdds-nav__dropdown-icon-svg\" name=\"chevron_down\" size=\"16px\"></sdds-icon> \n </span>\n </button>\n <ul class='sdds-nav__dropdown-menu'>\n <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n <li class='sdds-nav__dropdown-item'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></li>\n <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--active'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n </ul>\n </li>\n </ul>\n\n <ul class='sdds-nav__toolbar-menu'>\n <li class='sdds-nav__item'>\n <a class='sdds-nav__item-core' href='#'>\n <span class='sdds-nav__item-core-text'>Item 4</span>\n </a>\n </li>\n\n <li class='sdds-nav__item sdds-nav__avatar'>\n <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>\n <img class=\"sdds-nav__avatar-img\" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>\n <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>\n <span class='sdds-nav__avatar-title'>Employee Name</span>\n <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n </span>\n </button>\n\n <ul class='sdds-nav__avatar-menu'>\n <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>\n <span class='sdds-nav__avatar-info'>\n <span class='sdds-nav__avatar-title'>Employee Name</span>\n <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n </span>\n </li>\n <li class='sdds-nav__avatar-item'>\n <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>\n </li>\n <li class='sdds-nav__avatar-item'>\n <button class='sdds-nav__avatar-item-core'>Logout</button>\n </li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class='sdds-nav__right'>\n <div class='sdds-nav__item sdds-nav__app-launcher'>\n <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>\n <sdds-icon class=\"sdds-nav__app-launcher-btn-svg\" name=\"bento\" size=\"20px\" ></sdds-icon> \n </button>\n <ul class='sdds-nav__app-launcher-menu'>\n <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n <p class='sdds-nav__app-launcher-category-title'>Category 1</p>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n </li>\n <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n <p class='sdds-nav__app-launcher-category-title'>Category 2</p>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <button class='sdds-nav__app-launcher-item-core'>Application 5 BTN</button>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n </li>\n </ul>\n </div>\n <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>\n </div>\n </nav>\n\n <script>\n /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n toggleAvatarMenu = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n }\n toggleMobileMenu = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n }\n toggleAppLauncher = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n }\n toggleInlineDropdown = () => {\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.toggle(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n }\n\n toggleSearchbar = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__searchbar--opened\");\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n }\n\n closeDropdownsFromOverlay = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n }\n </script>\n `,\n );\n\nexport const AllMenus = AllMenusTemplate.bind({});\n"]}
1	+ {"version":3,"file":"header-all.stories.js","sourceRoot":"","sources":["../../../src/components/header/header-all.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,0BAA0B;EACjC,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,qCAAqC;MAClD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;GACF;EACD,IAAI,EAAE;IACJ,QAAQ,EAAE,aAAa;GACxB;CACF,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACxC,iBAAiB,CACf;;;;;;;;;;;4CAWwC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwK/C,CACF,CAAC;AAEJ,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n title: 'Components/Header/Native',\n parameters: {\n notes: readme,\n layout: 'fullscreen',\n docs: {\n source: {\n state: 'closed',\n },\n },\n design: [\n {\n name: 'Figma',\n type: 'figma',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n },\n {\n name: 'Link',\n type: 'link',\n url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n },\n ],\n },\n argTypes: {\n siteName: {\n name: 'Site name',\n description: 'Sets a custom title for the header.',\n control: {\n type: 'text',\n },\n },\n },\n args: {\n siteName: 'Application',\n },\n};\n\nconst AllMenusTemplate = ({ siteName }) =>\n formatHtmlPreview(\n `\n <nav class='sdds-nav'>\n <div class='sdds-nav__left'>\n <div class=\"sdds-nav__overlay\" onclick=\"closeDropdownsFromOverlay()\"></div>\n <button class='sdds-nav__mob-menu-btn' onclick='toggleMobileMenu()'>\n <span id='sdds-nav__mob-menu-icon'>\n <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-1'></span>\n <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-2'></span>\n <span class='sdds-nav__mob-menu-icon-line' id='sdds-nav__mob-menu-icon-line-3'></span>\n </span>\n </button>\n <div class='sdds-nav__app-name'>${siteName}</div>\n </div>\n\n <div class='sdds-nav__center'>\n <ul class='sdds-nav__inline-menu'>\n\n <li class='sdds-nav__item'>\n <a class='sdds-nav__item-core' href='#'>\n <span class='sdds-nav__item-core-text'>Item 1</span>\n </a>\n </li>\n\n <li class='sdds-nav__item sdds-nav__item--selected'>\n <a class='sdds-nav__item-core ' href='#'>\n <span class='sdds-nav__item-core-text'>Item 2</span>\n </a>\n </li>\n\n <li class='sdds-nav__item sdds-nav__dropdown'>\n <button class='sdds-nav__item-core' onclick='toggleInlineDropdown()'>\n <span class='sdds-nav__item-core-text'>Item 3</span>\n <span class='sdds-nav__dropdown-icon'>\n <sdds-icon class=\"sdds-nav__dropdown-icon-svg\" name=\"chevron_down\" size=\"16px\"></sdds-icon> \n </span>\n </button>\n <ul class='sdds-nav__dropdown-menu'>\n <li class='sdds-nav__dropdown-item'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n <li class='sdds-nav__dropdown-item'><button class='sdds-nav__dropdown-item-core'>Sub item 3</button></li>\n <li class='sdds-nav__dropdown-item sdds-nav__dropdown-item--selected'><a class='sdds-nav__dropdown-item-core' href='#'>Sub item 3 long label...</a></li>\n </ul>\n </li>\n </ul>\n\n <ul class='sdds-nav__toolbar-menu'>\n <li class='sdds-nav__item'>\n <a class='sdds-nav__item-core' href='#'>\n <span class='sdds-nav__item-core-text'>Item 4</span>\n </a>\n </li>\n\n <li class='sdds-nav__item sdds-nav__avatar'>\n <button class='sdds-nav__avatar-btn' onclick='toggleAvatarMenu()'>\n <img class=\"sdds-nav__avatar-img\" src='https://www.svgrepo.com/show/170303/avatar.svg' alt='profile photo'/>\n <span class='sdds-nav__avatar-info sdds-nav__avatar-info--mobile'>\n <span class='sdds-nav__avatar-title'>Employee Name</span>\n <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n </span>\n </button>\n\n <ul class='sdds-nav__avatar-menu'>\n <li class='sdds-nav__avatar-item sdds-nav__avatar-item--large'>\n <span class='sdds-nav__avatar-info'>\n <span class='sdds-nav__avatar-title'>Employee Name</span>\n <span class='sdds-nav__avatar-subtitle'>Company Name</span>\n </span>\n </li>\n <li class='sdds-nav__avatar-item'>\n <a href='' class='sdds-nav__avatar-item-core'>Link 1</a>\n </li>\n <li class='sdds-nav__avatar-item'>\n <button class='sdds-nav__avatar-item-core'>Logout</button>\n </li>\n </ul>\n </li>\n </ul>\n </div>\n\n <div class='sdds-nav__right'>\n <div class='sdds-nav__item sdds-nav__app-launcher'>\n <button class='sdds-nav__app-launcher-btn' onclick='toggleAppLauncher()'>\n <sdds-icon class=\"sdds-nav__app-launcher-btn-svg\" name=\"bento\" size=\"20px\" ></sdds-icon> \n </button>\n <ul class='sdds-nav__app-launcher-menu'>\n <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n <p class='sdds-nav__app-launcher-category-title'>Category 1</p>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 5</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n </li>\n <li class='sdds-nav__app-launcher-item sdds-nav__app-launcher-item--category'>\n <p class='sdds-nav__app-launcher-category-title'>Category 2</p>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 1</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 2</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 3</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 4</a>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <button class='sdds-nav__app-launcher-item-core'>Application 5 BTN</button>\n </li>\n <li class='sdds-nav__app-launcher-item'>\n <a href='' class='sdds-nav__app-launcher-item-core'>Application 6</a>\n </li>\n </ul>\n </div>\n <a class='sdds-nav__item sdds-nav__app-logo' href='#'></a>\n </div>\n </nav>\n\n <script>\n /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n toggleAvatarMenu = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n }\n toggleMobileMenu = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n }\n toggleAppLauncher = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n }\n toggleInlineDropdown = () => {\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.toggle(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n }\n\n toggleSearchbar = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.toggle(\"sdds-nav__searchbar--opened\");\n document.getElementsByClassName(\"sdds-nav__item sdds-nav__dropdown\")[0].classList.remove(\"sdds-nav__dropdown--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__avatar--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n }\n\n closeDropdownsFromOverlay = () => {\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__mob-menu--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__app-launcher--opened\");\n document.getElementsByClassName(\"sdds-nav\")[0].classList.remove(\"sdds-nav__searchbar--opened\");\n\n }\n </script>\n `,\n );\n\nexport const AllMenus = AllMenusTemplate.bind({});\n"]}

package/dist/collection/components/header/header-default.stories.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
-  title: 'Components/Header',
+  title: 'Components/Header/Native',
   parameters: {
     notes: readme,
     layout: 'fullscreen',
@@ -26,8 +26,10 @@ export default {
   argTypes: {
     siteName: {
       name: 'Site name',
-      description: 'Set a custom title for the header',
-      type: 'string',
+      description: 'Sets a custom title for the header.',
+      control: {
+        type: 'text',
+      },
     },
   },
   args: {