@scania/tegel 1.3.3 → 1.4.0

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

@@ -1,42 +1,42 @@
 import formatHtmlPreview from "../../formatHtmlPreview";
 import readme from "./readme.md";
 export default {
-  title: 'Patterns/Navigation',
-  parameters: {
-    notes: {
-      Readme: readme,
+    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',
+            },
+        ],
     },
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
+    argTypes: {
+        siteName: {
+            name: 'Site name',
+            description: 'Set a custom title for the Header.',
+            control: {
+                type: 'text',
+            },
+        },
     },
-    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',
     },
-  },
-  args: {
-    siteName: 'Application',
-  },
 };
 const Template = () => formatHtmlPreview(`
     <script>

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

@@ -1,16 +1,16 @@
 const meta = {
-  title: 'Intro/Tegel Design System',
-  parameters: {
-    layout: 'fullscreen',
-    options: {
-      showPanel: false,
-      showToolbar: false,
+    title: 'Intro/Tegel Design System',
+    parameters: {
+        layout: 'fullscreen',
+        options: {
+            showPanel: false,
+            showToolbar: false,
+        },
     },
-  },
 };
 export default meta;
 export const TegelDesignSystem = {
-  render: () => `<style>
+    render: () => `<style>
                     article {
                         box-sizing: border-box;
                         max-width: 688px;

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

@@ -1,84 +1,84 @@
 import formatHtmlPreview from "../../formatHtmlPreview";
 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' },
+    title: 'Utilities/Colors',
+    parameters: {
+        layout: 'centered',
     },
-    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' },
+    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' },
+        },
     },
-    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' },
+    args: {
+        backgroundColor: 'blue',
+        blueScale: '500',
+        redScale: '500',
+        greyScale: '958',
     },
-    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(`
+    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;

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

@@ -1,84 +1,84 @@
 import formatHtmlPreview from "../../formatHtmlPreview";
 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' },
+    title: 'Utilities/Colors',
+    parameters: {
+        layout: 'centered',
     },
-    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' },
+    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' },
+        },
     },
-    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' },
+    args: {
+        color: 'blue',
+        blueScale: '500',
+        redScale: '500',
+        greyScale: '958',
     },
-    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(`
+    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;

package/dist/collection/utils/appendHiddenInput.js

@@ -9,17 +9,17 @@
  * @param additionalAttributes Additional attributes that should be passed to the input.
  */
 const appendHiddenInput = (element, name, value, disabled, additionalAttributes) => {
-  let input = element.querySelector('input');
-  if (!element.querySelector('input')) {
-    input = element.ownerDocument.createElement('input');
-    input.type = 'hidden';
-    if (additionalAttributes) {
-      additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+    let input = element.querySelector('input');
+    if (!element.querySelector('input')) {
+        input = element.ownerDocument.createElement('input');
+        input.type = 'hidden';
+        if (additionalAttributes) {
+            additionalAttributes.forEach((attr) => input.setAttribute(attr.key, attr.value));
+        }
+        element.appendChild(input);
     }
-    element.appendChild(input);
-  }
-  input.disabled = disabled;
-  input.name = name;
-  input.value = value || '';
+    input.disabled = disabled;
+    input.name = name;
+    input.value = value || '';
 };
 export default appendHiddenInput;

package/dist/collection/utils/dfs.js

@@ -7,20 +7,20 @@
  * @returns {HTMLElement | null} - The first matching element or child, or null if none is found.
  */
 function dfs(parentNode, searchPredicate, pierceShadow = false) {
-  if (parentNode instanceof HTMLElement && searchPredicate(parentNode)) {
-    return parentNode;
-  }
-  const childElements = parentNode instanceof HTMLSlotElement
-    ? parentNode.assignedElements({ flatten: true })
-    : Array.from(parentNode.children);
-  if (pierceShadow && parentNode instanceof HTMLElement && parentNode.shadowRoot) {
-    childElements.push(...Array.from(parentNode.shadowRoot.children));
-  }
-  let foundElement = null;
-  childElements.some((child) => {
-    foundElement = dfs(child, searchPredicate, pierceShadow);
-    return foundElement !== null;
-  });
-  return foundElement;
+    if (parentNode instanceof HTMLElement && searchPredicate(parentNode)) {
+        return parentNode;
+    }
+    const childElements = parentNode instanceof HTMLSlotElement
+        ? parentNode.assignedElements({ flatten: true })
+        : Array.from(parentNode.children);
+    if (pierceShadow && parentNode instanceof HTMLElement && parentNode.shadowRoot) {
+        childElements.push(...Array.from(parentNode.shadowRoot.children));
+    }
+    let foundElement = null;
+    childElements.some((child) => {
+        foundElement = dfs(child, searchPredicate, pierceShadow);
+        return foundElement !== null;
+    });
+    return foundElement;
 }
 export default dfs;

package/dist/collection/utils/findNextFocusableElement.js

@@ -4,13 +4,13 @@
  * @param nextItemIndex The index in the list to start the search on.
  */
 const findNextFocusableElement = (items, nextItemIndex) => {
-  if (items[nextItemIndex] === undefined) {
-    return 0;
-  }
-  for (let index = nextItemIndex; index < items.length; index++) {
-    if (!items[index].disabled) {
-      return index;
+    if (items[nextItemIndex] === undefined) {
+        return 0;
+    }
+    for (let index = nextItemIndex; index < items.length; index++) {
+        if (!items[index].disabled) {
+            return index;
+        }
     }
-  }
 };
 export default findNextFocusableElement;

package/dist/collection/utils/findPreviousFocusableElement.js

@@ -5,13 +5,13 @@
  * @param nextItemIndex The index in the list to start the search on.
  */
 const findPreviousFocusableElement = (items, previousItemIndex) => {
-  if (items[previousItemIndex] === undefined) {
-    return items.length - 1;
-  }
-  for (let index = previousItemIndex; index >= 0; index--) {
-    if (!items[index].disabled) {
-      return index;
+    if (items[previousItemIndex] === undefined) {
+        return items.length - 1;
+    }
+    for (let index = previousItemIndex; index >= 0; index--) {
+        if (!items[index].disabled) {
+            return index;
+        }
     }
-  }
 };
 export default findPreviousFocusableElement;

package/dist/collection/utils/generateUniqueId.js

@@ -12,14 +12,14 @@
  * @returns {string} A unique string ID.
  */
 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;
+    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;
 }
 export default generateUniqueId;

package/dist/collection/utils/getNestedChildOfSiblingsMatching.js

@@ -2,21 +2,21 @@
 import dfs from "./dfs";
 // based on a sibling traversal function (getNextSibling or getPreviousSibling).
 function getNestedChildOfSiblingsMatching(element, searchPredicate, siblingTraversalFn) {
-  // Start with the sibling of the provided element.
-  let sibling = siblingTraversalFn(element);
-  // Iterate through the siblings until there are no more siblings.
-  while (sibling) {
-    // Use the dfs helper function to find the deeply nested child
-    // that matches the given criteria within the current sibling.
-    const nestedChild = dfs(sibling, searchPredicate);
-    // If a matching deeply nested child is found, return it.
-    if (nestedChild) {
-      return nestedChild;
+    // Start with the sibling of the provided element.
+    let sibling = siblingTraversalFn(element);
+    // Iterate through the siblings until there are no more siblings.
+    while (sibling) {
+        // Use the dfs helper function to find the deeply nested child
+        // that matches the given criteria within the current sibling.
+        const nestedChild = dfs(sibling, searchPredicate);
+        // If a matching deeply nested child is found, return it.
+        if (nestedChild) {
+            return nestedChild;
+        }
+        // Move on to the next sibling.
+        sibling = siblingTraversalFn(sibling);
     }
-    // Move on to the next sibling.
-    sibling = siblingTraversalFn(sibling);
-  }
-  // If no matching deeply nested child is found, return null.
-  return null;
+    // If no matching deeply nested child is found, return null.
+    return null;
 }
 export default getNestedChildOfSiblingsMatching;