@scania/tegel 0.0.9 → 0.0.11

package/dist/collection/components/text-field/text-field.stories.js

@@ -0,0 +1,247 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Text Field`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&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' },
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    type: {
+      name: 'Type',
+      description: 'Which type of Text Field',
+      control: {
+        type: 'radio',
+      },
+      options: ['Text', 'Password'],
+      table: {
+        defaultValue: { summary: 'text' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Switches between different sizes.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label text.',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      description: 'Sets the label text position.',
+      control: {
+        type: 'radio',
+      },
+      options: ['No label', 'Inside', 'Outside'],
+      table: {
+        defaultValue: { summary: 'no-label' },
+      },
+    },
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Sets the placeholder text.',
+      control: {
+        type: 'text',
+      },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Sets the helper text.',
+      control: {
+        type: 'text',
+      },
+    },
+    prefix: {
+      name: 'Prefix',
+      description: 'Adds a prefix symbol or text before the Text Field.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    prefixType: {
+      name: 'Prefix type',
+      description: 'Switches between icon and text for the prefix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'prefix', eq: true },
+    },
+    suffix: {
+      name: 'Suffix',
+      description: 'Adds a suffix symbol or text after the Text Field.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    suffixType: {
+      name: 'Suffix type',
+      description: 'Swithces between icon or text for the suffix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'suffix', eq: true },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Sets a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    readonly: {
+      description: 'Sets the Text Field to read-only state.',
+      name: 'Read Only',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      description: 'Disables the Text Field.',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    state: 'Default',
+    type: 'Text',
+    size: 'Large',
+    label: 'Label',
+    labelPosition: 'No label',
+    placeholderText: 'Placeholder',
+    helper: '',
+    prefix: false,
+    prefixType: 'Icon',
+    suffix: false,
+    suffixType: 'Icon',
+    maxLength: 0,
+    noMinWidth: 'Default',
+    readonly: false,
+    disabled: false,
+  },
+};
+const Template = ({ modeVariant, state, type, size, label, labelPosition, placeholderText, helper, prefix, prefixType, suffix, suffixType, maxLength, noMinWidth, readonly, disabled, }) => {
+  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
+  const stateValue = state.toLowerCase();
+  const sizeLookUp = {
+    Large: 'lg',
+    Medium: 'md',
+    Small: 'sm',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 200px;
+    height: 150px;
+  }
+    </style>
+
+  <div class="demo-wrapper">
+    <tds-text-field
+      type="${type}"
+      size="${sizeLookUp[size]}"
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      state="${stateValue}"
+      label="${label}"
+      label-position="${labelPosition.toLowerCase()}"
+      ${helper ? `helper="${helper}"` : ''}
+      ${maxlength}
+      ${disabled ? 'disabled' : ''}
+      ${readonly ? 'read-only' : ''}
+      ${noMinWidth ? 'no-min-width' : ''}
+      placeholder="${placeholderText}" >
+        ${prefix || suffix
+    ? `
+          ${prefixType || suffixType === 'Text'
+      ? `<span slot="${prefix ? 'prefix' : 'suffix'}">$</span>`
+      : `<tds-icon slot="${prefix ? 'prefix' : 'suffix'}" name="truck" size="20px"></tds-icon>`}
+        `
+    : ''}
+
+        </tds-text-field>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('tds-text-field')
+    textElement.addEventListener('tdsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsChange',(event) => {
+      console.log(event)
+    })
+  </script>
+  `);
+};
+export const Default = Template.bind({});

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

@@ -0,0 +1,188 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Textarea`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&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' },
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label text.',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      description: 'Sets the label text position.',
+      control: {
+        type: 'radio',
+      },
+      options: ['No label', 'Inside', 'Outside'],
+      table: {
+        defaultValue: { summary: 'no-label' },
+      },
+    },
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Sets the placeholder text.',
+      control: {
+        type: 'text',
+      },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Sets the helper text.',
+      control: {
+        type: 'text',
+      },
+    },
+    rows: {
+      name: 'Rows',
+      description: 'Sets the number of rows.',
+      control: {
+        type: 'number',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Sets a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    readonly: {
+      name: 'Read only',
+      description: 'Sets the Textarea to read-only state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Textarea.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    state: 'Default',
+    label: 'Label',
+    labelPosition: 'No label',
+    placeholder: 'Placeholder',
+    helper: '',
+    rows: 5,
+    maxLength: 0,
+    noMinWidth: false,
+    readonly: false,
+    disabled: false,
+  },
+};
+const Template = ({ modeVariant, state, label, labelPosition, placeholder, helper, rows, maxLength, noMinWidth, readonly, disabled, }) => {
+  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
+  const stateValue = state.toLowerCase();
+  const labelPosLookup = {
+    'No label': 'no-label',
+    'Inside': 'inside',
+    'Outside': 'outside',
+  };
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper {
+      width: 400px;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+        <tds-textarea
+          rows="${rows}"
+          state="${stateValue}"
+          label="${label}"
+          helper="${helper}"
+          ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariant.toLowerCase()}"`
+    : ''}
+          label-position="${labelPosLookup[labelPosition]}"
+          ${disabled ? 'disabled' : ''}
+          ${readonly ? 'read-only' : ''}
+          ${noMinWidth ? 'no-min-width' : ''}
+          placeholder="${placeholder}"
+          ${maxlength}>
+        </tds-textarea>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('tds-textarea')
+
+    textElement.addEventListener('tdsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsChange',(event) => {
+      console.log(event)
+    })
+  </script>
+  `);
+};
+export const Default = Template.bind({});

package/dist/collection/components/toast/toast.css

@@ -6,37 +6,37 @@
 :host {
   z-index: 700;
 }
-:host .toast-wrapper {
+:host .wrapper {
   display: flex;
   width: 348px;
   background-color: var(--tds-toast-background-color);
   border-radius: 4px;
 }
-:host .toast-wrapper.information {
+:host .wrapper.information {
   border-left: 4px solid var(--tds-information);
 }
-:host .toast-wrapper.information tds-icon {
+:host .wrapper.information tds-icon {
   color: var(--tds-information);
 }
-:host .toast-wrapper.success {
+:host .wrapper.success {
   border-left: 4px solid var(--tds-positive);
 }
-:host .toast-wrapper.success tds-icon {
+:host .wrapper.success tds-icon {
   color: var(--tds-positive);
 }
-:host .toast-wrapper.error {
+:host .wrapper.error {
   border-left: 4px solid var(--tds-negative);
 }
-:host .toast-wrapper.error tds-icon {
+:host .wrapper.error tds-icon {
   color: var(--tds-negative);
 }
-:host .toast-wrapper.warning {
+:host .wrapper.warning {
   border-left: 4px solid var(--tds-warning);
 }
-:host .toast-wrapper.warning tds-icon {
+:host .wrapper.warning tds-icon {
   color: var(--tds-warning);
 }
-:host .toast-wrapper button.toast-close {
+:host .wrapper button.close {
   height: 20px;
   width: 20px;
   display: flex;
@@ -46,52 +46,59 @@
   border: none;
   background: transparent;
 }
-:host .toast-wrapper button.toast-close:hover {
+:host .wrapper button.close:hover {
   cursor: pointer;
 }
-:host .toast-wrapper button.toast-close:focus {
+:host .wrapper button.close:focus {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-:host .toast-wrapper button.toast-close tds-icon {
+:host .wrapper button.close tds-icon {
   color: var(--tds-toast-dissmiss-color);
   padding: 0;
 }
 :host tds-icon {
   padding: 14px 0 0 12px;
 }
-:host .toast-content {
+:host .content {
   padding: 16px 0 16px 10px;
   display: flex;
   flex-direction: column;
   flex: 1;
 }
-:host .toast-content .toast-header {
+:host .content .header-subheader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:host .content .header,
+:host .content slot[name=header]::slotted(*) {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-toast-headline-color);
 }
-:host .toast-content .toast-header.no-subheader {
-  margin-bottom: 4px;
-}
-:host .toast-content .toast-header.only-header {
-  margin-bottom: 0;
-}
-:host .toast-content .toast-subheader slot::slotted(*) {
+:host .content .subheader,
+:host .content slot[name=subheader]::slotted(*) {
   margin-top: 4px;
   color: var(--tds-toast-subheadline-color);
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
-  padding-bottom: 16px;
   max-width: 252px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-:host .toast-content .toast-subheader.no-link slot::slotted(*) {
+:host .content .subheader.no-link slot::slotted(*),
+:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*) {
   padding-bottom: 0;
 }
-:host slot[name=toast-link]::slotted(*) {
+:host .content .toast-bottom.subheader {
+  margin-top: 16px;
+}
+:host .content .toast-bottom.no-subheader {
+  margin-top: 4px;
+}
+:host slot[name=bottom]::slotted(*) {
   color: var(--tds-toast-link-color);
 }
 :host .tds-mode-variant-primary {

package/dist/collection/components/toast/toast.js

@@ -1,8 +1,14 @@
 import { Host, h } from '@stencil/core';
+import { generateUniqueId, hasSlot } from '../../utils/utils';
+/**
+ * @slot header - Slot for the Toast header.
+ * @slot subheader - Slot for the Toast subheader.
+ * @slot bottom - Slot for the Toast bottom section, used for links.
+ */
 export class TdsToast {
   constructor() {
     this.getIconName = () => {
-      switch (this.type) {
+      switch (this.variant) {
         case 'information':
           return 'info';
         case 'error':
@@ -31,46 +37,30 @@ export class TdsToast {
         this.hidden = false;
       }
     };
-    this.getHeaderClasses = () => {
-      if (!this.hasSubheader && !this.hasLink) {
-        return 'only-header';
-      }
-      if (!this.hasSubheader) {
-        return 'no-subheader';
-      }
-      return '';
-    };
-    this.toastId = crypto.randomUUID();
+    this.toastId = generateUniqueId();
     this.header = undefined;
     this.subheader = undefined;
-    this.type = 'information';
+    this.variant = 'information';
     this.hidden = false;
     this.toastRole = 'alert';
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
   }
   /** Hides the Toast. */
   async hideToast() {
-    this.handleClose();
+    this.hidden = true;
   }
   /** Shows the Toast. */
   async showToast() {
-    this.handleShow();
-  }
-  connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
-    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
+    this.hidden = false;
   }
   render() {
+    const usesHeaderSlot = hasSlot('header', this.host);
+    const usesSubheaderSlot = hasSlot('subheader', this.host);
+    const usesBottomSlot = hasSlot('bottom', this.host);
     return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
-            toast-wrapper
-            ${this.type}
-            ` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header
-              ${this.getHeaderClasses()}
-              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
+            wrapper
+            ${this.variant}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
         this.handleClose();
-      }, class: `toast-close` }, h("tds-icon", { name: "cross", size: "20px" })))));
+      }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
   }
   static get is() { return "tds-toast"; }
   static get encapsulation() { return "shadow"; }
@@ -102,7 +92,7 @@ export class TdsToast {
         },
         "attribute": "toast-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       },
       "header": {
         "type": "string",
@@ -138,7 +128,7 @@ export class TdsToast {
         "attribute": "subheader",
         "reflect": false
       },
-      "type": {
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -152,7 +142,7 @@ export class TdsToast {
           "tags": [],
           "text": "Type of Toast."
         },
-        "attribute": "type",
+        "attribute": "variant",
         "reflect": false,
         "defaultValue": "'information'"
       },
@@ -171,7 +161,7 @@ export class TdsToast {
           "text": "Hides the Toast."
         },
         "attribute": "hidden",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "toastRole": {
@@ -194,12 +184,6 @@ export class TdsToast {
       }
     };
   }
-  static get states() {
-    return {
-      "hasSubheader": {},
-      "hasLink": {}
-    };
-  }
   static get events() {
     return [{
         "method": "tdsClose",