@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/components/toggle/sdds-toggle.stories.js

@@ -38,7 +38,7 @@ export default {
       },
     },
     label: {
-      name: 'Label',
+      name: 'Label text',
       description: 'Sets the label for the toggles input element.',
       control: {
         type: 'text',
@@ -92,4 +92,3 @@ const Template = ({ size, headline, label, checked, disabled }) => formatHtmlPre
     </script>
   `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-toggle.stories.js.map

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

@@ -33,7 +33,7 @@ export default {
       },
     },
     label: {
-      name: 'Label',
+      name: 'Label text',
       description: 'Sets the label for the toggles input element.',
       control: {
         type: 'text',
@@ -75,4 +75,3 @@ const Template = ({ size, headline, label, checked, disabled }) => {
   `);
 };
 export const Native = Template.bind({});
-//# sourceMappingURL=toggle.stories.js.map

package/dist/collection/components/tooltip/tooltip.js

@@ -227,4 +227,3 @@ export class Tooltip {
     };
   }
 }
-//# sourceMappingURL=tooltip.js.map

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

@@ -125,4 +125,3 @@ const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) =>
    </div>
   `);
 export const WebComponent = ComponentTooltip.bind({});
-//# sourceMappingURL=tooltip.stories.js.map

package/dist/collection/components/utility/colour/background-color.stories.js

@@ -94,4 +94,3 @@ backgroundColor.args = {
   redScale: '500',
   greyScale: '958',
 };
-//# sourceMappingURL=background-color.stories.js.map

package/dist/collection/components/utility/colour/text-color.stories.js

@@ -92,4 +92,3 @@ textColor.args = {
   redScale: '500',
   greyScale: '958',
 };
-//# sourceMappingURL=text-color.stories.js.map

package/dist/collection/foundations-stories/colour/colour-brand.stories.js

@@ -36,4 +36,3 @@ const Template = () => formatHtmlPreview(`
   </div>
   `);
 export const Brand = Template.bind({});
-//# sourceMappingURL=colour-brand.stories.js.map

package/dist/collection/foundations-stories/colour/colour-scales.stories.js

@@ -69,4 +69,3 @@ Scales.argTypes = {
 Scales.args = {
   colour: 'grey',
 };
-//# sourceMappingURL=colour-scales.stories.js.map

package/dist/collection/foundations-stories/colour/colour-semantic.stories.js

@@ -38,4 +38,3 @@ const Template = () => formatHtmlPreview(`
     <span>--sdds-information</span>
   </div>`);
 export const Sematic = Template.bind({});
-//# sourceMappingURL=colour-semantic.stories.js.map

package/dist/collection/foundations-stories/grid/grid.stories.js

@@ -384,4 +384,3 @@ const GridHideShow = ({ fluidContainer }) => formatHtmlPreview(`
   </div>
   `);
 export const ShowHide = GridHideShow.bind({});
-//# sourceMappingURL=grid.stories.js.map

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

@@ -98,4 +98,3 @@ const Template = () => formatHtmlPreview(`
   `);
 export const SpacingElement = Template.bind({});
 SpacingElement.args = {};
-//# sourceMappingURL=spacing-element.stories.js.map

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

@@ -92,4 +92,3 @@ const Template = () => formatHtmlPreview(`
   `);
 export const SpacingLayout = Template.bind({});
 SpacingLayout.args = {};
-//# sourceMappingURL=spacing-layout.stories.js.map

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

@@ -14,4 +14,3 @@ const Template = () => formatHtmlPreview(`
   </p>
   `);
 export const Body = Template.bind({});
-//# sourceMappingURL=typography-body.stories.js.map

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

@@ -15,4 +15,3 @@ const Template = () => formatHtmlPreview(`
   <p class='sdds-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({});
-//# sourceMappingURL=typography-detail.stories.js.map

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

@@ -37,4 +37,3 @@ export const Headlines = Template.bind({});
 Headlines.args = {
   type: 'functional',
 };
-//# sourceMappingURL=typography-headline.stories.js.map

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

@@ -10,4 +10,3 @@ const Template = () => formatHtmlPreview(`
         <p class='sdds-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({});
-//# sourceMappingURL=typography-paragraph.stories.js.map

package/dist/collection/index.js

@@ -1,2 +1 @@
 export * from './components';
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,84 @@
+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(`
+  <sdds-header>
+    <sdds-header-title>
+      Example: default
+    </sdds-header-title>
+    <sdds-header-launcher slot="end" aria-label="Application launcher">
+      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+      <sdds-header-launcher-list-title>Lame apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Button</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+    </sdds-header-launcher>
+  
+    <sdds-header-brand-symbol slot="end" link-href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
+    </sdds-header-brand-symbol>
+
+  </sdds-header>
+  
+  <main class="sdds-u-w-100 sdds-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/patterns-stories/navigation/navigation-fewitems.stories.js

@@ -0,0 +1,253 @@
+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;
+        }
+      }
+    </style>
+
+
+    <div class="demo-layout">
+      <sdds-header>
+        <!-- TODO setting aria-expanded="true" on the hamburger button does not work, as it is not
+          copied to the button element -->
+        <sdds-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"></sdds-header-hamburger>
+
+        <sdds-header-title>
+          Example: Few items
+        </sdds-header-title>
+
+        <sdds-header-item>
+          <button onclick="alert('About us clicked');">
+            About us
+          </button>
+        </sdds-header-item>
+
+        <sdds-header-item>
+          <a href="https://www.google.se">
+            Truck types
+          </a>
+        </sdds-header-item>
+
+        <sdds-header-dropdown>
+          <span slot="button-label">Wheel types</span>
+          <sdds-header-dropdown-list>
+            <sdds-header-dropdown-list-item>
+              <a href="https://tegel.scania.com">Hub-centric wheel</a>
+            </sdds-header-dropdown-list-item>
+            <sdds-header-dropdown-list-item>
+              <a href="https://tegel.scania.com">Rim wheel</a>
+            </sdds-header-dropdown-list-item>
+          </sdds-header-dropdown-list>
+        </sdds-header-dropdown>
+
+        <sdds-header-item slot="end">
+          <button onclick="alert('Calendar button clicked')">
+            <sdds-icon name="calendar" size="20px"></sdds-icon>
+          </button>
+        </sdds-header-item>
+
+        <sdds-header-launcher slot="end" aria-label="Application launcher">
+          <sdds-header-launcher-grid-title>Operations and Logistics</sdds-header-launcher-grid-title>
+          <sdds-header-launcher-grid>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="star" size="32"></sdds-icon>
+                ScaniaCare
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="truck" size="32"></sdds-icon>
+                ScaniaInsight
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="fuel_gauge" size="32"></sdds-icon>
+                ScaniaConnect
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="star" size="32"></sdds-icon>
+                ScaniaPlan
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="truck" size="32"></sdds-icon>
+                ScaniaTrack
+              </a>
+            </sdds-header-launcher-grid-item>
+          </sdds-header-launcher-grid>
+          <sdds-header-launcher-grid-title>Customer Service</sdds-header-launcher-grid-title>
+          <sdds-header-launcher-grid>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="star" size="32"></sdds-icon>
+                ScaniaNet
+              </a>
+            </sdds-header-launcher-grid-item>
+            <sdds-header-launcher-grid-item>
+              <a href="https://tegel.scania.com">
+                <sdds-icon name="truck" size="32"></sdds-icon>
+                ScaniaRisk
+              </a>
+            </sdds-header-launcher-grid-item>
+          </sdds-header-launcher-grid>
+
+        </sdds-header-launcher>
+
+        <sdds-header-dropdown slot="end" placement="end" no-dropdown-icon class="demo-hide demo-xs-show" selected>
+          <img slot="button-icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
+          <sdds-header-dropdown-list type="lg">
+            <sdds-header-dropdown-list-user
+              heading="Name Nameson"
+              subheading="Company name">
+            </sdds-header-dropdown-list-user>
+            <sdds-header-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </sdds-header-dropdown-list-item>
+            <sdds-header-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </sdds-header-dropdown-list-item>
+          </sdds-header-dropdown-list>
+        </sdds-header-dropdown>
+
+        <sdds-header-brand-symbol slot="end" href="https://design.scania.com" aria-label="Scania - red gryphon on blue shield">
+        </sdds-header-brand-symbol>
+
+      </sdds-header>
+
+
+      <sdds-side-menu id="demo-side-menu" aria-label="Side menu">
+        <sdds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-overlay>
+
+        <sdds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></sdds-side-menu-close-button>
+
+        <sdds-side-menu-item>
+          <button>
+            <sdds-icon name="info" size="24"></sdds-icon>
+            About
+          </button>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-item>
+          <a href="https://www.scania.com">
+            <sdds-icon name="truck" size="24"></sdds-icon>
+            Truck types
+          </a>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-dropdown>
+          <sdds-icon slot="button-icon" name="tool" size="24"></sdds-icon>
+          <span slot="button-label">
+            Wheel types
+          </span>
+          <sdds-side-menu-dropdown-list>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Hub-centric wheel</a>
+            </sdds-side-menu-dropdown-list-item>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Rim wheel</a>
+            </sdds-side-menu-dropdown-list-item>
+          </sdds-side-menu-dropdown-list>
+        </sdds-side-menu-dropdown>
+
+        <sdds-side-menu-item slot="end" onclick="alert('Calendar button clicked')">
+          <button>
+            <sdds-icon name="calendar" size="24px"></sdds-icon>
+            Calendar
+          </button>
+        </sdds-side-menu-item>
+        
+        <sdds-side-menu-dropdown slot="end" class="demo-xs-hide" selected>
+          <sdds-side-menu-user 
+            slot="button-label" 
+            heading="Name Namesson" 
+            subheading="Company name" 
+            img-src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" 
+            img-alt="">
+          </sdds-side-menu-user>
+          <sdds-side-menu-dropdown-list>
+            <sdds-side-menu-dropdown-list-item selected>
+              <a href="https://design.scania.com">My Instructions</a>
+            </sdds-side-menu-dropdown-list-item>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://design.scania.com">Task List</a>
+            </sdds-side-menu-dropdown-list-item>
+          </sdds-side-menu-dropdown-list>
+        </sdds-side-menu-dropdown>
+      
+
+      </sdds-side-menu>
+
+      <main class="demo-main sdds-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({});