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

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

@@ -1,13 +1,107 @@
-import { createColourContainer } from "../../../utils/colours/colourUtils";
+import { html } from "lit";
+import { arrayGroupBy } from "../../../utils/utils";
+import { getOpaqueCssVariables, getPaletteCssVariables, getSemanticColoursCssVariables, opaqueCategories, paletteCategories, semanticColoursCategories } from "./utils";
 export default {
     title: 'Foundations/Colours',
 };
-export const Palette = () => {
-    return createColourContainer('palette');
+const coloursStoriesCss = html `
+  <style>
+    .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;
+      }
+    }
+
+    .colour-box {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: repeat(2, max-content);
+      align-items: center;
+
+      code {
+        font-size: 0.8rem;
+      }
+    }
+
+    .colour-swatch {
+      width: 100%;
+      flex-grow: 1;
+      aspect-ratio: 1 / 1;
+    }
+
+    .colour-info {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    @media (width >= 600px) {
+      .grid-container {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+
+    @media (width >= 900px) {
+      .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="grid-container ${mainCategoryClass}${subCategoryClass}">
+      ${items.map(item => html `
+          <div class="colour-box">
+            <div class="colour-swatch" style="background-color: ${item.value}" title="${item.name}: ${item.value}"></div>
+            <div class="colour-info">${item.name}<br /><code>${item.value}</code></div>
+          </div>
+        `)}
+    </div>
+  `;
 };
-export const Opaque = () => {
-    return createColourContainer('opaque');
+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)} `)}`;
 };
-export const SemanticColours = () => {
-    return createColourContainer('semantic');
+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 = () => renderColourPalette(paletteCategories, getPaletteCssVariables());
+export const Opaque = () => renderColourPalette(opaqueCategories, getOpaqueCssVariables());
+export const SemanticColours = () => renderColourPalette(semanticColoursCategories, getSemanticColoursCssVariables());

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

@@ -0,0 +1,22 @@
+import { getCssVariablesFromStyleSheet } from "../../../utils/utils";
+export const paletteCategories = {
+    'palette-mainBlue': 'Main blue|',
+    'palette-black': 'Grayscale|black',
+    'palette-white': 'Grayscale|white',
+    'palette-blue': 'Other colours|blue',
+    'palette-green': 'Other colours|green',
+    'palette-yellow': 'Other colours|yellow',
+    'palette-red': 'Other colours|red',
+};
+export const getPaletteCssVariables = () => getCssVariablesFromStyleSheet(paletteCategories);
+export const opaqueCategories = {
+    'overlay-black': 'Opaque overlays|black',
+    'overlay-white': 'Opaque overlays|white',
+};
+export const getOpaqueCssVariables = () => getCssVariablesFromStyleSheet(opaqueCategories);
+export const semanticColoursCategories = {
+    textColor: 'Semantic colours|text',
+    bgColor: 'Semantic colours|background',
+    borderColor: 'Semantic colours|border',
+};
+export const getSemanticColoursCssVariables = () => getCssVariablesFromStyleSheet(semanticColoursCategories);

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

@@ -1,18 +1,45 @@
-import "./_spacing.scss";
-import { getSpacingVariables, createCategorySection, categories } from "../../../utils/spacing/spacingUtils";
+import { getCssVariablesFromStyleSheet } from "../../../utils/utils";
+import { html } from "lit";
 export default {
     title: 'Foundations/Spacing',
 };
-export const Spacing = () => {
-    const container = document.createElement('div');
-    const spacingVariables = getSpacingVariables();
-    const renderedCategories = new Set();
-    const categoryNames = [...new Set(Object.values(categories)), 'Other'];
-    categoryNames.forEach(category => {
-        const categorySpacing = spacingVariables[category.toLowerCase()];
-        if (categorySpacing && categorySpacing.length > 0) {
-            container.appendChild(createCategorySection(category, categorySpacing, renderedCategories));
-        }
-    });
-    return container;
+const categories = {
+    'spacing-layout': 'Layout',
+    'spacing': 'Spacing',
 };
+const cssVariables = getCssVariablesFromStyleSheet(categories);
+export const Spacing = () => html `
+  <style>
+    .spacing-box {
+      display: grid;
+      grid-template-columns: 2.5fr 1.5fr 8rem;
+      align-items: center;
+      margin-bottom: 0.75rem;
+      max-width: 40rem;
+    }
+    .spacing-bar {
+      height: 2rem;
+      background-color: var(--ds-palette-mainBlue);
+    }
+  </style>
+  <div>
+    ${Object.values(categories)
+    .reverse()
+    .map(category => html `
+          <div>
+            <h2>${category}</h2>
+            <div>
+              ${cssVariables
+    .filter(spacing => spacing.category === category)
+    .map(item => html `
+                    <div class="spacing-box">
+                      <div class="spacing-name">${item.name}</div>
+                      <div class="spacing-value">${item.value} / ${parseFloat(item.value) * 16}px</div>
+                      <div class="spacing-bar" style="width: ${item.value}"></div>
+                    </div>
+                  `)}
+            </div>
+          </div>
+        `)}
+  </div>
+`;

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

@@ -2,13 +2,20 @@ 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";
+import { formatAsPx, generateLoremIpsum, getCssVariablesFromStyleSheet, pxToRem } from "../../../../utils/utils";
 const meta = {
     title: 'Foundations/Typography',
 };
 export default meta;
+const categories = {
+    fontFamily: 'Font family',
+    fontSize: 'Font size',
+    fontWeight: 'Font weight',
+    letterSpacing: 'Letter spacing',
+    lineHeight: 'Line height',
+    fontWidth: 'Font width',
+};
 export const TokenClasses = {
     argTypes: {
         headingExample: {
@@ -85,31 +92,47 @@ export const TokenClasses = {
     </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: () => {
+        const variables = getCssVariablesFromStyleSheet(categories);
+        return html `
+      <style>
+        .font-grid-container {
+          grid-template-columns: repeat(3, 1fr);
+        }
+        .font-box {
+          display: grid;
+          grid-template-columns: 12rem 8rem auto;
+          place-items: center start;
+          place-content: space-evenly start;
+          margin-bottom: 0.75rem;
+          gap: 4rem;
+        }
+      </style>
+      <div>
+        ${Object.values(categories).map(category => html `
+            <div>
+              <h2>${category}</h2>
+              <div class="font-grid-container">
+                ${variables
+            .filter(cat => cat.category === category)
+            .map(item => html `
+                      <div class="font-box">
+                        <div class="font-info">${item.name}</div>
+                        <div class="font-value">${item.value}</div>
+                        <div class="font-extra">${item.category === 'Font size' ? (1 / 16) * parseInt(item.value) + 'rem' : ''}</div>
+                      </div>
+                    `)}
+              </div>
+            </div>
+          `)}
+      </div>
+    `;
     },
-    render: renderTypography,
 };
 const renderHeadingDetails = (size, heading) => {
     const variables = getHeadingVariables(size, heading === 'desktop');
+    console.log(variables);
     return html `
     <style>
       .ds-sb-heading__details__content {
@@ -124,7 +147,7 @@ const renderHeadingDetails = (size, heading) => {
     <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-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>
@@ -134,16 +157,53 @@ const renderHeadingDetails = (size, heading) => {
         <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 getCSSVariableValue = (value) => {
+    if (value.startsWith('var(--')) {
+        const varName = value.slice(4, -1).trim();
+        return getComputedStyle(document.documentElement).getPropertyValue(varName);
+    }
+    return value;
+};
+const extractVariablesFromRule = (rule, variables) => {
+    for (const style of rule.style) {
+        variables[style] = getCSSVariableValue(rule.style.getPropertyValue(style));
+    }
+};
+const headingSizes = ['2xLarge', 'xLarge', 'large', 'medium', 'small', 'xSmall'];
+const getHeadingVariables = (size, isDesktop) => {
+    const className = `ds-heading--${size}`;
+    const variables = {};
+    for (const sheet of document.styleSheets) {
+        try {
+            const rules = sheet.cssRules;
+            for (const rule of rules) {
+                if (rule instanceof CSSStyleRule && rule.selectorText.includes(className)) {
+                    extractVariablesFromRule(rule, variables);
+                }
+                else if (isDesktop && rule instanceof CSSMediaRule && rule.conditionText.includes('(min-width: 30rem)')) {
+                    const mediaRules = rule.cssRules;
+                    for (const mediaRule of mediaRules) {
+                        if (mediaRule instanceof CSSStyleRule && mediaRule.selectorText.includes(className)) {
+                            extractVariablesFromRule(mediaRule, variables);
+                        }
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.warn('Unable to access stylesheet:', sheet.href, e);
+        }
+    }
+    return variables;
+};
 const renderHeadingDetailsDesktop = (size) => renderHeadingDetails(size, 'desktop');
 const renderHeadingDetailsMobile = (size) => renderHeadingDetails(size, 'mobile');
 const renderHeading = (size) => {
@@ -168,7 +228,7 @@ const renderHeading = (size) => {
     <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>${renderHeadingDetailsDesktop(size)}${renderHeadingDetailsMobile(size)}</div>
         <div>
           <div class="ds-heading--${size}">${generateLoremIpsum()}</div>
         </div>
@@ -182,7 +242,7 @@ export const Headings = {
             source: {
                 code: `
           ${headingSizes.map(size => `<div class="ds-heading--${size}">${generateLoremIpsum()}</div>`).join('\n')}
-        `
+`,
             },
         },
     },

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

@@ -7,10 +7,82 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
+: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);
+}
+
 .ds-accordion__open-button {
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   outline: var(--ds-borderWidth-thick) solid transparent;
-  fill: var(--ds-palette-black-95);
+  fill: var(--ds-textColor-default);
   position: relative;
   all: unset;
   align-items: flex-start;
@@ -22,8 +94,8 @@
   width: 100%;
 }
 .ds-accordion__open-button: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);
 }
 .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 {
@@ -43,10 +115,10 @@
   cursor: pointer;
 }
 .ds-accordion__open-button:hover, .ds-accordion__open-button:hover::before, .ds-accordion__open-button:hover::after {
-  background: var(--ds-overlay-black-10);
+  background: var(--ds-bgColor-transparent-onLight-hover);
 }
 .ds-accordion__open-button:active, .ds-accordion__open-button:active::before, .ds-accordion__open-button:active::after {
-  background: var(--ds-overlay-black-15);
+  background: var(--ds-bgColor-transparent-onLight-active);
 }
 .ds-accordion__open-button:focus-visible {
   z-index: 1;
@@ -72,13 +144,13 @@
   width: calc(100% - var(--ds-spacing-large));
 }
 :host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border) {
-  border-top: var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);
+  border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
 :host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible {
   border-top-color: transparent;
 }
 .ds-accordion__open-button:not(.ds-accordion--hide-bottom-border)[aria-expanded=false] {
-  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);
+  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
 }
 
 .ds-accordion__panel--border-aligned {
@@ -92,7 +164,7 @@
   bottom: -1px;
   height: 1px;
   left: 0;
-  background: var(--ds-palette-white);
+  background: var(--ds-bgColor-white);
   width: var(--ds-spacing-small);
 }
 .ds-accordion__panel--border-aligned::after {
@@ -102,12 +174,12 @@
   bottom: -1px;
   height: 1px;
   right: 0;
-  background: var(--ds-palette-white);
+  background: var(--ds-bgColor-white);
   width: var(--ds-spacing-small);
 }
 .ds-accordion__panel--expanded {
   display: block;
-  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);
+  border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   padding-inline: var(--ds-spacing-small);
 }
 .ds-accordion__panel--expanded.ds-accordion__panel--hide-bottom-border {
@@ -115,11 +187,11 @@
 }
 
 ::slotted([slot=header]) {
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 
 .ds-accordion__content {
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
   padding-block: var(--ds-spacing-small);
 }