@scania/tegel 1.0.0 → 1.0.3

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 import readme from "./readme.md";
 export default {
   title: 'Patterns/Navigation',
@@ -41,207 +41,207 @@ export default {
     dummyHtml: `<br /><p style="color:#f3f3f3">"I have seen the will of the deceased wife," said he. "To determine its exact meaning I have been obliged to work out the present prices of the investments with which it is concerned. The total income, which at the time of the wife's death was little short of 1100 pounds, is now, through the fall in agricultural prices, not more than 750 pounds. Each daughter can claim an income of 250 pounds, in case of marriage. It is evident, therefore, that if both girls had married, this beauty would have had a mere pittance, while even one of them would cripple him to a very serious extent. My morning's work has not been wasted, since it has proved that he has the very strongest motives for standing in the way of anything of the sort. And now, Watson, this is too serious for dawdling, especially as the old man is aware that we are interesting ourselves in his affairs; so if you are ready, we shall call a cab and drive to Waterloo. I should be very much obliged if you would slip your revolver into your pocket. An Eley's No. 2 is an excellent argument with gentlemen who can twist steel pokers into knots. That and a tooth-brush are, I think, all that we need."</p><p style="color:#f3f3f3">At Waterloo we were fortunate in catching a train for Leatherhead, where we hired a trap at the station inn and drove for four or five miles through the lovely Surrey lanes. It was a perfect day, with a bright sun and a few fleecy clouds in the heavens. The trees and wayside hedges were just throwing out their first green shoots, and the air was full of the pleasant smell of the moist earth. To me at least there was a strange contrast between the sweet promise of the spring and this sinister quest upon which we were engaged. My companion sat in the front of the trap, his arms folded, his hat pulled down over his eyes, and his chin sunk upon his breast, buried in the deepest thought. Suddenly, however, he started, tapped me on the shoulder, and pointed over the meadows.</p><p style="color:#f3f3f3">"Look there!" said he.</p><p style="color:#f3f3f3">A heavily timbered park stretched up in a gentle slope, thickening into a grove at the highest point. From amid the branches there jutted out the grey gables and high roof-tree of a very old mansion.</p><p style="color:#f3f3f3">"Stoke Moran?" said he.</p><p style="color:#f3f3f3">"Yes, sir, that be the house of Dr. Grimesby Roylott," remarked the driver.</p><p style="color:#f3f3f3">"There is some building going on there," said Holmes; "that is where we are going."</p><p style="color:#f3f3f3">"There's the village," said the driver, pointing to a cluster of roofs some distance to the left; "but if you want to get to the house, you'll find it shorter to get over this stile, and so by the foot-path over the fields. There it is, where the lady is walking."</p><p style="color:#f3f3f3">"And the lady, I fancy, is Miss Stoner," observed Holmes, shading his eyes. "Yes, I think we had better do as you suggest."</p><p style="color:#f3f3f3">We got off, paid our fare, and the trap rattled back on its way to Leatherhead.</p><p style="color:#f3f3f3">"I thought it as well," said Holmes as we climbed the stile, "that this fellow should think we had come here as architects, or on some definite business. It may stop his gossip. Good-afternoon, Miss Stoner. You see that we have been as good as our word."</p><p style="color:#f3f3f3">Our client of the morning had hurried forward to meet us with a face which spoke her joy. "I have been waiting so eagerly for you," she cried, shaking hands with us warmly. "All has turned out splendidly. Dr. Roylott has gone to town, and it is unlikely that he will be back before evening."</p><p style="color:#f3f3f3">"We have had the pleasure of making the doctor's acquaintance," said Holmes, and in a few words he sketched out what had occurred. Miss Stoner turned white to the lips as she listened.</p><p style="color:#f3f3f3">"I have seen the will of the deceased wife," said he. "To determine its exact meaning I have been obliged to work out the present prices of the investments with which it is concerned. The total income, which at the time of the wife's death was little short of 1100 pounds, is now, through the fall in agricultural prices, not more than 750 pounds. Each daughter can claim an income of 250 pounds, in case of marriage. It is evident, therefore, that if both girls had married, this beauty would have had a mere pittance, while even one of them would cripple him to a very serious extent. My morning's work has not been wasted, since it has proved that he has the very strongest motives for standing in the way of anything of the sort. And now, Watson, this is too serious for dawdling, especially as the old man is aware that we are interesting ourselves in his affairs; so if you are ready, we shall call a cab and drive to Waterloo. I should be very much obliged if you would slip your revolver into your pocket. An Eley's No. 2 is an excellent argument with gentlemen who can twist steel pokers into knots. That and a tooth-brush are, I think, all that we need."</p><p style="color:#f3f3f3">At Waterloo we were fortunate in catching a train for Leatherhead, where we hired a trap at the station inn and drove for four or five miles through the lovely Surrey lanes. It was a perfect day, with a bright sun and a few fleecy clouds in the heavens. The trees and wayside hedges were just throwing out their first green shoots, and the air was full of the pleasant smell of the moist earth. To me at least there was a strange contrast between the sweet promise of the spring and this sinister quest upon which we were engaged. My companion sat in the front of the trap, his arms folded, his hat pulled down over his eyes, and his chin sunk upon his breast, buried in the deepest thought. Suddenly, however, he started, tapped me on the shoulder, and pointed over the meadows.</p><p style="color:#f3f3f3">"Look there!" said he.</p><p style="color:#f3f3f3">A heavily timbered park stretched up in a gentle slope, thickening into a grove at the highest point. From amid the branches there jutted out the grey gables and high roof-tree of a very old mansion.</p><p style="color:#f3f3f3">"Stoke Moran?" said he.</p><p style="color:#f3f3f3">"Yes, sir, that be the house of Dr. Grimesby Roylott," remarked the driver.</p><p style="color:#f3f3f3">"There is some building going on there," said Holmes; "that is where we are going."</p><p style="color:#f3f3f3">"There's the village," said the driver, pointing to a cluster of roofs some distance to the left; "but if you want to get to the house, you'll find it shorter to get over this stile, and so by the foot-path over the fields. There it is, where the lady is walking."</p><p style="color:#f3f3f3">"And the lady, I fancy, is Miss Stoner," observed Holmes, shading his eyes. "Yes, I think we had better do as you suggest."</p><p style="color:#f3f3f3">We got off, paid our fare, and the trap rattled back on its way to Leatherhead.</p><p style="color:#f3f3f3">"I thought it as well," said Holmes as we climbed the stile, "that this fellow should think we had come here as architects, or on some definite business. It may stop his gossip. Good-afternoon, Miss Stoner. You see that we have been as good as our word."</p><p style="color:#f3f3f3">Our client of the morning had hurried forward to meet us with a face which spoke her joy. "I have been waiting so eagerly for you," she cried, shaking hands with us warmly. "All has turned out splendidly. Dr. Roylott has gone to town, and it is unlikely that he will be back before evening."</p><p style="color:#f3f3f3">"We have had the pleasure of making the doctor's acquaintance," said Holmes, and in a few words he sketched out what had occurred. Miss Stoner turned white to the lips as she listened.</p>`,
   },
 };
-const Template = ({ dummyHtml }) => 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>
-      :root {
-        --app-bar-height: 64px;
-      }
-      /* 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-header {
-        position: sticky;
-        top: 0;
-      }
-      .demo-wrap-side-menu-and-main {
-        display: flex;
-        flex-grow: 1;
-      }
-
-      /* The lg breakpoint is used here to match the breakpoint used in the Header & sidemenu. */
-      @media (min-width: 992px) {
-        #demo-side-menu {
-          /* We suggest you attach the persistent side menu to your layout like this: */
-          height: calc(100vh - var(--app-bar-height));
-          position: sticky;
-          top: var(--app-bar-height);
-          left: 0;
-        }
-      }
-
-      /* 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: 992px) {
-        .demo-xs-hide {
-          display: none;
-        }
-        .demo-xs-show {
-          display: block;
-        }
-      }
-    </style>
-
-  <div class="demo-layout">
-    <tds-header class="demo-header">
-      <tds-header-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: Many items
-      </tds-header-title>
-
-      <tds-header-item slot="end">
-        <button onclick="alert('clicked')">
-          <tds-icon name="calendar" size="20px"></tds-icon>
-        </button>
-      </tds-header-item>
-
-      <tds-header-launcher slot="end">
-        <tds-header-launcher-list-title>Good</tds-header-launcher-list-title>
-        <tds-header-launcher-list>
-          <tds-header-launcher-list-item>
-            <a href="https://tegel.scania.com">Spider-Man</a>
-          </tds-header-launcher-list-item>
-          <tds-header-launcher-list-item>
-            <a href="https://tegel.scania.com">Groot</a>
-          </tds-header-launcher-list-item>
-        </tds-header-launcher-list>
-        <tds-header-launcher-list-title>Evil</tds-header-launcher-list-title>
-        <tds-header-launcher-list>
-          <tds-header-launcher-list-item>
-            <a href="https://tegel.scania.com">Dr Octopus</a>
-          </tds-header-launcher-list-item>
-          <tds-header-launcher-list-item>
-            <a href="https://tegel.scania.com">Apocalypse</a>
-          </tds-header-launcher-list-item>
-          <tds-header-launcher-list-item>
-            <a href="https://tegel.scania.com">Scarlet Witch</a>
-          </tds-header-launcher-list-item>
-        </tds-header-launcher-list>
-      </tds-header-launcher>
-      
-      <tds-header-dropdown slot="end" placement="end" no-dropdown-icon class="demo-hide demo-xs-show">
-        <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>
-            <a href="https://www.scania.com">Link here</a>
-          </tds-header-dropdown-list-item>
-          <tds-header-dropdown-list-item>
-            <a href="https://www.scania.com">Link there</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>
-
-    <div class="demo-wrap-side-menu-and-main">
-      <!-- Note: the "persistent" property keeps the menu open on desktop -->
-      <tds-side-menu id="demo-side-menu" aria-label="Side menu" persistent>
-        <tds-side-menu-overlay slot="overlay"></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="timer" size="24"></tds-icon>
-            About us
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-item>
-          <a href="https://www.scania.com">
-            <tds-icon name="truck" size="24"></tds-icon>
-            Trucks
-          </a>
-        </tds-side-menu-item>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="wifi" size="24"></tds-icon>
-            Our services
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-dropdown default-open selected>
-          <tds-icon slot="icon" name="profile" size="24"></tds-icon>
-          <span slot="label">
-            Wheel types
-          </span>
-          <tds-side-menu-dropdown-list>
-            <tds-side-menu-dropdown-list-item>
-              <a href="https://www.scania.com">Hub-centric wheel</a>
-            </tds-side-menu-dropdown-list-item>
-            <tds-side-menu-dropdown-list-item selected>
-              <a href="https://www.scania.com">Rim wheel</a>
-            </tds-side-menu-dropdown-list-item>
-          </tds-side-menu-dropdown-list>
-        </tds-side-menu-dropdown>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="star" size="24"></tds-icon>
-            Values
-          </button>
-        </tds-side-menu-item>
-
-
-        <tds-side-menu-item slot="end">
-          <button>
-            <tds-icon name="calendar" size="24"></tds-icon>
-            My Calendar
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-item slot="end" class="demo-xs-hide">
-          <button>
-            <tds-side-menu-user heading="Name Namesson" subheading="Company name">
-              <img
-                slot="image"
-                src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg"
-                alt="User menu."
-              />
-            </tds-side-menu-user>
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-collapse-button slot="sticky-end"></tds-side-menu-collapse-button>
-
-      </tds-side-menu>
-
-      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
-      <button class='tds-u-absolute tds-u-right0' onclick='console.log("Button clicked")'>Test button</button>
-        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
-        <br/>In that case they should be placed in a persistent side menu — which is always visible on large screens.</p>
-
-        <p><i>Note: The side menu is sticky, and should not scroll with the main content of the page.</i></p>
-
-        <p><i>Note: The collapse button is optional.</i></p>
-
-        ${dummyHtml}
-      </main>
-    </div>
-  </div>
+const Template = ({ dummyHtml }) => 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>
+      :root {
+        --app-bar-height: 64px;
+      }
+      /* 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-header {
+        position: sticky;
+        top: 0;
+      }
+      .demo-wrap-side-menu-and-main {
+        display: flex;
+        flex-grow: 1;
+      }
+
+      /* The lg breakpoint is used here to match the breakpoint used in the Header & sidemenu. */
+      @media (min-width: 992px) {
+        #demo-side-menu {
+          /* We suggest you attach the persistent side menu to your layout like this: */
+          height: calc(100vh - var(--app-bar-height));
+          position: sticky;
+          top: var(--app-bar-height);
+          left: 0;
+        }
+      }
+
+      /* 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: 992px) {
+        .demo-xs-hide {
+          display: none;
+        }
+        .demo-xs-show {
+          display: block;
+        }
+      }
+    </style>
+
+  <div class="demo-layout">
+    <tds-header class="demo-header">
+      <tds-header-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: Many items
+      </tds-header-title>
+
+      <tds-header-item slot="end">
+        <button onclick="alert('clicked')">
+          <tds-icon name="calendar" size="20px"></tds-icon>
+        </button>
+      </tds-header-item>
+
+      <tds-header-launcher slot="end">
+        <tds-header-launcher-list-title>Good</tds-header-launcher-list-title>
+        <tds-header-launcher-list>
+          <tds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Spider-Man</a>
+          </tds-header-launcher-list-item>
+          <tds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Groot</a>
+          </tds-header-launcher-list-item>
+        </tds-header-launcher-list>
+        <tds-header-launcher-list-title>Evil</tds-header-launcher-list-title>
+        <tds-header-launcher-list>
+          <tds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Dr Octopus</a>
+          </tds-header-launcher-list-item>
+          <tds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Apocalypse</a>
+          </tds-header-launcher-list-item>
+          <tds-header-launcher-list-item>
+            <a href="https://tegel.scania.com">Scarlet Witch</a>
+          </tds-header-launcher-list-item>
+        </tds-header-launcher-list>
+      </tds-header-launcher>
+      
+      <tds-header-dropdown slot="end" placement="end" no-dropdown-icon class="demo-hide demo-xs-show">
+        <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>
+            <a href="https://www.scania.com">Link here</a>
+          </tds-header-dropdown-list-item>
+          <tds-header-dropdown-list-item>
+            <a href="https://www.scania.com">Link there</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>
+
+    <div class="demo-wrap-side-menu-and-main">
+      <!-- Note: the "persistent" property keeps the menu open on desktop -->
+      <tds-side-menu id="demo-side-menu" aria-label="Side menu" persistent>
+        <tds-side-menu-overlay slot="overlay"></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="timer" size="24"></tds-icon>
+            About us
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-item>
+          <a href="https://www.scania.com">
+            <tds-icon name="truck" size="24"></tds-icon>
+            Trucks
+          </a>
+        </tds-side-menu-item>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="wifi" size="24"></tds-icon>
+            Our services
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-dropdown default-open selected>
+          <tds-icon slot="icon" name="profile" size="24"></tds-icon>
+          <span slot="label">
+            Wheel types
+          </span>
+          <tds-side-menu-dropdown-list>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">Hub-centric wheel</a>
+            </tds-side-menu-dropdown-list-item>
+            <tds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com">Rim wheel</a>
+            </tds-side-menu-dropdown-list-item>
+          </tds-side-menu-dropdown-list>
+        </tds-side-menu-dropdown>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="star" size="24"></tds-icon>
+            Values
+          </button>
+        </tds-side-menu-item>
+
+
+        <tds-side-menu-item slot="end">
+          <button>
+            <tds-icon name="calendar" size="24"></tds-icon>
+            My Calendar
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-item slot="end" class="demo-xs-hide">
+          <button>
+            <tds-side-menu-user heading="Name Namesson" subheading="Company name">
+              <img
+                slot="image"
+                src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg"
+                alt="User menu."
+              />
+            </tds-side-menu-user>
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-collapse-button slot="sticky-end"></tds-side-menu-collapse-button>
+
+      </tds-side-menu>
+
+      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
+      <button class='tds-u-absolute tds-u-right0' onclick='console.log("Button clicked")'>Test button</button>
+        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
+        <br/>In that case they should be placed in a persistent side menu — which is always visible on large screens.</p>
+
+        <p><i>Note: The side menu is sticky, and should not scroll with the main content of the page.</i></p>
+
+        <p><i>Note: The collapse button is optional.</i></p>
+
+        ${dummyHtml}
+      </main>
+    </div>
+  </div>
   `);
 export const ManyNavigationItems = Template.bind({});

package/dist/collection/stories/patterns/navigation/navigation-user-menu.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 import readme from "./readme.md";
 export default {
   title: 'Patterns/Navigation',
@@ -38,103 +38,103 @@ export default {
     siteName: 'Application',
   },
 };
-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>
-      /* 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: 992px) {
-        .demo-xs-hide {
-          display: none;
-        }
-        .demo-xs-show {
-          display: block;
-        }
-      }
-    </style>
-
-
-    <div class="demo-layout">
-      <tds-header>
-        <tds-header-hamburger class="demo-xs-hide" 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: User menu
-        </tds-header-title>
-
-        <tds-header-launcher slot="end">
-          <tds-header-launcher-list-title>Sustainable tools</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>
-        </tds-header-launcher>
-        
-        <tds-header-dropdown slot="end" class="demo-hide demo-xs-show" no-dropdown-icon 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-dropdown slot="end" class="demo-xs-hide" selected default-open>
-          <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 type="lg">
-            <tds-side-menu-dropdown-list-item selected>
-              <a href="https://www.scania.com">My Instructions</a>
-            </tds-side-menu-dropdown-list-item>
-            <tds-side-menu-dropdown-list-item>
-              <a href="https://www.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 you display a user menu, a side menu is needed to show it on extra small screens.</p>
-        <br/>
-        <p><i>Tip: Resize the window to see the user menu move in to a side menu drawer.</i></p>
-      </main>
-    </div>
+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>
+      /* 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: 992px) {
+        .demo-xs-hide {
+          display: none;
+        }
+        .demo-xs-show {
+          display: block;
+        }
+      }
+    </style>
+
+
+    <div class="demo-layout">
+      <tds-header>
+        <tds-header-hamburger class="demo-xs-hide" 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: User menu
+        </tds-header-title>
+
+        <tds-header-launcher slot="end">
+          <tds-header-launcher-list-title>Sustainable tools</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>
+        </tds-header-launcher>
+        
+        <tds-header-dropdown slot="end" class="demo-hide demo-xs-show" no-dropdown-icon 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-dropdown slot="end" class="demo-xs-hide" selected default-open>
+          <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 type="lg">
+            <tds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </tds-side-menu-dropdown-list-item>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://www.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 you display a user menu, a side menu is needed to show it on extra small screens.</p>
+        <br/>
+        <p><i>Tip: Resize the window to see the user menu move in to a side menu drawer.</i></p>
+      </main>
+    </div>
   `);
 export const UserMenu = Template.bind({});