@uh-design-system/component-library 1.5.1 → 1.5.2-rc.0

package/dist/cjs/tabsContext-YJO8eY1d.js

@@ -1,53 +0,0 @@
-'use strict';
-
-var utils = require('./utils-DMgbvnde.js');
-
-const CONTEXT_KEY = '__ds_tabs_context__';
-const CONTEXT_UPDATE_EVENT = 'dsTabsContextUpdate';
-function getChildSelector(parentElement) {
-    const tabListTag = utils.transformTagName('ds-tablist', 'ds-tabs', parentElement);
-    const tabPanelTag = utils.transformTagName('ds-tabpanel', 'ds-tabs', parentElement);
-    const tabTag = utils.transformTagName('ds-tab', 'ds-tabs', parentElement);
-    return [tabListTag, tabPanelTag, tabTag].join(', ');
-}
-function isInCurrentTabsBoundary(child, currentTabsElement) {
-    const tabsTag = utils.transformTagName('ds-tabs', 'ds-tabs', currentTabsElement);
-    const closestTabs = child.closest(tabsTag);
-    return closestTabs instanceof HTMLElement && closestTabs === currentTabsElement;
-}
-function dispatchContextUpdate(element, context) {
-    element.dispatchEvent(new CustomEvent(CONTEXT_UPDATE_EVENT, {
-        bubbles: false,
-        detail: { ...context },
-    }));
-}
-function storeTabsContext(element, context) {
-    element[CONTEXT_KEY] = context;
-}
-function provideTabsContext(element, context) {
-    storeTabsContext(element, context);
-    const childSelector = getChildSelector(element);
-    const children = element.querySelectorAll(childSelector);
-    children.forEach(child => {
-        if (isInCurrentTabsBoundary(child, element)) {
-            dispatchContextUpdate(child, context);
-        }
-    });
-}
-function consumeTabsContext(element) {
-    let parent = element.parentElement;
-    while (parent) {
-        if (parent[CONTEXT_KEY]) {
-            const context = parent[CONTEXT_KEY];
-            return context;
-        }
-        parent = parent.parentElement;
-    }
-    console.warn(`${element.tagName} must be used inside ds-tabs component`);
-    return null;
-}
-
-exports.CONTEXT_UPDATE_EVENT = CONTEXT_UPDATE_EVENT;
-exports.consumeTabsContext = consumeTabsContext;
-exports.provideTabsContext = provideTabsContext;
-exports.storeTabsContext = storeTabsContext;

package/dist/cjs/tabsFactory-Ccw6Jjct.js

@@ -1,28 +0,0 @@
-'use strict';
-
-var index = require('./index-D6M-AWTV.js');
-var tabsContext = require('./tabsContext-YJO8eY1d.js');
-
-const tabsFactory = (Base) => {
-    const BaseTabs = class extends Base {
-        constructor(hostRef) {
-            super();
-            index.registerInstance(this, hostRef);
-        }
-        context;
-        contextUpdateHandler = (event) => {
-            const customEvent = event;
-            this.context = customEvent.detail;
-        };
-        componentWillLoad() {
-            this.context = tabsContext.consumeTabsContext(this.el) || undefined;
-            this.el.addEventListener(tabsContext.CONTEXT_UPDATE_EVENT, this.contextUpdateHandler);
-        }
-        disconnectedCallback() {
-            this.el.removeEventListener(tabsContext.CONTEXT_UPDATE_EVENT, this.contextUpdateHandler);
-        }
-    };
-    return BaseTabs;
-};
-
-exports.tabsFactory = tabsFactory;

package/dist/cjs/utils-DMgbvnde.js

@@ -1,101 +0,0 @@
-'use strict';
-
-const formatAs = (value, suffix) => (value.endsWith(suffix) ? value : `${value}${suffix}`);
-const formatAsPx = (value) => formatAs(value, 'px');
-const remToPx = (remString) => {
-    const rootFontSize = 16;
-    const rem = parseFloat(remString);
-    return formatAsPx(`${rem * rootFontSize}`);
-};
-function* idGenerator(id) {
-    let currentId = 1;
-    while (true) {
-        yield `${id}-${currentId++}`;
-    }
-}
-const debounce = (func, wait = 0, immediate = false) => {
-    let timeout = null;
-    const debounced = (...args) => {
-        clearTimeout(timeout);
-        if (immediate && !timeout) {
-            func(...args);
-        }
-        timeout = setTimeout(function () {
-            timeout = null;
-            if (!immediate) {
-                func(...args);
-            }
-        }, wait);
-    };
-    debounced.cancel = () => {
-        if (timeout) {
-            clearTimeout(timeout);
-            timeout = null;
-        }
-    };
-    return debounced;
-};
-const throttle = (func, timeFrame = 0) => {
-    let lastTime = 0;
-    return (...args) => {
-        const now = Date.now();
-        if (now - lastTime >= timeFrame) {
-            func(...args);
-            lastTime = now;
-        }
-    };
-};
-const transformTagName = (tagToBeTransformed, knownUntransformedTag, knownUntransformedTagElementReference) => {
-    const actualTagName = knownUntransformedTagElementReference.tagName.toLowerCase();
-    if (!actualTagName.includes(knownUntransformedTag)) {
-        throw new Error(`knownUntransformedTag mismatch: expected tag to include '${knownUntransformedTag}', ` + `but got '${actualTagName}'`);
-    }
-    const actualCurrentTag = knownUntransformedTagElementReference.tagName.toLowerCase();
-    const knownTagWithoutDesignSystemPrefix = knownUntransformedTag.split(/^ds-/)[1];
-    const targetTagWithoutDesignSystemPrefix = tagToBeTransformed.split(/^ds-/)[1];
-    const [prefix, suffix] = actualCurrentTag.split(knownTagWithoutDesignSystemPrefix);
-    return (prefix + targetTagWithoutDesignSystemPrefix + suffix);
-};
-const declareComponentDependencies = (t) => false;
-const omit = (obj, keys) => {
-    const omitSet = new Set(keys);
-    return Object.fromEntries(Object.entries(obj).filter(([key]) => !omitSet.has(key)));
-};
-const ifDefined = (key, value) => {
-    if (value === undefined || value === null || value === '') {
-        return {};
-    }
-    return { [key]: value };
-};
-const componentOnReady = (el) => {
-    if (el?.componentOnReady) {
-        return el.componentOnReady();
-    }
-    return new Promise(resolve => {
-        requestAnimationFrame(() => resolve(el));
-    });
-};
-function isKey(key, keys, excludes) {
-    const allowedKeys = keys;
-    return allowedKeys.includes(key);
-}
-const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-function isArrowKey(key, excludes) {
-    return isKey(key, arrowKeys);
-}
-const selectionKeys = ['Enter', ' '];
-function isSelectionKey(key, excludes) {
-    return isKey(key, selectionKeys);
-}
-
-exports.componentOnReady = componentOnReady;
-exports.debounce = debounce;
-exports.declareComponentDependencies = declareComponentDependencies;
-exports.idGenerator = idGenerator;
-exports.ifDefined = ifDefined;
-exports.isArrowKey = isArrowKey;
-exports.isSelectionKey = isSelectionKey;
-exports.omit = omit;
-exports.remToPx = remToPx;
-exports.throttle = throttle;
-exports.transformTagName = transformTagName;

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

@@ -1,10 +0,0 @@
-import AccessibilityDocs from "./Accessibility.mdx";
-const meta = {
-    title: 'Accessibility',
-    parameters: {
-        docs: {
-            page: AccessibilityDocs,
-        },
-    },
-};
-export default meta;

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

@@ -1,19 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Accessibility/aria-label',
-};
-export default meta;
-export const HowToAriaLabel = {
-    name: 'How to "aria-label"',
-    render: () => html `
-    <ds-button ds-aria-label="My profile Some other relevant thing" ds-value="My profile"></ds-button>
-    <!This is a good example.>
-  `,
-};
-export const HowNotToAriaLabel = {
-    name: 'How not to "aria-label"',
-    render: () => html `
-    <ds-button aria-label="this will override the visible name of the button" ds-value="My profile"></ds-button>
-    <!This works but is not recommended. Recommended to use ds-aria-label instead of aria-label for consistency.>
-  `,
-};

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

@@ -1,49 +0,0 @@
-import { html } from "lit";
-import { litTemplateResultToString } from "../../utils/storybook/storybookUtils";
-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" ds-aria-labelledby="button1 stu_1" ds-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" ds-aria-labelledby="button2 stu_2" ds-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

@@ -1,39 +0,0 @@
-import { html } from "lit";
-import { litTemplateResultToString } from "../../utils/storybook/storybookUtils";
-const meta = {
-    title: 'Accessibility/Naming',
-};
-export default meta;
-const howNamingWorksDOM = html `
-  <div class="ds-sb-how-naming-works">
-    <div>
-      <ds-button ds-value="Continue"></ds-button>
-      <!The button gets it's accessible name from its text content>
-    </div>
-
-    <ds-text-input ds-type="text" ds-label="First name"></ds-text-input>
-    <!The text input gets its accessible name from the label/for structure>
-
-    <ds-link ds-href="#" ds-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/accessibility/stories/textSpacing.stories.js

@@ -1,62 +0,0 @@
-import { html } from "lit";
-const meta = {
-    title: 'Accessibility/Text Spacing',
-};
-export default meta;
-export const Default = {
-    args: {
-        dsLetterSpacing: '0.12em !important',
-        dsLineHeight: '1.5 !important',
-        dsMarginBottom: '2em !important',
-        dsWordSpacing: '0.16em !important',
-    },
-    argTypes: {
-        dsLetterSpacing: { name: '--ds-letterSpacing', control: 'text' },
-        dsLineHeight: { name: '--ds-lineHeight', control: 'text' },
-        dsMarginBottom: { name: '--ds-marginBottom', control: 'text' },
-        dsWordSpacing: { name: '--ds-wordSpacing', control: 'text' },
-    },
-    render: args => html `
-    <style>
-      :root,
-      :host {
-        --ds-letterSpacing: ${args.dsLetterSpacing};
-        --ds-lineHeight: ${args.dsLineHeight};
-        --ds-marginBottom: ${args.dsMarginBottom};
-        --ds-wordSpacing: ${args.dsWordSpacing};
-      }
-
-      /* Replace with "*" to apply to all elements */
-      .ds-sb-root * {
-        letter-spacing: var(--ds-letterSpacing);
-        line-height: var(--ds-lineHeight);
-        word-spacing: var(--ds-wordSpacing);
-      }
-
-      p {
-        margin-bottom: var(--ds-marginBottom);
-      }
-
-      .ds-sb-block {
-        display: block;
-        margin-block-end: var(--ds-spacing-layout-2xSmall);
-      }
-    </style>
-    <div class="ds-sb-root">
-      <h1 class="ds-heading-lg">Text spacing</h1>
-      <p class="ds-bodytext-lg ds-paragraph-20">This story demonstrates how text spacing can be applied to all design system components, including the ones inside a shadow dom.</p>
-      <div class="ds-sb-block">
-        <ds-link href="#" ds-text="This is a link"></ds-link>
-      </div>
-      <div class="ds-sb-block">
-        <ds-chip ds-text="This is a chip"></ds-chip>
-      </div>
-      <div class="ds-sb-block">
-        <ds-checkbox-group ds-label="This is a checkbox group" ds-assistive-text="Assistive text" ds-error-text="This is an error message">
-          <ds-checkbox ds-text="This is a checkbox"></ds-checkbox>
-          <ds-checkbox ds-text="This is a checkbox"></ds-checkbox>
-        </ds-checkbox-group>
-      </div>
-    </div>
-  `,
-};

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

@@ -1,53 +0,0 @@
-import { html } from "lit";
-import { getCssVariablesFromStyleSheet } from "../../../utils/storybook/storybookUtils";
-import "./_borders.scss";
-const meta = {
-    title: 'Foundations/Borders',
-    parameters: {
-        docs: {
-            source: {
-                code: null,
-            },
-        },
-    },
-};
-export default meta;
-const categories = {
-    borderWidth: 'Border width',
-    borderRadius: 'Border radius',
-};
-const cssVariables = getCssVariablesFromStyleSheet(categories);
-export const Borders = () => html `
-  <style>
-    .ds-sb-border-box {
-      display: grid;
-      grid-template-columns: 2.5fr 1.5fr 8rem;
-      align-items: center;
-      margin-bottom: 0.75rem;
-      max-width: 40rem;
-    }
-    .ds-sb-border-cell {
-      background-color: var(--ds-palette-black-05);
-      border-style: solid;
-      border-color: black;
-      height: 2rem;
-      width: 3rem;
-    }
-  </style>
-  <div>
-    ${Object.values(categories).map(category => html `
-        <div>
-          <h2>${category}</h2>
-          <div>
-            ${cssVariables
-    .filter(border => border.category === category)
-    .map(item => html `<div class="ds-sb-border-box">
-                    <div class="ds-sb-border-name ${item.name}">${item.name}</div>
-                    <div class="ds-sb-border-value ${item.value}">${item.value}</div>
-                    <div class="ds-sb-border-cell ${item.value}" style="border-width: ${item.value}"></div>
-                  </div>`)}
-          </div>
-        </div>
-      `)}
-  </div>
-`;

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

@@ -1,44 +0,0 @@
-import { html } from "lit";
-import { getCssVariablesFromStyleSheet } from "../../../utils/storybook/storybookUtils";
-import "./_breakpoints.scss";
-const meta = {
-    title: 'Foundations/Breakpoints',
-    parameters: {
-        docs: {
-            source: {
-                code: null,
-            },
-        },
-    },
-};
-export default meta;
-const categories = {
-    breakpoint: 'Breakpoint',
-};
-const cssVariables = getCssVariablesFromStyleSheet(categories);
-export const Breakpoints = () => html `
-  <style>
-    .ds-sb-breakpoint-box {
-      display: grid;
-      grid-template-columns: 2.5fr 1.5fr 8rem;
-      align-items: center;
-      margin-bottom: 0.75rem;
-      max-width: 40rem;
-    }
-  </style>
-  <div>
-    ${Object.values(categories).map(category => html `
-        <h2>${category}</h2>
-        <div>
-          ${cssVariables
-    .filter(bp => bp.category === category)
-    .map(item => html `
-                <div class="ds-sb-breakpoint-box">
-                  <div class="ds-sb-breakpoint-name">${item.name}</div>
-                  <div class="ds-sb-breakpoint-value">${item.value}</div>
-                </div>
-              `)}
-        </div>
-      `)}
-  </div>
-`;

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

@@ -1,134 +0,0 @@
-import { html } from "lit";
-import { arrayGroupBy } from "../../../utils/utils";
-import { getOpaqueCssVariables, getPaletteCssVariables, getSemanticColoursCssVariables, opaqueCategories, paletteCategories, semanticColoursCategories } from "./utils";
-export default {
-    title: 'Foundations/Colours',
-};
-const coloursStoriesCss = html `
-  <style>
-    .ds-sb-grid-container {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 20px;
-
-      &.opaque-overlays-black {
-        background-color: var(--ds-palette-mainBlue-10);
-        padding: 10px;
-      }
-
-      &.opaque-overlays-white {
-        background-color: var(--ds-palette-mainBlue-70);
-        color: white;
-        padding: 10px;
-      }
-    }
-
-    .ds-sb-colour-box {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: repeat(2, max-content);
-      align-items: center;
-
-      code {
-        font-size: 0.8rem;
-      }
-    }
-
-    .ds-sb-colour-swatch {
-      width: 100%;
-      flex-grow: 1;
-      aspect-ratio: 1 / 1;
-    }
-
-    .ds-sb-colour-info {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    @media (width >= 600px) {
-      .ds-sb-grid-container {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    }
-
-    @media (width >= 900px) {
-      .ds-sb-grid-container {
-        grid-template-columns: repeat(6, 1fr);
-      }
-    }
-  </style>
-`;
-const renderColourItems = (mainCategory, subcategory, items) => {
-    const mainCategoryClass = mainCategory.toLowerCase().replace(/\s+/g, '-');
-    const subCategoryClass = subcategory ? '-' + subcategory.toLowerCase().replace(/\s+/g, '-') : '';
-    return html `
-    <div class="ds-sb-grid-container ${mainCategoryClass}${subCategoryClass}">
-      ${items.map(item => html `
-          <div class="ds-sb-colour-box">
-            <div class="ds-sb-colour-swatch" style="background-color: ${item.value}" title="${item.name}: ${item.value}"></div>
-            <div class="ds-sb-colour-info">${item.name}<br /><code>${item.value}</code></div>
-          </div>
-        `)}
-    </div>
-  `;
-};
-const renderColourCategory = (mainCategory, obj) => {
-    return html `${Object.entries(obj).map(([subcategory, v]) => subcategory
-        ? html `
-          <div class="subcategory-section">
-            <h3>${subcategory}</h3>
-            ${renderColourItems(mainCategory, subcategory, v)}
-          </div>
-        `
-        : html ` ${renderColourItems(mainCategory, subcategory, v)} `)}`;
-};
-const renderColourPalette = (categories, cssVars) => {
-    const vars = cssVars.map(c => {
-        const [category, subcategory] = c.category.split('|');
-        return { ...c, category, subcategory };
-    });
-    const groupedByCategories = Object.entries(arrayGroupBy(vars, 'category')).map(([key, value]) => [key, arrayGroupBy(value, 'subcategory')]);
-    const categoryOrder = Object.values(categories);
-    groupedByCategories.sort(([a], [b]) => categoryOrder.findIndex(categoryA => categoryA.includes(a)) - categoryOrder.findIndex(categoryB => categoryB.includes(b)));
-    return html `
-    ${coloursStoriesCss}
-    <div>
-      ${groupedByCategories.map(([mainCategory, obj]) => html `
-          <div class="category-section">
-            <h2>${mainCategory}</h2>
-            <div>${renderColourCategory(mainCategory, obj)}</div>
-          </div>
-        `)}
-    </div>
-  `;
-};
-export const Palette = {
-    parameters: {
-        docs: {
-            source: {
-                code: null,
-            },
-        },
-    },
-    render: () => renderColourPalette(paletteCategories, getPaletteCssVariables()),
-};
-export const Opaque = {
-    parameters: {
-        docs: {
-            source: {
-                code: null,
-            },
-        },
-    },
-    render: () => renderColourPalette(opaqueCategories, getOpaqueCssVariables()),
-};
-export const SemanticColours = {
-    parameters: {
-        docs: {
-            source: {
-                code: null,
-            },
-        },
-    },
-    render: () => renderColourPalette(semanticColoursCategories, getSemanticColoursCssVariables()),
-};

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

@@ -1,58 +0,0 @@
-import { html } from "lit";
-import { icons } from "./iconList";
-import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
-const categories = icons.reduce((acc, icon) => {
-    if (!acc[icon.category]) {
-        acc[icon.category] = [];
-    }
-    acc[icon.category].push(icon);
-    return acc;
-}, {});
-const meta = {
-    title: 'Foundations/Icons',
-    parameters: {
-        a11y: { disable: true },
-        visualTests: { disable: true },
-        docs: {
-            source: {
-                code: null,
-            },
-        },
-    },
-};
-export default meta;
-export const Icons = () => html `
-  <style>
-    .ds-sb-icon-category {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-      justify-items: center;
-    }
-    .ds-sb-icon {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      width: fit-content;
-      gap: 4px;
-    }
-    .ds-sb-icon-name {
-      display: block;
-      text-align: center;
-      font-size: 0.75rem;
-      margin-top: 4px;
-    }
-  </style>
-  <div>
-    <h2>Icon categories</h2>
-    ${Object.entries(categories).map(([category, items]) => html `<div>
-          <h3>${category}</h3>
-          <div class="ds-sb-icon-category">
-            ${unsafeHTML(items
-    .map(({ name }) => `<div class="ds-sb-icon"><ds-icon ds-name=${name} ds-title=${name} ds-aria-label=${name}></ds-icon><pre class="ds-sb-icon-name">${name}</pre></div>`)
-    .sort()
-    .join(' '))}
-          </div>
-        </div>`)}
-  </div>
-`;