@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/stories/patterns/navigation/navigation-user-menu.stories.js

@@ -0,0 +1,140 @@
+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: {
+    siteName: {
+      name: 'Site name',
+      description: 'Set a custom title for the Header.',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    siteName: 'Application',
+  },
+};
+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>
+      /* 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: 992px) {
+        .demo-xs-hide {
+          display: none;
+        }
+        .demo-xs-show {
+          display: block;
+        }
+      }
+    </style>
+
+
+    <div class="demo-layout">
+      <tds-header>
+        <tds-header-hamburger class="demo-xs-hide" onclick="demoSideMenu.open = true;demoHamburger.setAttribute('aria-expanded', true);" aria-label="Open application drawer" aria-haspopup="true" aria-expanded="false"></tds-header-hamburger>
+
+        <tds-header-title>
+          Example: User menu
+        </tds-header-title>
+
+        <tds-header-launcher slot="end">
+          <tds-header-launcher-list-title>Sustainable tools</tds-header-launcher-list-title>
+          <tds-header-launcher-list>
+            <tds-header-launcher-list-item>
+              <a href="https://tegel.scania.com">Button</a>
+            </tds-header-launcher-list-item>
+            <tds-header-launcher-list-item>
+              <a href="https://tegel.scania.com">Button</a>
+            </tds-header-launcher-list-item>
+          </tds-header-launcher-list>
+        </tds-header-launcher>
+        
+        <tds-header-dropdown slot="end" class="demo-hide demo-xs-show" no-dropdown-icon selected>
+          <img slot="icon" src="https://www.svgrepo.com/show/384676/account-avatar-profile-user-6.svg" alt="User menu."/>
+          <tds-header-dropdown-list type="lg">
+            <tds-header-dropdown-list-user
+              header="Name Nameson"
+              subheader="Company name">
+            </tds-header-dropdown-list-user>
+            <tds-header-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </tds-header-dropdown-list-item>
+            <tds-header-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </tds-header-dropdown-list-item>
+          </tds-header-dropdown-list>
+        </tds-header-dropdown>
+
+        <tds-header-brand-symbol slot="end">
+          <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
+        </tds-header-brand-symbol>
+
+      </tds-header>
+
+      <tds-side-menu id="demo-side-menu" aria-label="Side menu">
+        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-overlay>
+
+        <tds-side-menu-close-button slot="close-button" onclick="demoSideMenu.open = false;demoHamburger.setAttribute('aria-expanded', false);"></tds-side-menu-close-button>
+
+        <tds-side-menu-dropdown slot="end" class="demo-xs-hide" selected default-open>
+          <tds-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="">
+          </tds-side-menu-user>
+          <tds-side-menu-dropdown-list type="lg">
+            <tds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com">My Instructions</a>
+            </tds-side-menu-dropdown-list-item>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">Task List</a>
+            </tds-side-menu-dropdown-list-item>
+          </tds-side-menu-dropdown-list>
+        </tds-side-menu-dropdown>
+
+
+      </tds-side-menu>
+
+      <main class="demo-main tds-u-p3" style="box-sizing: border-box;">
+        <p>If you display a user menu, a side menu is needed to show it on extra small screens.</p>
+        <br/>
+        <p><i>Tip: Resize the window to see the user menu move in to a side menu drawer.</i></p>
+      </main>
+    </div>
+  `);
+export const UserMenu = Template.bind({});

package/dist/collection/stories/tegel.stories.js

@@ -0,0 +1,293 @@
+const meta = {
+  title: 'Intro/Tegel Design System',
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      showPanel: false,
+      showToolbar: false,
+    },
+  },
+};
+export default meta;
+export const TegelDesignSystem = {
+  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>
+
+                <tds-banner type="information" icon="information" header="We are moving away from the sdds prefix!">
+                <tds-link slot="banner-link">
+                    <a target="_self" href="?path=/story/intro-announcements--prefix-change">
+                        Read more here!
+                    </a>
+                </tds-link>
+                </tds-banner>
+
+                <article class="tds-body-01">
+                    <section>
+                        <h1 class="tds-headline-02 mb-72">Tegel Design System</h1>
+                        <p class="tds-paragraph-01 mb-72">The design system supports the design and development of digital solutions at
+                            Scania. The purpose is to secure a
+                            coherent, premium brand and user experience across all of Scania's digital touchpoints.
+                        </p>
+
+                        <tds-link>
+                            <a href="https://tegel.scania.com/">
+                                https://tegel.scania.com/
+                            </a>
+                        </tds-link>
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">Status</h4>
+
+                        <p>
+                            This package is currently in a <b>pre-beta</b> stage. We are now working hard towards a 1.0-beta release,
+                            but if
+                            you
+                            want to try out the package today you can! It's available via <tds-link><a href="https://www.npmjs.com/package/@scania/tegel">NPM</a></tds-link> and can be installed using the
+                            installation
+                            guide which you can find <tds-link><a target="_self" href="?path=/story/intro-installation--page">here.</a></tds-link>
+                        </p>
+
+                    </section>
+                    <section>
+                        <h4 class="tds-u-mb2">@scania/tegel 🧱</h4>
+
+                        <p>
+                            <b>TLDR;</b> The new @scania/tegel package is an improvement and continuation of the previous
+                            @scania/component,
+                            @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>
+                        <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 target="_self" 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 target="_self"
+                                    href="?path=/story/intro-migrating-from-components-v4--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/utility/color/background-color.stories.js

@@ -0,0 +1,96 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+export default {
+  title: 'Utilities/Colors',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    backgroundColor: {
+      name: 'Background color',
+      description: 'The color of the text',
+      control: {
+        type: 'select',
+      },
+      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
+    },
+    greyScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        '50',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '846',
+        '868',
+        '900',
+        '958',
+      ],
+      if: { arg: 'backgroundColor', eq: 'grey' },
+    },
+    redScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'backgroundColor', eq: 'red' },
+    },
+    blueScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'backgroundColor', eq: 'blue' },
+    },
+  },
+  args: {
+    backgroundColor: 'blue',
+    blueScale: '500',
+    redScale: '500',
+    greyScale: '958',
+  },
+};
+const Template = ({ backgroundColor, greyScale, blueScale, redScale }) => {
+  let scale = 100;
+  switch (backgroundColor) {
+    case 'blue':
+      scale = blueScale;
+      break;
+    case 'grey':
+      scale = greyScale;
+      break;
+    case 'red':
+      scale = redScale;
+      break;
+    default:
+      scale = blueScale;
+      break;
+  }
+  return formatHtmlPreview(`
+        <style>
+            .demo-wrapper{
+                height: 400px;
+                width: 400px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        </style>
+        <div class="tds-background-${backgroundColor}-${scale} demo-wrapper">
+            <h1>background-color:${backgroundColor}</h1>
+        </div>
+          `);
+};
+export const BackgroundColor = Template.bind({});

package/dist/collection/stories/utility/color/text-color.stories.js

@@ -0,0 +1,94 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+export default {
+  title: 'Utilities/Colors',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    color: {
+      name: 'Color',
+      description: 'The color of the text',
+      control: {
+        type: 'select',
+      },
+      options: { Red: 'red', Blue: 'blue', Grey: 'grey' },
+    },
+    greyScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        '50',
+        '100',
+        '200',
+        '300',
+        '400',
+        '500',
+        '600',
+        '700',
+        '800',
+        '846',
+        '868',
+        '900',
+        '958',
+      ],
+      if: { arg: 'color', eq: 'grey' },
+    },
+    redScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'color', eq: 'red' },
+    },
+    blueScale: {
+      name: 'Scale',
+      description: 'The color scale used.',
+      control: {
+        type: 'select',
+      },
+      options: ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+      if: { arg: 'color', eq: 'blue' },
+    },
+  },
+  args: {
+    color: 'blue',
+    blueScale: '500',
+    redScale: '500',
+    greyScale: '958',
+  },
+};
+const Template = ({ color, greyScale, blueScale, redScale }) => {
+  let scale = 100;
+  switch (color) {
+    case 'blue':
+      scale = blueScale;
+      break;
+    case 'grey':
+      scale = greyScale;
+      break;
+    case 'red':
+      scale = redScale;
+      break;
+    default:
+      scale = blueScale;
+      break;
+  }
+  return formatHtmlPreview(`
+  <style>
+    .demo-wrapper h1 {
+      margin: 0;
+      width: 300px;
+    }
+  </style>
+  <div class="demo-wrapper">
+  <h1 class="tds-text-${color}-${scale}">A text ${color} heading</h1>
+  <p class="tds-text-${color}-${scale}">A text ${color} paragraph</p>
+  </div>
+  `);
+};
+export const TextColor = Template.bind({});

package/dist/collection/utils/utils.js

@@ -337,14 +337,33 @@ export function isFocusable(element) {
   return false;
 }
 /**
- * Disables click on a element by adding an event listener
- * and then preventing default and stopping propogation.
- * @param {Element} element The element where the click should be
- * disabled.
- * */
-export const disableClickOnElement = (element) => {
-  element.addEventListener('click', (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-  });
-};
+ * Checks if the provided element has a slotted element
+ * in the slot with the corresponding slotName
+ * @param slotName the name of the slot.
+ * @param element the element to look for the slot within.
+ */
+export const hasSlot = (slotName, element) => !!element.querySelector(`[slot="${slotName}"]`);
+/**
+ * Generates a reasonably unique string ID based on current time (minutes, seconds, milliseconds) and random numbers.
+ *
+ * This function combines the current time and random numbers to generate
+ * a unique string ID. The function assumes that it won't be called frequently
+ * enough to generate two identical IDs within a millisecond, or that the random
+ * number generator will produce the same value twice in quick succession.
+ *
+ * Note: The IDs generated by this function are not globally unique and their length may vary.
+ * For truly unique and fixed-length IDs, consider using a more robust method such as UUID.
+ *
+ * @returns {string} A unique string ID.
+ */
+export function generateUniqueId() {
+  const now = new Date();
+  const timeInMilliseconds = now.getMinutes() * 60000 + now.getSeconds() * 1000 + now.getMilliseconds(); // Get current time in milliseconds from the start of the hour
+  const randomNum1 = Math.floor(Math.random() * 1000000); // Random number between 0 and 999999
+  const randomNum2 = Math.floor(Math.random() * 1000000); // Another random number
+  // Convert to base 36 (using numbers and letters) and remove '0.' from the random number
+  const uniqueString = randomNum1.toString(36).substring(2) +
+    timeInMilliseconds.toString(36) +
+    randomNum2.toString(36).substring(2);
+  return uniqueString;
+}