@swisspost/design-system-components 1.0.0-beta.3 → 1.3.0

package/dist/types/components/post-icon/post-icon.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @class PostIcon - representing a stencil component
+ */
+export declare class PostIcon {
+  /**
+   * The name/id of the icon (e.g. 1000, 1001, ...).
+   */
+  name: string;
+  /**
+   * The base path, where the icons are located (must be a public url).
+   */
+  base?: string;
+  /**
+   * When set to `true`, the icon will be flipped horizontally.
+   */
+  flipH?: boolean;
+  /**
+   * When set to `true`, the icon will be flipped vertically.
+   */
+  flipV?: boolean;
+  /**
+   * The `number` for the css `scale` transformation.
+   */
+  scale?: number;
+  /**
+   * The `number` of degree for the css `rotate` transformation.
+   */
+  rotate?: number;
+  /**
+   * The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).
+   */
+  animation?: string;
+  initialPath: string;
+  path: string;
+  svgSource: string;
+  svgOutput: string;
+  validateName(newValue?: string): void;
+  validateBase(newValue?: string): void;
+  validateFlipH(newValue?: boolean): void;
+  validateFlipV(newValue?: boolean): void;
+  validateScale(newValue?: number): void;
+  validateRotate(newValue?: number): void;
+  validateAnimation(newValue?: string): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  getPath(basePath: string): string;
+  fetchSVG(): void;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -6,65 +6,133 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
-    interface MyComponent {
+    interface PostCollapsible {
         /**
-          * The first name
+          * If `true`, the element is initially collapsed otherwise it is displayed.
          */
-        "first": string;
+        "collapsed"?: boolean;
         /**
-          * The last name
+          * Defines the hierarchical level of the collapsible header within the headings structure.
          */
-        "last": string;
+        "headingLevel"?: number;
         /**
-          * The middle name
+          * Triggers the collapse programmatically.
          */
-        "middle": string;
-        "write": (text: string) => Promise<void>;
+        "toggle": (open?: boolean) => Promise<boolean>;
+    }
+    /**
+     * @class PostIcon - representing a stencil component
+     */
+    interface PostIcon {
+        /**
+          * The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).
+         */
+        "animation"?: string;
+        /**
+          * The base path, where the icons are located (must be a public url).
+         */
+        "base"?: string;
+        /**
+          * When set to `true`, the icon will be flipped horizontally.
+         */
+        "flipH"?: boolean;
+        /**
+          * When set to `true`, the icon will be flipped vertically.
+         */
+        "flipV"?: boolean;
+        /**
+          * The name/id of the icon (e.g. 1000, 1001, ...).
+         */
+        "name": string;
+        /**
+          * The `number` of degree for the css `rotate` transformation.
+         */
+        "rotate"?: number;
+        /**
+          * The `number` for the css `scale` transformation.
+         */
+        "scale"?: number;
     }
-}
-export interface MyComponentCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLMyComponentElement;
 }
 declare global {
-    interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
+    interface HTMLPostCollapsibleElement extends Components.PostCollapsible, HTMLStencilElement {
+    }
+    var HTMLPostCollapsibleElement: {
+        prototype: HTMLPostCollapsibleElement;
+        new (): HTMLPostCollapsibleElement;
+    };
+    /**
+     * @class PostIcon - representing a stencil component
+     */
+    interface HTMLPostIconElement extends Components.PostIcon, HTMLStencilElement {
     }
-    var HTMLMyComponentElement: {
-        prototype: HTMLMyComponentElement;
-        new (): HTMLMyComponentElement;
+    var HTMLPostIconElement: {
+        prototype: HTMLPostIconElement;
+        new (): HTMLPostIconElement;
     };
     interface HTMLElementTagNameMap {
-        "my-component": HTMLMyComponentElement;
+        "post-collapsible": HTMLPostCollapsibleElement;
+        "post-icon": HTMLPostIconElement;
     }
 }
 declare namespace LocalJSX {
-    interface MyComponent {
+    interface PostCollapsible {
+        /**
+          * If `true`, the element is initially collapsed otherwise it is displayed.
+         */
+        "collapsed"?: boolean;
+        /**
+          * Defines the hierarchical level of the collapsible header within the headings structure.
+         */
+        "headingLevel"?: number;
+    }
+    /**
+     * @class PostIcon - representing a stencil component
+     */
+    interface PostIcon {
+        /**
+          * The name of the animation (`cylon`, `cylon-vertical`, `spin`, `spin-reverse`, `fade`, `throb`).
+         */
+        "animation"?: string;
+        /**
+          * The base path, where the icons are located (must be a public url).
+         */
+        "base"?: string;
+        /**
+          * When set to `true`, the icon will be flipped horizontally.
+         */
+        "flipH"?: boolean;
         /**
-          * The first name
+          * When set to `true`, the icon will be flipped vertically.
          */
-        "first"?: string;
+        "flipV"?: boolean;
         /**
-          * The last name
+          * The name/id of the icon (e.g. 1000, 1001, ...).
          */
-        "last"?: string;
+        "name"?: string;
         /**
-          * The middle name
+          * The `number` of degree for the css `rotate` transformation.
          */
-        "middle"?: string;
+        "rotate"?: number;
         /**
-          * This event is fired randomly
+          * The `number` for the css `scale` transformation.
          */
-        "onSomeevent"?: (event: MyComponentCustomEvent<string>) => void;
+        "scale"?: number;
     }
     interface IntrinsicElements {
-        "my-component": MyComponent;
+        "post-collapsible": PostCollapsible;
+        "post-icon": PostIcon;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
+            "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
+            /**
+             * @class PostIcon - representing a stencil component
+             */
+            "post-icon": LocalJSX.PostIcon & JSXBase.HTMLAttributes<HTMLPostIconElement>;
         }
     }
 }

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,14 +214,16 @@ 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.
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,38 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * 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
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +293,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +302,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**
@@ -417,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;
@@ -470,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;
@@ -820,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;
@@ -1145,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;
@@ -1437,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;
@@ -1453,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/get-element-height.d.ts

@@ -0,0 +1,3 @@
+export declare function getElementHeight(el: HTMLElement): number;
+export declare function getElementHeight(el: HTMLElement, classWhenShown: string): number;
+export declare function getElementHeight(el: HTMLElement, classesWhenShown: string[]): number;

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

@@ -0,0 +1,4 @@
+export * from './get-element-height';
+export * from './on-transition-end';
+export * from './property-checkers';
+export * from './should-reduce-motion';

package/dist/types/utils/on-transition-end.d.ts

@@ -0,0 +1 @@
+export declare function onTransitionEnd(el: HTMLElement): Promise<void>;

package/dist/types/utils/property-checkers.d.ts

@@ -0,0 +1,5 @@
+export declare function checkType(value: unknown, type: string, errorMessage: string): void;
+export declare function checkEmptyOrType(value: unknown, type: string, errorMessage: string): void;
+export declare function checkOneOf<T>(value: T, possibleValues: T[], errorMessage: string): void;
+export declare function checkEmptyOrOneOf<T>(value: T, possibleValues: T[], errorMessage: string): void;
+export declare function checkBoolean(value: unknown, errorMessage: string): void;

package/dist/types/utils/should-reduce-motion.d.ts

@@ -0,0 +1 @@
+export declare function shouldReduceMotion(): boolean;

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": "@swisspost/design-system-components",
-  "version": "1.0.0-beta.3",
+  "version": "1.3.0",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -11,6 +11,7 @@
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/post-components/post-components.esm.js",
+  "private": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/swisspost/design-system"
@@ -20,51 +21,39 @@
     "loader/"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "linkDirectory": true
   },
   "dependencies": {
-    "@stencil/core": "^2.13.0",
-    "@stencil/sass": "^2.0.0",
-    "@swisspost/design-system-styles": "5.0.0-beta.4",
-    "sass": "^1.49.7"
+    "@popperjs/core": "2.11.6",
+    "@stencil/core": "3.0.1",
+    "@stencil/react-output-target": "0.4.0",
+    "@stencil/sass": "2.0.3",
+    "@swisspost/design-system-styles": "5.4.0",
+    "bootstrap": "5.2.3",
+    "puppeteer": "19.7.2",
+    "sass": "1.58.3"
   },
   "devDependencies": {
-    "@babel/core": "7.19.6",
-    "@percy/cli": "1.12.0",
-    "@percy/storybook": "4.3.4",
-    "@popperjs/core": "2.11.6",
-    "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
-    "@storybook/addon-actions": "6.5.13",
-    "@storybook/addon-essentials": "6.5.13",
-    "@storybook/addon-links": "6.5.13",
-    "@storybook/html": "6.5.13",
+    "@percy/cli": "1.20.0",
+    "@percy/cypress": "3.1.2",
     "@types/jest": "27.5.2",
-    "babel-loader": "8.2.5",
-    "bootstrap": "5.1.3",
-    "cypress": "10.11.0",
+    "cypress": "12.6.0",
     "cypress-storybook": "0.5.1",
     "jest": "27.5.1",
     "jest-cli": "27.5.1",
     "npm-run-all": "4.1.5",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "start-server-and-test": "1.14.0",
-    "typescript": "4.8.4",
-    "webpack": "5.74.0"
+    "typescript": "4.9.5"
   },
   "scripts": {
-    "start": "npm-run-all stencil:build --parallel stencil:start storybook:start",
-    "build": "npm-run-all stencil:build storybook:build",
-    "test": "npm-run-all stencil:build --parallel stencil:test storybook:test",
-    "stencil:start": "stencil build --watch --docs-readme",
-    "stencil:build": "stencil build --docs-readme",
-    "stencil:test": "stencil test --spec",
-    "stencil:test:watch": "stencil test --spec --watchAll",
-    "stencil:generate": "stencil generate",
-    "storybook:start": "start-storybook -p 9203",
-    "storybook:start:headless": "start-storybook -p 9303 -s www --no-open",
-    "storybook:build": "build-storybook",
-    "storybook:test": "start-server-and-test storybook:start:headless 9303 'cypress run --record false'",
-    "cypress:open": "cypress open"
+    "start": "stencil build --watch --docs-readme",
+    "build": "stencil build --docs-readme",
+    "test": "npm run unit",
+    "unit": "stencil test --spec",
+    "unit:watch": "stencil test --spec --watchAll --silent",
+    "e2e": "cypress run",
+    "e2e:watch": "cypress open",
+    "snapshots": "percy exec -- cypress run --config-file ./cypress.snapshot.config.js",
+    "generate": "stencil generate"
   }
 }

package/dist/cjs/my-component.cjs.entry.js

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-5c30acf6.js');
-
-function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
-
-const myComponentCss = ":host{display:block}";
-
-const MyComponent = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.someevent = index.createEvent(this, "someevent", 7);
-    /**
-     * The middle name
-     */
-    this.middle = '';
-  }
-  async write(text) {
-    console.log(this.getText());
-    this.someevent.emit(text);
-  }
-  getText() {
-    return format(this.first, this.middle, this.last);
-  }
-  render() {
-    return index.h("div", null, "Hello, World! I'm ", this.getText());
-  }
-};
-MyComponent.style = myComponentCss;
-
-exports.my_component = MyComponent;

package/dist/collection/components/my-component/my-component.css

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}