@scania/tegel 0.0.5 → 0.0.7

package/dist/types/patterns-stories/navigation/navigation-basic.stories.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      Readme: any;
+    };
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {};
+  args: {};
+};
+export default _default;
+export declare const Basic: any;

package/dist/types/patterns-stories/navigation/navigation-fewitems.stories.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      Readme: any;
+    };
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {};
+  args: {};
+};
+export default _default;
+export declare const FewNavigationItems: any;

package/dist/types/patterns-stories/navigation/navigation-manyitems.stories.d.ts

@@ -0,0 +1,38 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      Readme: any;
+    };
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    dummyHtml: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: any;
+        };
+      };
+    };
+  };
+  args: {
+    dummyHtml: string;
+  };
+};
+export default _default;
+export declare const ManyNavigationItems: any;

package/dist/types/patterns-stories/navigation/navigation-user-menu.stories.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      Readme: any;
+    };
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    siteName: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+  };
+  args: {
+    siteName: string;
+  };
+};
+export default _default;
+export declare const UserMenu: any;

package/dist/types/utils/utils.d.ts

@@ -1,2 +1,118 @@
 export declare const formatHtmlPreview: (htmlStr: any) => string;
 export declare function demoFormat(first: string, middle: string, last: string): string;
+/** reference: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L346
+ *
+ * Appends a hidden input element to allow the component
+ * work within and get picked up by a <form>.
+ * @param element The element on which the input with be appended.
+ * @param name Name of the input.
+ * @param value The value of the input.
+ * @param disabled Disables the input if true.
+ * @param additionalAttributes Additional attributes that should be passed to the input.
+ */
+export declare const appendHiddenInput: (element: HTMLElement, name: string, value: string | undefined | null, disabled: boolean, additionalAttributes: {
+  key: string;
+  value: string;
+}[]) => void;
+export type Attributes = {
+  [key: string]: any;
+};
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+export declare const inheritAttributes: (el: HTMLElement, attributes?: string[]) => Attributes;
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+export declare const inheritAriaAttributes: (el: HTMLElement, ignoreList?: string[]) => Attributes;
+/**
+ * Recursively finds the first matching element or child based on a provided condition.
+ *
+ * @param {ParentNode} parentNode - The starting element or shadow root to search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - The condition to match the element, receives an HTMLElement and returns a boolean.
+ * @param {boolean} [pierceShadow=false] - Whether to pierce through shadow DOM boundaries.
+ * @returns {HTMLElement | null} - The first matching element or child, or null if none is found.
+ */
+export declare function dfs(parentNode: ParentNode, searchPredicate: (el: HTMLElement) => boolean, pierceShadow?: boolean): HTMLElement | null;
+/**
+ * Searches for a next sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its next siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getNextNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+export declare const getNextNestedChildOfSiblingsMatching: (element: HTMLElement, searchPredicate: (el: HTMLElement) => boolean) => HTMLElement;
+/**
+ * Searches for a previous sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its previous siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getPreviousNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+export declare const getPreviousNestedChildOfSiblingsMatching: (element: HTMLElement, searchPredicate: (el: HTMLElement) => boolean) => HTMLElement;
+/**
+ * Checks if the given element is a heading element (h1-h6) or has a role of "heading".
+ *
+ * @param {HTMLElement} el - The element to check.
+ * @returns {boolean} - True if the element is a heading element, false otherwise.
+ */
+export declare const isHeadingElement: (el: HTMLElement) => boolean;
+/**
+ * Loop through the children and add the 'listitem' role if needed.
+ * @param {Node} targetNode The node being updated.
+ * */
+export declare const updateListChildrenRoles: (targetNode: Node) => void;
+export declare function isFocusable(element: HTMLElement): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",
@@ -49,7 +49,6 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "@stencil/core": "^3.0.0",
-    "@storybook/addon-google-analytics": "^6.2.9",
     "concurrently": "^7.4.0",
     "dotenv": "^16.0.3",
     "html-format": "^1.0.2",

package/readme.md

@@ -216,8 +216,7 @@ Please read through our [contributing guidelines](https://github.com/scania-digi
 
 ## Code conventions
 
-TODO - Needs the correct link.
-The code conventions used in (and enforced by) Tegel is documented [here](www.TBD.se).
+The code conventions used in (and enforced by) Tegel is documented [here](https://github.com/scania-digital-design-system/sdds/blob/main/.github/CODE_STYLE.md).
 
 ### Setting up the development environment