@scania/tegel 0.0.9 → 0.0.11

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 istall @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>             
+  `,
+};

package/dist/collection/stories/announcements/prefix-change.stories.js

@@ -0,0 +1,93 @@
+const meta = {
+  title: 'Intro/Announcements',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: false,
+    },
+  },
+};
+export default meta;
+export const PrefixChange = {
+  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-06-05</strong></p>
+            <h1 class="tds-headline-02">Prefix change 🔁</h1>
+            <p>
+                In a previous announcement, we mentioned that @scania/tegel would undergo a prefix change. We have been diligently
+                working on this for the past few weeks, and we are pleased to inform you that it is now complete. Previously, all
+                components, utility classes, and CSS variables were prefixed with 'sdds'. However, we have decided to introduce a
+                different prefix for @scania/tegel, which will be 'tds'. As a result, all our components, utility classes, and CSS
+                variables will now be prefixed with 'tds', as shown below:
+            </p>
+            <ul class="tds-body-01">
+                <li> &lt;tds-button/&gt; </li>
+                <li>--tds-1button-color</li>
+                <li>.tds-u-flex</li>
+            </ul>
+            <p>
+                We have made this change to establish a clear distinction between @scania/components and @scania/tegel. Additionally, it
+                will facilitate a smoother transition to the new package for you, the users. You can now install @scania/tegel alongside
+                @scania/components, allowing for an incremental transition.</p>
+            </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>
+    `,
+};

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

@@ -0,0 +1,38 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+export default {
+  title: 'Foundations/Color',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+  },
+};
+const Template = () => formatHtmlPreview(`
+  <style>
+  /* Demo code for presentation purposes */
+  .demo-wrapper {
+    height: 90px;
+  }
+  .demo-wrapper span {
+    color: white;
+    background-color: black;
+    border: 1px solid white;
+    padding: 4px;
+    position: absolute;
+  }
+</style>
+
+  <div class="demo-wrapper" style="background-color: var(--tds-black)">
+    <span>--tds-black</span>
+  </div>
+  <div class="demo-wrapper" style="background-color: var(--tds-white)">
+    <span>--tds-white</span>
+  </div>
+  <div class="demo-wrapper" style="background-color: var(--tds-blue)">
+    <span>--tds-blue</span>
+  </div>
+  `);
+export const Brand = Template.bind({});

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

@@ -0,0 +1,71 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+export default {
+  title: 'Foundations/Color',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      name: 'Color',
+      description: 'Choose color scale to display',
+      control: {
+        type: 'radio',
+      },
+      options: { Grey: 'grey', Blue: 'blue', Red: 'red' },
+    },
+  },
+  args: {
+    color: 'grey',
+  },
+};
+const Template = ({ color }) => {
+  const scale = {
+    grey: [
+      '50',
+      '100',
+      '200',
+      '300',
+      '400',
+      '500',
+      '600',
+      '700',
+      '800',
+      '846',
+      '868',
+      '900',
+      '958',
+    ],
+    blue: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+    red: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+  };
+  const picked = scale[color];
+  let div = '';
+  picked.forEach((num) => {
+    div += `<div id="test" class="demo-wrapper" style="background-color: var(--tds-${color}-${num})">
+      <span>--tds-${color}-${num}</span>
+      </div>`;
+  });
+  return formatHtmlPreview(`
+  <style>
+  /* Demo code for presentation purposes */
+  .demo-wrapper {
+    height: 90px;
+  }
+  .demo-wrapper span {
+    color: white;
+    background-color: black;
+    border: 1px solid white;
+    padding: 4px;
+    position: absolute;
+  }
+  </style>
+
+    ${div}
+    `);
+};
+export const Scales = Template.bind({});