@scania/tegel 0.0.8 → 0.0.10

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

@@ -1,5 +1,5 @@
 import { Host, h, } from '@stencil/core';
-export class NavigationTabs {
+export class TdsNavigationTabs {
   constructor() {
     this.navWrapperElement = null; // reference to container with nav buttons
     this.componentWidth = 0; // visible width of this component
@@ -15,7 +15,7 @@ export class NavigationTabs {
             const style = window.getComputedStyle(navButton);
             buttonsWidth +=
               navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-            navButton.classList.add('sdds-navigation-tabs-tab');
+            navButton.classList.add('tds-navigation-tabs-tab');
           });
           this.componentWidth = componentWidth;
           this.buttonsWidth = buttonsWidth;
@@ -35,15 +35,15 @@ export class NavigationTabs {
       this.children = Array.from(this.host.children);
       this.children = this.children.map((item, index) => {
         item.addEventListener('click', () => {
-          const sddsChangeEvent = this.sddsChange.emit({
-            selectedTabIndex: this.children.indexOf(item)
-          });
-          if (!sddsChangeEvent.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;
-              this.sddsChange.emit({
+              this.tdsChange.emit({
                 selectedTabIndex: this.selectedIndex,
               });
             }
@@ -57,13 +57,13 @@ export class NavigationTabs {
         this.addEventListenerToTabs();
         this.children[this.defaultSelectedIndex].setSelected(true);
         this.selectedIndex = this.defaultSelectedIndex;
-        this.sddsChange.emit({
+        this.tdsChange.emit({
           selectedTabIndex: this.selectedIndex,
         });
       }
       else {
         this.children[this.selectedIndex].setSelected(true);
-        this.sddsChange.emit({
+        this.tdsChange.emit({
           selectedTabIndex: this.selectedIndex,
         });
       }
@@ -74,7 +74,7 @@ export class NavigationTabs {
     this.showLeftScroll = false;
     this.showRightScroll = false;
   }
-  /** Sets the passed tabindex as the selected tab. */
+  /** Sets the passed tabindex as the selected Tab. */
   async selectTab(tabIndex) {
     if (!this.children[tabIndex].disabled) {
       this.children.forEach((element) => element.setSelected(false));
@@ -124,11 +124,11 @@ export class NavigationTabs {
     this.addResizeObserver();
   }
   render() {
-    return (h(Host, { role: "list", class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
+    return (h(Host, { role: "list", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { class: "wrapper", ref: (el) => {
         this.navWrapperElement = el;
-      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("sdds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("sdds-icon", { name: "chevron_right", size: "20px" })))));
+      } }, h("button", { class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { name: "chevron_left", size: "20px" })), h("slot", null), h("button", { class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { name: "chevron_right", size: "20px" })))));
   }
-  static get is() { return "sdds-navigation-tabs"; }
+  static get is() { return "tds-navigation-tabs"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -154,7 +154,7 @@ export class NavigationTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+          "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -172,7 +172,7 @@ export class NavigationTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the default selected tab."
+          "text": "Sets the default selected Tab."
         },
         "attribute": "default-selected-index",
         "reflect": false,
@@ -190,7 +190,7 @@ export class NavigationTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the selected tab.\nIf this is set all tab changes needs to be handled by the user."
+          "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
         },
         "attribute": "selected-index",
         "reflect": true
@@ -205,14 +205,14 @@ export class NavigationTabs {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event emitted when the selected tab is changed."
+          "text": "Event emitted when the selected Tab is changed."
         },
         "complexType": {
           "original": "{\n    selectedTabIndex: number;\n  }",
@@ -238,7 +238,7 @@ export class NavigationTabs {
           "return": "Promise<{ selectedTabIndex: number; }>"
         },
         "docs": {
-          "text": "Sets the passed tabindex as the selected tab.",
+          "text": "Sets the passed tabindex as the selected Tab.",
           "tags": []
         }
       }

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.css

@@ -0,0 +1,363 @@
+.text-field-input-lg {
+  all: unset;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--tds-text-field-color);
+  background-color: var(--tds-text-field-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
+}
+.text-field-input-lg::placeholder {
+  opacity: 1;
+  color: var(--tds-text-field-placeholder);
+}
+.text-field-input-lg:focus::placeholder {
+  color: var(--tds-text-field-placeholder-focus-color);
+}
+.text-field-input-lg:disabled {
+  cursor: not-allowed;
+  background-color: var(--tds-text-field-background-disabled);
+  color: var(--tds-text-field-color-disabled);
+}
+.text-field-input-lg:disabled::placeholder {
+  color: var(--tds-text-field-placeholder-disabled);
+}
+.text-field-input-lg:disabled ~ .text-field-label-inside {
+  color: var(--tds-text-field-label-disabled);
+}
+
+.text-field-input-md {
+  all: unset;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--tds-text-field-color);
+  background-color: var(--tds-text-field-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-16);
+}
+.text-field-input-md::placeholder {
+  opacity: 1;
+  color: var(--tds-text-field-placeholder);
+}
+.text-field-input-md:focus::placeholder {
+  color: var(--tds-text-field-placeholder-focus-color);
+}
+.text-field-input-md:disabled {
+  cursor: not-allowed;
+  background-color: var(--tds-text-field-background-disabled);
+  color: var(--tds-text-field-color-disabled);
+}
+.text-field-input-md:disabled::placeholder {
+  color: var(--tds-text-field-placeholder-disabled);
+}
+.text-field-input-md:disabled ~ .text-field-label-inside {
+  color: var(--tds-text-field-label-disabled);
+}
+
+.text-field-input-sm {
+  all: unset;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  border: none;
+  outline: none;
+  height: 100%;
+  color: var(--tds-text-field-color);
+  background-color: var(--tds-text-field-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-16);
+}
+.text-field-input-sm::placeholder {
+  opacity: 1;
+  color: var(--tds-text-field-placeholder);
+}
+.text-field-input-sm:focus::placeholder {
+  color: var(--tds-text-field-placeholder-focus-color);
+}
+.text-field-input-sm:disabled {
+  cursor: not-allowed;
+  background-color: var(--tds-text-field-background-disabled);
+  color: var(--tds-text-field-color-disabled);
+}
+.text-field-input-sm:disabled::placeholder {
+  color: var(--tds-text-field-placeholder-disabled);
+}
+.text-field-input-sm:disabled ~ .text-field-label-inside {
+  color: var(--tds-text-field-label-disabled);
+}
+
+.text-field-container {
+  border-radius: 4px 4px 0 0;
+  display: flex;
+  position: relative;
+  height: 56px;
+  box-sizing: border-box;
+  background-color: var(--tds-text-field-background);
+  border-bottom: 1px solid var(--tds-text-field-border-bottom);
+  transition: border-bottom-color 200ms ease;
+}
+.text-field-container:hover {
+  border-bottom-color: var(--tds-text-field-border-bottom-hover);
+}
+.form-text-field-md .text-field-container {
+  height: 48px;
+}
+.form-text-field-sm .text-field-container {
+  height: 40px;
+}
+
+.text-field-input-container {
+  position: relative;
+  width: 100%;
+}
+
+.text-field-label-outside > * {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  display: block;
+  margin-bottom: var(--tds-spacing-element-8);
+  color: var(--tds-text-field-label-color);
+}
+
+.text-field-label-inside {
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  position: absolute;
+  pointer-events: none;
+  color: var(--tds-text-field-label-inside-color);
+  left: 16px;
+}
+
+.form-text-field {
+  display: block;
+  min-width: 208px;
+}
+.form-text-field-nomin {
+  min-width: auto;
+}
+
+.form-text-field.text-field-container-label-inside .text-field-input-lg {
+  padding-top: var(--tds-spacing-element-24);
+  padding-bottom: 15px;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-lg ~ .text-field-label-inside {
+  top: 20px;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-lg::placeholder {
+  color: transparent;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-lg ::placeholder {
+  color: transparent;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-lg:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--tds-text-field-placeholder-focus-color);
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md {
+  padding-top: var(--tds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md ~ .text-field-label-inside {
+  top: 16px;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md::placeholder {
+  color: transparent;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md ::placeholder {
+  color: transparent;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-md:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--tds-text-field-placeholder-focus-color);
+}
+.form-text-field.text-field-container-label-inside .text-field-input-sm {
+  padding-top: var(--tds-spacing-element-20);
+  padding-bottom: 11px;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-sm ~ .text-field-label-inside {
+  top: 16px;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-sm::placeholder {
+  color: transparent;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-sm ::placeholder {
+  color: transparent;
+}
+.form-text-field.text-field-container-label-inside .text-field-input-sm:focus::placeholder {
+  transition: color 0.35s ease;
+  color: var(--tds-text-field-placeholder-focus-color);
+}
+.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-sm ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-sm ~ .text-field-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 8px;
+}
+.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-md ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-md ~ .text-field-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 8px;
+}
+.form-text-field.text-field-container-label-inside.text-field-focus .text-field-input-lg ~ .text-field-label-inside, .form-text-field.text-field-container-label-inside.text-field-data .text-field-input-lg ~ .text-field-label-inside {
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  transition: 0.1s ease all;
+  top: 12px;
+}
+
+.text-field-bar {
+  position: absolute;
+  width: 100%;
+}
+.text-field-bar::before, .text-field-bar::after {
+  content: "";
+  height: 2px;
+  top: 54px;
+  width: 0;
+  position: absolute;
+  background: var(--tds-text-field-bar);
+  transition: 0.35s ease all;
+}
+.form-text-field-md .text-field-bar::before, .form-text-field-md .text-field-bar::after {
+  top: 46px;
+}
+.form-text-field-sm .text-field-bar::before, .form-text-field-sm .text-field-bar::after {
+  top: 40px;
+}
+.text-field-bar::before {
+  left: 50%;
+}
+.text-field-bar::after {
+  right: 50%;
+}
+.text-field-focus .text-field-bar::before, .text-field-focus .text-field-bar::after {
+  width: 50%;
+}
+
+.text-field-helper {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  flex-basis: 100%;
+  padding-top: var(--tds-spacing-element-4);
+  color: var(--tds-text-field-helper);
+}
+.text-field-helper .text-field-textcounter {
+  margin-left: auto;
+}
+
+.form-text-field-disabled .text-field-container {
+  border-bottom-color: transparent;
+}
+.form-text-field-disabled .text-field-slot-wrap-prefix > *,
+.form-text-field-disabled .text-field-slot-wrap-suffix > * {
+  color: var(--tds-text-field-ps-color-disabled);
+}
+.form-text-field-disabled .text-field-label-outside > * {
+  color: var(--tds-text-field-label-disabled);
+}
+
+.text-field-icon__readonly {
+  display: none;
+  position: absolute;
+  right: 18px;
+  top: 18px;
+  color: var(--tds-text-field-icon-read-only-label-color);
+}
+.text-field-icon__readonly-label {
+  display: none;
+  position: absolute;
+  right: 18px;
+  top: 48px;
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  padding: 8px;
+  white-space: nowrap;
+  border-radius: 4px 0 4px 4px;
+  background-color: var(--tds-text-field-icon-read-only-label-background);
+}
+
+.form-text-field-readonly {
+  pointer-events: none;
+}
+.form-text-field-readonly .text-field-icon__readonly {
+  display: block;
+}
+.form-text-field-readonly .text-field-icon__readonly:hover ~ .text-field-icon__readonly-label {
+  display: block;
+}
+.form-text-field-readonly .text-field-input {
+  padding-right: 54px;
+  background-color: transparent;
+}
+
+.form-text-field-success .text-field-container {
+  border-bottom-color: var(--tds-text-field-border-bottom-success);
+}
+
+.form-text-field-error .text-field-helper {
+  color: var(--tds-text-field-helper-error);
+}
+.form-text-field-error .text-field-container {
+  border-bottom-color: var(--tds-text-field-border-bottom-error);
+}
+.form-text-field-error .text-field-bar::before, .form-text-field-error .text-field-bar::after {
+  background: var(--tds-text-field-bar-error);
+}
+
+.text-field-helper-error-state {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+.text-field-textcounter {
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-text-field-textcounter);
+  float: right;
+}
+.text-field-textcounter .text-field-textcounter-divider {
+  color: var(--tds-text-field-textcounter-divider);
+}
+
+.text-field-slot-wrap-prefix,
+.text-field-slot-wrap-suffix {
+  align-self: center;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  margin: 0 0 0 14px;
+  color: var(--tds-text-field-ps-color);
+}
+.text-field-slot-wrap-prefix::slotted(:not(tds-icon)),
+.text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
+  margin: 0 0 0 2px;
+}
+.text-field-slot-wrap-prefix.text-field-error,
+.text-field-slot-wrap-suffix.text-field-error {
+  color: var(--tds-text-field-ps-color-error);
+}
+
+.text-field-slot-wrap-suffix {
+  margin: 0 14px 0 0;
+}
+.text-field-slot-wrap-suffix::slotted(:not(tds-icon)) {
+  margin: 0 2px 0 0;
+}