@scania/tegel 0.0.1-beta.9 → 0.0.4

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

@@ -0,0 +1,118 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Footer',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      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 top part of the footer with more links',
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    topPart: false,
+  }
+};
+const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
+  <style>
+  .demo-wrapper {
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+  }
+  </style>
+
+  <div class="demo-wrapper">
+  <div class="sdds-footer 
+  ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}` : ''}
+ ">
+    ${topPart
+  ? `
+      <div class="sdds-footer-top sdds-container-fluid">
+        <div class="sdds-row">
+          <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">
+            <div class="sdds-footer-title opened">
+              <span>Title 1</span>
+              <span class="sdds-footer-top-icon">
+                <sdds-icon name="chevron_down" size="16px"></sdds-icon>
+              </span>
+            </div>
+            <ul class="sdds-footer-main-links opened">
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+            </ul>
+          </div>
+
+          <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">
+            <div class="sdds-footer-title">
+              <span>Title 2</span>
+              <span class="sdds-footer-top-icon">
+              <sdds-icon name="chevron_down" size="16px"></sdds-icon>
+              </span>
+            </div>
+            <ul class="sdds-footer-main-links">
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      `
+  : ''}
+    <div class="sdds-footer-main">
+      <ul class="sdds-footer-main-links">
+        <li><a href="#">Legal link</a></li>
+        <li><a href="#">Legal link</a></li>
+        <li><a href="#">Legal link</a></li>
+      </ul>
+      <ul class="sdds-footer-social-links">
+        <li><a href="#">Social link</a></li>
+        <li><a href="#">Social link</a></li>
+        <li><a href="#">Social link</a></li>
+      </ul>
+      <div class="sdds-footer-main-brand">
+        <p>Copyright &copy; 2022 Scania</p>
+      </div>
+    </div>
+  </div>
+    </div>
+  `);
+export const Native = Template.bind({});
+//# sourceMappingURL=footer.stories.js.map

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

@@ -0,0 +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 &copy; 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/sdds-footer-link.css

@@ -0,0 +1,45 @@
+[role=listitem] a {
+  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 {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+[role=listitem] a:hover {
+  text-decoration: underline;
+}
+[role=listitem].top-part-child a {
+  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 {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+
+@media all and (max-width: 992px) {
+  [role=listitem].top-part-child {
+    border-bottom: 1px solid var(--sdds-footer-top-divider);
+  }
+  [role=listitem].top-part-child a {
+    display: block;
+    height: 100%;
+    padding: 19px 40px;
+    font-weight: normal;
+  }
+  [role=listitem].top-part-child a:hover {
+    text-decoration: underline;
+    background-color: var(--sdds-footer-top-links-background-hover);
+  }
+  [role=listitem].top-part-child a:focus {
+    outline: 2px solid var(--sdds-blue-400);
+    outline-offset: -2px;
+  }
+}

package/dist/collection/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.js

@@ -0,0 +1,86 @@
+import { h } from '@stencil/core';
+export class SddsFooterLink {
+  constructor() {
+    this.parentIsTopPart = false;
+    this.linkHref = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
+  }
+  connectedCallback() {
+    this.parentIsTopPart = this.host.closest('sdds-footer-link-group').parentElement.slot === 'top';
+  }
+  render() {
+    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("a", { target: this.target, rel: this.rel, href: this.linkHref }, h("slot", null))));
+  }
+  static get is() { return "sdds-footer-link"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-footer-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-footer-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "linkHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "URL for the link"
+        },
+        "attribute": "link-href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Where to open the linked URL"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'."
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "'noopener'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-footer-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-footer-link.js","sourceRoot":"","sources":["../../../../../src/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS5D,MAAM,OAAO,cAAc;;IAYzB,oBAAe,GAAY,KAAK,CAAC;;kBAPyB,OAAO;eAG3C,UAAU;;EAMhC,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;EAClG,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,SAAG,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ;QACxD,eAAa,CACX,CACA,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer-link',\n  styleUrl: 'sdds-footer-link.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsFooterLink {\n  /** URL for the link */\n  @Prop() linkHref: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  @Element() host: HostElement;\n\n  parentIsTopPart: boolean = false;\n\n  connectedCallback() {\n    this.parentIsTopPart = this.host.closest('sdds-footer-link-group').parentElement.slot === 'top';\n  }\n\n  render() {\n    return (\n      <div role=\"listitem\" class={`${this.parentIsTopPart ? 'top-part-child' : ''}`}>\n        <a target={this.target} rel={this.rel} href={this.linkHref}>\n          <slot></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.css

@@ -0,0 +1,67 @@
+:host {
+  display: block;
+  width: 100%;
+}
+:host .footer-top-title {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  opacity: var(--sdds-footer-top-title-opacity);
+  color: var(--sdds-footer-top-links);
+  padding-bottom: 8px;
+}
+:host button.footer-top-title-button {
+  display: none;
+  border: none;
+  width: 100%;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-footer-top-links);
+  background-color: transparent;
+  text-align: left;
+  padding: 19px 24px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--sdds-footer-top-divider);
+}
+:host button.footer-top-title-button.expanded {
+  border-bottom: none;
+}
+:host button.footer-top-title-button.expanded sdds-icon {
+  transform: rotateZ(180deg);
+}
+:host button.footer-top-title-button:hover {
+  cursor: pointer;
+}
+:host button.footer-top-title-button:active {
+  background-color: var(--sdds-footer-top-button-active);
+}
+:host button.footer-top-title-button sdds-icon {
+  transition: transform 0.2s ease-in-out;
+}
+:host [role=list] {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: 8px;
+}
+:host [role=list].top-part-child {
+  flex-direction: column;
+}
+@media all and (max-width: 992px) {
+  :host [role=list].left:not(.top-part-child) {
+    flex-direction: column;
+  }
+  :host [role=list].top-part-child.closed {
+    display: none;
+  }
+  :host [role=list].top-part-child {
+    gap: 0;
+  }
+  :host .footer-top-title {
+    display: none;
+  }
+  :host button.footer-top-title-button {
+    display: flex;
+    align-items: center;
+  }
+}

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

@@ -0,0 +1,62 @@
+import { Host, h } from '@stencil/core';
+export class SddsFooterLinkGroup {
+  constructor() {
+    this.rightSlot = false;
+    this.parentIsTopPart = false;
+    this.titleText = undefined;
+    this.open = false;
+  }
+  connectedCallback() {
+    this.rightSlot = this.host.parentElement.slot === 'main-right';
+    this.parentIsTopPart = this.host.parentElement.slot === 'top';
+  }
+  render() {
+    return (h(Host, null, this.titleText && this.parentIsTopPart && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.parentIsTopPart && (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.rightSlot ? 'right' : 'left'}
+        ${this.parentIsTopPart ? 'top-part-child' : ''}
+        ${this.open ? 'expanded' : 'closed'}
+        ` }, h("slot", null))));
+  }
+  static get is() { return "sdds-footer-link-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-footer-link-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-footer-link-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-link-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-footer-link-group.js","sourceRoot":"","sources":["../../../../../src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-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;AAQ5D,MAAM,OAAO,mBAAmB;;IAQ9B,cAAS,GAAY,KAAK,CAAC;IAE3B,oBAAe,GAAY,KAAK,CAAC;;gBAJR,KAAK;;EAM9B,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,YAAY,CAAC;IAC/D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;EAChE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,IAAI,CACzC,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD;MAEA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,IAAI,CACzC,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;UACP,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;UACjC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;UAC5C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ;SAClC;QAEC,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-link-group',\n  styleUrl: 'sdds-footer-link-group.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsFooterLinkGroup {\n  /** Title text for the link group, only valid on top part of footer. */\n  @Prop() titleText: string;\n\n  @Element() host: HostElement;\n\n  @State() open: boolean = false;\n\n  rightSlot: boolean = false;\n\n  parentIsTopPart: boolean = false;\n\n  connectedCallback() {\n    this.rightSlot = this.host.parentElement.slot === 'main-right';\n    this.parentIsTopPart = this.host.parentElement.slot === 'top';\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.titleText && this.parentIsTopPart && (\n          <div class=\"footer-top-title\">{this.titleText}</div>\n        )}\n\n        {this.titleText && this.parentIsTopPart && (\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={`\n        ${this.rightSlot ? 'right' : 'left'}\n        ${this.parentIsTopPart ? 'top-part-child' : ''}\n        ${this.open ? 'expanded' : 'closed'}\n        `}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/footer/webcomponent/sdds-footer.css

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+}
+:host .footer-top {
+  background-color: var(--sdds-footer-top-background);
+  padding: 40px;
+}
+:host .footer-top ::slotted(*) {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  row-gap: 40px;
+  width: 100%;
+}
+:host .footer-main {
+  background-color: var(--sdds-footer-main-background);
+  padding: 0 40px;
+}
+:host .footer-main-top {
+  padding: 40px 0;
+  display: flex;
+  justify-content: space-between;
+}
+:host .footer-bottom-right ::slotted(*),
+:host .footer-bottom-left ::slotted(*) {
+  display: flex;
+  column-gap: 24px;
+}
+:host .footer-main-bottom {
+  padding: 40px 0;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid var(--sdds-footer-main-divider);
+}
+:host .footer-main-bottom small.copyright {
+  margin: 0;
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  color: var(--sdds-footer-main-copyright);
+}
+:host .footer-main-bottom .brand {
+  background-image: var(--sdds-background-image-scania-wordmark-white-svg);
+  background-repeat: no-repeat;
+  background-size: 117px;
+  background-position: right;
+  width: 117px;
+  height: 20px;
+}
+:host .footer-main-bottom .brand p {
+  color: transparent;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  visibility: hidden;
+}
+@media all and (max-width: 992px) {
+  :host .footer-top {
+    padding: 0;
+  }
+  :host .footer-top ::slotted(*) {
+    display: block;
+    width: 100%;
+  }
+  :host .footer-main {
+    padding: 0 24px;
+  }
+  :host .footer-main-top {
+    flex-direction: column;
+    row-gap: 48px;
+    padding: 24px 0;
+  }
+  :host .footer-bottom-left ::slotted(*) {
+    flex-direction: column;
+    gap: 8px;
+  }
+  :host .footer-main-bottom {
+    flex-direction: column;
+    padding-bottom: 32px;
+  }
+  :host .footer-main-bottom p.copyright {
+    padding-bottom: 96px;
+  }
+  :host .footer-main-bottom .brand {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,56 @@
+import { h } from '@stencil/core';
+import { Host } from '@stencil/core/internal';
+export class SddsFooter {
+  constructor() {
+    this.modeVariant = null;
+    this.hasTopPart = undefined;
+  }
+  connectedCallback() {
+    const children = Array.from(this.host.children);
+    this.hasTopPart = 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")))))));
+  }
+  static get is() { return "sdds-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-footer.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-footer.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Mode variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasTopPart": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=sdds-footer.js.map

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

@@ -0,0 +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 &#169; {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"]}