@telesign/boreal-web-components 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/collection/components/actions/bds-button/bds-button.js

@@ -0,0 +1,458 @@
+import { h } from "@stencil/core";
+import { COMPONENT_STATES } from "../../../types/index";
+import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS } from "./types/enum";
+import { CORE_COLORS } from "../../../types/coreColors";
+import { validatePropValue } from "../../../utils/helpers/validateProps";
+/**
+ *  Button component for user interactions, form submissions, supporting various styles, sizes, and states.
+ *
+ * @summary A versatile button component that can be customized with different colors, sizes, variants and states to fit various use cases in the application.
+ * @slot - The content of the button, typically text or an icon.
+ * @slot icon - Content to show an icon at the begining of the button
+ * @slot badge - Slot to place a badge component
+ *
+ * @attr {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
+ * @attr {boolean} disabled - Disables the button when true, preventing user interaction and applying disabled styles.
+ * @attr {string} name - The name attribute for the button, useful for form submissions.
+ * @attr {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
+ * @attr {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
+ * @attr {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
+ * @attr {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+ * @attr {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
+ * @attr {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
+ *
+ * @property {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
+ * @property {boolean} disabled - Disables the button when true, preventing user interaction and applying disabled styles.
+ * @property {string} name - The name attribute for the button, useful for form submissions.
+ * @property {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
+ * @property {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
+ * @property {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
+ * @property {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+ * @property {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
+ * @property {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
+ *
+ * @default 'button' - Default type value
+ * @default 'default' - Default color value
+ * @default 'default' - Default variant value
+ * @default 'medium' - Default size value
+ * @default 'default' - Default status value
+ * @default false - Default disabled value
+ * @default '' - Default label value
+ * @default '' - Default name value
+ * @default false - Default loading value
+ * @default false - Default disclosure value
+ */
+export class BdsButton {
+    constructor() {
+        /** State to manage states */
+        this.currentState = COMPONENT_STATES.DEFAULT;
+        /* Props to manage the button attributes */
+        /** The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes. */
+        this.label = '';
+        /** disabled is a boolean attribute. Disables the button when true, preventing user interaction and applying disabled styles. */
+        this.disabled = false;
+        /** name is a string attribute. The name attribute for the button, useful for form submissions. */
+        this.name = '';
+        /** type is a string attribute. The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'. */
+        this.type = BUTTON_TYPES.BUTTON;
+        /** color is a string attribute. The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'. */
+        this.color = CORE_COLORS.DEFAULT;
+        /** variant is a string attribute. The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.*/
+        this.variant = BUTTON_VARIANTS.DEFAULT;
+        /** size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'. */
+        this.size = BUTTON_SIZES.MEDIUM;
+        /** loading is a boolean attribute. Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false. */
+        this.loading = false;
+        /** disclosure is a boolean attribute. Used to show a chevron down at the of the content */
+        this.disclosure = false;
+        /** Event for listen keydown from button, make navigation easier */
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                this.currentState = COMPONENT_STATES.ACTIVE;
+                event.preventDefault();
+                this.bdsClick.emit(event);
+            }
+        };
+        /** reset status on keyup */
+        this.handleKeyUp = () => {
+            this.currentState = COMPONENT_STATES.DEFAULT;
+        };
+        /** Method to handle custom click events */
+        this.handleClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.disabled || this.loading)
+                return;
+            if (this.type === BUTTON_TYPES.SUBMIT || this.type === BUTTON_TYPES.RESET) {
+                this.processFormClick();
+            }
+            else {
+                this.bdsClick.emit(event);
+            }
+        };
+    }
+    /** Validate props */
+    checkPropValues() {
+        validatePropValue(Object.values(BUTTON_TYPES), BUTTON_TYPES.BUTTON, this.el, 'type');
+        validatePropValue(Object.values(CORE_COLORS), CORE_COLORS.DEFAULT, this.el, 'color');
+        validatePropValue(Object.values(BUTTON_VARIANTS), BUTTON_VARIANTS.DEFAULT, this.el, 'variant');
+        validatePropValue(Object.values(BUTTON_SIZES), BUTTON_SIZES.MEDIUM, this.el, 'size');
+    }
+    /** Before component rendered */
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    /** After component rendered */
+    componentDidLoad() {
+        this.setupFormAssociation();
+    }
+    /** Select closest form or internal form from ElementInternals */
+    setupFormAssociation() {
+        const closestForm = this.el.closest('form');
+        const intForm = this.internals && 'form' in this.internals ? this.internals.form : null;
+        this.internalForm = intForm || closestForm || undefined;
+    }
+    /** Decide which form action to perform based on button type */
+    processFormClick() {
+        if (this.internalForm === undefined) {
+            console.warn('[BorealDS Button] No form found for submit/reset action. Please ensure the button is within a form or that the form is properly associated.');
+            return;
+        }
+        const events = {
+            [BUTTON_TYPES.SUBMIT]: () => {
+                if (typeof this.internalForm?.requestSubmit === 'function') {
+                    this.internalForm.requestSubmit();
+                }
+                else {
+                    this.internalForm?.submit();
+                }
+            },
+            [BUTTON_TYPES.RESET]: () => this.internalForm?.reset(),
+        };
+        const action = events[this.type];
+        if (typeof action === 'function') {
+            action();
+        }
+        return;
+    }
+    /* Method to get the class map for the button based on the props */
+    get getClassMap() {
+        return {
+            'bds-button': true,
+            'bds-button--is-disabled': this.disabled,
+            'bds-button--is-loading': this.loading,
+            [`bds-button--state-${this.currentState}`]: true,
+            [`bds-button--${this.color}`]: true,
+            [`bds-button--var-${this.variant}`]: true,
+            [`bds-button--size-${this.size}`]: true,
+        };
+    }
+    /* render button depends on variant */
+    render() {
+        return (h("button", { key: '4f71bb10d1910ea7b1fc0d64eedb6269e7049a89', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, h("div", { key: 'e28da0b776917c6a2c0efc6c7140a2bfa979b708', class: "bds-button__content" }, h("span", { key: 'ce3d60b504bbf38dc7116560dbfbe51c955f79db', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '23b6bbb9d4fbf8ad5e0e584cddaac477edf4a91e', name: "icon" })), h("slot", { key: 'adcdc5d87a8db4e346d272b843966405692a2a32' }), h("span", { key: 'c908b3a8a18ba4cce854ee20d064178f6420d007', class: "bds-button__content-badge" }, h("slot", { key: 'ce66f69366dc7436a8f8ca1b2b8f55b91a225ec8', name: "badge" })), this.disclosure && (h("span", { key: '921c0f144f2616da238356705c1e5ff634406b87', class: "bds-button__content-icon" }, h("i", { key: '9dc7a891ac4fcb1a73113aeae83976d74cff0c2e', class: "bds-icon-chevron-down" }))))));
+    }
+    static get is() { return "bds-button"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['label']",
+                    "resolved": "string",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "disabled is a boolean attribute. Disables the button when true, preventing user interaction and applying disabled styles."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['name']",
+                    "resolved": "string",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "name is a string attribute. The name attribute for the button, useful for form submissions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['type']",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "type is a string attribute. The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "BUTTON_TYPES.BUTTON"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['color']",
+                    "resolved": "\"default\" | \"error\" | \"primary\" | \"success\"",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "color is a string attribute. The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "CORE_COLORS.DEFAULT"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['variant']",
+                    "resolved": "\"default\" | \"outline\" | \"plain\"",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "variant is a string attribute. The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "BUTTON_VARIANTS.DEFAULT"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['size']",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "BUTTON_SIZES.MEDIUM"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['loading']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "loading is a boolean attribute. Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "disclosure": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['disclosure']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "disclosure is a boolean attribute. Used to show a chevron down at the of the content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disclosure",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsClick",
+                "name": "bdsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "emit event to click"
+                },
+                "complexType": {
+                    "original": "UIEvent",
+                    "resolved": "UIEvent",
+                    "references": {
+                        "UIEvent": {
+                            "location": "global",
+                            "id": "global::UIEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "color",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "variant",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "size",
+                "methodName": "checkPropValues"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/actions/bds-button/types/IButton.js

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

package/dist/collection/components/actions/bds-button/types/enum.js

@@ -0,0 +1,15 @@
+export const BUTTON_VARIANTS = {
+    DEFAULT: 'default',
+    OUTLINE: 'outline',
+    PLAIN: 'plain',
+};
+export const BUTTON_SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+export const BUTTON_TYPES = {
+    BUTTON: 'button',
+    SUBMIT: 'submit',
+    RESET: 'reset',
+};

package/dist/collection/components/actions/bds-button/types/types.js

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

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

@@ -1,3 +1,19 @@
+@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-banner {
   position: relative;
   display: flex;
@@ -98,4 +114,7 @@
 .bds-banner--closing {
   opacity: 0;
   height: 0;
+}
+.bds-banner--hidden {
+  display: none;
 }