@scania/tegel 0.0.72 → 1.0.0

package/dist/collection/stories/foundations/spacing/spacing-element.stories.js

@@ -0,0 +1,100 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+export default {
+  title: 'Foundations/Spacing',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <style>
+    /* Demo code for presentation purposes */
+    .tds-spacing-element-demo-box {
+      background-color: var(--tds-red-500);
+      display: inline-block;
+    }
+    table th, table td {
+      padding: 8px;
+      text-align: center;
+    }
+
+    th:last-child {
+        text-align: left;
+    }
+    th:last-child,
+    td:last-child {
+      text-align: left;
+    }
+  </style>
+
+  <h4>Spacing Element</h4>
+  <table>
+    <tr>
+      <th>Px</th>
+      <th>Token</th>
+      <th>CSS</th>
+      <th>Scale</th>
+    </tr>
+    <tr>
+      <td>2px</td>
+      <td><code>$spacing-element-2</code></td>
+      <td><code>.tds-spacing-element-2</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-2); height: var(--tds-spacing-element-2)"></span></td>
+    </tr>
+    <tr>
+      <td>4px</td>
+      <td><code>$spacing-element-4</code></td>
+      <td><code>.tds-spacing-element-4</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-4); height: var(--tds-spacing-element-4)"></span></td>
+    </tr>
+    <tr>
+      <td>8px</td>
+      <td><code>$spacing-element-8</code></td>
+      <td><code>.tds-spacing-element-8</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-8); height: var(--tds-spacing-element-8)"></span></td>
+    </tr>
+    <tr>
+      <td>12px</td>
+      <td><code>$spacing-element-12</code></td>
+      <td><code>.tds-spacing-element-12</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-12); height: var(--tds-spacing-element-12);"></span></td>
+    </tr>
+    <tr>
+      <td>16px</td>
+      <td><code>$spacing-element-16</code></td>
+      <td><code>.tds-spacing-element-16</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-16); height: var(--tds-spacing-element-16);"></span></td>
+    </tr>
+    <tr>
+      <td>20px</td>
+      <td><code>$spacing-element-20</code></td>
+      <td><code>.tds-spacing-element-20</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-20); height: var(--tds-spacing-element-20);"></span></td>
+    </tr>
+    <tr>
+      <td>24px</td>
+      <td><code>$spacing-element-24</code></td>
+      <td><code>.tds-spacing-element-24</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-24); height: var(--tds-spacing-element-24);"></span></td>
+    </tr>
+    <tr>
+      <td>32px</td>
+      <td><code>$spacing-element-32</code></td>
+      <td><code>.tds-spacing-element-32</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-32); height: var(--tds-spacing-element-32);"></span></td>
+    </tr>
+    <tr>
+      <td>40px</td>
+      <td><code>$spacing-element-40</code></td>
+      <td><code>.tds-spacing-element-40</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-40); height: var(--tds-spacing-element-40);"></span></td>
+    </tr>
+    <tr>
+      <td>48px</td>
+      <td><code>$spacing-element-48</code></td>
+      <td><code>.tds-spacing-element-48</code></td>
+      <td><span class="tds-spacing-element-demo-box" style="width: var(--tds-spacing-element-48); height: var(--tds-spacing-element-48);"></span></td>
+    </tr>
+  </table>
+  `);
+export const SpacingElement = Template.bind({});
+SpacingElement.args = {};

package/dist/collection/stories/foundations/spacing/spacing-layout.stories.js

@@ -0,0 +1,94 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+export default {
+  title: 'Foundations/Spacing',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <style>
+   /* Demo code for presentation purposes */
+    .demo-wrapper {
+      background-color: var(--tds-blue-500);
+      display: inline-block;
+    }
+    table th, table td {
+      padding: 8px;
+    }
+    th:last-child,
+    td:last-child {
+      text-align: left;
+    }
+  </style>
+
+  <table>
+    <tr>
+      <th>Px</th>
+      <th>Token</th>
+      <th>CSS</th>
+      <th>Scale</th>
+    </tr>
+    <tr>
+      <td>8px</td>
+      <td><code>$spacing-layout-8</code></td>
+      <td><code>.tds-spacing-layout-8</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-8); height: var(--tds-spacing-layout-8)"></span></td>
+    </tr>
+    <tr>
+      <td>16px</td>
+      <td><code>$spacing-layout-16</code></td>
+      <td><code>.tds-spacing-layout-16</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-16); height: var(--tds-spacing-layout-16);"></span></td>
+    </tr>
+    <tr>
+      <td>24px</td>
+      <td><code>$spacing-layout-24</code></td>
+      <td><code>.tds-spacing-layout-24</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-24); height: var(--tds-spacing-layout-24);"></span></td>
+    </tr>
+    <tr>
+      <td>32px</td>
+      <td><code>$spacing-layout-32</code></td>
+      <td><code>.tds-spacing-layout-32</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-32); height: var(--tds-spacing-layout-32);"></span></td>
+    </tr>
+    <tr>
+      <td>48px</td>
+      <td><code>$spacing-layout-48</code></td>
+      <td><code>.tds-spacing-layout-48</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-48); height: var(--tds-spacing-layout-48);"></span></td>
+    </tr>
+    <tr>
+      <td>64px</td>
+      <td><code>$spacing-layout-64</code></td>
+      <td><code>.tds-spacing-layout-64</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-64); height: var(--tds-spacing-layout-64);"></span></td>
+    </tr>
+    <tr>
+      <td>72px</td>
+      <td><code>$spacing-layout-72</code></td>
+      <td><code>.tds-spacing-layout-72</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-72); height: var(--tds-spacing-layout-72);"></span></td>
+    </tr>
+    <tr>
+      <td>96px</td>
+      <td><code>$spacing-layout-96</code></td>
+      <td><code>.tds-spacing-layout-96</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-96); height: var(--tds-spacing-layout-96);"></span></td>
+    </tr>
+    <tr>
+      <td>128px</td>
+      <td><code>$spacing-layout-128</code></td>
+      <td><code>.tds-spacing-layout-128</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-128); height: var(--tds-spacing-layout-128);"></span></td>
+    </tr>
+    <tr>
+      <td>160px</td>
+      <td><code>$spacing-layout-160</code></td>
+      <td><code>.tds-spacing-layout-160</code></td>
+      <td><span class="demo-wrapper" style="width: var(--tds-spacing-layout-160); height: var(--tds-spacing-layout-160);"></span></td>
+    </tr>
+  </table>
+  `);
+export const SpacingLayout = Template.bind({});
+SpacingLayout.args = {};

package/dist/collection/stories/foundations/typography/typography-body.stories.js

@@ -0,0 +1,16 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+export default {
+  title: 'Foundations/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <p class='tds-body-01'>
+  Our larger text style used for body text. We usually use it for paragraphs exceeding 3 lines. The size works well on both larger and smaller breakpoints for reading.
+  </p>
+  <p class='tds-body-02'>
+  Our smaller text style used for body text. We usually use it for paragraphs with less than 3 lines. The size works well on both larger and smaller breakpoints for reading. It could also be used within certain components.
+  </p>
+  `);
+export const Body = Template.bind({});

package/dist/collection/stories/foundations/typography/typography-detail.stories.js

@@ -0,0 +1,17 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+export default {
+  title: 'Foundations/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <p class='tds-detail-01'>This text style is used in components, such as the cookie component.</p>
+  <p class='tds-detail-02'>This text style is used in components, such as data tables and buttons.</p>
+  <p class='tds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>
+  <p class='tds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
+  <p class='tds-detail-05'>This text style is used in components, such as the tooltip and as a label for the text field component.</p>
+  <p class='tds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
+  <p class='tds-detail-07'>This text style should only be used for very small instances, for instance as a label inside a text field.</p>
+  `);
+export const Detail = Template.bind({});

package/dist/collection/stories/foundations/typography/typography-headline.stories.js

@@ -0,0 +1,39 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+export default {
+  title: 'Foundations/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    type: {
+      name: 'Type',
+      description: 'The type of headline. Functional/Expressive.',
+      control: {
+        type: 'radio',
+      },
+      options: { Functional: 'functional', Expressive: 'expressive' },
+    },
+  },
+};
+const Template = ({ type }) => formatHtmlPreview(`
+    <style>
+    /* Demo code for presentation purposes */
+    .demo-wrapper h1 {
+        margin: 0;
+    }
+    </style>
+
+    <div class="demo-wrapper">
+        <h1 class="tds-${type === 'expressive' ? `${type}-` : ''}headline-01">Headline</h1>
+        <h2 class="tds-${type === 'expressive' ? `${type}-` : ''}headline-02">Headline</h2>
+        <h3 class="tds-${type === 'expressive' ? `${type}-` : ''}headline-03">A headline for page layouts</h3>
+        <h4 class="tds-${type === 'expressive' ? `${type}-` : ''}headline-04">A headline for page layouts</h4>
+        <h5 class="tds-${type === 'expressive' ? `${type}-` : ''}headline-05">A sub headline, which is most commonly paired with body-01</h5>
+        <h6 class="tds-${type === 'expressive' ? `${type}-` : ''}headline-06">A sub headline, which is most commonly paired with body-02</h6>
+        <h7 class="tds-${type === 'expressive' ? `${type}-` : ''}headline-07">A sub headline, which is most commonly paired with detail-02 </h7>
+    </div>
+  `);
+export const Headlines = Template.bind({});
+Headlines.args = {
+  type: 'functional',
+};

package/dist/collection/stories/foundations/typography/typography-paragraph.stories.js

@@ -0,0 +1,12 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+export default {
+  title: 'Foundations/Typography',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+const Template = () => formatHtmlPreview(`
+        <p class='tds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>
+        <p class='tds-paragraph-02'>Our smaller paragraph, mainly present on mobile breakpoints, which should be used for introduction texts on page layouts.</p>
+  `);
+export const Paragraph = Template.bind({});

package/dist/collection/stories/patterns/navigation/navigation-basic.stories.js

@@ -0,0 +1,85 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+import readme from "./readme.md";
+export default {
+  title: 'Patterns/Navigation',
+  parameters: {
+    notes: {
+      Readme: readme,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+  <tds-header>
+    <tds-header-title>
+      Example: default
+    </tds-header-title>
+    <tds-header-launcher slot="end" aria-label="Application launcher">
+      <tds-header-launcher-list-title>Cool apps</tds-header-launcher-list-title>
+      <tds-header-launcher-list>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+      </tds-header-launcher-list>
+      <tds-header-launcher-list-title>Lame apps</tds-header-launcher-list-title>
+      <tds-header-launcher-list>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </tds-header-launcher-list-item>
+      </tds-header-launcher-list>
+    </tds-header-launcher>
+  
+    <tds-header-brand-symbol slot="end">
+      <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
+    </tds-header-brand-symbol>
+
+  </tds-header>
+  
+  <main class="tds-u-w-100 tds-u-p3" style="box-sizing: border-box;">
+    <p>If the Header only contains a title, launcher, and logo, no side menu is needed.</p>
+  </main>
+  `);
+export const Basic = Template.bind({});

package/dist/collection/stories/patterns/navigation/navigation-fewitems.stories.js

@@ -0,0 +1,259 @@
+import { formatHtmlPreview } from "../../../utils/utils";
+import readme from "./readme.md";
+export default {
+  title: 'Patterns/Navigation',
+  parameters: {
+    notes: {
+      Readme: readme,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+    <script>
+      /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+      window.demoSideMenu = document.querySelector('#demo-side-menu');
+      window.demoHamburger = document.querySelector('#demo-hamburger');
+    </script>
+    <style>
+
+      /* Note: to make the layout fill the entire viewport height you'll need to set the */
+      /* height of the parent element and all of its ancestors to 100%. */
+      /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
+      .demo-layout {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .demo-main {
+        flex-grow: 1;
+      }
+    
+      /* If an extra button in the Header is required except on 
+      very narrow screens, you can use classes like these: */
+      .demo-hide {
+        display: none;
+      }
+
+      @media (min-width: 375px) {
+        .demo-xs-hide {
+          display: none;
+        }
+        .demo-xs-show {
+          display: block;
+        }
+      }
+      @media (min-width: 992px) {
+        .demo-lg-show {
+          display: block;
+        }
+      }
+    </style>
+
+
+    <div class="demo-layout">
+      <tds-header>
+        <!-- TODO setting aria-expanded="true" on the hamburger button does not work, as it is not
+          copied to the button element -->
+        <tds-header-hamburger id="demo-hamburger" onclick="demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);" aria-label="Open application drawer" aria-haspopup="true" aria-expanded="false"></tds-header-hamburger>
+
+        <tds-header-title>
+          Example: Few items
+        </tds-header-title>
+
+        <tds-header-item selected>
+          <button onclick="alert('About us clicked');">
+            About us
+          </button>
+        </tds-header-item>
+
+        <tds-header-item>
+          <a href="https://www.google.se">
+            Truck types
+          </a>
+        </tds-header-item>
+
+        <tds-header-dropdown>
+          <span slot="label">Wheel types</span>
+          <tds-header-dropdown-list>
+            <tds-header-dropdown-list-item>
+              <a href="https://tegel.scania.com">Hub-centric wheel</a>
+            </tds-header-dropdown-list-item>
+            <tds-header-dropdown-list-item>
+              <a href="https://tegel.scania.com">Rim wheel</a>
+            </tds-header-dropdown-list-item>
+          </tds-header-dropdown-list>
+        </tds-header-dropdown>
+
+        <tds-header-item slot="end">
+          <button onclick="alert('Calendar button clicked')">
+            <tds-icon name="calendar" size="20px"></tds-icon>
+          </button>
+        </tds-header-item>
+
+        <tds-header-launcher slot="end" aria-label="Application launcher">
+          <tds-header-launcher-grid-title>Operations and Logistics</tds-header-launcher-grid-title>
+          <tds-header-launcher-grid>
+            <tds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <tds-icon name="star" size="32"></tds-icon>
+                ScaniaCare
+              </a>
+            </tds-header-launcher-grid-item>
+            <tds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <tds-icon name="truck" size="32"></tds-icon>
+                ScaniaInsight
+              </a>
+            </tds-header-launcher-grid-item>
+            <tds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <tds-icon name="fuel_gauge" size="32"></tds-icon>
+                ScaniaConnect
+              </a>
+            </tds-header-launcher-grid-item>
+            <tds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <tds-icon name="star" size="32"></tds-icon>
+                ScaniaPlan
+              </a>
+            </tds-header-launcher-grid-item>
+            <tds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <tds-icon name="truck" size="32"></tds-icon>
+                ScaniaTrack
+              </a>
+            </tds-header-launcher-grid-item>
+          </tds-header-launcher-grid>
+          <tds-header-launcher-grid-title>Customer Service</tds-header-launcher-grid-title>
+          <tds-header-launcher-grid>
+            <tds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <tds-icon name="star" size="32"></tds-icon>
+                ScaniaNet
+              </a>
+            </tds-header-launcher-grid-item>
+            <tds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <tds-icon name="truck" size="32"></tds-icon>
+                ScaniaRisk
+              </a>
+            </tds-header-launcher-grid-item>
+          </tds-header-launcher-grid>
+
+        </tds-header-launcher>
+
+        <tds-header-dropdown slot="end" placement="end" no-dropdown-icon class="demo-hide demo-lg-show" selected>
+          <img slot="icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
+          <tds-header-dropdown-list size="lg">
+            <tds-header-dropdown-list-user
+              header="Name Nameson"
+              subheader="Company name">
+            </tds-header-dropdown-list-user>
+            <tds-header-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </tds-header-dropdown-list-item>
+            <tds-header-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </tds-header-dropdown-list-item>
+          </tds-header-dropdown-list>
+        </tds-header-dropdown>
+
+        <tds-header-brand-symbol slot="end">
+          <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
+        </tds-header-brand-symbol>
+
+      </tds-header>
+
+
+      <tds-side-menu id="demo-side-menu" aria-label="Side menu">
+        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-overlay>
+
+        <tds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-close-button>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="info" size="24"></tds-icon>
+            About
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-item>
+          <a href="https://www.scania.com">
+            <tds-icon name="truck" size="24"></tds-icon>
+            Truck types
+          </a>
+        </tds-side-menu-item>
+
+        <tds-side-menu-dropdown>
+          <tds-icon slot="icon" name="tool" size="24"></tds-icon>
+          <span slot="label">
+            Wheel types
+          </span>
+          <tds-side-menu-dropdown-list>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Hub-centric wheel</a>
+            </tds-side-menu-dropdown-list-item>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Rim wheel</a>
+            </tds-side-menu-dropdown-list-item>
+          </tds-side-menu-dropdown-list>
+        </tds-side-menu-dropdown>
+
+        <tds-side-menu-item slot="end" onclick="alert('Calendar button clicked')">
+          <button>
+            <tds-icon name="calendar" size="24px"></tds-icon>
+            Calendar
+          </button>
+        </tds-side-menu-item>
+        
+        <tds-side-menu-dropdown slot="end" class="demo-lg-hide" selected>
+          <tds-side-menu-user 
+            slot="label" 
+            heading="Name Namesson" 
+            subheading="Company name" 
+            img-src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" 
+            img-alt="">
+          </tds-side-menu-user>
+          <tds-side-menu-dropdown-list>
+            <tds-side-menu-dropdown-list-item selected>
+              <a href="https://design.scania.com">My Instructions</a>
+            </tds-side-menu-dropdown-list-item>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Task List</a>
+            </tds-side-menu-dropdown-list-item>
+          </tds-side-menu-dropdown-list>
+        </tds-side-menu-dropdown>
+      
+
+      </tds-side-menu>
+
+      <main class="demo-main tds-u-p3" style="box-sizing: border-box;">
+        <p>If the Header contains navigational items like links or buttons, a side menu is needed for small screens.</p>
+        <br/>
+        <p><i>Tip: Resize the window to see the buttons move in to the side menu drawer.</i></p>
+        <p><i>Note: This example has an alterate launcher menu with a grid layout.</i></p>
+      </main>
+    </div>
+  `);
+export const FewNavigationItems = Template.bind({});