@swisspost/design-system-components 1.4.0 → 1.5.0

package/dist/collection/components/post-alert/post-alert.js

@@ -0,0 +1,256 @@
+import { h, Host } from '@stencil/core';
+import { version } from '../../../package.json';
+import { fadeOut } from '../../animations';
+import { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '../../utils';
+import { ALERT_TYPES } from './alert-types';
+export class PostAlert {
+  constructor() {
+    this.alertId = crypto.randomUUID();
+    this.classes = undefined;
+    this.hasActions = undefined;
+    this.hasHeading = undefined;
+    this.onDismissButtonClick = () => this.dismiss();
+    this.dismissible = false;
+    this.dismissLabel = undefined;
+    this.fixed = false;
+    this.icon = undefined;
+    this.type = 'primary';
+  }
+  validateDismissible(isDismissible = this.dismissible) {
+    checkType(isDismissible, 'boolean', 'The post-alert "dismissible" prop should be a boolean.');
+    setTimeout(() => this.validateDismissLabel());
+  }
+  validateDismissLabel(dismissLabel = this.dismissLabel) {
+    if (this.dismissible) {
+      checkNonEmpty(dismissLabel, 'Dismissible post-alert\'s require a "dismiss-label" prop.');
+    }
+  }
+  validateFixed(isFixed = this.fixed) {
+    checkType(isFixed, 'boolean', 'The post-alert "fixed" prop should be a boolean.');
+  }
+  validateIcon(icon = this.icon) {
+    checkEmptyOrPattern(icon, /\d{4}|none/, 'The post-alert "icon" prop should be a 4-digits string.');
+  }
+  validateType(type = this.type) {
+    checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);
+  }
+  connectedCallback() {
+    this.validateDismissible();
+    this.validateFixed();
+    this.validateIcon();
+    this.validateType();
+  }
+  componentWillRender() {
+    var _a;
+    this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;
+    this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;
+    this.classes = `alert alert-${(_a = this.type) !== null && _a !== void 0 ? _a : 'primary'}`;
+    if (this.dismissible)
+      this.classes += ' alert-dismissible';
+    if (this.hasActions)
+      this.classes += ' alert-action';
+    if (this.fixed)
+      this.classes += ' alert-fixed-bottom';
+    if (this.icon === 'none')
+      this.classes += ' no-icon';
+  }
+  /**
+   * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
+   */
+  async dismiss() {
+    const dismissal = fadeOut(this.host);
+    await dismissal.finished;
+    this.host.remove();
+    this.dismissed.emit();
+  }
+  render() {
+    const defaultAlertContent = [
+      this.icon && this.icon !== 'none' && (h("post-icon", { key: `${this.alertId}-icon`, name: this.icon })),
+      this.hasHeading && (h("div", { key: `${this.alertId}-heading`, class: "alert-heading" }, h("slot", { name: "heading" }))),
+      h("slot", { key: `${this.alertId}-message` })
+    ];
+    const actionAlertContent = [
+      h("div", { key: `${this.alertId}-content`, class: "alert-content" }, defaultAlertContent),
+      h("div", { key: `${this.alertId}-buttons`, class: "alert-buttons" }, h("slot", { name: "actions" })),
+    ];
+    return (h(Host, { "data-version": version }, h("div", { role: "alert", class: this.classes }, this.dismissible && (h("button", { class: "btn-close", onClick: this.onDismissButtonClick }, h("span", { class: "visually-hidden" }, this.dismissLabel))), this.hasActions
+      ? actionAlertContent
+      : defaultAlertContent)));
+  }
+  static get is() { return "post-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-alert.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-alert.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dismissible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, a close button (\u00D7) is displayed and the alert can be dismissed by the user."
+        },
+        "attribute": "dismissible",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dismissLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label to use for the close button of a dismissible alert."
+        },
+        "attribute": "dismiss-label",
+        "reflect": false
+      },
+      "fixed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the alert is positioned at the bottom of the window, from edge to edge."
+        },
+        "attribute": "fixed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon to display in the alert. By default, the icon depends on the alert type.\n\nIf `none`, no icon is displayed."
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AlertType",
+          "resolved": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+          "references": {
+            "AlertType": {
+              "location": "import",
+              "path": "./alert-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the alert."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "alertId": {},
+      "classes": {},
+      "hasActions": {},
+      "hasHeading": {},
+      "onDismissButtonClick": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dismissed",
+        "name": "dismissed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "An event emitted when the alert element is dismissed, after the transition.\nIt has no payload and only relevant for dismissible alerts."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "dismiss": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Triggers alert dismissal programmatically (same as clicking on the close button (\u00D7)).",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "dismissible",
+        "methodName": "validateDismissible"
+      }, {
+        "propName": "dismissLabel",
+        "methodName": "validateDismissLabel"
+      }, {
+        "propName": "fixed",
+        "methodName": "validateFixed"
+      }, {
+        "propName": "icon",
+        "methodName": "validateIcon"
+      }, {
+        "propName": "type",
+        "methodName": "validateType"
+      }];
+  }
+}
+//# sourceMappingURL=post-alert.js.map

package/dist/collection/components/post-alert/post-alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-alert.js","sourceRoot":"","sources":["../../../../src/components/post-alert/post-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { fadeOut } from '../../animations';\nimport { checkEmptyOrOneOf, checkEmptyOrPattern, checkNonEmpty, checkType } from '../../utils';\nimport { ALERT_TYPES, AlertType } from './alert-types';\n\n@Component({\n  tag: 'post-alert',\n  styleUrl: 'post-alert.scss',\n  shadow: true,\n})\nexport class PostAlert {\n  @Element() host: HTMLPostAlertElement;\n\n  @State() alertId = crypto.randomUUID();\n  @State() classes: string;\n  @State() hasActions: boolean;\n  @State() hasHeading: boolean;\n  @State() onDismissButtonClick = () => this.dismiss();\n\n  /**\n   * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.\n   */\n  @Prop() readonly dismissible: boolean = false;\n\n  @Watch('dismissible')\n  validateDismissible(isDismissible = this.dismissible) {\n    checkType(isDismissible, 'boolean', 'The post-alert \"dismissible\" prop should be a boolean.');\n    setTimeout(() => this.validateDismissLabel());\n  }\n\n  /**\n   * The label to use for the close button of a dismissible alert.\n   */\n  @Prop() readonly dismissLabel: string;\n\n  @Watch('dismissLabel')\n  validateDismissLabel(dismissLabel = this.dismissLabel) {\n    if (this.dismissible) {\n      checkNonEmpty(dismissLabel, 'Dismissible post-alert\\'s require a \"dismiss-label\" prop.');\n    }\n  }\n\n  /**\n   * If `true`, the alert is positioned at the bottom of the window, from edge to edge.\n   */\n  @Prop() readonly fixed: boolean = false;\n\n  @Watch('fixed')\n  validateFixed(isFixed = this.fixed) {\n    checkType(isFixed, 'boolean', 'The post-alert \"fixed\" prop should be a boolean.');\n  }\n\n  /**\n   * The icon to display in the alert. By default, the icon depends on the alert type.\n   *\n   * If `none`, no icon is displayed.\n   */\n  @Prop() readonly icon: string;\n\n  @Watch('icon')\n  validateIcon(icon = this.icon) {\n    checkEmptyOrPattern(icon, /\\d{4}|none/, 'The post-alert \"icon\" prop should be a 4-digits string.');\n  }\n\n  /**\n   * The type of the alert.\n   */\n  @Prop() readonly type: AlertType = 'primary';\n\n  @Watch('type')\n  validateType(type = this.type) {\n    checkEmptyOrOneOf(type, ALERT_TYPES, `The post-alert requires a type form: ${ALERT_TYPES.join(', ')}`);\n  }\n\n  /**\n   * An event emitted when the alert element is dismissed, after the transition.\n   * It has no payload and only relevant for dismissible alerts.\n   */\n  @Event() dismissed: EventEmitter<void>;\n\n  connectedCallback() {\n    this.validateDismissible();\n    this.validateFixed();\n    this.validateIcon();\n    this.validateType();\n  }\n\n  componentWillRender() {\n    this.hasHeading = this.host.querySelectorAll('[slot=heading]').length > 0;\n    this.hasActions = this.host.querySelectorAll('[slot=actions]').length > 0;\n\n    this.classes = `alert alert-${this.type ?? 'primary'}`;\n    if (this.dismissible) this.classes += ' alert-dismissible';\n    if (this.hasActions) this.classes += ' alert-action';\n    if (this.fixed) this.classes += ' alert-fixed-bottom';\n    if (this.icon === 'none') this.classes += ' no-icon';\n  }\n\n  /**\n   * Triggers alert dismissal programmatically (same as clicking on the close button (×)).\n   */\n  @Method()\n  async dismiss() {\n    const dismissal = fadeOut(this.host);\n\n    await dismissal.finished;\n\n    this.host.remove();\n    this.dismissed.emit();\n  }\n\n  render() {\n    const defaultAlertContent = [\n      this.icon && this.icon !== 'none' && (\n        <post-icon key={`${this.alertId}-icon`} name={this.icon} />\n      ),\n      this.hasHeading && (\n        <div key={`${this.alertId}-heading`} class=\"alert-heading\">\n          <slot name=\"heading\"/>\n        </div>\n      ),\n      <slot key={`${this.alertId}-message`}/>\n    ];\n\n    const actionAlertContent = [\n      <div key={`${this.alertId}-content`} class=\"alert-content\">\n        {defaultAlertContent}\n      </div>,\n      <div key={`${this.alertId}-buttons`} class=\"alert-buttons\">\n        <slot name=\"actions\"/>\n      </div>,\n    ];\n\n    return (\n      <Host data-version={version}>\n        <div role=\"alert\" class={this.classes}>\n          {this.dismissible && (\n            <button class=\"btn-close\" onClick={this.onDismissButtonClick}>\n              <span class=\"visually-hidden\">{this.dismissLabel}</span>\n            </button>\n          )}\n\n          {this.hasActions\n            ? actionAlertContent\n            : defaultAlertContent\n          }\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/post-collapsible/post-collapsible.css

@@ -21,6 +21,13 @@
  * will be available as sass-variables
  * but should not be used.
 */
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
 .accordion-item {
   border-block-start: 2px solid hsl(0, 0%, 90%);
 }

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -0,0 +1,194 @@
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+:host, .bg-yellow {
+  --post-bg-opacity: 1;
+  background-color: rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;
+  color: var(--post-contrast-color) !important;
+}
+
+.bg-yellow {
+  --post-contrast-color: #000;
+  --post-contrast-color-inverted: #fff;
+  --post-gray-10: hsl(0, 0%, 90%);
+  --post-gray-20: hsl(0, 0%, 80%);
+  --post-gray-40: hsl(0, 0%, 60%);
+  --post-gray-60: hsl(0, 0%, 40%);
+  --post-gray-80: hsl(0, 0%, 20%);
+  --post-yellow: #fc0;
+  --post-light: #faf9f8;
+  --post-gray: #f4f3f1;
+  --post-dark: hsl(0, 0%, 20%);
+  --post-primary: hsl(0, 0%, 20%);
+  --post-white: #fff;
+  --post-black: #000;
+  --post-success: #2c911c;
+  --post-info: #cce4ee;
+  --post-warning: #f49e00;
+  --post-danger: #a51728;
+  --post-nightblue: #004976;
+  --post-nightblue-bright: #0076a8;
+  --post-petrol: #006d68;
+  --post-petrol-bright: #00968f;
+  --post-coral: #9e2a2f;
+  --post-coral-bright: #e03c31;
+  --post-olive: #716135;
+  --post-olive-bright: #aa9d2e;
+  --post-purple: #80276c;
+  --post-purple-bright: #c5299b;
+  --post-aubergine: #523178;
+  --post-aubergine-bright: #7566a0;
+  --post-contrast-color-rgb: 0, 0, 0;
+  --post-contrast-color-inverted-rgb: 255, 255, 255;
+  --post-gray-10-rgb: 230, 230, 230;
+  --post-gray-20-rgb: 204, 204, 204;
+  --post-gray-40-rgb: 153, 153, 153;
+  --post-gray-60-rgb: 102, 102, 102;
+  --post-gray-80-rgb: 51, 51, 51;
+  --post-yellow-rgb: 255, 204, 0;
+  --post-light-rgb: 250, 249, 248;
+  --post-gray-rgb: 244, 243, 241;
+  --post-dark-rgb: 51, 51, 51;
+  --post-primary-rgb: 51, 51, 51;
+  --post-white-rgb: 255, 255, 255;
+  --post-black-rgb: 0, 0, 0;
+  --post-success-rgb: 44, 145, 28;
+  --post-info-rgb: 204, 228, 238;
+  --post-warning-rgb: 244, 158, 0;
+  --post-danger-rgb: 165, 23, 40;
+  --post-nightblue-rgb: 0, 73, 118;
+  --post-nightblue-bright-rgb: 0, 118, 168;
+  --post-petrol-rgb: 0, 109, 104;
+  --post-petrol-bright-rgb: 0, 150, 143;
+  --post-coral-rgb: 158, 42, 47;
+  --post-coral-bright-rgb: 224, 60, 49;
+  --post-olive-rgb: 113, 97, 53;
+  --post-olive-bright-rgb: 170, 157, 46;
+  --post-purple-rgb: 128, 39, 108;
+  --post-purple-bright-rgb: 197, 41, 155;
+  --post-aubergine-rgb: 82, 49, 120;
+  --post-aubergine-bright-rgb: 117, 102, 160;
+}
+
+:host {
+  --post-contrast-color: #fff;
+  --post-contrast-color-inverted: #000;
+  --post-dark: #faf9f8;
+  --post-light: hsl(0, 0%, 20%);
+  --post-gray-80: hsl(0, 0%, 90%);
+  --post-gray-60: hsl(0, 0%, 80%);
+  --post-gray-40: hsl(0, 0%, 60%);
+  --post-gray-20: hsl(0, 0%, 40%);
+  --post-gray-10: hsl(0, 0%, 20%);
+  --post-contrast-color-rgb: 255, 255, 255;
+  --post-contrast-color-inverted-rgb: 0, 0, 0;
+  --post-dark-rgb: 250, 249, 248;
+  --post-light-rgb: 51, 51, 51;
+  --post-gray-80-rgb: 230, 230, 230;
+  --post-gray-60-rgb: 204, 204, 204;
+  --post-gray-40-rgb: 153, 153, 153;
+  --post-gray-20-rgb: 102, 102, 102;
+  --post-gray-10-rgb: 51, 51, 51;
+}
+
+@layer polyfill {
+  [popover] {
+    position: fixed;
+    z-index: 2147483647;
+    inset: 0;
+    padding: 0.25em;
+    width: fit-content;
+    height: fit-content;
+    border-width: initial;
+    border-color: initial;
+    border-image: initial;
+    border-style: solid;
+    background-color: canvas;
+    color: canvastext;
+    overflow: auto;
+    margin: auto;
+  }
+  [popover]:not(.\:popover-open) {
+    display: none;
+  }
+  [popover]:is(dialog[open]) {
+    display: revert;
+  }
+  [anchor].\:popover-open {
+    inset: auto;
+  }
+  @supports selector([popover]:open) {
+    [popover]:not(.\:popover-open, dialog[open]) {
+      display: revert;
+    }
+    [anchor]:is(:open) {
+      inset: auto;
+    }
+  }
+  @supports selector([popover]:popover-open) {
+    [popover]:not(.\:popover-open, dialog[open]) {
+      display: revert;
+    }
+    [anchor]:is(:popover-open) {
+      inset: auto;
+    }
+  }
+  @supports not (background-color: canvas) {
+    [popover] {
+      background-color: white;
+      color: black;
+    }
+  }
+  @supports (width: -moz-fit-content) {
+    [popover] {
+      width: -moz-fit-content;
+      height: -moz-fit-content;
+    }
+  }
+  @supports not (inset: 0) {
+    [popover] {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+:host {
+  --post-bg-rgb: 51, 51, 51;
+}
+
+div {
+  position: absolute;
+  z-index: 1070;
+  width: max-content;
+  max-width: 30ch;
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  color: inherit;
+  background-color: inherit;
+  border-color: transparent;
+  border-radius: 4px;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.arrow {
+  position: absolute;
+  width: 0.7071067812rem;
+  aspect-ratio: 1/1;
+  background-color: inherit;
+  rotate: 45deg;
+  pointer-events: none;
+  z-index: -1;
+  border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+
+.bg-yellow {
+  --post-bg-rgb: 255, 204, 0;
+}