@scania/tegel 1.2.0 → 1.3.1

package/dist/collection/components/table/table-component-multiselect.stories.js

@@ -36,6 +36,20 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
+    allSelected: {
+      name: 'All selected',
+      description: `Controls the checked state of the "all-selected"-checkbox.`,
+      control: {
+        type: 'boolean',
+      },
+    },
+    allIndeterminate: {
+      name: 'All indeterminate',
+      description: `Controls the indeterminate state of the "all-selected"-checkbox.`,
+      control: {
+        type: 'boolean',
+      },
+    },
     compactDesign: {
       name: 'Compact design',
       description: 'Enables compact design of the Table, rows with less height.',
@@ -108,6 +122,8 @@ export default {
   },
   args: {
     modeVariant: 'Inherit from parent',
+    allSelected: false,
+    allIndeterminate: false,
     compactDesign: false,
     responsiveDesign: false,
     verticalDivider: false,
@@ -118,7 +134,7 @@ export default {
     column4Width: '',
   },
 };
-const MultiselectTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+const MultiselectTemplate = ({ modeVariant, allSelected, allIndeterminate, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
     <tds-table
         table-id="multiselect-table"
         multiselect
@@ -128,7 +144,7 @@ const MultiselectTemplate = ({ modeVariant, compactDesign, responsiveDesign, ver
         ${noMinWidth ? 'no-min-width' : ''}
         ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
     >
-          <tds-table-header>
+          <tds-table-header ${allSelected ? 'selected' : ''} ${allIndeterminate ? 'indeterminate' : ''}>
               <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
               <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
               <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>

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

@@ -12,6 +12,8 @@ const relevantTableProps = [
 export class TdsTableHeaderRow {
   constructor() {
     this.allSelected = false;
+    this.selected = undefined;
+    this.indeterminate = false;
     this.multiselect = false;
     this.expandableRows = false;
     this.mainCheckboxSelected = false;
@@ -83,7 +85,7 @@ export class TdsTableHeaderRow {
         'tds-table--compact': this.compactDesign,
         'tds-table--divider': this.verticalDividers,
         'tds-table--toolbar-available': this.enableToolbarDesign,
-      } }, h("tr", null, this.multiselect && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { checked: this.allSelected, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", null))));
+      } }, h("tr", null, this.multiselect && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { checked: this.allSelected || this.selected, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", null))));
   }
   static get is() { return "tds-table-header"; }
   static get encapsulation() { return "shadow"; }
@@ -110,12 +112,50 @@ export class TdsTableHeaderRow {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "Prop for controling the checked/unchecked state of the \"all selected\"-checkbox."
+          "tags": [{
+              "name": "deprecated",
+              "text": "Deprecated, use selected instead.."
+            }],
+          "text": ""
         },
         "attribute": "all-selected",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prop for controling the checked/unchecked state of the \"All selected\"-checkbox."
+        },
+        "attribute": "selected",
+        "reflect": true
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prop for controling the indeterminate state of the \"All selected\"-checkbox."
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.css

@@ -16,11 +16,11 @@
   display: none;
 }
 :host .scroll-right-button {
-  z-index: 201;
+  z-index: 1;
   right: 0;
 }
 :host .scroll-left-button {
-  z-index: 201;
+  z-index: 1;
   left: 0;
 }
 :host .scroll-right-button,

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

@@ -1,6 +1,5 @@
 :host {
   box-sizing: border-box;
-  z-index: 200;
   display: block;
   position: relative;
 }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.css

@@ -30,11 +30,11 @@
 }
 :host .scroll-right-button {
   right: 0;
-  z-index: 201;
+  z-index: 1;
 }
 :host .scroll-left-button {
   left: 0;
-  z-index: 201;
+  z-index: 1;
 }
 :host .scroll-right-button,
 :host .scroll-left-button {

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

@@ -1,6 +1,5 @@
 :host {
   box-sizing: border-box;
-  z-index: 200;
   display: block;
 }
 :host * {

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

@@ -30,11 +30,11 @@
 }
 :host .scroll-right-button {
   right: 0;
-  z-index: 201;
+  z-index: 1;
 }
 :host .scroll-left-button {
   left: 0;
-  z-index: 201;
+  z-index: 1;
 }
 :host .scroll-right-button,
 :host .scroll-left-button {

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

@@ -204,7 +204,7 @@ const Template = ({ modeVariant, state, type, size, label, labelPosition, placeh
 
   <div class="demo-wrapper">
     <tds-text-field
-      type="${type}"
+      type="${type.toLowerCase()}"
       size="${sizeLookUp[size]}"
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
       state="${stateValue}"

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

@@ -57,7 +57,10 @@ export class TdsToast {
     const usesHeaderSlot = hasSlot('header', this.host);
     const usesSubheaderSlot = hasSlot('subheader', this.host);
     const usesActionsSlot = hasSlot('actions', this.host);
-    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        hide: this.hidden,
+        show: !this.hidden,
+      } }, h("div", { class: `
             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" })), usesActionsSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "actions" })))), h("button", { onClick: () => {
         this.handleClose();

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

@@ -54,6 +54,13 @@ export default {
         type: 'text',
       },
     },
+    hidden: {
+      name: 'Hidden',
+      description: 'Hides the Toast.',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   args: {
     variant: 'Information',
@@ -62,12 +69,14 @@ export default {
     actions: `<tds-link slot="actions">
           <a href="https://tegel.scania.com/home" target="_blank">Tegel</a>
       </tds-link>`,
+    hidden: false,
   },
 };
-const Template = ({ variant, header, subheader, actions }) => formatHtmlPreview(`<tds-toast
+const Template = ({ variant, header, subheader, actions, hidden }) => formatHtmlPreview(`<tds-toast
         variant="${variant.toLowerCase()}"
         header="${header}"
         ${subheader ? `subheader="${subheader}"` : ''}
+        ${hidden ? 'hidden' : ''}
     >
     ${actions || ''}
     </tds-toast>

package/dist/collection/stories/Installation/angular.stories.js

@@ -0,0 +1,111 @@
+const meta = {
+  title: 'Intro/Installation',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: false,
+    },
+  },
+};
+export default meta;
+export const Angular = {
+  render: () => `<style>
+            article {
+                box-sizing: border-box;
+                max-width: 688px;
+                padding: 32px;
+                margin: auto;
+                > * {
+                    margin-bottom: 72px;
+                }
+            }
+
+            section > p,
+            section > ul,
+            section > tds-link {
+                margin-bottom: 32px;
+            }
+
+            tds-link {
+                display: inline-block;
+            }
+
+            .mb-72 {
+                margin-bottom: 72px;
+            }
+            code {
+                border-radius: 4px;
+            }
+            </style>
+            <article class="tds-u-p2 tds-body-01">
+            <section>
+                        <p class="tds-body-01"><strong>Published: 2023-10-11</strong></p>
+                        <h1 class="tds-headline-02">Using Tegel in Angular</h1>
+                        <p>
+                            Tegel offers Angular wrappers for all web components. While the rendered components still maintain
+                            their core as web components, these wrappers significantly enhance the developer's experience by
+                            providing a more intuitive API and seamless integration with Angular. You can find these wrappers
+                            in a separate package called <code>@scania/tegel-angular</code>, which is the recommended approach for integrating
+                            Tegel into a Angular application.
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">Prerequisites</h4>
+                        <ul>
+                            <li>Node version 18+</li>
+                            <li>Angular 14+</li>
+                        </ul>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            Installing <code>@scania/tegel-angular</<code>
+                        </h4>
+                        <p class="tds-body-01">Install the <code>@scania/tegel-angular</code> package via npm.</p>
+                        <pre>
+                            <code>
+npm install @scania/tegel-angular
+                            </code>
+                        </pre>
+                        <p class="tds-body-01">In your global css file import the tegel stylesheet.</p>
+                        <pre>
+                            <code>
+@import url('@scania/tegel/dist/tegel/tegel.css');
+                            </code>
+                        </pre>
+
+                        <p class="tds-body-01">Import the <code>TegelModule</code> in your app.module.ts.</p>
+                        <pre>
+                            <code>
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { TegelModule } from '@scania/tegel-angular';
+
+@NgModule({
+   declarations: [
+      AppComponent,
+      TesterComponent
+   ],
+   imports: [
+      BrowserModule,
+      TegelModule,
+   ],
+   providers: [],
+   bootstrap: [AppComponent]
+})
+export class AppModule { }
+                            </code>
+                        </pre>
+                        <p class="tds-body-01">After this, all TDS components will be available in your template files. Example:</p>
+                        <pre>
+                            <code>
+ &lt;tds-button text="Click me!" variant="primary" size="sm"&gt;
+   &lt;tds-icon slot="icon" name="truck"&gt; &lt;/tds-icon&gt;
+ &lt;/tds-button&gt;
+                            </code>
+                        </pre>
+
+                    </section>
+                </article>  `,
+};

package/dist/collection/stories/Installation/javascript.stories.js

@@ -0,0 +1,99 @@
+import hljs from "highlight.js";
+import "../../../.storybook/tegel.syntax.highlighter.css";
+const meta = {
+  title: 'Intro/Installation',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: false,
+    },
+  },
+};
+hljs.highlightAll();
+export default meta;
+export const Javascript = {
+  render: () => `
+    <style>
+    article {
+        box-sizing: border-box;
+        max-width: 688px;
+
+        padding: 32px;
+        margin: auto;
+        >* {
+            margin-bottom: 72px;
+        }
+    }
+
+    code {
+        border-radius: 4px;
+    }
+</style>
+<article class="tds-u-p2 tds-body-01">
+    <section>
+        <p class="tds-body-01"><strong>Published: 2023-10-11</strong></p>
+        <h1 class="tds-headline-02">Installing Tegel</h1>
+        <p>This is a getting started guide aimed at developers that want to install and use the @scania/tegel library (TDS).
+            This library consists of web components built using Stencil, which means that they are framework agnostic and follow
+           browser standards. The library is installed and updated via NPM (node package manager). For further installation
+            information please see the framework specific installation guides below.
+        </p>
+    </section>
+    
+    <section>
+        <h4>Migration from SDDS</h4>
+        <p>TDS and @scania/components (SDDS) share a lot of design, but the tech implementation have two different approaches.
+        Therefore there is some migration work needed when going from SDDS to TDS. We have outlined all the differences in this
+        <tds-link><a href="?path=/story/intro-migrating-from-components-v4--page">migration document</a></tds-link>. However, since they exist in different namespaces (SDDS is prefixed with ‘sdds’ and TDS with ‘tds’)
+        the two solutions can exist alongside each other, enabling a soft migration that can be done over time.</p>
+    </section>
+
+    <section>
+        <h4>Framework integrations</h4>
+        <p>TDS is, like previously mentioned, a collection of web components. This enables them to work within any frontend
+        framework since they are built on web standards. However, achieving a seamless integration can be challenging because
+        different frameworks offer varying levels of support for vanilla web components. To still allow for a premium developer
+        experience we leverage Stencils (the complier used to build the TDS web components) output targets to build
+        “framework-wrappers”. These are separate npm packages consisting of framework specific counterparts for all of the
+        components in @scania/tegel. The currently available packages are built for Angular (@scania/tegel-angular) and
+        React (@scania/tegel-react). If you are planning to use TDS in an Angular or React application we recommend you follow the
+        installation guide for the respective framework.
+        
+        <div><tds-link><a href="?path=/story/intro-installation--angular">Angular installation guide</a></tds-link></div>
+        <div><tds-link><a href="?path=/story/intro-installation--react">React installation guide</a></tds-link></div>
+        
+        </p>
+    </section>
+    <section>
+        <h4>Javascript</h4>
+        <p>This guide is aimed at developers that want to use TDS in an application without any framework.</p>
+        <p>Run npm init to generate a package.json, and then install @scania/tegel.</p>
+        <pre>
+        <code>
+npm install @scania/tegel
+        </code>
+        </pre>
+        <p>The components needs to be registered before they can be used. For example, import and call the <code>defineCustomElements</code> function in your <code>&lt;head&gt;</code>. You also need to import the Tegel stylesheet.</p>
+        <pre>
+        <code>
+&lt;script type="module"&gt;
+    import { defineCustomElements } from './node_modules/@scania/tegel/loader/index.es2017.js';
+    defineCustomElements();
+&lt;/script&gt;
+&lt;link rel="stylesheet" href="./node_modules/@scania/tegel/dist/tegel/tegel.css"/&gt;
+        </code>
+        </pre>
+        <p class="tds-body-01">After this, all TDS component will be available in your template files. Example:</p>
+        <pre>
+            <code>
+&lt;tds-button text="Click me!" variant="primary" size="sm"&gt;
+    &lt;tds-icon slot="icon" name="truck"&gt; &lt;/tds-icon&gt;
+&lt;/tds-button&gt;
+            </code>
+        </pre>
+    
+    </section>
+</article>
+    `,
+};

package/dist/collection/stories/Installation/react.stories.js

@@ -0,0 +1,117 @@
+const meta = {
+  title: 'Intro/Installation',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: false,
+    },
+  },
+};
+export default meta;
+export const React = {
+  render: () => `<style>
+            article {
+                box-sizing: border-box;
+                max-width: 688px;
+                padding: 32px;
+                margin: auto;
+                > * {
+                    margin-bottom: 72px;
+                }
+            }
+
+            section > p,
+            section > ul,
+            section > tds-link {
+                margin-bottom: 32px;
+            }
+
+            tds-link {
+                display: inline-block;
+            }
+
+            .mb-72 {
+                margin-bottom: 72px;
+            }
+            code {
+                border-radius: 4px;
+            }
+            </style>
+            <article class="tds-u-p2 tds-body-01">
+            <section>
+                        <p class="tds-body-01"><strong>Published: 2023-10-11</strong></p>
+                        <h1 class="tds-headline-02">Using Tegel in React</h1>
+                        <p class="tds-body-01">
+                            Tegel offers React wrappers for all web components. While the rendered components still maintain
+                            their core as web components, these wrappers significantly enhance the developers experience by
+                            providing a more intuitive API and seamless integration with React. You can find these wrappers
+                            in a separate package called <code>@scania/tegel-react</code>, which is the recommended approach for integrating
+                            Tegel into a React application.
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">Prerequisites</h4>
+                        <ul>
+                            <li>Node version 18+</li>
+                        </ul>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            Installing <code>@scania/tegel-react</<code>
+                        </h4>
+                        <p class="tds-body-01">Install the <code>@scania/tegel-react</code> package via npm.</p>
+                        <pre>
+                            <code>
+npm install @scania/tegel-react
+                            </code>
+                        </pre>
+                        <p class="tds-body-01">In your global css file import the tegel stylesheet.</p>
+                        <pre>
+                            <code>
+@import url('@scania/tegel/dist/tegel/tegel.css');
+                            </code>
+                        </pre>
+
+                        <p class="tds-body-01">Import the <code>defineCustomElements</code> function and call it. After that, import the components you want to use. </p>
+                        <pre>
+                            <code>
+import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+import { defineCustomElements, TdsButton } '@scania/tegel-react';
+
+defineCustomElements();
+function App() {
+    &lt;div className="App"&gt;
+        &lt;TdsButton text="Click me!"&gt;
+            &lt;span slot="icon"&gt;
+                &lt;TdsIcon name="truck"/&gt;
+            &lt;/slot&gt;
+        &lt;/TdsButton&gt;
+    &lt;/div>
+}
+export default App;
+                            </code>
+                        </pre>
+
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                           PascalCase
+                        </h4>
+                        <p class="tds-body-01">
+                        Since the components exported from the @scania/tegel-react package
+                        are React components these have a different look than our vanilla web components.
+                        They are for one, PascalCased. This means that instead of being called
+                        <code>&lt;tds-button&gt;</code> the Button component from @scania/tegel-react is called
+                        <code>&lt;TdsButton&gt;</code>. The same goes for the props passed to the components.
+                        Instead of using a hyphen, the props use PascalCase. For example:
+                        <code>&lt;tds-button mode-variant="secondary"&gt;&lt;/tds-button&gt;</code>
+                        would instead be 
+                        <code>&lt;TdsButton modeVariant="secondary"&gt;&lt;/TdsButton&gt;</code>.
+                        </p>
+                        
+                    </section>
+                </article>  `,
+};

package/dist/collection/stories/announcements/announce-tegel.stories.js

@@ -51,7 +51,7 @@ export const Tegel = {
                         <h4 class="tds-u-mb2">@scania/tegel 🧱</h4>
                         <p>
                             The new
-                            package includes all components as web components, removes the old "native" components and makes the
+                            package includes all components as web components, removes the old CSS class components and makes the
                             installation and updates easier. The current prefix for components, CSS variables, and utility classes -
                             "sdds",
                             will be changed. We have also created a new Storybook for @scania/tegel, which allows developers and
@@ -90,7 +90,7 @@ export const Tegel = {
                             And we have saved the best for last, @scania/tegel is 100% web component. Previous packages
                             had
                             some
-                            web components, but also "native" components, these were utility classes that could be added to a predefined
+                            web components, but also CSS components, these were utility classes that could be added to a predefined
                             HTML
                             structure to create the look and feel of Tegel. Now we are making a big effort to provide all components as
                             web
@@ -131,13 +131,13 @@ export const Tegel = {
                     </section>
                     <section>
                         <h4 class="tds-u-mb2">
-                            Removing "native" components ❌
+                            Removing CSS class components ❌
                         </h4>
 
 
                         <p>
-                            With this new package we are also removing our "native" components and instead introducing web component
-                            counterparts to these. This means that every component that was available as a "native" component in
+                            With this new package we are also removing our CSS components and instead introducing web component
+                            counterparts to these. This means that every component that was available as a CSS component in
                             @scania/components will have a web component alternative in @scania/tegel. This removal will be done in our
                             next
                             release of @scania/tegel. This change does not change the current @scania/components package.

package/dist/collection/stories/tegel.stories.js

@@ -73,7 +73,7 @@ export const TegelDesignSystem = {
                         </p>
                         <p>
                             The new
-                            package includes all components as web components, removes the old "native" components and makes the
+                            package includes all components as web components, removes the old CSS class components and makes the
                             installation and updates easier. The current prefix for components, CSS variables, and utility classes -
                             "sdds",
                             will be changed. We have also created a new Storybook for @scania/tegel, which allows developers and
@@ -109,14 +109,13 @@ export const TegelDesignSystem = {
                             latest major.
                         </p>
                         <p>
-                            And we have saved the best for last, @scania/tegel is 100% web component. Previous packages
+                            And we have saved the best for last, @scania/tegel is 100% web components. Previous packages
                             had
                             some
-                            web components, but also "native" components, these were utility classes that could be added to a predefined
+                            web components, but also CSS class components, these were utility classes that could be added to a predefined
                             HTML
                             structure to create the look and feel of Tegel. Now we are making a big effort to provide all components as
-                            web
-                            components.
+                            web components.
                         </p>
                     </section>
                     <section>
@@ -153,13 +152,13 @@ export const TegelDesignSystem = {
                     </section>
                     <section>
                         <h4 class="tds-u-mb2">
-                            Removing "native" components ❌
+                            Removing CSS class components ❌
                         </h4>
 
 
                         <p>
-                            With this new package we are also removing our "native" components and instead introducing web component
-                            counterparts to these. This means that every component that was available as a "native" component in
+                            With this new package we are also removing our CSS components and instead introducing web component
+                            counterparts to these. This means that every component that was available as a CSS component in
                             @scania/components will have a web component alternative in @scania/tegel. This removal will be done in our
                             next
                             release of @scania/tegel. This change does not change the current @scania/components package.