@uh-design-system/component-library 0.3.1 → 0.4.1

package/dist/collection/accessibility/stories/ariaLabelledBy.stories.js

@@ -0,0 +1,49 @@
+import { html } from "lit";
+import { litTemplateResultToString } from "../../utils/utils";
+const meta = {
+    title: 'Accessibility/aria-labelledby',
+};
+export default meta;
+const howToAriaLabelledByDOM = html `
+  <div class="ds-sb-how-to-aria-labelled-by">
+    <div class="ds-sb-how-to-aria-labelled-by__card">
+      <h3 id="stu_1">Student 1</h3>
+      <p>Faculty of Science</p>
+      <ds-button id="button1" aria-labelledby="button1 stu_1" value="Add"></ds-button>
+    </div>
+    <div class="ds-sb-how-to-aria-labelled-by__card">
+      <h3 id="stu_2">Student 2</h3>
+      <p>Faculty of Arts</p>
+      <ds-button id="button2" aria-labelledby="button2 stu_2" value="Add"></ds-button>
+    </div>
+  </div>
+`;
+export const HowToAriaLabelledBy = {
+    name: 'How to "aria-labelledby"',
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(howToAriaLabelledByDOM),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-how-to-aria-labelled-by {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: 1fr;
+
+        @media (min-width: 60rem) {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+      .ds-sb-how-to-aria-labelled-by .ds-sb-how-to-aria-labelled-by__card {
+        padding: 1em;
+        background-color: #f7f7f7;
+        outline: 1px solid;
+      }
+    </style>
+    ${howToAriaLabelledByDOM}
+  `,
+};

package/dist/collection/accessibility/stories/naming.stories.js

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import { litTemplateResultToString } from "../../utils/utils";
+const meta = {
+    title: 'Accessibility/Naming',
+};
+export default meta;
+const howNamingWorksDOM = html `
+  <div class="ds-sb-how-naming-works">
+    <div>
+      <ds-button value="Continue"></ds-button>
+      <!The button gets it's accessible name from its text content>
+    </div>
+
+    <ds-text-input type="text" label="First name"></ds-text-input>
+    <!The text input gets its accessible name from the label/for structure>
+
+    <ds-link href="#" text="Apply to University of Helsinki"></ds-link>
+    <!The link gets it's accessible name from its text content>
+  </div>
+`;
+export const HowNamingWorks = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(howNamingWorksDOM)
+            }
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-how-naming-works {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+    </style>
+    ${howNamingWorksDOM}
+  `,
+};

package/dist/collection/collection-manifest.json

@@ -1,8 +1,11 @@
 {
   "entries": [
+    "components/01-base-components/ds-checkbox/ds-checkbox.js",
+    "components/01-base-components/ds-checkbox-group/ds-checkbox-group.js",
     "components/01-base-components/ds-accordion/ds-accordion.js",
     "components/01-base-components/ds-button/ds-button.js",
     "components/01-base-components/ds-icon/ds-icon.js",
+    "components/01-base-components/ds-input-validity/ds-input-validity.js",
     "components/01-base-components/ds-link/ds-link.js",
     "components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js",
     "components/01-base-components/ds-text-input/ds-text-input.js",

package/dist/collection/components/00-foundations/icons/categories/information.js

@@ -49,6 +49,8 @@ import PieChartIcon from "@material-symbols/svg-700/sharp/pie_chart.svg";
 import PieChartFillIcon from "@material-symbols/svg-700/sharp/pie_chart-fill.svg";
 import TableIcon from "@material-symbols/svg-700/sharp/table.svg";
 import TableFillIcon from "@material-symbols/svg-700/sharp/table-fill.svg";
+import DSCheckSmall from "../../../../../custom-icons/check_small.svg";
+import DSCheckIndeterminateSmall from "../../../../../custom-icons/check_indeterminate_small.svg";
 export const icons = [
     { name: 'calendar_month', component: CalendarMonthIcon, category: category },
     { name: 'calendar_month_fill', component: CalendarMonthFillIcon, category: category },
@@ -100,4 +102,6 @@ export const icons = [
     { name: 'pie_chart_fill', component: PieChartFillIcon, category: category },
     { name: 'table', component: TableIcon, category: category },
     { name: 'table_fill', component: TableFillIcon, category: category },
+    { name: 'ds_check_small', component: DSCheckSmall, category: category },
+    { name: 'ds_check_indeterminate_small', component: DSCheckIndeterminateSmall, category: category },
 ];

package/dist/collection/components/00-foundations/typography/stories/typography.stories.js

@@ -0,0 +1,195 @@
+import "../_typography.scss";
+import "../_base.scss";
+import "../_headings.scss";
+import "../_bodyText.scss";
+import { getTypographyVariables, createCategorySection, categories, getHeadingVariables, headingSizes } from "../../../../utils/typography/typographyUtils";
+import { html } from "lit";
+import { formatAsPx, generateLoremIpsum, pxToRem } from "../../../../utils/utils";
+const meta = {
+    title: 'Foundations/Typography',
+};
+export default meta;
+export const TokenClasses = {
+    argTypes: {
+        headingExample: {
+            name: 'Heading',
+            control: 'text',
+        },
+        textExample: {
+            name: 'Text',
+            control: 'text',
+        },
+    },
+    args: {
+        headingExample: generateLoremIpsum(),
+        textExample: generateLoremIpsum({ paragraphs: 2, wordsPerParagraph: 20, consistent: true }),
+    },
+    render: ({ headingExample, textExample }) => html `
+    <div>
+      <h2>Heading styles</h2>
+      <div class="ds-heading--2xLarge">${headingExample}</div>
+      <div class="ds-heading--xLarge">${headingExample}</div>
+      <div class="ds-heading--large">${headingExample}</div>
+      <div class="ds-heading--medium">${headingExample}</div>
+      <div class="ds-heading--small">${headingExample}</div>
+      <div class="ds-heading--xSmall">${headingExample}</div>
+
+      <h2>Text Styles</h2>
+      <h3>Regular</h3>
+      <p class="ds-text--2xl-regular">${textExample} (2XL Regular)</p>
+      <p class="ds-text--xl-regular">${textExample} (XL Regular)</p>
+      <p class="ds-text--lg-regular">${textExample} (Large Regular)</p>
+      <p class="ds-text--md-regular">${textExample} (Medium Regular)</p>
+      <p class="ds-text--sm-regular">${textExample} (Small Regular)</p>
+      <p class="ds-text--xs-regular">${textExample} (XS Regular)</p>
+      <h3>SemiBold</h3>
+      <p class="ds-text--2xl-semibold">${textExample} (2XL Semibold)</p>
+      <p class="ds-text--xl-semibold">${textExample} (XL Semibold)</p>
+      <p class="ds-text--lg-semibold">${textExample} (Large Semibold)</p>
+      <p class="ds-text--md-semibold">${textExample} (Medium Semibold)</p>
+      <p class="ds-text--sm-semibold">${textExample} (Small Semibold)</p>
+      <p class="ds-text--xs-semibold">${textExample} (XS Semibold)</p>
+      <h3>Bold</h3>
+      <p class="ds-text--2xl-bold">${textExample} (2XL Bold)</p>
+      <p class="ds-text--xl-bold">${textExample} (XL Bold)</p>
+      <p class="ds-text--lg-bold">${textExample} (Large Bold)</p>
+      <p class="ds-text--md-bold">${textExample} (Medium Bold)</p>
+      <p class="ds-text--sm-bold">${textExample} (Small Bold)</p>
+      <p class="ds-text--xs-bold">${textExample} (XS Bold)</p>
+
+      <h2>Bodytext</h2>
+      <p class="ds-bodyText--2xLarge">${textExample} (2xLarge)</p>
+      <p class="ds-bodyText--xLarge">${textExample} (xLarge)</p>
+      <p class="ds-bodyText--large">${textExample} (large)</p>
+      <p class="ds-bodyText--medium">${textExample} (medium)</p>
+      <p class="ds-bodyText--small">${textExample} (small)</p>
+
+      <h2>Fontweight</h2>
+      <p class="ds-font--regular">${textExample} (Regular)</p>
+      <p class="ds-font--semibold">${textExample} (Semibold)</p>
+      <p class="ds-font--semibold-plus">${textExample} (SemiboldPlus)</p>
+      <p class="ds-font--bold">${textExample} (Bold)</p>
+
+      <h2>LetterSpacing</h2>
+      <p class="ds-tracking--xtight">${textExample} (xTight Spacing)</p>
+      <p class="ds-tracking--tight">${textExample} (Tight Spacing)</p>
+      <p class="ds-tracking--normal">${textExample} (Normal Spacing)</p>
+      <p class="ds-tracking--wide">${textExample} (Wide Spacing)</p>
+      <p class="ds-tracking--xwide">${textExample} (xWide Spacing)</p>
+
+      <h2>Lineheight</h2>
+      <p class="ds-leading--small">${textExample} (Small Line Height)</p>
+      <p class="ds-leading--medium">${textExample} (Medium Line Height)</p>
+      <p class="ds-leading--large">${textExample} (Large Line Height)</p>
+      <p class="ds-leading--xLarge">${textExample} (xLarge Line Height)</p>
+    </div>
+  `,
+};
+const renderTypography = () => {
+    const container = document.createElement('div');
+    const typographyVariables = getTypographyVariables();
+    const renderedCategories = new Set();
+    const categoryNames = [...new Set(Object.values(categories)), 'Other'];
+    categoryNames.forEach(category => {
+        const categoryTypo = typographyVariables.filter(spacing => spacing.category === category);
+        if (categoryTypo.length > 0) {
+            container.appendChild(createCategorySection(category, categoryTypo, renderedCategories));
+        }
+    });
+    return container;
+};
+export const Typography = {
+    parameters: {
+        docs: {
+            source: {
+                code: renderTypography().outerHTML,
+            },
+        },
+    },
+    render: renderTypography,
+};
+const renderHeadingDetails = (size, heading) => {
+    const variables = getHeadingVariables(size, heading === 'desktop');
+    return html `
+    <style>
+      .ds-sb-heading__details__content {
+        display: grid;
+        gap: 0 1rem;
+        grid-template-columns: auto auto 1fr;
+      }
+      .ds-sb-heading__details__content span.ds-sb-heading__details__content__two-col {
+        grid-column: span 2;
+      }
+    </style>
+    <div>
+      <h4 class="ds-heading-xSmall">${heading}</h4>
+      <div class="ds-text--sm-regular ds-sb-heading__details__content">
+        <span class="ds-text--sm-regular">Family</span>
+        <span class="ds-text--sm-semibold ds-sb-heading__details__content__two-col">${variables['font-family']}</span>
+
+        <span class="ds-text--sm-regular">Size</span>
+        <span class="ds-text--sm-semibold">${formatAsPx(variables['font-size'])}</span>
+        <span class="ds-text--sm-semibold">${pxToRem(variables['font-size'])}</span>
+
+        <span class="ds-text--sm-regular">Line height</span>
+        <span class="ds-text--sm-semibold">${formatAsPx(variables['line-height'])}</span>
+        <span class="ds-text--sm-semibold">${pxToRem(variables['line-height'])}</span>
+
+        <span class="ds-text--sm-regular">Letter spacing</span>
+        <span class="ds-text--sm-semibold ds-sb-heading__details__content__two-col">${formatAsPx(variables['letter-spacing'])}</span>
+
+        <span class="ds-text--sm-regular">Font weight</span>
+        <span class="ds-text--sm-semibold ds-sb-heading__details__content__two-col">${variables['font-weight']}</span>
+      </div>
+    </div>
+  `;
+};
+const renderHeadingDetailsDesktop = (size) => renderHeadingDetails(size, 'desktop');
+const renderHeadingDetailsMobile = (size) => renderHeadingDetails(size, 'mobile');
+const renderHeading = (size) => {
+    return html `
+    <style>
+      .ds-sb-heading {
+        border-bottom: 1px solid #c0c0c0;
+        padding-bottom: 2em;
+        margin-bottom: 0.5em;
+      }
+      .ds-sb-heading div.ds-sb-heading__details {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 2rem 0;
+
+        @media (min-width: 60rem) {
+          grid-template-columns: 1fr 1fr;
+          gap: 0 2rem;
+        }
+      }
+    </style>
+    <div class="ds-sb-heading">
+      <h3 class="ds-heading--small">${size}</h3>
+      <div class="ds-sb-heading__details">
+        <div>${renderHeadingDetailsDesktop(size)} ${renderHeadingDetailsMobile(size)}</div>
+        <div>
+          <div class="ds-heading--${size}">${generateLoremIpsum()}</div>
+        </div>
+      </div>
+    </div>
+  `;
+};
+export const Headings = {
+    parameters: {
+        docs: {
+            source: {
+                code: `
+          ${headingSizes.map(size => `<div class="ds-heading--${size}">${generateLoremIpsum()}</div>`).join('\n')}
+        `
+            },
+        },
+    },
+    render: () => html `
+    <div>
+      <h2>Headings</h2>
+      ${headingSizes.map(size => renderHeading(size))}
+    </div>
+  `,
+};

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

@@ -20,6 +20,13 @@
   position: relative;
   width: 100%;
 }
+.ds-accordion__open-button:focus-visible {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline-color: var(--ds-borderColor-black);
+  outline-offset: var(--ds-borderWidth-thin);
+  outline-style: solid;
+  outline-width: var(--ds-borderWidth-thin);
+}
 .ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before, .ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after {
   content: "";
   position: absolute;
@@ -43,8 +50,6 @@
   background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
 }
 .ds-accordion__open-button:focus-visible {
-  box-shadow: 0 0 0 2px var(--ds-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
   z-index: 1;
 }
 .ds-accordion__open-button.ds-accordion--default {
@@ -70,6 +75,9 @@
 :host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border) {
   border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
 }
+:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible {
+  border-top-color: transparent;
+}
 .ds-accordion__open-button[aria-expanded=false] {
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
 }
@@ -137,5 +145,5 @@
   gap: var(--ds-spacing-2xSmall);
   font-family: var(--ds-fontFamily-body);
   letter-spacing: var(--ds-letterSpacing-wide);
-  width: 100%;
+  width: max-content;
 }

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

@@ -43,18 +43,18 @@ export class DsAccordion {
     render() {
         const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
         const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
-        return (h("div", { key: '564a6e1e2e7fb75bdc76a187f2855b396765b3c2', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
+        return (h("div", { key: '4ab62a504c68a926d59d2b4753aaf3a5b0ebd39d', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned
-            }), role: "presentation" }, h("div", { key: '4c265a4f8646ea3647420ed1ceb8e038f835b1df', class: "ds-accordion__item" }, h("div", { key: 'e0296ad3be3521668b5a7c0549986318a8803405', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '6388fe84f7803e13762720de373f67cc10c71b23', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
+            }), role: "presentation" }, h("div", { key: 'f98a24462b341c86d4a9ba71eff5d7b5ffbb2eb0', class: "ds-accordion__item" }, h("div", { key: '0da3c96376007d4b597e55ac54cb90de9a4788c7', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '98885f42ecad0aaf00ea736d147fd7838685f1d0', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
                 'ds-accordion--border-aligned': this.borderAligned,
                 'ds-accordion--hide-top-border': this.hideTopBorder
-            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '57aef0a27eaa0f5c26b0c3bc313308ae2cca1359', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
+            }), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '8f5ee7d3c251b0b34f9b57f74c2fb87ceb7266d3', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
             h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
-            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'dc24d59ca565b40c9338aaf30d41652b5f405ef7', name: "header" }))), h("div", { key: '39305337ccc0e6ff0a6659ca5f945d945e65605f', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
+            : h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: 'a9b391fd0bba7055c68e3995bafbf07d4b069038', name: "header" }))), h("div", { key: '551a044a61152ab1799d519fcf9331eb29b428e2', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
                 'ds-accordion__panel--border-aligned': this.borderAligned,
                 'ds-accordion__panel--expanded': this.isExpanded
-            }), hidden: !this.isExpanded }, h("div", { key: 'b03d48f9d0c380e4ffa38527d27a1a6d8eb97261', class: "ds-accordion__content" }, h("slot", { key: 'aeb4c794ff45117dee3f28b04549e02998e824ab', name: "content" })), this.useCloseButton &&
-            h("ds-button", { key: '7ecd99ad96b61825f9d40484f7abf4892f8edbd9', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
+            }), hidden: !this.isExpanded }, h("div", { key: '455ab200c7febf67028a6ec2ef27eeeaa8bff6ae', class: "ds-accordion__content" }, h("slot", { key: '31af185bd1680cf70ba81ed7826f977d9620372a', name: "content" })), this.useCloseButton &&
+            h("ds-button", { key: 'fdeeae0f9e3c866a1f851a18fe2524afa92124d5', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
                     'ds-accordion--border-aligned': this.borderAligned
                 }), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
     }