@uh-design-system/component-library 0.1.0 → 0.2.1-alpha.0

package/dist/collection/components/01-base-components/ds-button/ds-button.js

@@ -0,0 +1,293 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes";
+export class DsButton {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.pressedKeys = new Set();
+        this.value = '';
+        this.variant = 'primary';
+        this.colour = 'blue';
+        this.size = 'medium';
+        this.fontWeight = 'normal';
+        this.icon = '';
+        this.iconPosition = 'start';
+        this.type = 'button';
+        this.disabled = false;
+        this.ariaDisabled = 'false';
+        this.handleKeyDown = (event) => {
+            if (event.repeat) {
+                return;
+            }
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    this.pressedKeys.add(event.key);
+                    this.buttonEl.classList.add(`${this.colour}--active`);
+                    break;
+            }
+        };
+        this.handleKeyUp = (event) => {
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                    this.pressedKeys.delete(event.key);
+                    if (this.pressedKeys.size === 0) {
+                        this.buttonEl.classList.remove(`${this.colour}--active`);
+                    }
+                    break;
+            }
+        };
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el, ['aria-disabled'])), inheritAttributes(this.el, [
+            'autofocus',
+            'form',
+            'formaction',
+            'formenctype',
+            'formmethod',
+            'formnovalidate',
+            'formtarget',
+            'name',
+            'popovertarget',
+            'popovertargetaction',
+        ]));
+    }
+    render() {
+        console.log('render');
+        const classes = classNames(`${this.variant} ${this.colour} ${this.size}`, {
+            'icon-start': this.icon && this.iconPosition === 'start' && this.value,
+            'icon-end': this.icon && this.iconPosition === 'end' && this.value,
+            'icon-only': this.icon && !this.value,
+        });
+        const iconSize = this.size === 'small' ? '1rem' : undefined;
+        const isDisabled = this.disabled || this.ariaDisabled === 'true';
+        return (h("button", Object.assign({ key: 'd85ee424afafcb437fa873e69b7554e315e4cad5', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false' }, this.inheritedAttributes), h("slot", { key: 'c21dc9317ae1970d8e5fcead12b4041a8dc13af0', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: 'cc993dd0b2a12b3243bc8863d754a0efa3b6f1f4', name: this.icon, size: iconSize })), this.value && h("span", { key: 'b8a7bcac21782fd898192d98c605c0eacbfff882', class: "button-value" }, this.value), h("slot", { key: 'e4766fc18983798416533173ceddcbe3c80779ba', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: 'f308fb96c0b0b06036975df25fc5fba59dffe301', name: this.icon, size: iconSize }))));
+    }
+    static get is() { return "ds-button"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<ds-button value=\"button\"></ds-button> // Do this\n<ds-button>button</ds-button> // Instead of this"
+                        }, {
+                            "name": "see",
+                            "text": "{@link https://stackoverflow.com/a/52445966}"
+                        }, {
+                            "name": "see",
+                            "text": "{@link https://github.com/ionic-team/stencil/issues/399}"
+                        }],
+                    "text": "Button text content.\n\nUses a text prop instead of `<slot />` to avoid triggering another render to set correct CSS classes just after initial load."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'supplementary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"supplementary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "colour": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'blue' | 'black' | 'white'",
+                    "resolved": "\"black\" | \"blue\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "colour",
+                "reflect": false,
+                "defaultValue": "'blue'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium'",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
+            "fontWeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "font-weight",
+                "reflect": false,
+                "defaultValue": "'normal'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon-position",
+                "reflect": false,
+                "defaultValue": "'start'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ariaDisabled": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-disabled",
+                "reflect": false,
+                "defaultValue": "'false'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/01-base-components/ds-button/stories/ds-button.examples.stories.js

@@ -0,0 +1,27 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Button/Examples',
+    component: 'ds-button',
+};
+export default meta;
+export const ButtonGroup = {
+    render: () => html `
+    <div class="button-group">
+      <ds-button variant="primary" value="Primary"></ds-button>
+      <ds-button variant="secondary" value="Secondary"></ds-button>
+      <ds-button variant="supplementary" value="Supplementary"></ds-button>
+    </div>
+  `,
+};
+export const ResetAndSubmitButton = {
+    render: () => html `
+    <form>
+      <ds-text-input name="firstname" label="firstname"></ds-text-input>
+      <ds-text-input name="lastname" label="lastname"></ds-text-input>
+      <div class="button-group">
+        <ds-button value="reset" type="reset" variant="secondary"></ds-button>
+        <ds-button value="submit" type="submit"></ds-button>
+      </div>
+    </form>
+  `,
+};

package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js

@@ -0,0 +1,77 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Button/Features',
+    component: 'ds-button',
+    args: {
+        value: 'Button',
+    },
+    argTypes: {
+        value: { table: { disable: true } },
+        variant: { name: 'Variant', table: { disable: true } },
+        colour: { name: 'Colour', table: { disable: true } },
+        size: { name: 'Size', table: { disable: true } },
+        disabled: { name: 'Disabled', table: { disable: true } },
+        icon: { name: 'Icon', table: { disable: true } },
+        iconPosition: { name: 'Icon Position', table: { disable: true } },
+    },
+};
+export default meta;
+export const Primary = {};
+Primary.args = {
+    value: 'Primary',
+    variant: 'primary',
+};
+export const Secondary = {};
+Secondary.args = {
+    value: 'Secondary',
+    variant: 'secondary',
+};
+export const Supplementary = {};
+Supplementary.args = {
+    value: 'Supplementary',
+    variant: 'supplementary',
+};
+export const Blue = {};
+Blue.args = {
+    value: 'Blue',
+    colour: 'blue',
+};
+export const Black = {};
+Black.args = {
+    value: 'Black',
+    colour: 'black',
+};
+export const White = {};
+White.args = {
+    value: 'White',
+    colour: 'white',
+};
+export const Medium = {};
+Medium.args = {
+    value: 'Medium',
+    size: 'medium',
+};
+export const Small = {};
+Small.args = {
+    value: 'Small',
+    size: 'small',
+};
+export const Disabled = {
+    render: () => html `
+    <div class="button-group">
+      <ds-button disabled value="disabled"></ds-button>
+      <ds-button aria-disabled="true" value="aria-disabled"></ds-button>
+    </div>
+  `,
+};
+export const IconStart = {};
+IconStart.args = {
+    value: 'Icon start',
+    icon: 'arrow_forward',
+};
+export const IconEnd = {};
+IconEnd.args = {
+    value: 'Icon end',
+    icon: 'arrow_forward',
+    iconPosition: 'end',
+};

package/dist/collection/components/01-base-components/ds-button/stories/ds-button.stories.js

@@ -0,0 +1,74 @@
+import { icons } from "../../../00-foundations/icons/iconList";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes";
+const buttonAriaAttributes = [
+    'aria-busy',
+    'aria-live',
+    'aria-atomic',
+    'aria-disabled',
+    'aria-expanded',
+    'aria-pressed',
+    'aria-hidden',
+    'aria-label',
+    'aria-labelledby',
+    'aria-controls',
+    'aria-haspopup',
+    'aria-describedby',
+    'aria-relevant',
+    'aria-details',
+];
+const buttonAriaAttributeArgTypes = getAriaAttributeArgTypes(buttonAriaAttributes);
+const meta = {
+    title: 'Base Components/Button',
+    component: 'ds-button',
+};
+export default meta;
+export const Default = {
+    args: {
+        value: 'button',
+        fontWeight: '700',
+        disabled: false,
+    },
+    argTypes: {
+        value: { control: 'text' },
+        disabled: { control: 'boolean' },
+        fontWeight: {
+            control: 'select',
+            options: [400, 600, 650, 700],
+        },
+    },
+};
+export const Playground = {
+    argTypes: Object.assign(Object.assign(Object.assign({}, Default.argTypes), { variant: {
+            options: ['primary', 'secondary', 'supplementary'],
+            control: {
+                type: 'radio',
+            },
+        }, colour: {
+            options: ['blue', 'black', 'white'],
+            control: {
+                type: 'radio',
+            },
+        }, size: {
+            options: ['medium', 'small'],
+            control: {
+                type: 'radio',
+            },
+        }, fontWeight: {
+            control: 'select',
+            options: [400, 600, 650, 700],
+        }, icon: {
+            control: 'select',
+            options: icons.map(icon => icon.name),
+        }, iconPosition: {
+            options: ['start', 'end'],
+            control: {
+                type: 'radio',
+            },
+        }, type: {
+            options: ['submit', 'reset', 'button'],
+            control: {
+                type: 'radio',
+            },
+        } }), buttonAriaAttributeArgTypes),
+    args: Object.assign(Object.assign({}, Default.args), { variant: 'primary', colour: 'blue', size: 'medium', disabled: false, ariaLabel: '', ariaLabelledby: '', icon: '', iconPosition: 'start' }),
+};

package/dist/collection/components/01-base-components/ds-icon/ds-icon.css

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

package/dist/collection/components/01-base-components/ds-icon/ds-icon.js

@@ -2,15 +2,12 @@ import { Fragment, h } from "@stencil/core";
 import { icons } from "../../../components/00-foundations/icons/iconList";
 export class DsIcon {
     constructor() {
-        this.name = undefined;
-        this.colour = undefined;
-        this.size = undefined;
+        this.size = '1.5rem';
         this.title = 'Icon';
         this.role = 'img';
         this.hidden = true;
         this.message = '';
     }
-    // get the icon from the icon list
     getIcon() {
         const selectedIcon = icons.find(icon => icon.name === this.name);
         if (!selectedIcon) {
@@ -23,18 +20,15 @@ export class DsIcon {
         }
         return svgElement ? svgElement.outerHTML : '';
     }
-    // parse the svg string to an svg element
     parseSvg(svgString) {
         const parser = new DOMParser();
         const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
         return svgDoc.querySelector('svg');
     }
-    // get the colour of the icon
     getIconColour() {
-        const cssVariable = `--colour-${this.colour}`;
-        return getComputedStyle(document.documentElement).getPropertyValue(cssVariable) || this.colour;
+        const colour = this.colour ? `var(--${this.colour})` : 'currentColor';
+        return colour;
     }
-    // set the attributes of the icon
     setIconAttributes(svgElement) {
         const size = this.size || '1.5rem';
         const colour = this.getIconColour() || 'currentColor';
@@ -42,7 +36,6 @@ export class DsIcon {
         const title = this.title || '';
         svgElement.setAttribute('style', `fill: ${colour}; width: ${size}; height: ${size};`);
         svgElement.setAttribute('role', role);
-        // if title is available, insert it into the svg element
         const titleText = title || 'Icon';
         const titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title');
         titleElement.textContent = titleText;
@@ -52,7 +45,7 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: '8a2414880389617aa1f009bc7972201ee877ab65' }, h("span", { key: 'e7441e46ef7473d1e7d1a40b70eacc843ee742ea', class: "icon-container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '8d8a1304c6293c49ecc830ec02227dff9852b8c5' }, h("span", { key: '83f992b6b58f24398fa84e0fe62a62e60ea72e1b', class: "icon-container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -82,6 +75,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -99,6 +94,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "colour",
                 "reflect": false
             },
@@ -116,8 +113,11 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'1.5rem'"
             },
             "title": {
                 "type": "string",
@@ -133,6 +133,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "title",
                 "reflect": false,
                 "defaultValue": "'Icon'"
@@ -151,6 +153,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "role",
                 "reflect": false,
                 "defaultValue": "'img'"
@@ -169,6 +173,8 @@ export class DsIcon {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hidden",
                 "reflect": false,
                 "defaultValue": "true"
@@ -181,4 +187,3 @@ export class DsIcon {
         };
     }
 }
-//# sourceMappingURL=ds-icon.js.map

package/dist/collection/components/01-base-components/ds-icon/ds-icon.stories.js

@@ -12,7 +12,7 @@ const meta = {
             name: 'Icon',
         },
         colour: {
-            options: getColourVariables().map(colour => colour.name),
+            options: getColourVariables('palette').map(colour => colour.name),
             control: {
                 type: 'select',
             },
@@ -53,4 +53,3 @@ Default.args = {
     title: 'Icon',
     hidden: true,
 };
-//# sourceMappingURL=ds-icon.stories.js.map