@uh-design-system/component-library 0.4.0 → 0.4.2

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

@@ -1,4 +1,5 @@
 import { html } from "lit";
+import { litTemplateResultToString } from "../../../../utils/utils";
 const meta = {
     title: 'Base Components/Button/Examples',
     component: 'ds-button',
@@ -13,21 +14,61 @@ export const ButtonGroup = {
     </div>
   `,
 };
+export const ButtonGroupSmall = {
+    render: () => html `
+    <div class="button-group">
+      <ds-button variant="primary" value="Primary" size="small"></ds-button>
+      <ds-button variant="secondary" value="Secondary" size="small"></ds-button>
+      <ds-button variant="supplementary" value="Supplementary" size="small"></ds-button>
+    </div>
+  `,
+};
+export const ButtonGroupIcon = {
+    render: () => html `
+    <div class="button-group">
+      <ds-button value="Button with text and icon" icon="ds_flame"></ds-button>
+      <ds-button value="Button with text and icon" icon="ds_flame" icon-position="end"></ds-button>
+      <ds-button icon="ds_flame" aria-label="Button with icon"></ds-button>
+    </div>
+  `,
+};
+const resetAndSubmitButtonDOM = html `
+  <form class="ds-sb-reset-and-submit-button">
+    <ds-text-input name="firstname" label="firstname"></ds-text-input>
+    <ds-text-input name="lastname" label="lastname"></ds-text-input>
+    <div class="button-group ds-sb-reset-and-submit-button__buttons">
+      <ds-button value="reset" type="reset" variant="secondary"></ds-button>
+      <ds-button value="submit" type="submit"></ds-button>
+    </div>
+  </form>
+`;
 export const ResetAndSubmitButton = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(resetAndSubmitButtonDOM),
+            }
+        },
+    },
     render: () => html `
-    <form>
-      <ds-text-input name="firstname" label="firstname"></ds-text-input>
-      <ds-text-input name="lastname" label="lastname"></ds-text-input>
-      <div class="button-group">
-        <ds-button value="reset" type="reset" variant="secondary"></ds-button>
-        <ds-button value="submit" type="submit"></ds-button>
-      </div>
-    </form>
+    <style>
+      .ds-sb-reset-and-submit-button {
+        display: inline-flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+      .ds-sb-reset-and-submit-button .ds-sb-reset-and-submit-button__buttons {
+        align-self: flex-end;
+      }
+    </style>
+    ${resetAndSubmitButtonDOM}
   `,
 };
 export const FullWidthWithIconsUsingSlots = {
-    render: () => html `<ds-button style="width: 100%" value="Full width with icons using slots">
-    <ds-icon slot="prefix" name="ds_flame"></ds-icon>
-    <ds-icon slot="suffix" name="ds_flame"></ds-icon>
-  </ds-button>`,
+    render: () => html `
+    <ds-button style="width: 100%;" value="Full width with icons using slots">
+      <ds-icon slot="prefix" name="ds_flame"></ds-icon>
+      <ds-icon slot="suffix" name="ds_flame"></ds-icon>
+    </ds-button>
+  `,
 };

package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js

@@ -16,61 +16,94 @@ const meta = {
     },
 };
 export default meta;
-export const Primary = {};
-Primary.args = {
-    value: 'Primary',
-    variant: 'primary',
-};
-export const Secondary = {};
-Secondary.args = {
-    value: 'Secondary',
-    variant: 'secondary',
-};
-export const Supplementary = {};
-Supplementary.args = {
-    value: 'Supplementary',
-    variant: 'supplementary',
-};
-export const Blue = {};
-Blue.args = {
-    value: 'Blue',
-    colour: 'blue',
-};
-export const Black = {};
-Black.args = {
-    value: 'Black',
-    colour: 'black',
-};
-export const White = {};
-White.args = {
-    value: 'White',
-    colour: 'white',
-};
-export const Medium = {};
-Medium.args = {
-    value: 'Medium',
-    size: 'medium',
-};
-export const Small = {};
-Small.args = {
-    value: 'Small',
-    size: 'small',
-};
-export const Disabled = {};
-Disabled.args = {
-    value: 'Disabled',
-    disabled: true,
-};
-export const IconStart = {};
-IconStart.args = {
-    value: 'Icon start',
-    icon: 'arrow_forward',
-};
-export const IconEnd = {};
-IconEnd.args = {
-    value: 'Icon end',
-    icon: 'arrow_forward',
-    iconPosition: 'end',
+export const Primary = {
+    args: {
+        value: 'Primary',
+        variant: 'primary',
+    }
+};
+export const Secondary = {
+    args: {
+        value: 'Secondary',
+        variant: 'secondary',
+    }
+};
+export const Supplementary = {
+    args: {
+        value: 'Supplementary',
+        variant: 'supplementary',
+    }
+};
+export const Blue = {
+    args: {
+        value: 'Blue',
+        colour: 'blue',
+    }
+};
+export const Black = {
+    args: {
+        value: 'Black',
+        colour: 'black',
+    }
+};
+export const White = {
+    args: {
+        value: 'White',
+        colour: 'white',
+    },
+    parameters: {
+        backgrounds: { default: 'Black 90%' },
+    }
+};
+export const Medium = {
+    args: {
+        value: 'Medium',
+        size: 'medium',
+    }
+};
+export const SmallPrimary = {
+    args: {
+        size: 'small',
+        variant: 'primary',
+    },
+};
+export const SmallSecondary = {
+    args: {
+        size: 'small',
+        variant: 'secondary',
+    },
+};
+export const SmallSupplementary = {
+    args: {
+        size: 'small',
+        variant: 'supplementary',
+    },
+};
+export const Disabled = {
+    args: {
+        value: 'Disabled',
+        disabled: true,
+    }
+};
+export const IconStart = {
+    args: {
+        value: 'Icon start',
+        icon: 'arrow_forward',
+    }
+};
+export const IconEnd = {
+    args: {
+        value: 'Icon end',
+        icon: 'arrow_forward',
+        iconPosition: 'end',
+    }
+};
+export const IconOnly = {
+    args: {
+        value: '',
+        icon: 'download',
+        ariaLabel: 'Download',
+    }
 };
 export const FullWidth = {
     render: () => html `<ds-button full-width value="Full width"></ds-button>`

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

@@ -1,5 +1,5 @@
 import { icons } from "../../../00-foundations/icons/iconList";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes";
+import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
 const buttonAriaAttributes = [
     'aria-busy',
     'aria-live',

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

@@ -0,0 +1,144 @@
+.ds-checkbox-fieldset {
+  display: inline-flex;
+  flex-direction: column;
+  border: none;
+  padding: 0;
+  margin: 0;
+  gap: var(--ds-spacing-3xSmall);
+}
+.ds-checkbox-fieldset__legend {
+  padding-inline: 0;
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  line-height: var(--ds-lineHeight-large);
+}
+.ds-checkbox-fieldset__assistive-text {
+  display: inline;
+  font-size: var(--ds-fontSize-14);
+  color: var(--ds-textColor-secondary);
+  line-height: var(--ds-lineHeight-large);
+}
+
+.ds-checkbox {
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  text-wrap: nowrap;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  width: auto;
+  padding: var(--ds-spacing-xSmall);
+}
+.ds-checkbox--no-margin .ds-checkbox__input {
+  margin-right: 0;
+}
+.ds-checkbox--disabled {
+  color: var(--ds-textColor-disabled-onLight);
+}
+.ds-checkbox__span--optional {
+  color: var(--ds-textColor-secondary);
+  font-size: var(--ds-fontSize-14);
+}
+.ds-checkbox:has(.ds-checkbox__input:disabled) {
+  cursor: not-allowed;
+}
+.ds-checkbox__input {
+  cursor: pointer;
+  /* hide the default checkbox */
+  -webkit-appearance: none;
+  appearance: none;
+  /* For iOS < 15 to remove gradient background */
+  background-color: var(--ds-bgColor-white);
+  /* Not removed via appearance */
+  margin: 0;
+  display: grid;
+  place-content: center;
+  height: 24px;
+  width: 24px;
+  margin-right: var(--ds-spacing-xSmall);
+  border-width: var(--ds-borderWidth-thin);
+  border-style: solid;
+  border-color: var(--ds-palette-black-50);
+  /** unchecked **/
+  /** checked and indeterminate **/
+  /** Error state should override other styles */
+  /** checkmark **/
+}
+.ds-checkbox__input: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-checkbox__input:hover, .ds-checkbox__input:active {
+  border-color: var(--ds-borderColor-default);
+}
+.ds-checkbox__input:hover {
+  background-color: var(--ds-bgColor-white-hover);
+}
+.ds-checkbox__input:active {
+  background-color: var(--ds-bgColor-white-active);
+}
+.ds-checkbox__input:disabled {
+  background-color: var(--ds-bgColor-disabled-onLight);
+  border-color: var(--ds-borderColor-disabled-onLight);
+}
+@media (forced-colors: active) {
+  .ds-checkbox__input:disabled {
+    border-color: GrayText;
+  }
+}
+.ds-checkbox__input:checked, .ds-checkbox__input:indeterminate {
+  background-color: var(--ds-bgColor-primary);
+  border-color: var(--ds-borderColor-transparent);
+}
+.ds-checkbox__input:checked:hover, .ds-checkbox__input:indeterminate:hover {
+  background-color: var(--ds-bgColor-primary-hover);
+}
+.ds-checkbox__input:checked:active, .ds-checkbox__input:indeterminate:active {
+  background-color: var(--ds-bgColor-primary-active);
+}
+.ds-checkbox__input:checked:disabled, .ds-checkbox__input:indeterminate:disabled {
+  background-color: var(--ds-bgColor-disabled-onLight);
+}
+.ds-checkbox__input:user-invalid, .ds-checkbox__input--invalid, .ds-checkbox__input--invalid:checked, .ds-checkbox__input--invalid:indeterminate {
+  border-color: var(--ds-borderColor-danger);
+}
+.ds-checkbox__input:disabled {
+  cursor: not-allowed;
+  color: var(--ds-textColor-disabled-onLight);
+}
+.ds-checkbox__input::before {
+  content: "";
+  display: block;
+  height: 1em;
+  width: 1em;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.ds-checkbox__input:checked::before {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>");
+}
+.ds-checkbox__input:checked:disabled::before {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>");
+}
+.ds-checkbox__input:indeterminate::before {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>");
+}
+.ds-checkbox__input:indeterminate:disabled::before {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>");
+}
+
+.ds-checkbox-error {
+  display: flex;
+}
+.ds-checkbox-error--visible {
+  padding-top: var(--ds-spacing-3xSmall);
+  padding-left: var(--ds-spacing-xSmall);
+}