@uh-design-system/component-library 0.7.1 → 0.7.2-rc.1

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css

@@ -1,3 +1,75 @@
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 :root,
 :host {
   --ds-breakpoint-xSmall: 20rem;
@@ -10,19 +82,22 @@
 :host {
   display: inline-block;
 }
+:host:has(.ds-link-with-arrow--full-width) {
+  width: 100%;
+}
 
 .ds-link-with-arrow {
   display: inline-flex;
   align-items: center;
-  color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-textColor-link);
   letter-spacing: var(--ds-letterSpacing-wide);
   font-weight: var(--ds-fontWeight-semibold);
   font-size: var(--ds-fontSize-16);
   text-decoration-line: none;
 }
 .ds-link-with-arrow:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 @media (min-width: 30rem) {
@@ -30,15 +105,20 @@
     font-size: var(--ds-fontSize-18);
   }
 }
+.ds-link-with-arrow--full-width {
+  width: 100%;
+  justify-content: space-between;
+}
 .ds-link-with-arrow__icon {
   display: inline-flex;
+  flex-shrink: 0;
   width: 2rem;
   height: 2rem;
   line-height: 0;
   align-items: center;
   justify-content: center;
-  color: var(--ds-palette-white);
-  background-color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-textColor-white);
+  background-color: var(--ds-bgColor-primary);
 }
 @media (min-width: 30rem) {
   .ds-link-with-arrow__icon {
@@ -53,10 +133,10 @@
   margin-left: var(--ds-spacing-xSmall);
 }
 :hover slot > .ds-link-with-arrow__icon {
-  background-color: var(--ds-palette-mainBlue-80);
+  background-color: var(--ds-bgColor-primary-hover);
 }
 :active slot > .ds-link-with-arrow__icon {
-  background-color: var(--ds-palette-mainBlue-90);
+  background-color: var(--ds-bgColor-primary-active);
 }
 .ds-link-with-arrow:hover, .ds-link-with-arrow:active {
   text-decoration-line: underline;
@@ -67,8 +147,8 @@
   text-underline-position: from-font;
 }
 .ds-link-with-arrow:hover {
-  color: var(--ds-palette-mainBlue-80);
+  color: var(--ds-textColor-link-hover);
 }
 .ds-link-with-arrow:active, .ds-link-with-arrow:focus-visible {
-  color: var(--ds-palette-mainBlue-90);
+  color: var(--ds-textColor-link-active);
 }

package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js

@@ -6,7 +6,8 @@ import { declareComponentDependencies, idGenerator, transformTagName } from "../
 const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
 export class DsLinkWithArrow {
     inheritedAttributes = {};
-    icon = 'arrow_forward';
+    defaultIcon = 'arrow_forward';
+    icon = this.defaultIcon;
     rel;
     visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
     el;
@@ -16,6 +17,8 @@ export class DsLinkWithArrow {
     dsTarget;
     dsAriaLabel;
     dsTag = 'a';
+    dsFullWidth = false;
+    dsIcon = this.defaultIcon;
     iconSize = '2rem';
     get linkAttributes() {
         if (this.dsTag !== 'a')
@@ -23,7 +26,7 @@ export class DsLinkWithArrow {
         return {
             href: this.dsHref,
             rel: this.rel,
-            target: this.dsTarget
+            target: this.dsTarget,
         };
     }
     setIconSize = () => {
@@ -42,16 +45,21 @@ export class DsLinkWithArrow {
             this.icon = 'arrow_outward';
             this.rel = 'noopener noreferrer';
         }
+        else {
+            this.icon = this.dsIcon;
+        }
     }
     render() {
-        const classes = classNames('ds-link-with-arrow');
+        const classes = classNames('ds-link-with-arrow', {
+            'ds-link-with-arrow--full-width': this.dsFullWidth,
+        });
         const iconClasses = classNames('ds-link-with-arrow__icon', {
             'ds-link-with-arrow__icon--start': this.dsIconPosition === 'start',
             'ds-link-with-arrow__icon--end': this.dsIconPosition === 'end',
         });
         const DsIcon = transformTagName('ds-icon', 'ds-link-with-arrow', this.el);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-link-with-arrow', this.el);
-        return (h(this.dsTag, { key: '0ac18a498b618b19d34678322ffd06a54e8c625a', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '1fff2cf38044e37faa80a943bb2f42ca713652bf', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: 'b8e3df94d512a117bee451c89e78f6345baa54fd', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: '416046d940aa1e926deffae714554584b3271f91', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '3fd4abdcdedd11a9da56d11f203aa6d146323b45', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && h(DsVisuallyHidden, { key: 'de624fe88d1760f941e3db7d0bdc7f7fac15397c', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText())));
+        return (h(this.dsTag, { key: 'e68e7ed503d0eaaf491db3ce726f665176056a8f', class: classes, "aria-label": this.dsAriaLabel, ...this.inheritedAttributes, ...this.linkAttributes }, h("slot", { key: '16a31dd1d81895a04988bcae91ba965d0356f1b1', name: "prefix" }, this.dsIconPosition === 'start' && h(DsIcon, { key: 'c9293c89cf109394f51126b43f7681528ad90976', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), this.dsText, h("slot", { key: 'b26c0bf85a7c5884b87cf0720680cf2c0b1efb8a', name: "suffix" }, this.dsIconPosition === 'end' && h(DsIcon, { key: '96089f23ca51f6d10cd32358fdbce3f921f3897b', dsName: this.icon, class: iconClasses, dsSize: this.iconSize })), opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: '382ed115a490f6c815628a07c4e874868a412ab8', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, visuallyHiddenAssistiveText()))));
     }
     static get is() { return "ds-link-with-arrow"; }
     static get encapsulation() { return "shadow"; }
@@ -192,6 +200,51 @@ export class DsLinkWithArrow {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'a'"
+            },
+            "dsFullWidth": {
+                "type": "boolean",
+                "attribute": "ds-full-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the element should take up the full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsIcon": {
+                "type": "string",
+                "attribute": "ds-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "LinkIcon",
+                    "resolved": "\"arrow_back\" | \"arrow_forward\"",
+                    "references": {
+                        "LinkIcon": {
+                            "location": "global",
+                            "id": "global::LinkIcon"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "this.defaultIcon"
             }
         };
     }

package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.examples.stories.js

@@ -13,7 +13,12 @@ export const OpenInANewTab = {
         dsHref: '#',
         dsTarget: '_blank',
     },
-    play: async ({ canvasElement, step }) => {
+    parameters: {
+        visualTests: {
+            disable: true,
+        },
+    },
+    play: async ({ context, canvasElement, step }) => {
         const shadowRoot = await getShadowRoot(canvasElement, 'ds-link-with-arrow');
         const anchorElem = shadowRoot.querySelector('a');
         const visuallyHiddenElem = shadowRoot.querySelector('ds-visually-hidden');
@@ -23,6 +28,7 @@ export const OpenInANewTab = {
         await step('Anchor should have a visually hidden assistive text', () => {
             expect(visuallyHiddenElem.textContent).toBe('Opens in a new tab');
         });
+        await window.takeScreenshot?.(context.id);
     }
 };
 const iconAtTheEndDOM = html `

package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.features.stories.js

@@ -30,3 +30,12 @@ export const CustomTagName = {
     <custom-ds-link-with-arrow ds-icon-position="end" ds-href="#" ds-text="Link text"></custom-ds-link-with-arrow>
   `
 };
+export const FullWidth = {
+    args: {
+        dsText: 'Full width link with arrow icon',
+        dsHref: '#',
+        dsIconPosition: 'end',
+        dsIcon: 'arrow_forward',
+        dsFullWidth: true,
+    },
+};

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

@@ -1,3 +1,75 @@
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 :root,
 :host {
   --ds-breakpoint-xSmall: 20rem;
@@ -7,7 +79,7 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
-.option {
+.ds-option {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -15,35 +87,38 @@
   padding: 0.625rem var(--ds-spacing-small);
   position: relative;
   cursor: pointer;
-  background-color: var(--ds-palette-white);
-  color: var(--ds-palette-black-95);
+  background-color: var(--ds-bgColor-white);
+  color: var(--ds-textColor-default);
+}
+.ds-option--hidden {
+  display: none;
 }
-.option:hover {
-  background-color: var(--ds-palette-black-10);
+.ds-option:hover {
+  background-color: var(--ds-bgColor-white-hover);
 }
-.option:active {
-  background-color: var(--ds-palette-black-20);
+.ds-option:active {
+  background-color: var(--ds-bgColor-white-active);
 }
-.option.active {
-  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+.ds-option--active {
+  box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.option.selected {
-  background-color: var(--ds-palette-mainBlue-70);
-  color: var(--ds-palette-white);
+.ds-option--selected {
+  background-color: var(--ds-bgColor-primary);
+  color: var(--ds-textColor-white);
 }
-.option.selected .check-icon {
+.ds-option--selected .check-icon {
   visibility: visible;
-  color: var(--ds-palette-white);
+  color: var(--ds-textColor-white);
 }
-.option.selected:hover {
-  background-color: var(--ds-palette-mainBlue-80);
+.ds-option--selected:hover {
+  background-color: var(--ds-bgColor-primary-hover);
 }
-.option.selected:active {
-  background-color: var(--ds-palette-mainBlue-90);
+.ds-option--selected:active {
+  background-color: var(--ds-bgColor-primary-active);
 }
-.option .option-label {
+.ds-option .option-label {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -51,7 +126,7 @@
   grid-column: 1;
   grid-row: 1;
 }
-.option .check-icon {
+.ds-option .check-icon {
   grid-column: 2;
   grid-row: 1/span 2;
   align-self: center;
@@ -59,21 +134,21 @@
   margin-left: auto;
   visibility: hidden;
 }
-.option .option-description {
-  color: var(--ds-palette-black-70);
+.ds-option .option-description {
+  color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
   margin-top: var(--ds-spacing-3xSmall);
   line-height: 1.3;
   grid-column: 1;
   grid-row: 2;
 }
-.option .option-description:not(:empty) {
+.ds-option .option-description:not(:empty) {
   display: block;
 }
-.option.selected .option-description {
-  color: var(--ds-palette-white);
+.ds-option--selected .option-description {
+  color: var(--ds-textColor-white);
 }
-.option .option-check {
+.ds-option .option-check {
   margin-left: var(--ds-spacing-small);
   flex-shrink: 0;
   display: flex;