@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/components/header/webcomponent/header-component.css

@@ -0,0 +1,49 @@
+/*
+  Contains spacing variables for the layout
+*/
+sdds-header {
+  display: block;
+  height: var(--sdds-header-height);
+  background-color: var(--sdds-header-background);
+  width: 100%;
+  z-index: 300;
+}
+
+nav {
+  box-sizing: border-box;
+  background-color: var(--sdds-header-background);
+  width: 100%;
+  display: block;
+}
+nav * {
+  box-sizing: border-box;
+}
+nav .sdds-header-component-list {
+  height: var(--sdds-header-height);
+  all: unset;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+nav sdds-header-dropdown,
+nav sdds-header-item {
+  display: none;
+}
+nav .sdds-header-middle-spacer {
+  all: unset;
+  display: block;
+  flex-grow: 1;
+  height: var(--sdds-header-height);
+  border-right: 1px solid var(--sdds-header--basic-element-border);
+}
+@media screen and (min-width: 992px) {
+  nav sdds-header-dropdown,
+nav sdds-header-item {
+    display: block;
+  }
+}
+nav sdds-header-item:nth-child(3),
+nav sdds-header-dropdown:nth-child(3) {
+  /* Adds a left border to the button after the title, if any */
+  border-left: 1px solid var(--sdds-header--basic-element-border);
+}

package/dist/collection/components/header/webcomponent/header-component.js

@@ -0,0 +1,42 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';
+export class SddsHeader {
+  constructor() {
+    const callback = (mutationsList) => {
+      mutationsList.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          updateListChildrenRoles(mutation.target);
+        }
+      });
+    };
+    this.observer = new MutationObserver(callback);
+  }
+  componentDidLoad() {
+    const hostElement = this.host;
+    const navElement = hostElement.querySelector('.sdds-header-component-list');
+    this.observer.observe(navElement, {
+      childList: true,
+      subtree: false,
+    });
+    updateListChildrenRoles(navElement);
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "sdds-header-component-list" }, h("slot", null), h("li", { class: "sdds-header-middle-spacer" }), h("slot", { name: "end" })))));
+  }
+  static get is() { return "sdds-header"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-component.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/header/webcomponent/header-default.stories.js

@@ -0,0 +1,78 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeHamburger from './header-hamburger/readme.md';
+import readmeTitle from './header-title/readme.md';
+import readmeItem from './header-item/readme.md';
+import readmeDropdown from './header-dropdown/readme.md';
+import readmeDropdownList from './header-dropdown-list/readme.md';
+import readmeDropdownListItem from './header-dropdown-list-item/readme.md';
+import readmeDropdownListUser from './header-dropdown-list-user/readme.md';
+import readmeLauncher from './header-launcher/readme.md';
+export default {
+  title: 'Components/Header/Web Component',
+  parameters: {
+    notes: {
+      'Header': readme,
+      'Header hamburger': readmeHamburger,
+      'Header title': readmeTitle,
+      'Header item': readmeItem,
+      'Header dropdown': readmeDropdown,
+      'Header dropdown list': readmeDropdownList,
+      'Header dropdown list item': readmeDropdownListItem,
+      'Header dropdown list user': readmeDropdownListUser,
+      'Header launcher': readmeLauncher,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+  <sdds-header>
+    <sdds-header-title>
+      Example: default
+    </sdds-header-title>
+
+    <sdds-header-launcher slot="end">
+      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Trucklyfe</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">HaulHub</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">WheelWizz</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+    </sdds-header-launcher>
+
+
+    <sdds-header-brand-symbol slot="end" link-href="https://scania.com" aria-label="Scania - red gryphon on blue shield">
+    </sdds-header-brand-symbol>
+
+  </sdds-header>
+  
+  <main class="sdds-u-w-100 sdds-u-p3" style="box-sizing: border-box;">
+    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
+  </main>
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/header/webcomponent/header-dropdown/header-dropdown.css

@@ -0,0 +1,31 @@
+:host {
+  height: var(--sdds-header-height);
+  position: relative;
+}
+:host .menu {
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: calc(100vh - var(--sdds-header-height));
+  box-shadow: var(--sdds-nav-dropdown-menu-box);
+  background-color: var(--sdds-header-app-launcher-menu-background);
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+:host .menu::-webkit-scrollbar {
+  width: 4px;
+  background-color: inherit;
+}
+:host .menu::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-300);
+}
+:host .menu ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+:host .state-open .dropdown-icon {
+  transform: rotateZ(180deg);
+}
+:host .state-open .button {
+  position: relative;
+  z-index: 801;
+}

package/dist/collection/components/header/webcomponent/header-dropdown/header-dropdown.js

@@ -0,0 +1,122 @@
+import { h, Host } from '@stencil/core';
+export class HeaderDropdown {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+    this.buttonLabel = undefined;
+    this.noDropdownIcon = false;
+    this.selected = false;
+    this.open = false;
+    this.buttonEl = undefined;
+  }
+  onAnyClick(event) {
+    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+    const isClickOutside = !event.composedPath().includes(this.host);
+    if (isClickOutside) {
+      this.open = false;
+    }
+  }
+  toggleDropdown() {
+    this.open = !this.open;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'state-open': this.open,
+      } }, h("sdds-header-item", { class: "button", active: this.open, selected: this.selected }, h("button", { ref: (el) => {
+        this.buttonEl = el;
+      }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
+        this.toggleDropdown();
+      } }, h("slot", { name: "button-icon" }), this.buttonLabel, h("slot", { name: "button-label" }), !this.noDropdownIcon && (h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("sdds-popover-canvas", { id: `sdds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: [],
+          },
+        },
+      ] }, h("slot", null))))));
+  }
+  static get is() { return "sdds-header-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
+        },
+        "attribute": "button-label",
+        "reflect": false
+      },
+      "noDropdownIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the dropdown icon (downwards chevron) should be hidden."
+        },
+        "attribute": "no-dropdown-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the button that opens the dropdown should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "buttonEl": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onAnyClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/header/webcomponent/header-dropdown-list/header-dropdown-list.css

@@ -0,0 +1,19 @@
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host {
+  display: block;
+  width: 190px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border-radius: none;
+  background-color: var(--sdds-header-app-launcher-menu-bg);
+}
+@media all and (max-width: 384px) {
+  :host {
+    width: 100vw;
+  }
+}
+
+:host([type=lg]) {
+  width: 320px;
+}

package/dist/collection/components/header/webcomponent/header-dropdown-list/header-dropdown-list.js

@@ -0,0 +1,113 @@
+import { Host, h } from '@stencil/core';
+import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement, } from '../../../../utils/utils';
+export class HeaderDropdownList {
+  constructor() {
+    // A Map to store the slots and their associated slotchange listeners.
+    this.slotListeners = new Map();
+    this.type = 'md';
+    this.headingElement = undefined;
+  }
+  componentWillLoad() {
+    const { children } = this.host;
+    // Set the type prop for each child, if they have such a property
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if ('type' in child) {
+        child.type = this.type;
+      }
+    }
+    let listRoot = this.host;
+    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {
+      listRoot = this.host.parentElement;
+    }
+    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
+    if (headingEl) {
+      this.headingElement = headingEl;
+    }
+    else {
+      console.warn('Heading element for list not found');
+    }
+  }
+  componentDidLoad() {
+    this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+      // Add the slotchange event listener.
+      const onSlotChange = (e) => {
+        this.processAssignedElements(e.target);
+      };
+      slot.addEventListener('slotchange', onSlotChange);
+      onSlotChange({ target: slot });
+      // Store the slot and its listener in the Map.
+      this.slotListeners.set(slot, onSlotChange);
+    });
+  }
+  processAssignedElements(slot) {
+    const nodes = slot.assignedElements();
+    nodes.forEach((node) => {
+      // Add a listitem role to the assigned element if needed.
+      if (node.tagName.toLowerCase() !== 'li' &&
+        node.tagName.toLowerCase() !== 'slot' &&
+        node.getAttribute('role') !== 'listitem') {
+        node.setAttribute('role', 'listitem');
+      }
+      // If the assigned element is a slot, process its assigned elements recursively.
+      if (node.tagName.toLowerCase() === 'slot') {
+        this.processAssignedElements(node);
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.slotListeners.forEach((listener, slot) => {
+      // Remove the slotchange event listener and delete the entry from the Map.
+      slot.removeEventListener('slotchange', listener);
+      this.slotListeners.delete(slot);
+    });
+  }
+  render() {
+    var _a;
+    const attributes = {
+      'role': 'list',
+      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+    };
+    return (h(Host, Object.assign({}, attributes), h("slot", null)));
+  }
+  static get is() { return "sdds-header-dropdown-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-dropdown-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-dropdown-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'lg' | 'md'",
+          "resolved": "\"lg\" | \"md\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'md'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "headingElement": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.css

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  height: var(--sdds-header-list-item-md-height);
+  width: 100%;
+}
+:host .component {
+  height: 100%;
+}
+:host .component ::slotted(a),
+:host .component ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  border: none;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 24px;
+  width: 100%;
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  background-color: var(--sdds-header-nav-item-dropdown-opened-background);
+  color: var(--sdds-header-nav-item-dropdown-opened-color);
+}
+:host .component ::slotted(a:hover) {
+  background-color: var(--sdds-nav-item-background-hover);
+  cursor: pointer;
+}
+:host .component ::slotted(a:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .component-selected {
+  background-color: var(--sdds-nav-item-background-selected);
+  padding-right: 4px;
+  border-left-width: 4px;
+  border-left-style: solid;
+  border-left-color: var(--sdds-nav-item-border-color-active);
+}
+:host .component-selected ::slotted(a),
+:host .component-selected ::slotted(button) {
+  background-color: var(--sdds-nav-item-background-selected);
+}
+
+:host(:not(:last-child)) {
+  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
+}
+
+:host([type=lg]) {
+  height: var(--sdds-header-height);
+}
+:host([type=lg]) ::slotted(a),
+:host([type=lg]) ::slotted(button) {
+  padding: 0 16px;
+  color: var(--sdds-header-app-launcher-item-color);
+}

package/dist/collection/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.js

@@ -0,0 +1,66 @@
+import { h, Host } from '@stencil/core';
+export class HeaderDropdownListItem {
+  constructor() {
+    this.selected = false;
+    this.type = 'md';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-dropdown-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-dropdown-list-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-dropdown-list-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the link should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the list."
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'md'"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.css

@@ -0,0 +1,32 @@
+:host {
+  background-color: var(--sdds-header-avatar-item-background);
+  display: flex;
+  height: 84px;
+}
+:host .user-box {
+  gap: 16px;
+  width: 100%;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
+}
+:host img,
+:host slot[name=image]::slotted(*) {
+  width: 34px;
+  border-radius: 100%;
+}
+:host .user-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:host .user-content .header {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+}
+:host .user-content .subheader {
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-header-avatar-item-color);
+}