@scania/tegel 0.0.2 → 0.0.5

package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts

@@ -1,13 +1,13 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-    docs: {
-      source: {
-        state: string;
-      };
-    };
-  };
-};
-export default _default;
-export declare const Brand: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Brand: any;

package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts

@@ -1,13 +1,13 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-    docs: {
-      source: {
-        state: string;
-      };
-    };
-  };
-};
-export default _default;
-export declare const Scales: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Scales: any;

package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts

@@ -1,13 +1,13 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-    docs: {
-      source: {
-        state: string;
-      };
-    };
-  };
-};
-export default _default;
-export declare const Sematic: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Sematic: any;

package/dist/types/foundations-stories/grid/grid.stories.d.ts

@@ -1,35 +1,35 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-  };
-  args: {
-    fluidContainer: boolean;
-    padding: boolean;
-  };
-  argTypes: {
-    fluidContainer: {
-      name: string;
-      description: string;
-      control: {
-        type: string;
-      };
-    };
-    padding: {
-      name: string;
-      description: string;
-      control: {
-        type: string;
-      };
-    };
-  };
-};
-export default _default;
-export declare const Default: any;
-export declare const Auto: any;
-export declare const Push: any;
-export declare const Offset: any;
-export declare const NoPadding: any;
-export declare const Fluid: any;
-export declare const Nested: any;
-export declare const ShowHide: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+  };
+  args: {
+    fluidContainer: boolean;
+    padding: boolean;
+  };
+  argTypes: {
+    fluidContainer: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    padding: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Default: any;
+export declare const Auto: any;
+export declare const Push: any;
+export declare const Offset: any;
+export declare const NoPadding: any;
+export declare const Fluid: any;
+export declare const Nested: any;
+export declare const ShowHide: any;

package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts

@@ -1,8 +1,8 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-  };
-};
-export default _default;
-export declare const SpacingElement: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+  };
+};
+export default _default;
+export declare const SpacingElement: any;

package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts

@@ -1,8 +1,8 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-  };
-};
-export default _default;
-export declare const SpacingLayout: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+  };
+};
+export default _default;
+export declare const SpacingLayout: any;

package/dist/types/foundations-stories/typography/typography-body.stories.d.ts

@@ -1,8 +1,8 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-  };
-};
-export default _default;
-export declare const Body: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+  };
+};
+export default _default;
+export declare const Body: any;

package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts

@@ -1,8 +1,8 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-  };
-};
-export default _default;
-export declare const Detail: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+  };
+};
+export default _default;
+export declare const Detail: any;

package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts

@@ -1,21 +1,21 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-  };
-  argTypes: {
-    type: {
-      name: string;
-      description: string;
-      control: {
-        type: string;
-      };
-      options: {
-        Functional: string;
-        Expressive: string;
-      };
-    };
-  };
-};
-export default _default;
-export declare const Headlines: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+  };
+  argTypes: {
+    type: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: {
+        Functional: string;
+        Expressive: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const Headlines: any;

package/dist/types/foundations-stories/typography/typography-paragraph.stories.d.ts

@@ -1,8 +1,8 @@
-declare const _default: {
-  title: string;
-  parameters: {
-    layout: string;
-  };
-};
-export default _default;
-export declare const Paragraph: any;
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+  };
+};
+export default _default;
+export declare const Paragraph: any;

package/dist/types/index.d.ts

@@ -1 +1 @@
-export * from './components';
+export * from './components';

package/dist/types/stencil-public-runtime.d.ts

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -433,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -486,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;
@@ -836,8 +892,8 @@ export declare namespace JSXBase {
         accept?: string;
         allowdirs?: boolean;
         alt?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
         autoFocus?: boolean;
@@ -1161,8 +1217,8 @@ export declare namespace JSXBase {
         resource?: string;
         typeof?: string;
         vocab?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoCorrect?: string;
         autocorrect?: string;
         autoSave?: string;
@@ -1453,12 +1509,12 @@ export declare namespace JSXBase {
         onCutCapture?: (event: ClipboardEvent) => void;
         onPaste?: (event: ClipboardEvent) => void;
         onPasteCapture?: (event: ClipboardEvent) => void;
-        onCompositionEnd?: (event: CompositionEvent) => void;
-        onCompositionEndCapture?: (event: CompositionEvent) => void;
-        onCompositionStart?: (event: CompositionEvent) => void;
-        onCompositionStartCapture?: (event: CompositionEvent) => void;
-        onCompositionUpdate?: (event: CompositionEvent) => void;
-        onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+        onCompositionend?: (event: CompositionEvent) => void;
+        onCompositionendCapture?: (event: CompositionEvent) => void;
+        onCompositionstart?: (event: CompositionEvent) => void;
+        onCompositionstartCapture?: (event: CompositionEvent) => void;
+        onCompositionupdate?: (event: CompositionEvent) => void;
+        onCompositionupdateCapture?: (event: CompositionEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1469,8 +1525,8 @@ export declare namespace JSXBase {
         onBlurCapture?: (event: FocusEvent) => void;
         onChange?: (event: Event) => void;
         onChangeCapture?: (event: Event) => void;
-        onInput?: (event: Event) => void;
-        onInputCapture?: (event: Event) => void;
+        onInput?: (event: InputEvent) => void;
+        onInputCapture?: (event: InputEvent) => void;
         onReset?: (event: Event) => void;
         onResetCapture?: (event: Event) => void;
         onSubmit?: (event: Event) => void;

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

@@ -1,2 +1,2 @@
-export declare const formatHtmlPreview: (htmlStr: any) => string;
-export declare function demoFormat(first: string, middle: string, last: string): string;
+export declare const formatHtmlPreview: (htmlStr: any) => string;
+export declare function demoFormat(first: string, middle: string, last: string): string;

package/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
+
+/** 
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",
@@ -43,11 +43,12 @@
     "build-stencil:watch": "stencil build --docs-readme --watch",
     "start-storybook": "start-storybook -p 6006",
     "tegel": "concurrently --raw  'npm:build-stencil:watch' 'npm:start-storybook'",
-    "commit": "npm run --prefix ../ commit"
+    "commit": "npm run --prefix ../ commit",
+    "tegel-release": "./tegel-release.sh"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@stencil/core": "^2.20.0",
+    "@stencil/core": "^3.0.0",
     "@storybook/addon-google-analytics": "^6.2.9",
     "concurrently": "^7.4.0",
     "dotenv": "^16.0.3",

package/readme.md

@@ -167,7 +167,22 @@ document.addEventListener('sddsClick', (event) => {
 })
 ```
 
-In JSX these events can be listened to by prefixing them with an `on` directly on the component:
+In React these events needs to be listened to by adding an event listener to the element that emits the event. This can be easily done by
+grabbing a reference to the element and adding the event listener inline:
+
+This solution is a workaround based on how React handles events, you can read more on this [here.](https://reactjs.org/docs/events.html)
+
+```jsx
+<sdds-textfield
+  ref={element => element.addEventListener('sddsClick', (event) => {
+    {/* Do something with/based on the event. */}
+    })
+  }
+  >
+</sdds-textfield>
+```
+
+In other JSX-enviroments (apart from React) these events can be listened to by prefixing them with an `on` directly on the component:
 ```jsx
 <sdds-textfield
   onSddsChange={(event) => {/* Do something with/based on the event. */}}
@@ -176,6 +191,7 @@ In JSX these events can be listened to by prefixing them with an `on` directly o
 </sdds-textfield>
 ```
 
+
 What is attached to the event object is highlighted in our storybook. Under the docs tab of each component the events are outlined,
 inluding what data is passed with the event to the user.
 
@@ -197,6 +213,12 @@ Please read through our [contributing guidelines](https://github.com/scania-digi
 - [Report bug](https://github.com/scania-digital-design-system/sdds/issues)
 - [Request feature](https://github.com/scania-digital-design-system/sdds/issues/new)
 
+
+## Code conventions
+
+TODO - Needs the correct link.
+The code conventions used in (and enforced by) Tegel is documented [here](www.TBD.se).
+
 ### Setting up the development environment
 
 1. Make sure you are using the required node.js version specified in `tegel/package.json` (node 16 at the time of writing).

package/dist/cjs/sdds-breadcrumb-item.cjs.entry.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b98965c7.js');
-
-const breadcrumbItemCss = "@charset \"UTF-8\";li{display:flex;align-items:center;color:var(--sdds-breadcrumb-color)}li a{color:var(--sdds-breadcrumb-color);text-decoration:none}li:hover{cursor:pointer}li:hover a{color:var(--sdds-breadcrumb-color-hover);text-decoration:underline}li.sdds-breadcrumb-item-disabled a,li.sdds-breadcrumb-item-current a,li [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}li.sdds-breadcrumb-item-disabled:hover a,li.sdds-breadcrumb-item-current:hover a,li [aria-current=page]:hover a{color:var(--sdds-breadcrumb-color-disabled);text-decoration:none}li a::after{content:\"›\";color:var(--sdds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}li:last-child{color:red}:host(.sdds-breadcrumb-item-last) a::after{display:none}";
-
-const SddsBreadcrumbItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.current = false;
-    this.href = undefined;
-    this.disabled = false;
-  }
-  render() {
-    return (index.h("li", { class: `${this.current ? 'sdds-breadcrumb-item-current' : ''} 
-        ${this.disabled ? 'sdds-breadcrumb-item-disabled' : ''}` }, index.h("a", { "aria-current": this.current && 'page',
-      // eslint-disable-next-line no-script-url
-      href: this.disabled ? 'javascript:void(0)' : this.href }, index.h("slot", null))));
-  }
-};
-SddsBreadcrumbItem.style = breadcrumbItemCss;
-
-exports.sdds_breadcrumb_item = SddsBreadcrumbItem;

package/dist/cjs/sdds-inline-tab.cjs.entry.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b98965c7.js');
-
-const inlineTabCss = ":host{display:block}";
-
-const InlineTabsChild = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.label = undefined;
-    this.disabled = false;
-    this.default = false;
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
-  }
-};
-InlineTabsChild.style = inlineTabCss;
-
-exports.sdds_inline_tab = InlineTabsChild;