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

package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.js

@@ -1,4 +1,6 @@
 import { html } from "lit";
+import { getDsElem } from "../../../../utils/tests/testUtils";
+import { litTemplateResultToString } from "../../../../utils/utils";
 const meta = {
     title: 'Base Components/TextInput/Examples',
     component: 'ds-text-input',
@@ -27,12 +29,31 @@ export const UsingSlots = {
       <p slot='help-text'>Lorem ipsum</p>
       <ds-icon name='archive' slot='prefix'></ds-icon>
       <small slot='suffix'>Suffix</small>
-      <div slot='error-text'>Error text slot</div>
-      <div slot='success-text'>Success text slot</div>
+      <div slot='input-validity'>Validity slot</div>
     </ds-text-input>
   `,
 };
+const formValidationDOM = html `
+  <form class="ds-sb-form-validation">
+    <ds-text-input type="number" label="Minimum value" id="min" name="min" min="5" required></ds-text-input>
+    <ds-text-input type="number" label="Maximum value" id="max" name="max" min="100" required></ds-text-input>
+    <ds-text-input type="email" label="Email" id="email" name="email" required></ds-text-input>
+    <ds-text-input type="tel" label="Telephone" id="tel" name="tel" required></ds-text-input>
+    <ds-text-input type="password" label="Password" id="password" name="password" required action-button-aria-label="password toggle"></ds-text-input>
+    <ds-text-input type="url" label="Url" id="url" name="url" required></ds-text-input>
+    <div class="button-group ds-sb-form-validation__buttons">
+      <ds-button type="submit" value="Submit"></ds-button>
+    </div>
+  </form>
+`;
 export const FormValidation = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(formValidationDOM),
+            },
+        },
+    },
     render: () => html `
     <style>
       .ds-sb-form-validation {
@@ -44,16 +65,64 @@ export const FormValidation = {
         align-self: flex-end;
       }
     </style>
-    <form class="ds-sb-form-validation">
-      <ds-text-input type="number" label="Minimum value" id="min" name="min" min="5" required></ds-text-input>
-      <ds-text-input type="number" label="Maximum value" id="max" name="max" min="100" required></ds-text-input>
-      <ds-text-input type="email" label="Email" id="email" name="email" required></ds-text-input>
-      <ds-text-input type="tel" label="Telephone" id="tel" name="tel" required></ds-text-input>
-      <ds-text-input type="password" label="Password" id="password" name="password" required action-button-aria-label="password toggle"></ds-text-input>
-      <ds-text-input type="url" label="Url" id="url" name="url" required></ds-text-input>
-      <div class="button-group ds-sb-form-validation__buttons">
-        <ds-button type="submit" value="Submit"></ds-button>
-      </div>
-    </form>
+    ${formValidationDOM}
+  `,
+};
+const clientSideValidationDOM = html `
+  <div class="ds-sb-client-side-validation">
+    <div id="example-error-container">
+      <ds-text-input id="example-error" label="Error message" assistive-text='Type "error" and move to next input to display a validation message.'></ds-text-input>
+    </div>
+    <div id="example-success-container">
+      <ds-text-input id="example-success" label="Success message" assistive-text='Type "success" and move to next input to display a validation message.'></ds-text-input>
+    </div>
+  </div>
+`;
+export const ClientSideValidation = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(clientSideValidationDOM),
+            },
+            story: {
+                autoplay: true,
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sb-client-side-validation {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+    </style>
+    ${clientSideValidationDOM}
   `,
+    play: async ({ canvasElement }) => {
+        const errorContainerElem = canvasElement.querySelector('#example-error-container');
+        const successContainerElem = canvasElement.querySelector('#example-success-container');
+        const errorElem = await getDsElem(canvasElement, 'ds-text-input#example-error');
+        const successElem = await getDsElem(canvasElement, 'ds-text-input#example-success');
+        errorContainerElem.addEventListener('input', (e) => {
+            const target = e.target;
+            switch (target.value) {
+                case 'error':
+                    return errorElem.errorText = 'Error message';
+                default:
+                    errorElem.errorText = "";
+                    return;
+            }
+        });
+        successContainerElem.addEventListener('input', (e) => {
+            const target = e.target;
+            switch (target.value) {
+                case 'success':
+                    return successElem.successText = 'Success message';
+                default:
+                    successElem.successText = "";
+                    return;
+            }
+        });
+    },
 };

package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.stories.js

@@ -1,5 +1,5 @@
-import { textInputTypes } from "../utils";
 import { icons } from "../../../00-foundations/icons/iconList";
+import { textInputTypes } from "../utils";
 const meta = {
     title: 'Base Components/TextInput',
     component: 'ds-text-input',
@@ -17,7 +17,7 @@ export const Playground = {
     argTypes: {
         label: { control: 'text' },
         placeholder: { control: 'text' },
-        dsId: { control: 'text' },
+        identifier: { control: 'text' },
         name: { control: 'text' },
         disabled: { control: 'boolean' },
         required: { control: 'boolean' },
@@ -40,15 +40,15 @@ export const Playground = {
             control: 'select',
             options: textInputTypes,
         },
-        ariaLabel: { control: 'text' },
-        ariaLabelledBy: { control: 'text' },
-        ariaDescribedby: { control: 'text' },
+        ariaLabel: { name: 'aria-label', control: 'text' },
+        ariaLabelledBy: { name: 'aria-labelledby', control: 'text' },
+        ariaDescribedby: { name: 'aria-describedby', control: 'text' },
         autocomplete: { control: 'text' },
     },
     args: {
         label: 'Label',
         placeholder: '',
-        dsId: 'input',
+        identifier: 'input',
         name: '',
         disabled: false,
         required: false,
@@ -57,7 +57,6 @@ export const Playground = {
         min: -1,
         max: -1,
         maxlength: -1,
-        pattern: '',
         assistiveText: '',
         prefixText: '',
         suffixText: '',

package/dist/collection/components/01-base-components/ds-text-input/utils.js

@@ -1,10 +1 @@
-export const textInputTypes = [
-    'text',
-    'password',
-    'search',
-    'loading',
-    'tel',
-    'email',
-    'url',
-    'number',
-];
+export const textInputTypes = ['text', 'password', 'search', 'loading', 'tel', 'email', 'url', 'number'];

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class DsVisuallyHidden {
     render() {
-        return (h("slot", { key: '4307602964aa15c8d3f4fb0f4b89188cf0a8b55e' }));
+        return (h("slot", { key: '083eaed9210a85360479b367769c8904a6089f64' }));
     }
     static get is() { return "ds-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -1 +1 @@
-export {};
+export { configure } from './store';

package/dist/collection/store.js

@@ -0,0 +1,13 @@
+import { createStore } from "@stencil/store";
+;
+const initialState = {
+    validation: 'client',
+};
+const { state, set } = createStore({
+    ...initialState,
+});
+export const isValidation = (validation) => state.validation === validation;
+export const configure = ({ validation }) => {
+    set('validation', validation || initialState.validation);
+};
+export default state;

package/dist/collection/utils/link/linkUtils.js

@@ -9,12 +9,3 @@ export const visuallyHiddenAssistiveText = (lang) => {
             return 'Opens in a new tab';
     }
 };
-export const getAriaLabel = (text, ariaLabel) => {
-    if (!ariaLabel) {
-        return undefined;
-    }
-    if (ariaLabel.startsWith(text)) {
-        return ariaLabel;
-    }
-    return [text, ariaLabel].join(' ');
-};

package/dist/collection/utils/utils.js

@@ -56,3 +56,12 @@ export function* idGenerator(id) {
         yield `${id}-${currentId++}`;
     }
 }
+export const getAriaLabel = (text, ariaLabel) => {
+    if (!ariaLabel) {
+        return undefined;
+    }
+    if (ariaLabel.startsWith(text)) {
+        return ariaLabel;
+    }
+    return [text, ariaLabel].join(' ');
+};

package/dist/component-library/component-library.esm.js

@@ -1 +1 @@
-import{p as e,b as i}from"./index-aaccd233.js";export{s as setNonce}from"./index-aaccd233.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-accordion_3",[[1,"ds-accordion",{variant:[1],borderAligned:[4,"border-aligned"],openByDefault:[4,"open-by-default"],accordionId:[1,"accordion-id"],headingLevel:[2,"heading-level"],useCloseButton:[4,"use-close-button"],closeButtonLabel:[1,"close-button-label"],hideTopBorder:[4,"hide-top-border"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[6,"ds-button",{value:[1],variant:[1],colour:[1],size:[1],fontWeight:[1,"font-weight"],icon:[1],iconPosition:[1,"icon-position"],type:[1],disabled:[4],fullWidth:[4,"full-width"],ariaDisabled:[1,"aria-disabled"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],dsTitle:[1,"title"],role:[1],hidden:[4],message:[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{legend:[1],assistiveText:[1,"assistive-text"],direction:[1],errorText:[1,"error-text"],text:[1],checked:[1028],checkedChildElementCount:[1026,"checked-child-element-count"],disabled:[4],parentCheckedCount:[2,"parent-checked-count"],childElementsCount:[32],isIndeterminate:[32],indeterminateChildCheckboxCount:[32],setChecked:[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","handleIndeterminateChildChange"],[0,"dsCheckboxChange","handleCheckboxChange"],[0,"dsCheckboxGroupChange","handleCheckboxGroupChange"]],{disabled:["handleCheckboxDisabledChange"],checked:["handleCheckedChange"],isIndeterminate:["handleIndeterminateChange"],checkedChildElementCount:["handleCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-text-input",[[6,"ds-text-input",{label:[1],placeholder:[1],dsId:[1,"id"],name:[1],disabled:[4],optional:[4],required:[4],readonly:[4],value:[1],min:[2],max:[2],maxlength:[2],pattern:[1],autocomplete:[1],optionalText:[1,"optional-text"],errorText:[1,"error-text"],successText:[1,"success-text"],assistiveText:[1,"assistive-text"],actionButtonAriaLabel:[1,"action-button-aria-label"],hiddenAssistiveText:[1,"hidden-assistive-text"],prefixText:[1,"prefix-text"],suffixText:[1,"suffix-text"],icon:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledBy:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],hasFocus:[32],clearButtonVisible:[32],passwordInputVisible:[32],inputActive:[32],togglePasswordVisibility:[64],clearInput:[64]}]]],["ds-link",[[1,"ds-link",{text:[1],size:[1],variant:[1],weight:[1],icon:[1025],iconPosition:[1025,"icon-position"],iconTitle:[1,"icon-title"],iconHidden:[4,"icon-hidden"],href:[1],target:[1],download:[4],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{text:[1],iconPosition:[1,"icon-position"],href:[1],target:[1],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]],["ds-input-validity",[[0,"ds-input-validity",{text:[1],type:[1],role:[1],identifier:[32]}]]],["ds-checkbox",[[65,"ds-checkbox",{checkboxId:[1025,"id"],checked:[1028],legend:[1],assistiveText:[1,"assistive-text"],text:[1],indeterminate:[4],disabled:[4],errorText:[1,"error-text"],errorsDisabled:[4,"data-errors-disabled"],required:[4],optional:[4],optionalText:[1,"optional-text"],ariaLabel:[32],value:[32],validationMessage:[32]}]]]],e))));
+import{p as e,b as i}from"./index-434995e1.js";export{s as setNonce}from"./index-434995e1.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((async e=>(await t(),i([["ds-accordion_3",[[1,"ds-accordion",{variant:[1],borderAligned:[4,"border-aligned"],openByDefault:[4,"open-by-default"],accordionId:[1,"accordion-id"],headingLevel:[2,"heading-level"],useCloseButton:[4,"use-close-button"],closeButtonLabel:[1,"close-button-label"],hideTopBorder:[4,"hide-top-border"],isExpanded:[32]},null,{isExpanded:["watchHandler"]}],[6,"ds-button",{value:[1],variant:[1],colour:[1],size:[1],fontWeight:[1,"font-weight"],icon:[1],iconPosition:[1,"icon-position"],type:[1],disabled:[4],fullWidth:[4,"full-width"],ariaDisabled:[1,"aria-disabled"]}],[1,"ds-icon",{name:[1],colour:[1],size:[1],dsTitle:[1,"title"],role:[1],hidden:[4],message:[32]}]]],["ds-input-validity",[[0,"ds-input-validity",{text:[1],type:[1],validityRole:[1,"role"],identifier:[32]}]]],["ds-text-input",[[70,"ds-text-input",{label:[1],placeholder:[1],identifier:[1,"id"],name:[1],disabled:[4],optional:[4],required:[4],readonly:[4],value:[1],min:[2],max:[2],maxlength:[2],pattern:[1],autocomplete:[1],optionalText:[1,"optional-text"],errorText:[1,"error-text"],successText:[1,"success-text"],assistiveText:[1,"assistive-text"],actionButtonAriaLabel:[1,"action-button-aria-label"],hiddenAssistiveText:[1,"hidden-assistive-text"],prefixText:[1,"prefix-text"],suffixText:[1,"suffix-text"],icon:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledBy:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],hasFocus:[32],clearButtonVisible:[32],passwordInputVisible:[32],inputActive:[32],validationMessage:[32],togglePasswordVisibility:[64],clearInput:[64]}]]],["ds-checkbox",[[65,"ds-checkbox",{identifier:[1,"id"],checked:[1028],legend:[1],assistiveText:[1,"assistive-text"],text:[1],indeterminate:[4],disabled:[4],errorText:[1,"error-text"],errorsDisabled:[4,"data-errors-disabled"],required:[4],optional:[4],optionalText:[1,"optional-text"],ariaLabel:[1,"aria-label"],value:[32],validationMessage:[32]}]]],["ds-checkbox-group",[[1,"ds-checkbox-group",{legend:[1],assistiveText:[1,"assistive-text"],direction:[1],errorText:[1,"error-text"],text:[1],checked:[4],disabled:[4],childElementsCount:[32],checkedChildElementCount:[32],isIndeterminate:[32],indeterminateChildCheckboxCount:[32],setChecked:[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"dsCheckboxInput","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"]],{disabled:["watchCheckboxDisabledChange"],checked:["watchCheckedChange"],isIndeterminate:["watchIndeterminateChange"],checkedChildElementCount:["watchCheckedChildElementCountChange"]}]]],["ds-visually-hidden",[[1,"ds-visually-hidden"]]],["ds-link",[[1,"ds-link",{text:[1],size:[1],variant:[1],weight:[1],icon:[1025],iconPosition:[1025,"icon-position"],iconTitle:[1,"icon-title"],iconHidden:[4,"icon-hidden"],href:[1],target:[1],download:[4],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]],["ds-link-with-arrow",[[1,"ds-link-with-arrow",{text:[1],iconPosition:[1,"icon-position"],href:[1],target:[1],language:[1,"lang"],ariaLabel:[1,"aria-label"]}]]]],e))));