@scania/tegel 0.0.7 → 0.0.8

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

@@ -1,94 +0,0 @@
-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(--sdds-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>.sdds-spacing-layout-8</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-8); height: var(--sdds-spacing-layout-8)"></span></td>
-    </tr>
-    <tr>
-      <td>16px</td>
-      <td><code>$spacing-layout-16</code></td>
-      <td><code>.sdds-spacing-layout-16</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-16); height: var(--sdds-spacing-layout-16);"></span></td>
-    </tr>
-    <tr>
-      <td>24px</td>
-      <td><code>$spacing-layout-24</code></td>
-      <td><code>.sdds-spacing-layout-24</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-24); height: var(--sdds-spacing-layout-24);"></span></td>
-    </tr>
-    <tr>
-      <td>32px</td>
-      <td><code>$spacing-layout-32</code></td>
-      <td><code>.sdds-spacing-layout-32</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-32); height: var(--sdds-spacing-layout-32);"></span></td>
-    </tr>
-    <tr>
-      <td>48px</td>
-      <td><code>$spacing-layout-48</code></td>
-      <td><code>.sdds-spacing-layout-48</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-48); height: var(--sdds-spacing-layout-48);"></span></td>
-    </tr>
-    <tr>
-      <td>64px</td>
-      <td><code>$spacing-layout-64</code></td>
-      <td><code>.sdds-spacing-layout-64</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-64); height: var(--sdds-spacing-layout-64);"></span></td>
-    </tr>
-    <tr>
-      <td>72px</td>
-      <td><code>$spacing-layout-72</code></td>
-      <td><code>.sdds-spacing-layout-72</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-72); height: var(--sdds-spacing-layout-72);"></span></td>
-    </tr>
-    <tr>
-      <td>96px</td>
-      <td><code>$spacing-layout-96</code></td>
-      <td><code>.sdds-spacing-layout-96</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-96); height: var(--sdds-spacing-layout-96);"></span></td>
-    </tr>
-    <tr>
-      <td>128px</td>
-      <td><code>$spacing-layout-128</code></td>
-      <td><code>.sdds-spacing-layout-128</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-128); height: var(--sdds-spacing-layout-128);"></span></td>
-    </tr>
-    <tr>
-      <td>160px</td>
-      <td><code>$spacing-layout-160</code></td>
-      <td><code>.sdds-spacing-layout-160</code></td>
-      <td><span class="demo-wrapper" style="width: var(--sdds-spacing-layout-160); height: var(--sdds-spacing-layout-160);"></span></td>
-    </tr>
-  </table>
-  `);
-export const SpacingLayout = Template.bind({});
-SpacingLayout.args = {};

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

@@ -1,16 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <p class='sdds-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='sdds-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/foundations-stories/typography/typography-detail.stories.js

@@ -1,17 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-  <p class='sdds-detail-01'>This text style is used in components, such as the cookie component.</p>
-  <p class='sdds-detail-02'>This text style is used in components, such as data tables and buttons.</p>
-  <p class='sdds-detail-03'>This text style is used for longer detailed text exceeding 3 lines within Functional applications.</p>
-  <p class='sdds-detail-04'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
-  <p class='sdds-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='sdds-detail-06'>THIS TEXT STYLE IS USED FOR LABELS AND POTENTIALLY COMPONENTS.</p>
-  <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({});

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

@@ -1,39 +0,0 @@
-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="sdds-${type === 'expressive' ? `${type}-` : ''}headline-01">Headline</h1>
-        <h2 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-02">Headline</h2>
-        <h3 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-03">A headline for page layouts</h3>
-        <h4 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-04">A headline for page layouts</h4>
-        <h5 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-05">A sub headline, which is most commonly paired with body-01</h5>
-        <h6 class="sdds-${type === 'expressive' ? `${type}-` : ''}headline-06">A sub headline, which is most commonly paired with body-02</h6>
-        <h7 class="sdds-${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/foundations-stories/typography/typography-paragraph.stories.js

@@ -1,12 +0,0 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Foundations/Typography',
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-const Template = () => formatHtmlPreview(`
-        <p class='sdds-paragraph-01'>Our large paragraph, which should be used for introduction texts on page layouts.</p>
-        <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({});

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

@@ -1,84 +0,0 @@
-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

@@ -1,253 +0,0 @@
-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({});