@scania/tegel 1.4.0 → 1.5.0

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

@@ -1,262 +0,0 @@
-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 CSS class 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 CSS 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 CSS class components ❌
-                        </h4>
-
-
-                        <p>
-                            With this new package we are also removing our CSS components and instead introducing web component
-                            counterparts to these. This means that every component that was available as a CSS 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

@@ -1,93 +0,0 @@
-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/formatHtmlPreview.js

@@ -1,10 +0,0 @@
-import prettier from "prettier/standalone";
-import parserBabel from "prettier/parser-babel";
-import parserHtml from "prettier/parser-html";
-const prettierOptions = {
-    bracketSameLine: false,
-    htmlWhitespaceSensitivity: 'ignore',
-    printWidth: 100,
-};
-const formatHtmlPreview = (htmlStr) => prettier.format(htmlStr, Object.assign({ parser: 'html', plugins: [parserBabel, parserHtml] }, prettierOptions));
-export default formatHtmlPreview;

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

@@ -1,38 +0,0 @@
-import formatHtmlPreview from "../../formatHtmlPreview";
-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

@@ -1,71 +0,0 @@
-import formatHtmlPreview from "../../formatHtmlPreview";
-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({});

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

@@ -1,40 +0,0 @@
-import formatHtmlPreview from "../../formatHtmlPreview";
-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-positive)">
-    <span>--tds-positive</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--tds-warning)">
-    <span>--tds-warning</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--tds-negative)">
-    <span>--tds-negative</span>
-  </div>
-  <div class="demo-wrapper" style="background-color: var(--tds-information)">
-    <span>--tds-information</span>
-  </div>`);
-export const Semantic = Template.bind({});