@scania/tegel 0.0.72 → 1.0.1

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

@@ -0,0 +1,136 @@
+import { formatHtmlPreview } from "../../utils/utils";
+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">
+   <!-- The 'referenceEl' prop can be used instead of 'selector',
+    which might be preferable in frameworks like React -->
+   <tds-tooltip
+      id="tooltip-1"
+      placement="${positionLookup[tooltipPosition]}"
+      text="${text}"
+      mouse-over-tooltip="${mouseOverTooltip}">
+      ${slot}
+    </tds-tooltip>
+
+    <!-- Demo button for presentation purposes -->
+    <tds-button size= 'sm' id="button-1" text='Hover me'></tds-button>
+   </div>
+   <script>
+   (() => {
+     const tooltip = document.getElementById('tooltip-1');
+     const button = document.getElementById('button-1');
+
+     tooltip.referenceEl = button;
+    })();
+   </script>
+  `);
+export const Default = ComponentTooltip.bind({});

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

@@ -0,0 +1,222 @@
+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 Installation = {
+  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">
+    <h2>React</h2>
+    <section>
+        <h4>Typescript</h4>
+        <ol class="tds-body-01">
+            <li>
+                <p>Run <code>npm install @scania/tegel</code></p>
+            </li>
+            <li>
+                <p>In the src folder create a file called <code>register-webcomponents.ts</code></p>
+            </li>
+            <li>
+                <p>Paste the following into that file:</p>
+                <pre>
+<code>import &#123; defineCustomElements, JSX as LocalJSX &#125; from
+    '@scania/tegel/loader';
+import &#123; DetailedHTMLProps, HTMLAttributes &#125; from 'react';
+
+type StencilProps&lt;T&gt; = &#123;
+    [P in keyof T]?:Omit&lt;T[P], 'ref'&gt; | HTMLAttributes&lt;T&gt;;&#125;;
+
+type ReactProps&lt;T&gt; = &#123;
+[P in keyof T]?: DetailedHTMLProps&lt;HTMLAttributes&lt;T[P]&gt;,
+    T[P]&gt;;&#125;;
+
+type StencilToReact&lt;T = LocalJSX.IntrinsicElements,
+    U = HTMLElementTagNameMap&gt; = StencilProps&lt;T&gt; &
+    ReactProps&lt;U&gt;;
+
+declare global &#123;
+    export namespace JSX &#123;
+        interface IntrinsicElements extends StencilToReact &#123;&#125;
+    &#125;
+&#125;
+
+defineCustomElements(window);
+</code>
+</pre>
+            </li>
+            <li>
+                <p>In your index.tsx import <code>register-webcomponents.ts</code></p>
+                <pre>
+<code>import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import './register-webcomponents';
+
+const root = ReactDOM.createRoot(document.
+    getElementById('root') as HTMLElement);
+root.render(
+&lt;React.StrictMode&gt;
+    &lt;App /&gt;
+&lt;/React.StrictMode&gt;,
+);
+
+reportWebVitals();</code>
+                </pre>
+
+            </li>
+            <li>
+                <p>In your global css file import the tegel stylesheet.</p>
+                <pre>
+            <code>@import url('@scania/tegel/dist/tegel/tegel.css');</code>
+        </pre>
+            </li>
+        </ol>
+    </section>
+    <section>
+        <h4>Javascript</h4>
+        <ol class="tds-body-01">
+            <li>
+                <p>Run <code>npm install @scania/tegel</code></p>
+            </li>
+            <li>
+                <p>In your index.jsx define the custom components:</p>
+                <pre>
+<code>import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import { defineCustomElements } from '@scania/tegel/loader';
+
+const root = ReactDOM.createRoot(document.
+    getElementById('root') as HTMLElement);
+root.render(
+&lt;React.StrictMode&gt;
+    &lt;App /&gt;
+&lt;/React.StrictMode&gt;,
+);
+
+reportWebVitals();
+defineCustomElements();</code>
+                </pre>
+
+            </li>
+            <li>
+                <p>In your global css file import the tegel stylesheet.</p>
+                <pre>
+            <code>@import url('@scania/tegel/dist/tegel/tegel.css');</code>
+        </pre>
+            </li>
+        </ol>
+    </section>
+    <h2>Angular</h2>
+    <section>
+        <ol class="tds-body-01">
+            <li>
+                <p>Run <code>npm install @scania/tegel</code></p>
+            </li>
+            <li>
+                <p>In your main.ts import and call the function <code>defineCustomElements()</code></p>
+                <pre>
+                    <code>import { platformBrowserDynamic } from
+                        '@angular/platform-browser-dynamic';
+import { defineCustomElements } from '@scania/tegel/loader';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+.bootstrapModule(AppModule)
+.catch((err) => console.error(err));
+
+defineCustomElements(window);</code>
+                </pre>
+            </li>
+            <li>
+                <p>In your app.module.ts import 'CUSTOM_ELEMENTS_SCHEMA'</p>
+                <pre>
+                    <code>import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+import { 
+    CUSTOM_ELEMENTS_SCHEMA,
+    NgModule
+    } from '@angular/core';
+
+@NgModule({
+    declarations: [AppComponent],
+    imports: [BrowserModule],
+    providers: [],
+    bootstrap: [AppComponent],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+
+export class AppModule {}</code>
+                </pre>
+            </li>
+            <li>
+                <p>In your global css file import the tegel stylesheet.</p>
+                <pre>
+                    <code>@import url('@scania/tegel/dist/tegel/tegel.css');</code>
+                </pre>
+            </li>
+        </ol>
+    </section>
+    <h2>HTML</h2>
+    <section>
+        <ol>
+            <li><p>Run <code>npm init</code> to generate a package.json</p></li>
+            <li><p>Run <code>npm install @scania/tegel</code></p></li>
+            <li><p>Import the package and stylesheet in your <code>&lt;head&gt;</code></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>
+            </li>
+            
+        </ol>
+    </section>
+    <h2>Stencil</h2>
+    <section>
+        <ol>
+            <li><p>Run <code>npm install @scania/tegel</code></p></li>
+            <li><p>Import @scania/tegel in your stencil component.</p></li>
+            <li><p>In your global css file import the tegel stylesheet.</p>
+            <pre>
+                <code>@import url('@scania/tegel/dist/tegel/tegel.css');</code>
+            </pre></li>
+            <li><p>And don't forget to set <code>'shadow: false';</code> for your component.</p></li>
+        </ol>
+    </section>
+</article>
+    `,
+};

package/dist/collection/stories/announcements/announce-tegel.stories.js

@@ -0,0 +1,262 @@
+const meta = {
+  title: 'Intro/Announcements',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: false,
+    },
+  },
+};
+export default meta;
+export const Tegel = {
+  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;
+            }
+            </style>
+
+            <article class="tds-u-p2 tds-body-01">
+            <section>
+                        <p class="tds-body-01"><strong>Published: 2022-04-25</strong></p>
+                        <h1 class="tds-headline-02">Annoucing @scania</h1>
+                        <p>
+                            <b>TLDR;</b> The new @scania/tegel package is an improvement and continuation of the previous
+                            @scania/components,
+                            @scania/theme-light, and @scania/icons packages. It simplifies the installation process and ships with types
+                            which offers type safety and improves the developer experience with intellisence and autocompletion.
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">@scania/tegel 🧱</h4>
+                        <p>
+                            The new
+                            package includes all components as web components, removes the old "native" components and makes the
+                            installation and updates easier. The current prefix for components, CSS variables, and utility classes -
+                            "sdds",
+                            will be changed. We have also created a new Storybook for @scania/tegel, which allows developers and
+                            designers
+                            to preview all variants of the components by changing the props.
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            What is @scania/tegel? 🧱
+                        </h4>
+
+
+
+
+                        <p>
+                            In short, the new @scania/tegel package is an improvement and continuation of the previous
+                            @scania/component,
+                            @scania/theme-light and @scania/icons packages. These three packages have now instead been merged into one
+                            to
+                            simplify both the installation process, but also to make it easier for us to maintain and keep improving
+                            going
+                            forward.
+                        </p>
+                        <p>
+                            The new @scania/tegel is also shipped with types. This makes integrations in other Stenciljs
+                            projects
+                            possible, but also improves the developer experience with intellisence and autocompletion, and of course
+                            type
+                            safety. In this work we have also bumped the Stenciljs version (the compiler used to build our components)
+                            to
+                            the
+                            latest major.
+                        </p>
+                        <p>
+                            And we have saved the best for last, @scania/tegel is 100% web component. Previous packages
+                            had
+                            some
+                            web components, but also "native" components, these were utility classes that could be added to a predefined
+                            HTML
+                            structure to create the look and feel of Tegel. Now we are making a big effort to provide all components as
+                            web
+                            components.
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            What improvements does @scania/tegel have? 🚀
+                        </h4>
+
+
+                        <p>
+                            So, what we are striving for in the new package is:
+
+                        <ul>
+                            <li>Easy installation and updates</li>
+                            <li>A clear and intuitive API</li>
+                            <li>Types to be included in package bundle</li>
+                            <li>All input elements to work within a form</li>
+                            <li>Only web components</li>
+                            <li>Dark mode</li>
+                            <li>Improved interactive documentation - Storybook</li>
+                        </ul>
+
+                        <p>
+                            With this new package we are creating a foundation for us to stand on going forward. We will keep improving
+                            and
+                            maintaining it after its initial release and with the changes we are introducing now we hope to be able to
+                            do
+                            this as
+                            smoothly as possible.
+                        </p>
+
+
+
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            Removing "native" components ❌
+                        </h4>
+
+
+                        <p>
+                            With this new package we are also removing our "native" components and instead introducing web component
+                            counterparts to these. This means that every component that was available as a "native" component in
+                            @scania/components will have a web component alternative in @scania/tegel. This removal will be done in our
+                            next
+                            release of @scania/tegel. This change does not change the current @scania/components package.
+
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">
+                            Prefix change 🔁
+                        </h4>
+
+
+                        <tds-link class="tds-u-mt2 tds-body-01">
+                            <a href="?path=/story/intro-announcements--prefix-change">Read more here.</a>
+                        </tds-link>
+                        <p>
+                            We are also working on a prefix change for our new package. Instead of "sdds" the components, CSS variables
+                            and
+                            utility classes will instead be prefixed with something else, for example:
+                        <ul>
+                            <li> <{prefix}-button /> </li>
+                            <li> --{prefix}-button-color </li>
+                            <li>.{prefix}-u-flex</li>
+                        </ul>
+                        <p>
+                            This is done to have a clear distinction between what was @scania/components and what is @scania/tegel. What
+                            it
+                            also
+                            does is that it enables the two solutions to be installed alongside each other. This means that your
+                            migration
+                            can
+                            be
+                            done incrementally.
+                        </p>
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb1">
+                            Migration docs 📜
+                        </h4>
+
+
+                        <p>
+                            Migrations are always hard, but during the last couple of months we have put a lot of effort into creating a
+                            "migration document", which explains and highlights all the changes in our API from version 4 of
+                            @scania/components
+                            and @scania/tegel. We hope that this will ease your migration to our new package. The migration document
+                            will
+                            continue to be updated until we release 1.0 and is available
+                            <tds-link><a
+                                    href="https://tegel-storybook.netlify.app/?path=/story/intro-migrating-from-components%C2%A0v4--page">here.</a></tds-link>
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb1">
+                            Support for @scania/components 🤳
+                        </h4>
+
+
+                        <p>
+                            We will keep supporting @scania/components for a short while going forward, however we see no major
+                            updates
+                            being
+                            done to the package. This means we will keep answering and helping with support questions and do
+                            minor
+                            releases with
+                            bugfixes, but we are not introducing any new features.
+
+                        </p>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb1">
+                            When can I try our @scania/tegel? 🧪
+                        </h4>
+
+
+                        <p>
+                            Today! Some of you have already tried this package out, and provided us with valuable feedback,
+                            thank
+                            you!
+                            But
+                            please note that this package is still in beta and breaking changes are to be expected before we
+                            release
+                            1.0. The
+                            package is available via npm and an installation guide is available <tds-link><a
+                                    href="https://www.npmjs.com/package/@scania/tegel">here.</a></tds-link>
+
+                        </p>
+                    </section>
+                    <section>
+
+                        <h4 class="tds-u-mb1">
+                            Want to get in touch? 📞
+                        </h4>
+
+
+                        <p>
+                            Awesome! We are available via teams and have two support channels. One for
+                            <tds-link>
+                                <a
+                                    href="https://teams.microsoft.com/l/channel/19%3a5e33f67fe502441f914fbcdc6e2548f5%40thread.skype/Development%2520support?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac">development</a>
+                            </tds-link>
+                            and one for
+                            <tds-link>
+                                <a
+                                    href="https://teams.microsoft.com/l/channel/19%3A8d30ded56af14672b471062ec1e66345%40thread.skype/Design%2520support?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac">design.</a>
+
+                            </tds-link>
+                            If you want to submit a bug report or feature request, please do so via our
+                            <tds-link>
+                                <a href="https://github.com/scania-digital-design-system/tegel/issues">GitHub</a>
+                            </tds-link>.
+
+                        <p>
+                            All the best,<br />
+                            The Tegel Team.
+                        </p>
+                        </p>
+                    </section>
+                </article>             
+  `,
+};