@telesign/boreal-web-components 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/collection/components/feedback/bds-status/bds-status.css

@@ -0,0 +1,101 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.bds-status {
+  color: var(--boreal-text-default-ink);
+  text-align: center;
+  font-family: var(--boreal-typography-font-family-primary);
+  font-size: var(--boreal-typography-font-size-xs);
+  font-style: normal;
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-xs);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--boreal-spacing-3xs);
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-xs);
+  min-height: var(--boreal-spacing-ml);
+  border-radius: var(--boreal-radius-xs);
+}
+.bds-status > [slot=icon] {
+  display: none;
+}
+.bds-status--icon > [slot=icon] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--boreal-layout-s);
+  height: var(--boreal-layout-s);
+}
+.bds-status__dot {
+  background-color: var(--boreal-icon-default-light);
+  width: var(--boreal-spacing-xs);
+  height: var(--boreal-spacing-xs);
+  border-radius: var(--boreal-radius-full);
+}
+.bds-status--neutral {
+  color: var(--boreal-text-default-ink);
+  background-color: var(--boreal-ui-default-lighter);
+}
+.bds-status--neutral > .bds-status__dot {
+  background-color: var(--boreal-icon-default-lighter);
+}
+.bds-status--neutral > [slot=icon] {
+  color: var(--boreal-icon-default-lighter);
+}
+.bds-status--neutral > .bds-status__dot {
+  background-color: var(--boreal-icon-default-light);
+}
+.bds-status--pending {
+  color: var(--boreal-text-warning-dark);
+  background-color: var(--boreal-ui-warning-lighter);
+}
+.bds-status--pending > .bds-status__dot {
+  background-color: var(--boreal-icon-warning-base);
+}
+.bds-status--pending > [slot=icon] {
+  color: var(--boreal-icon-warning-base);
+}
+.bds-status--in-progress {
+  color: var(--boreal-text-information-dark);
+  background-color: var(--boreal-ui-info-lighter);
+}
+.bds-status--in-progress > .bds-status__dot {
+  background-color: var(--boreal-icon-info-base);
+}
+.bds-status--in-progress > [slot=icon] {
+  color: var(--boreal-icon-info-base);
+}
+.bds-status--complete {
+  color: var(--boreal-text-success-dark);
+  background-color: var(--boreal-ui-success-lighter);
+}
+.bds-status--complete > .bds-status__dot {
+  background-color: var(--boreal-icon-success-base);
+}
+.bds-status--complete > [slot=icon] {
+  color: var(--boreal-icon-success-base);
+}
+.bds-status--cancel {
+  color: var(--boreal-text-danger-dark);
+  background-color: var(--boreal-ui-danger-lighter);
+}
+.bds-status--cancel > .bds-status__dot {
+  background-color: var(--boreal-icon-danger-base);
+}
+.bds-status--cancel > [slot=icon] {
+  color: var(--boreal-icon-danger-base);
+}

package/dist/collection/components/feedback/bds-status/bds-status.js

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+import { PROCESS_STATUS } from "../../../types/index";
+import { INDICATOR_TYPES } from "./types/enum";
+import { validatePropValue } from "../../../utils/index";
+/**
+ * Status badge component for communicating the current state of an item or process.
+ *
+ * @slot - The label content of the badge, typically plain text.
+ * @slot icon - Icon content rendered before the label.
+ *
+ */
+export class BdsStatus {
+    constructor() {
+        /** state is a string attribute. Controls the visual state variant of the status badge.
+         * Determines the background, accent, and text colors applied to the element.
+         * An invalid value falls back to `"neutral"` and a warning is set on the host element. */
+        this.state = PROCESS_STATUS.NEUTRAL;
+        /** indicator is a string attribute. Controls the type of indicator rendered before the slotted label.
+         * An invalid value falls back to `"none"` and a warning is set on the host element. */
+        this.indicator = INDICATOR_TYPES.NONE;
+    }
+    /** Validates the `state` prop against the set of allowed values.
+     * Falls back to `"neutral"` when an invalid value is detected. */
+    checkPropValues() {
+        validatePropValue(Object.values(PROCESS_STATUS), PROCESS_STATUS.NEUTRAL, this.el, 'state');
+        validatePropValue(Object.values(INDICATOR_TYPES), INDICATOR_TYPES.NONE, this.el, 'indicator');
+    }
+    /** Before component rendered */
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    /* Method to get the class map based on the status prop */
+    get classMap() {
+        return {
+            'bds-status': true,
+            [`bds-status--${this.state}`]: true,
+            [`bds-status--${this.indicator}`]: true,
+        };
+    }
+    render() {
+        return (h(Host, { key: '36cf2dfe777002b02d126d38cb9ed2bce3f828a6', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', h("slot", { key: '99ab1fa89dc28f3ffca617508b5c577abf874d7a', name: "icon" }), h("slot", { key: '8ff726d294fc524950ac0255c71f4ba65b3c9b96' })));
+    }
+    static get is() { return "bds-status"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-status.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-status.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IStatus['state']",
+                    "resolved": "\"cancel\" | \"complete\" | \"in-progress\" | \"neutral\" | \"pending\"",
+                    "references": {
+                        "IStatus": {
+                            "location": "import",
+                            "path": "./types/IStatus",
+                            "id": "src/components/feedback/bds-status/types/IStatus.ts::IStatus",
+                            "referenceLocation": "IStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "state is a string attribute. Controls the visual state variant of the status badge.\nDetermines the background, accent, and text colors applied to the element.\nAn invalid value falls back to `\"neutral\"` and a warning is set on the host element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "PROCESS_STATUS.NEUTRAL"
+            },
+            "indicator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IStatus['indicator']",
+                    "resolved": "\"dot\" | \"icon\" | \"none\"",
+                    "references": {
+                        "IStatus": {
+                            "location": "import",
+                            "path": "./types/IStatus",
+                            "id": "src/components/feedback/bds-status/types/IStatus.ts::IStatus",
+                            "referenceLocation": "IStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "indicator is a string attribute. Controls the type of indicator rendered before the slotted label.\nAn invalid value falls back to `\"none\"` and a warning is set on the host element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator",
+                "defaultValue": "INDICATOR_TYPES.NONE"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "state",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "indicator",
+                "methodName": "checkPropValues"
+            }];
+    }
+}

package/dist/collection/components/feedback/bds-status/types/IStatus.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/feedback/bds-status/types/enum.js

@@ -0,0 +1,5 @@
+export const INDICATOR_TYPES = {
+    NONE: 'none',
+    DOT: 'dot',
+    ICON: 'icon',
+};

package/dist/collection/components/feedback/bds-status/types/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/feedback/bds-tag/bds-tag.css

@@ -0,0 +1,202 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.bds-tag {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--boreal-spacing-3xs);
+  padding: var(--boreal-spacing-3xs) var(--boreal-spacing-3xs) var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);
+  border-radius: var(--boreal-radius-m);
+  cursor: default;
+  max-width: 100%;
+  min-width: 0;
+  font-family: var(--boreal-typography-font-family-primary);
+  font-size: var(--boreal-typography-font-size-xs);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-xs);
+}
+.bds-tag:hover:not(.bds-tag--selected):not(.bds-tag--disabled) {
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-tag:focus:not(.bds-tag--selected) {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-tag--selected {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-tag__icon {
+  font-size: var(--boreal-typography-font-size-md);
+  max-height: var(--boreal-spacing-m);
+}
+.bds-tag__icon:empty {
+  display: none;
+}
+.bds-tag__text {
+  margin-right: var(--boreal-spacing-2xs);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bds-tag__close-button {
+  display: flex;
+  padding: var(--boreal-spacing-3xs);
+  width: var(--boreal-spacing-s);
+  height: var(--boreal-spacing-s);
+  box-sizing: content-box;
+  border-radius: var(--boreal-radius-full);
+  border: 0px solid transparent;
+  background-color: transparent;
+  opacity: 0.5;
+  cursor: pointer;
+}
+.bds-tag__close-button:hover {
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  background-color: var(--boreal-ui-inverse);
+  opacity: 0.5;
+}
+.bds-tag__close-button:focus {
+  background-color: var(--boreal-ui-inverse);
+  opacity: 0.5;
+  outline: none;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-tag__close-button:active {
+  background-color: var(--boreal-ui-inverse);
+  opacity: 0.5;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset, 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+}
+.bds-tag--disabled {
+  cursor: not-allowed;
+}
+.bds-tag--disabled .bds-tag__close-button {
+  pointer-events: none;
+}
+.bds-tag--gray {
+  background-color: var(--boreal-extended-onyx-light);
+  color: var(--boreal-extended-onyx-dark);
+}
+.bds-tag--gray .bds-tag__close-button {
+  color: var(--boreal-extended-onyx-dark);
+}
+.bds-tag--gray.bds-tag--disabled {
+  color: var(--boreal-extended-onyx-base);
+  background-color: var(--boreal-extended-onyx-lighter);
+}
+.bds-tag--gray.bds-tag--disabled .bds-tag__close-button {
+  color: var(--boreal-extended-onyx-base);
+}
+.bds-tag--purple {
+  background-color: var(--boreal-extended-purple-light);
+  color: var(--boreal-extended-purple-dark);
+}
+.bds-tag--purple .bds-tag__close-button {
+  color: var(--boreal-extended-purple-dark);
+}
+.bds-tag--purple.bds-tag--disabled {
+  color: var(--boreal-extended-purple-light);
+  background-color: var(--boreal-extended-purple-lighter);
+}
+.bds-tag--purple.bds-tag--disabled .bds-tag__close-button {
+  color: var(--boreal-extended-purple-light);
+}
+.bds-tag--rose {
+  background-color: var(--boreal-extended-rose-light);
+  color: var(--boreal-extended-rose-dark);
+}
+.bds-tag--rose .bds-tag__close-button {
+  color: var(--boreal-extended-rose-dark);
+}
+.bds-tag--rose.bds-tag--disabled {
+  color: var(--boreal-extended-rose-light);
+  background-color: var(--boreal-extended-rose-lighter);
+}
+.bds-tag--rose.bds-tag--disabled .bds-tag__close-button {
+  color: var(--boreal-extended-rose-light);
+}
+.bds-tag--lime {
+  background-color: var(--boreal-extended-lime-light);
+  color: var(--boreal-extended-lime-dark);
+}
+.bds-tag--lime .bds-tag__close-button {
+  color: var(--boreal-extended-lime-dark);
+}
+.bds-tag--lime.bds-tag--disabled {
+  color: var(--boreal-extended-lime-light);
+  background-color: var(--boreal-extended-lime-lighter);
+}
+.bds-tag--lime.bds-tag--disabled .bds-tag__close-button {
+  color: var(--boreal-extended-lime-light);
+}
+.bds-tag--cobalt {
+  background-color: var(--boreal-extended-cobalt-light);
+  color: var(--boreal-extended-cobalt-dark);
+}
+.bds-tag--cobalt .bds-tag__close-button {
+  color: var(--boreal-extended-cobalt-dark);
+}
+.bds-tag--cobalt.bds-tag--disabled {
+  color: var(--boreal-extended-cobalt-light);
+  background-color: var(--boreal-extended-cobalt-lighter);
+}
+.bds-tag--cobalt.bds-tag--disabled .bds-tag__close-button {
+  color: var(--boreal-extended-cobalt-light);
+}
+.bds-tag--orange {
+  background-color: var(--boreal-extended-orange-light);
+  color: var(--boreal-extended-orange-dark);
+}
+.bds-tag--orange .bds-tag__close-button {
+  color: var(--boreal-extended-orange-dark);
+}
+.bds-tag--orange.bds-tag--disabled {
+  color: var(--boreal-extended-orange-light);
+  background-color: var(--boreal-extended-orange-lighter);
+}
+.bds-tag--orange.bds-tag--disabled .bds-tag__close-button {
+  color: var(--boreal-extended-orange-light);
+}
+.bds-tag--teal {
+  background-color: var(--boreal-extended-teal-light);
+  color: var(--boreal-extended-teal-dark);
+}
+.bds-tag--teal .bds-tag__close-button {
+  color: var(--boreal-extended-teal-dark);
+}
+.bds-tag--teal.bds-tag--disabled {
+  color: var(--boreal-extended-teal-light);
+  background-color: var(--boreal-extended-teal-lighter);
+}
+.bds-tag--teal.bds-tag--disabled .bds-tag__close-button {
+  color: var(--boreal-extended-teal-light);
+}
+.bds-tag--cyan {
+  background-color: var(--boreal-extended-cyan-light);
+  color: var(--boreal-extended-cyan-dark);
+}
+.bds-tag--cyan .bds-tag__close-button {
+  color: var(--boreal-extended-cyan-dark);
+}
+.bds-tag--cyan.bds-tag--disabled {
+  color: var(--boreal-extended-cyan-light);
+  background-color: var(--boreal-extended-cyan-lighter);
+}
+.bds-tag--cyan.bds-tag--disabled .bds-tag__close-button {
+  color: var(--boreal-extended-cyan-light);
+}