@scania/tegel 1.4.0 → 1.5.0

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

@@ -1,95 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Toggle`,
-    parameters: {
-        notes: readme,
-        layout: 'centered',
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        size: {
-            name: 'Size',
-            description: 'Sets the size of the Toggle.',
-            control: {
-                type: 'radio',
-            },
-            options: ['Large', 'Small'],
-            table: {
-                defaultValue: { summary: 'lg' },
-            },
-        },
-        headline: {
-            name: 'Headline',
-            description: 'Sets the headline, displayed above the Toggle.',
-            control: {
-                type: 'text',
-            },
-        },
-        label: {
-            name: 'Label text',
-            description: "Sets the label for the toggle's input element.",
-            control: {
-                type: 'text',
-            },
-        },
-        checked: {
-            name: 'Checked',
-            description: 'Sets the Toggle as checked.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-        disabled: {
-            name: 'Disabled',
-            description: 'Disables the Toggle.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: { summary: false },
-            },
-        },
-    },
-    args: {
-        size: 'Large',
-        headline: 'Headline',
-        label: 'Label',
-        checked: false,
-        disabled: false,
-    },
-};
-const Template = ({ size, headline, label, checked, disabled }) => formatHtmlPreview(`
-      <tds-toggle
-        ${checked ? 'checked' : ''}
-        ${disabled ? 'disabled' : ''}
-        ${headline ? `headline="${headline}"` : ''}
-        size="${size === 'Large' ? 'lg' : 'sm'}">
-        <div slot="label">${label}</div>
-    </tds-toggle>
-
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-      toggleElement = document.querySelector('tds-toggle')
-
-      toggleElement.addEventListener('tdsToggle', (event)=> {
-        console.log(event)
-      })
-    </script>
-  `);
-export const Default = Template.bind({});

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

@@ -1,126 +0,0 @@
-import formatHtmlPreview from "../../stories/formatHtmlPreview";
-import readme from "./readme.md";
-import { ComponentsFolder } from "../../utils/constants";
-export default {
-    title: `${ComponentsFolder}/Tooltip`,
-    parameters: {
-        layout: 'centered',
-        notes: readme,
-        docs: {
-            source: {
-                state: 'closed',
-            },
-        },
-        design: [
-            {
-                name: 'Figma',
-                type: 'figma',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
-            },
-            {
-                name: 'Link',
-                type: 'link',
-                url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
-            },
-        ],
-    },
-    argTypes: {
-        tooltipPosition: {
-            name: 'Tooltip position',
-            description: 'Sets the position of the Tooltip.',
-            control: {
-                type: 'select',
-            },
-            options: [
-                'Bottom-start',
-                'Bottom',
-                'Bottom-end',
-                'Top-start',
-                'Top',
-                'Top-end',
-                'Left-start',
-                'Left',
-                'Left-end',
-                'Right-start',
-                'Right',
-                'Right-end',
-            ],
-            table: {
-                defaultValue: {
-                    summary: 'bottom',
-                },
-            },
-        },
-        text: {
-            name: 'Tooltip text',
-            description: 'Sets the text that will be displayed inside Tooltip.',
-            control: {
-                type: 'text',
-            },
-        },
-        slot: {
-            name: 'Tooltip html content',
-            description: 'A slot for the Tooltip to pass in html.',
-            control: {
-                type: 'text',
-            },
-        },
-        mouseOverTooltip: {
-            name: 'Open while hovering over Tooltip',
-            description: 'Keeps the Tooltip visible as long as the mouse hovers over it.',
-            control: {
-                type: 'boolean',
-            },
-            table: {
-                defaultValue: {
-                    summary: false,
-                },
-            },
-        },
-    },
-    args: {
-        tooltipPosition: 'Bottom',
-        text: 'Text inside Tooltip',
-        slot: '<p class="tds-detail-05 tds-u-m0"> Paragraph tag inside Tooltip with <b>bold</b> and <i>italic</i> tags too. </p>',
-        mouseOverTooltip: true,
-    },
-};
-const positionLookup = {
-    'Bottom-start': 'bottom-start',
-    'Bottom': 'bottom',
-    'Bottom-end': 'bottom-end',
-    'Top-start': 'top-start',
-    'Top': 'top',
-    'Top-end': 'top-end',
-    'Left-start': 'left-start',
-    'Left': 'left',
-    'Left-end': 'left-end',
-    'Right-start': 'right-start',
-    'Right': 'right',
-    'Right-end': 'right-end',
-};
-const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) => formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-     .demo-wrapper{
-       height: 300px;
-       display: flex;
-       justify-content: center;
-       align-items: center;
-     }
-    </style>
-
-   <div class="demo-wrapper">
-   <tds-tooltip
-      placement="${positionLookup[tooltipPosition]}"
-      text="${text}"
-      selector="#my-tooltip-button"
-      mouse-over-tooltip="${mouseOverTooltip}">
-      ${slot}
-    </tds-tooltip>
-
-    <!-- Demo button for presentation purposes -->
-    <tds-button size= 'sm' id="my-tooltip-button" text='Hover me'></tds-button>
-   </div>
-  `);
-export const Default = ComponentTooltip.bind({});

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

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

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

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

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

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