@scania/tegel 0.0.9 → 0.0.10

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css

@@ -25,6 +25,10 @@
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
+:host .navigation-tab-item:not(.selected)::after {
+  width: 0%;
+  transition: width 0.15s ease-in-out 0s;
+}
 :host .navigation-tab-item {
   position: relative;
   margin-right: 32px;
@@ -46,7 +50,6 @@
   margin-right: auto;
   height: 2px;
   background-color: var(--tds-navigation-tabs-tab-indicator-background-hover);
-  transition: width 0.15s ease-in-out 0s;
   z-index: 1;
 }
 :host .selected ::slotted(*) {
@@ -58,11 +61,19 @@
 }
 :host .disabled {
   color: var(--tds-navigation-tabs-tab-color-disabled);
-  pointer-events: none;
 }
 :host .disabled ::slotted(*) {
   opacity: var(--tds-navigation-tabs-tab-color-opacity-disabled);
 }
+:host .disabled::after {
+  content: none;
+}
+:host .disabled ::slotted(*:hover) {
+  cursor: not-allowed;
+}
+:host .disabled ::slotted(*:focus-visible) {
+  outline: none;
+}
 
 :host(.first) {
   margin-left: 32px;

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -35,11 +35,11 @@ export class TdsNavigationTabs {
       this.children = Array.from(this.host.children);
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const tdsChangeEvent = this.tdsChange.emit({
-            selectedTabIndex: this.children.indexOf(item),
-          });
-          if (!tdsChangeEvent.defaultPrevented) {
-            if (!item.disabled) {
+          if (!item.disabled) {
+            const tdsChangeEvent = this.tdsChange.emit({
+              selectedTabIndex: this.children.indexOf(item),
+            });
+            if (!tdsChangeEvent.defaultPrevented) {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -0,0 +1,101 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeTab from './navigation-tab/readme.md';
+import { ComponentsFolder } from '../../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Tabs`,
+  parameters: {
+    notes: {
+      'Navigation Tabs': readme,
+      'Navigation Tab': readmeTab,
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=10544%3A31546&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variation 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' },
+      },
+    },
+    defaultSelectedIndex: {
+      name: 'Default selected index',
+      description: 'Sets the default selected Tab, if this is used the Tab changes will be done automatically.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 0, 1, 2, 3],
+      table: {
+        defaultValue: { summary: '0' },
+      },
+    },
+    selectedIndex: {
+      name: 'Selected index',
+      description: 'Sets the selected Tab, if this is used the Tab changes has to be handled by the user.',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 0, 1, 2, 3],
+      if: { arg: 'defaultSelectedIndex', eq: 'None' },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    defaultSelectedIndex: 'None',
+    selectedIndex: 'None',
+  },
+};
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+    <tds-navigation-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <tds-navigation-tab>
+        <a href="#">First tab</a>
+      </tds-navigation-tab>
+      <tds-navigation-tab>
+        <a href="#">Second tab is much longer</a>
+      </tds-navigation-tab>
+      <tds-navigation-tab>
+        <a href="#">Third tab</a>
+      </tds-navigation-tab>
+      <tds-navigation-tab disabled>
+        <a href="javascript:void(0)">Fourth tab</a>
+      </tds-navigation-tab>
+    </tds-navigation-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
+    </div>
+ 
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+    selectedTab = document.getElementsByClassName('selectedTab')[0]
+    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+    tabs = document.querySelector('tds-navigation-tabs');
+    
+    tabs.addEventListener('tdsChange', (event) => {
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
+    })
+    </script>
+    `);
+export const NavigationTabs = Template.bind({});

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

@@ -1,4 +1,9 @@
 import { h } from '@stencil/core';
+import { hasSlot } from '../../utils/utils';
+/**
+ * @slot prefix - Slot for the prefix in the Text Field
+ * @slot suffix - Slot for the suffix in the Text Field
+ */
 export class TdsTextField {
   constructor() {
     this.type = 'text';
@@ -39,6 +44,8 @@ export class TdsTextField {
   }
   render() {
     var _a;
+    const usesPrefixSlot = hasSlot('prefix', this.host);
+    const usesSuffixSlot = hasSlot('suffix', this.host);
     return (h("div", { class: `
         ${this.noMinWidth ? 'form-text-field-nomin' : ''}
         ${this.focusInput && !this.disabled
@@ -54,7 +61,7 @@ export class TdsTextField {
         ${this.size === 'md' ? 'form-text-field-md' : ''}
         ${this.size === 'sm' ? 'form-text-field-sm' : ''}
         ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
-        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" })), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" }))), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);
         }
@@ -62,7 +69,7 @@ export class TdsTextField {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" })), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength)))));
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), usesSuffixSlot && (h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" }))), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength)))));
   }
   static get is() { return "tds-text-field"; }
   static get encapsulation() { return "scoped"; }
@@ -428,4 +435,5 @@ export class TdsTextField {
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }

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({});