@uh-design-system/component-library 0.2.4 → 0.4.0

package/dist/types/components.d.ts

@@ -13,6 +13,7 @@ export namespace Components {
         "borderAligned": boolean;
         "closeButtonLabel": string;
         "headingLevel": number;
+        "hideTopBorder": boolean;
         "openByDefault": boolean;
         "useCloseButton": boolean;
         "variant": 'default' | 'compact';
@@ -22,6 +23,7 @@ export namespace Components {
         "colour": 'blue' | 'black' | 'white';
         "disabled": boolean;
         "fontWeight": string;
+        "fullWidth": boolean;
         "icon": string;
         "iconPosition": 'start' | 'end';
         "size": 'small' | 'medium';
@@ -37,11 +39,30 @@ export namespace Components {
     }
     interface DsIcon {
         "colour": string;
+        "dsTitle": string;
         "hidden": boolean;
         "name": string;
         "role": string;
         "size": string;
-        "title": string;
+    }
+    interface DsLink {
+        "download"?: boolean;
+        "href": string;
+        "icon": string;
+        "iconPosition": LinkIconPosition;
+        "language"?: LinkLang;
+        "size"?: LinkSize;
+        "target"?: LinkTarget;
+        "text"?: string;
+        "variant": LinkVariant;
+        "weight": LinkWeight;
+    }
+    interface DsLinkWithArrow {
+        "href": string;
+        "iconPosition": LinkIconPosition;
+        "language"?: LinkLang;
+        "target"?: LinkTarget;
+        "text"?: string;
     }
     interface DsTextInput {
         "actionButtonAriaLabel"?: string;
@@ -61,6 +82,8 @@ export namespace Components {
         "maxlength"?: number;
         "min"?: number;
         "name": string;
+        "optional"?: boolean;
+        "optionalText"?: string;
         "pattern"?: string;
         "placeholder"?: string;
         "prefixText"?: string;
@@ -94,6 +117,18 @@ declare global {
         prototype: HTMLDsIconElement;
         new (): HTMLDsIconElement;
     };
+    interface HTMLDsLinkElement extends Components.DsLink, HTMLStencilElement {
+    }
+    var HTMLDsLinkElement: {
+        prototype: HTMLDsLinkElement;
+        new (): HTMLDsLinkElement;
+    };
+    interface HTMLDsLinkWithArrowElement extends Components.DsLinkWithArrow, HTMLStencilElement {
+    }
+    var HTMLDsLinkWithArrowElement: {
+        prototype: HTMLDsLinkWithArrowElement;
+        new (): HTMLDsLinkWithArrowElement;
+    };
     interface HTMLDsTextInputElement extends Components.DsTextInput, HTMLStencilElement {
     }
     var HTMLDsTextInputElement: {
@@ -110,6 +145,8 @@ declare global {
         "ds-accordion": HTMLDsAccordionElement;
         "ds-button": HTMLDsButtonElement;
         "ds-icon": HTMLDsIconElement;
+        "ds-link": HTMLDsLinkElement;
+        "ds-link-with-arrow": HTMLDsLinkWithArrowElement;
         "ds-text-input": HTMLDsTextInputElement;
         "ds-visually-hidden": HTMLDsVisuallyHiddenElement;
     }
@@ -120,6 +157,7 @@ declare namespace LocalJSX {
         "borderAligned"?: boolean;
         "closeButtonLabel"?: string;
         "headingLevel"?: number;
+        "hideTopBorder"?: boolean;
         "openByDefault"?: boolean;
         "useCloseButton"?: boolean;
         "variant"?: 'default' | 'compact';
@@ -129,6 +167,7 @@ declare namespace LocalJSX {
         "colour"?: 'blue' | 'black' | 'white';
         "disabled"?: boolean;
         "fontWeight"?: string;
+        "fullWidth"?: boolean;
         "icon"?: string;
         "iconPosition"?: 'start' | 'end';
         "size"?: 'small' | 'medium';
@@ -144,11 +183,30 @@ declare namespace LocalJSX {
     }
     interface DsIcon {
         "colour"?: string;
+        "dsTitle"?: string;
         "hidden"?: boolean;
         "name"?: string;
         "role"?: string;
         "size"?: string;
-        "title"?: string;
+    }
+    interface DsLink {
+        "download"?: boolean;
+        "href": string;
+        "icon"?: string;
+        "iconPosition"?: LinkIconPosition;
+        "language"?: LinkLang;
+        "size"?: LinkSize;
+        "target"?: LinkTarget;
+        "text"?: string;
+        "variant"?: LinkVariant;
+        "weight"?: LinkWeight;
+    }
+    interface DsLinkWithArrow {
+        "href": string;
+        "iconPosition"?: LinkIconPosition;
+        "language"?: LinkLang;
+        "target"?: LinkTarget;
+        "text"?: string;
     }
     interface DsTextInput {
         "actionButtonAriaLabel"?: string;
@@ -167,6 +225,8 @@ declare namespace LocalJSX {
         "maxlength"?: number;
         "min"?: number;
         "name"?: string;
+        "optional"?: boolean;
+        "optionalText"?: string;
         "pattern"?: string;
         "placeholder"?: string;
         "prefixText"?: string;
@@ -183,6 +243,8 @@ declare namespace LocalJSX {
         "ds-accordion": DsAccordion;
         "ds-button": DsButton;
         "ds-icon": DsIcon;
+        "ds-link": DsLink;
+        "ds-link-with-arrow": DsLinkWithArrow;
         "ds-text-input": DsTextInput;
         "ds-visually-hidden": DsVisuallyHidden;
     }
@@ -194,6 +256,8 @@ declare module "@stencil/core" {
             "ds-accordion": LocalJSX.DsAccordion & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
             "ds-button": LocalJSX.DsButton & JSXBase.HTMLAttributes<HTMLDsButtonElement>;
             "ds-icon": LocalJSX.DsIcon & JSXBase.HTMLAttributes<HTMLDsIconElement>;
+            "ds-link": LocalJSX.DsLink & JSXBase.HTMLAttributes<HTMLDsLinkElement>;
+            "ds-link-with-arrow": LocalJSX.DsLinkWithArrow & JSXBase.HTMLAttributes<HTMLDsLinkWithArrowElement>;
             "ds-text-input": LocalJSX.DsTextInput & JSXBase.HTMLAttributes<HTMLDsTextInputElement>;
             "ds-visually-hidden": LocalJSX.DsVisuallyHidden & JSXBase.HTMLAttributes<HTMLDsVisuallyHiddenElement>;
         }

package/dist/types/introduction/introduction.stories.d.ts

@@ -0,0 +1,10 @@
+import IntroDocs from './Introduction.mdx';
+declare const _default: {
+    title: string;
+    parameters: {
+        docs: {
+            page: typeof IntroDocs;
+        };
+    };
+};
+export default _default;

package/dist/types/utils/link/linkUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const opensInNewTab: (target: string) => target is "_blank";
+export declare const visuallyHiddenAssistiveText: (lang: string) => "Avautuu uuteen välilehteen" | "Öppnas i en ny flik" | "Opens in a new tab";

package/dist/types/utils/typography/typographyUtils.d.ts

@@ -14,3 +14,4 @@ export declare const createCategorySection: (category: string, fonts: {
     variable: string;
     value: string;
 }[], renderedCategories: Set<string>) => HTMLDivElement;
+export declare const getCSSClasses: (prefix: string) => string[];

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

@@ -4,3 +4,4 @@ export declare function generateLoremIpsum({ paragraphs, wordsPerParagraph, star
     startWithLorem?: boolean;
     consistent?: boolean;
 }): string;
+export declare function remToPx(remString: any): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uh-design-system/component-library",
-  "version": "0.2.4",
+  "version": "0.4.0",
   "publishConfig": {
     "access": "public"
   },
@@ -44,8 +44,6 @@
     "start": "stencil build --dev --watch --serve",
     "test-storybook": "test-storybook",
     "test-storybook:update": "rm -rf __snapshots__ && test-storybook -u",
-    "test-storybook:docker": "./scripts/run-tests-in-docker.sh",
-    "test-storybook:update:docker": "rm -rf __snapshots__ && ./scripts/run-tests-in-docker.sh -u",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
@@ -95,5 +93,5 @@
     "glob": "^9.0.0"
   },
   "license": "MIT",
-  "gitHead": "24113d381bbbe66bbb108da280cd3a2df0a9def5"
+  "gitHead": "66cf27f598c9c38e05082f53e4f2e24f2dc909e3"
 }

package/dist/cjs/ds-button_2.cjs.entry.js

@@ -1,170 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-fd4f6cd2.js');
-const index$1 = require('./index-5b0b9d4c.js');
-
-const inheritAttributes = (el, attributes = []) => {
-    const attributeObject = {};
-    attributes.forEach(attr => {
-        if (el.hasAttribute(attr)) {
-            const value = el.getAttribute(attr);
-            if (value !== null) {
-                attributeObject[attr] = el.getAttribute(attr);
-            }
-            el.removeAttribute(attr);
-        }
-    });
-    return attributeObject;
-};
-const ariaAttributes = [
-    'role',
-    'aria-activedescendant',
-    'aria-atomic',
-    'aria-autocomplete',
-    'aria-braillelabel',
-    'aria-brailleroledescription',
-    'aria-busy',
-    'aria-checked',
-    'aria-colcount',
-    'aria-colindex',
-    'aria-colindextext',
-    'aria-colspan',
-    'aria-controls',
-    'aria-current',
-    'aria-describedby',
-    'aria-description',
-    'aria-details',
-    'aria-disabled',
-    'aria-errormessage',
-    'aria-expanded',
-    'aria-flowto',
-    'aria-haspopup',
-    'aria-hidden',
-    'aria-invalid',
-    'aria-keyshortcuts',
-    'aria-label',
-    'aria-labelledby',
-    'aria-level',
-    'aria-live',
-    'aria-multiline',
-    'aria-multiselectable',
-    'aria-orientation',
-    'aria-owns',
-    'aria-placeholder',
-    'aria-posinset',
-    'aria-pressed',
-    'aria-readonly',
-    'aria-relevant',
-    'aria-required',
-    'aria-roledescription',
-    'aria-rowcount',
-    'aria-rowindex',
-    'aria-rowindextext',
-    'aria-rowspan',
-    'aria-selected',
-    'aria-setsize',
-    'aria-sort',
-    'aria-valuemax',
-    'aria-valuemin',
-    'aria-valuenow',
-    'aria-valuetext',
-];
-const inheritAriaAttributes = (el, ignoreList) => {
-    let attributesToInherit = [...ariaAttributes];
-    if (ignoreList && ignoreList.length > 0) {
-        attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
-    }
-    return inheritAttributes(el, attributesToInherit);
-};
-
-const dsButtonCss = ".sc-ds-button-h{display:inline-block}button.sc-ds-button{align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}button.sc-ds-button:focus{outline-offset:2px;outline-width:2px}button.icon-only.sc-ds-button{padding-left:0;padding-right:0;aspect-ratio:1;justify-content:center}button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}button.primary.blue.sc-ds-button:active,button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.primary.blue[aria-disabled=true].sc-ds-button,button.primary.blue.disabled.sc-ds-button,button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}button.primary.black.sc-ds-button:active,button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.primary.black[aria-disabled=true].sc-ds-button,button.primary.black.disabled.sc-ds-button,button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}button.primary.white.sc-ds-button:active,button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.primary.white[aria-disabled=true].sc-ds-button,button.primary.white.disabled.sc-ds-button,button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}button.secondary.blue.sc-ds-button:active,button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.secondary.blue[aria-disabled=true].sc-ds-button,button.secondary.blue.disabled.sc-ds-button,button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}button.secondary.black.sc-ds-button:active,button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.secondary.black[aria-disabled=true].sc-ds-button,button.secondary.black.disabled.sc-ds-button,button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}button.secondary.white.sc-ds-button:active,button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.secondary.white[aria-disabled=true].sc-ds-button,button.secondary.white.disabled.sc-ds-button,button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:0;padding-left:0}button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}button.supplementary.blue.sc-ds-button:active,button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.supplementary.blue[aria-disabled=true].sc-ds-button,button.supplementary.blue.disabled.sc-ds-button,button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:0;padding-left:0}button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}button.supplementary.black.sc-ds-button:active,button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.supplementary.black[aria-disabled=true].sc-ds-button,button.supplementary.black.disabled.sc-ds-button,button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:0;padding-left:0}button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}button.supplementary.white.sc-ds-button:active,button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.supplementary.white[aria-disabled=true].sc-ds-button,button.supplementary.white.disabled.sc-ds-button,button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}button.small.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}button.small.icon-only.sc-ds-button{width:32px}button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}";
-const DsButtonStyle0 = dsButtonCss;
-
-const DsButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    inheritedAttributes = {};
-    buttonEl;
-    pressedKeys = new Set();
-    get el() { return index.getElement(this); }
-    value = '';
-    variant = 'primary';
-    colour = 'blue';
-    size = 'medium';
-    fontWeight = 'normal';
-    icon = '';
-    iconPosition = 'start';
-    type = 'button';
-    disabled = false;
-    ariaDisabled = 'false';
-    componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAriaAttributes(this.el, ['aria-disabled']),
-            ...inheritAttributes(this.el, [
-                'autofocus',
-                'form',
-                'formaction',
-                'formenctype',
-                'formmethod',
-                'formnovalidate',
-                'formtarget',
-                'name',
-                'popovertarget',
-                'popovertargetaction',
-            ]),
-        };
-    }
-    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;
-        }
-    };
-    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;
-        }
-    };
-    render() {
-        const classes = index$1.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 (index.h("button", { key: 'f987b8884e1aab8959c2157039996019b42f826a', 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 }, index.h("slot", { key: '6b87d0e8e45f28f5a3dfb54cbb69d6c7acc3ef15', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '32dd7550a1b1203e7a6b24dd0e7ef4516ee6ed45', name: this.icon, size: iconSize })), this.value && index.h("span", { key: 'ba87d4898f376ff0b1d4fa43258c36fb034ee88c', class: "button-value" }, this.value), index.h("slot", { key: 'ba2a58d944a9e11aaade04d25dad9c544a5966ea', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: 'e30f0970737c93c2153e9ae68c87c47c3c4a2329', name: this.icon, size: iconSize }))));
-    }
-};
-DsButton.style = DsButtonStyle0;
-
-const dsVisuallyHiddenCss = ":host{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
-const DsVisuallyHiddenStyle0 = dsVisuallyHiddenCss;
-
-const DsVisuallyHidden = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("slot", { key: '390610148832811748f7700f0d438b257bdb354d' }));
-    }
-};
-DsVisuallyHidden.style = DsVisuallyHiddenStyle0;
-
-exports.ds_button = DsButton;
-exports.ds_visually_hidden = DsVisuallyHidden;