@scania/tegel 0.0.9 → 0.0.10

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

@@ -0,0 +1,268 @@
+import readme from './readme.md';
+import readmeDropdownOption from './dropdown-option/readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Dropdown`,
+  parameters: {
+    layout: 'centered',
+    notes: { 'Dropdown': readme, 'Dropdown option': readmeDropdownOption },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    error: {
+      name: 'Error',
+      description: 'Sets the Dropdown in an error state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    filter: {
+      name: 'Filter',
+      description: 'Adds filter functionality to the Dropdown.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    multiselect: {
+      name: 'Multiselect',
+      description: 'Adds multiselect functionality to the Dropdown.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Size of the Dropdown.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    labelText: {
+      name: 'Label text',
+      control: 'text',
+      description: 'Label text helps to describe what the Dropdown contains',
+      if: { arg: 'labelPosition', neq: 'None' },
+    },
+    labelPosition: {
+      name: 'Label position',
+      description: 'Label text position',
+      control: {
+        type: 'radio',
+      },
+      options: ['Outside', 'Inside', 'None'],
+      table: {
+        defaultValue: { summary: 'null' },
+      },
+    },
+    helperText: {
+      name: 'Helper text',
+      description: 'Helper text assists the user with additional information about the Dropdown.',
+      control: 'text',
+    },
+    placeholder: {
+      name: 'Placeholder',
+      type: 'string',
+      description: 'Placeholder text when no option is selected',
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the component',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    openDirection: {
+      name: 'Open direction',
+      description: 'The direction the Dropdown will open.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Auto', 'Up', 'Down'],
+      table: {
+        summary: {
+          defaultValue: 'auto',
+        },
+      },
+    },
+    optionType: {
+      name: 'Option type',
+      description: 'Render the options either via the options prop, or passing them as children to the Dropdown.',
+      control: 'radio',
+      options: ['Children', 'Property'],
+    },
+    defaultOption: {
+      name: 'Default options',
+      description: 'Sets a pre-selected option.',
+      control: {
+        type: 'radio',
+      },
+      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
+      if: { arg: 'multiselect', eq: false },
+    },
+    multiDefaultOption: {
+      name: 'Default options',
+      description: 'Sets a pre-selected option.',
+      control: {
+        type: 'check',
+      },
+      options: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
+      if: { arg: 'multiselect', eq: true },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    error: false,
+    filter: false,
+    multiselect: false,
+    size: 'Large',
+    labelText: 'Label text',
+    labelPosition: 'Outside',
+    helperText: 'Helper text',
+    placeholder: 'Placeholder',
+    disabled: false,
+    openDirection: 'Auto',
+    defaultOption: 'No default',
+    optionType: 'Children',
+  },
+};
+const sizeLookUp = {
+  Large: 'lg',
+  Medium: 'md',
+  Small: 'sm',
+};
+const defaultOptionLookUp = {
+  'Option 1': 'option-1',
+  'Option 2': 'option-2',
+  'Option 3': 'option-3',
+};
+const getMultiselectDefaultValue = (multiDefaultOption) => multiDefaultOption.map((item) => defaultOptionLookUp[item]);
+const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, multiselect, openDirection, modeVariant, disabled, optionType, defaultOption, multiDefaultOption, }) => formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 300px;
+    height:200px;
+  }
+  </style>
+
+    <div class="demo-wrapper">
+        <tds-dropdown
+        ${defaultOption && defaultOption !== 'No default'
+  ? `default-value="${defaultOptionLookUp[defaultOption]}"`
+  : ''}
+        ${multiDefaultOption
+  ? `default-value="${getMultiselectDefaultValue(multiDefaultOption)}"`
+  : ''}
+        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+          name="dropdown"
+          label="${labelText}"
+          ${labelPosition && labelPosition !== 'None'
+  ? `label-position="${labelPosition.toLowerCase()}"`
+  : ''}
+          placeholder="${placeholder}"
+          helper="${helperText}"
+          size="${sizeLookUp[size]}"
+          ${error ? 'error' : ''}
+          ${filter ? 'filter' : ''}
+          ${multiselect ? 'multiselect' : ''}
+          ${disabled ? 'disabled' : ''}
+          open-direction="${openDirection.toLowerCase()}"
+          >
+          ${optionType === 'Children'
+  ? `
+              <tds-dropdown-option value="option-1">
+                Option 1
+              </tds-dropdown-option>
+              <tds-dropdown-option disabled value="option-2">
+                Option 2
+              </tds-dropdown-option>
+              <tds-dropdown-option value="option-3">
+                Option 3
+              </tds-dropdown-option>
+              <tds-dropdown-option value="option-4">
+                Option 4
+              </tds-dropdown-option>
+              <tds-dropdown-option value="option-5">
+                Option 5
+              </tds-dropdown-option>
+              <tds-dropdown-option value="option-6">
+                Option 6
+              </tds-dropdown-option>
+              <tds-dropdown-option value="option-7">
+                Option 7
+              </tds-dropdown-option>`
+  : ''}
+        </tds-dropdown>
+    </div>
+
+    <script>
+    dropdown = document.querySelector('tds-dropdown')
+    dropdown.addEventListener('tdsChange', (event) => {
+      console.log(event)
+    })
+
+    ${optionType === 'Property'
+  ? `
+        dropdown.options = [
+            {
+              label: 'Option 1',
+              value: 'option-1',
+              disabled: 'false',
+            },
+            {
+              label: 'Option 2',
+              value: 'option-2',
+              disabled: 'false',
+            },
+            {
+              label: 'Option 3',
+              value: 'option-3',
+              disabled: 'false',
+            },
+          ]
+        
+    `
+  : ''}
+    </script>
+        
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/footer/footer-group/footer-group.css

@@ -47,17 +47,17 @@
   display: flex;
   gap: 8px;
 }
-:host [role=list].left, :host [role=list].right {
+:host [role=list].start, :host [role=list].end {
   gap: 24px;
 }
 :host [role=list].top-part-child {
   flex-direction: column;
 }
 @media all and (max-width: 992px) {
-  :host [role=list].left:not(.top-part-child) {
+  :host [role=list].start: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 {
+  :host [role=list].start:not(.top-part-child).start, :host [role=list].start:not(.top-part-child).end {
     gap: 8px;
   }
   :host [role=list].top-part-child.closed {

package/dist/collection/components/footer/footer-group/footer-group.js

@@ -2,7 +2,7 @@ import { Host, h } from '@stencil/core';
 export class TdsFooterGroup {
   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. */
+     * it can have either start or end as a slot position otherwise undefined. */
     this.slotPosition = null;
     /** Indicates if a group is part of the top part of the Footer. */
     this.topPartGroup = false;
@@ -12,7 +12,7 @@ export class TdsFooterGroup {
   connectedCallback() {
     this.topPartGroup = this.host.parentElement.slot === 'top';
     if (!this.topPartGroup) {
-      this.slotPosition = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';
+      this.slotPosition = this.host.parentElement.slot === 'end' ? 'end' : 'start';
     }
   }
   render() {

package/dist/collection/components/footer/footer-item/footer-item.css

@@ -1,25 +1,30 @@
-[role=listitem] ::slotted(*) {
+[role=listitem] ::slotted(a),
+[role=listitem] ::slotted(button) {
   font: var(--tds-headline-06);
   letter-spacing: var(--tds-headline-06-ls);
   color: var(--tds-footer-main-links);
   opacity: var(--tds-footer-main-links-opacity);
   text-decoration: none;
 }
-[role=listitem] ::slotted(*:focus-visible) {
+[role=listitem] ::slotted(a:focus-visible),
+[role=listitem] ::slotted(button:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-[role=listitem] ::slotted(*:hover) {
+[role=listitem] ::slotted(a:hover),
+[role=listitem] ::slotted(button:hover) {
   text-decoration: underline;
 }
-[role=listitem].top-part-child ::slotted(*) {
+[role=listitem].top-part-child ::slotted(a),
+[role=listitem].top-part-child ::slotted(button) {
   color: var(--tds-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 ::slotted(*:focus-visible) {
+[role=listitem].top-part-child ::slotted(a:focus-visible),
+[role=listitem].top-part-child ::slotted(button:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
@@ -28,17 +33,20 @@
   [role=listitem].top-part-child {
     border-bottom: 1px solid var(--tds-footer-top-divider);
   }
-  [role=listitem].top-part-child ::slotted(*) {
+  [role=listitem].top-part-child ::slotted(a),
+  [role=listitem].top-part-child ::slotted(button) {
     display: block;
     height: 100%;
     padding: 19px 40px;
     font-weight: normal;
   }
-  [role=listitem].top-part-child ::slotted(*:hover) {
+  [role=listitem].top-part-child ::slotted(a:hover),
+  [role=listitem].top-part-child ::slotted(button:hover) {
     text-decoration: underline;
     background-color: var(--tds-footer-top-links-background-hover);
   }
-  [role=listitem].top-part-child ::slotted(*:focus-visible) {
+  [role=listitem].top-part-child ::slotted(a:focus-visible),
+  [role=listitem].top-part-child ::slotted(button:focus-visible) {
     outline: 2px solid var(--tds-blue-400);
     outline-offset: -2px;
   }

package/dist/collection/components/footer/footer.css

@@ -1,13 +1,11 @@
 :host {
   display: block;
 }
-:host .footer-top {
+:host slot[name=top]::slotted(*) {
   background-color: var(--tds-footer-top-background);
   padding: 40px;
-}
-:host .footer-top ::slotted(*) {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: repeat(4, 1fr);
   row-gap: 40px;
   width: 100%;
 }
@@ -20,8 +18,8 @@
   display: flex;
   justify-content: space-between;
 }
-:host .footer-bottom-right ::slotted(*),
-:host .footer-bottom-left ::slotted(*) {
+:host slot[name=start]::slotted(*),
+:host slot[name=end]::slotted(*) {
   display: flex;
   column-gap: 24px;
 }
@@ -53,12 +51,10 @@
   visibility: hidden;
 }
 @media all and (max-width: 992px) {
-  :host .footer-top {
-    padding: 0;
-  }
-  :host .footer-top ::slotted(*) {
+  :host slot[name=top]::slotted(*) {
     display: block;
     width: 100%;
+    padding: 0;
   }
   :host .footer-main {
     padding: 0 24px;
@@ -68,8 +64,8 @@
     row-gap: 48px;
     padding: 24px 0;
   }
-  :host .footer-bottom-left ::slotted(*) {
-    flex-direction: column;
+  :host slot[name=end]::slotted(*) {
+    flex-direction: row;
     gap: 8px;
   }
   :host .footer-main-bottom {

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

@@ -1,15 +1,20 @@
 import { h } from '@stencil/core';
 import { Host } from '@stencil/core/internal';
+import { hasSlot } from '../../utils/utils';
+/**
+ * @slot top - Slot for the top part of the Footer.
+ * @slot start - Slot for start (left side) of the Footers main part.
+ * @slot end - Slot for end (right side) of the Footers main part.
+ */
 export class TdsFooter {
   constructor() {
     this.modeVariant = null;
-    this.hasTopPart = undefined;
-  }
-  connectedCallback() {
-    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');
   }
   render() {
-    return (h(Host, { class: `${this.modeVariant ? `tds-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")))))));
+    const usesTopSlot = hasSlot('top', this.host);
+    const usesStartSlot = hasSlot('start', this.host);
+    const usesEndSlot = hasSlot('end', this.host);
+    return (h(Host, { class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, usesTopSlot && h("slot", { name: "top" }), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, usesStartSlot && h("slot", { name: "start" }), usesEndSlot && h("slot", { name: "end" })), 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 "tds-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -45,10 +50,5 @@ export class TdsFooter {
       }
     };
   }
-  static get states() {
-    return {
-      "hasTopPart": {}
-    };
-  }
   static get elementRef() { return "host"; }
 }

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

@@ -0,0 +1,145 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+import readme from './readme.md';
+import readmeItem from './footer-item/readme.md';
+import readmeLinkGroup from './footer-group/readme.md';
+export default {
+  title: `${ComponentsFolder}/Footer`,
+  parameters: {
+    notes: { 'Footer': readme, 'Footer link group': readmeLinkGroup, 'Footer item': readmeItem },
+    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',
+      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'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    topPart: {
+      name: 'Top part',
+      description: 'Adds the top part of the Footer with more links.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    topPart: false,
+  },
+};
+const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
+    <main>
+      <div class="tds-u-p3 ">
+        <div class="tds-body-01">
+          Resize the window to see how the Footer behaves on smaller/bigger screens.
+        </div>
+      </div>
+    </main>
+    <tds-footer
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      ${topPart
+  ? `
+      <div slot="top">
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
+      `
+  : ''}
+      <div slot="start">
+        <tds-footer-group>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
+      <div slot="end">
+        <tds-footer-group>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
+    </tds-footer>
+  
+  `);
+export const Default = Template.bind({});

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

@@ -1,8 +1,13 @@
 import { h, Host } from '@stencil/core';
+import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot icon - Slot for an Icon in the dropdown button.
+ * @slot label - Slot for a label text in the dropdown button.
+ */
 export class TdsHeaderDropdown {
   constructor() {
-    this.uuid = crypto.randomUUID();
-    this.buttonLabel = undefined;
+    this.uuid = generateUniqueId();
+    this.label = undefined;
     this.noDropdownIcon = false;
     this.selected = false;
     this.open = false;
@@ -25,7 +30,7 @@ export class TdsHeaderDropdown {
         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("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+      } }, h("slot", { name: "icon" }), this.label, h("slot", { name: "label" }), !this.noDropdownIcon && (h("tds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("tds-popover-canvas", { id: `tds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
         {
           name: 'flip',
           options: {
@@ -48,7 +53,7 @@ export class TdsHeaderDropdown {
   }
   static get properties() {
     return {
-      "buttonLabel": {
+      "label": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -62,7 +67,7 @@ export class TdsHeaderDropdown {
           "tags": [],
           "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
         },
-        "attribute": "button-label",
+        "attribute": "label",
         "reflect": false
       },
       "noDropdownIcon": {

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

@@ -12,7 +12,7 @@
   border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
 }
 :host img,
-:host slot[name=image]::slotted(*) {
+:host slot[name=thumbnail]::slotted(*) {
   width: 34px;
   border-radius: 100%;
 }