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

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,315 @@
+:root {
+  --ds-borderWidth-none: 0px;
+  --ds-borderWidth-hairline: 1px;
+  --ds-borderWidth-thin: 2px;
+  --ds-borderWidth-thick: 4px;
+  --ds-borderWidth-xThick: 8px;
+  --ds-borderRadius-none: 0px;
+}
+
+:root {
+  --ds-overlay-black-00: rgb(0 0 0 / 0);
+  --ds-overlay-black-05: rgb(0 0 0 / 0.05);
+  --ds-overlay-black-10: rgb(0 0 0 / 0.1);
+  --ds-overlay-black-15: rgb(0 0 0 / 0.15);
+  --ds-overlay-black-30: rgb(0 0 0 / 0.3);
+  --ds-overlay-black-40: rgb(0 0 0 / 0.4);
+  --ds-overlay-black-50: rgb(0 0 0 / 0.5);
+  --ds-overlay-black-70: rgb(0 0 0 / 0.7);
+  --ds-overlay-black-80: rgb(0 0 0 / 0.8);
+  --ds-overlay-white-00: rgb(255 255 255 / 0);
+  --ds-overlay-white-05: rgb(255 255 255 / 0.05);
+  --ds-overlay-white-10: rgb(255 255 255 / 0.1);
+  --ds-overlay-white-15: rgb(255 255 255 / 0.15);
+  --ds-overlay-white-30: rgb(255 255 255 / 0.3);
+  --ds-overlay-white-40: rgb(255 255 255 / 0.4);
+  --ds-overlay-white-50: rgb(255 255 255 / 0.5);
+  --ds-overlay-white-70: rgb(255 255 255 / 0.7);
+  --ds-overlay-white-80: rgb(255 255 255 / 0.8);
+  --ds-palette-black: #000000;
+  --ds-palette-white: #ffffff;
+  --ds-palette-black-03: #f7f7f7;
+  --ds-palette-black-05: #f2f2f2;
+  --ds-palette-black-10: #e6e6e6;
+  --ds-palette-black-20: #cccccc;
+  --ds-palette-black-30: #b3b3b3;
+  --ds-palette-black-40: #999999;
+  --ds-palette-black-50: #808080;
+  --ds-palette-black-60: #666666;
+  --ds-palette-black-70: #4d4d4d;
+  --ds-palette-black-80: #333333;
+  --ds-palette-black-90: #1a1a1a;
+  --ds-palette-black-95: #0c0c0c;
+  --ds-palette-blue-05: #e5f8ff;
+  --ds-palette-blue-10: #c2eeff;
+  --ds-palette-blue-20: #8adeff;
+  --ds-palette-blue-30: #5cd1ff;
+  --ds-palette-blue-40: #1abeff;
+  --ds-palette-blue-50: #009ad6;
+  --ds-palette-blue-60: #0084b8;
+  --ds-palette-blue-70: #005b80;
+  --ds-palette-blue-80: #053c52;
+  --ds-palette-blue-90: #032330;
+  --ds-palette-green-05: #dffbe1;
+  --ds-palette-green-10: #bef4c1;
+  --ds-palette-green-20: #85e08a;
+  --ds-palette-green-30: #66cc6b;
+  --ds-palette-green-40: #43b149;
+  --ds-palette-green-50: #279b2d;
+  --ds-palette-green-60: #257e29;
+  --ds-palette-green-70: #216325;
+  --ds-palette-green-80: #183f19;
+  --ds-palette-green-90: #0f2410;
+  --ds-palette-mainBlue-05: #e5f5ff;
+  --ds-palette-mainBlue-10: #cdebff;
+  --ds-palette-mainBlue-20: #99d7ff;
+  --ds-palette-mainBlue-30: #70c7ff;
+  --ds-palette-mainBlue-40: #3db3ff;
+  --ds-palette-mainBlue-50: #009bff;
+  --ds-palette-mainBlue-60: #007fd1;
+  --ds-palette-mainBlue-70: #005a94;
+  --ds-palette-mainBlue-80: #003152;
+  --ds-palette-mainBlue-90: #001929;
+  --ds-palette-red-05: #ffeceb;
+  --ds-palette-red-10: #ffd8d6;
+  --ds-palette-red-20: #fdb7b4;
+  --ds-palette-red-30: #f87c77;
+  --ds-palette-red-40: #f0514c;
+  --ds-palette-red-50: #d71f19;
+  --ds-palette-red-60: #bd2828;
+  --ds-palette-red-70: #8b2623;
+  --ds-palette-red-80: #602220;
+  --ds-palette-red-90: #321c1b;
+  --ds-palette-yellow-05: #fff1db;
+  --ds-palette-yellow-10: #ffe7c2;
+  --ds-palette-yellow-20: #ffd799;
+  --ds-palette-yellow-30: #fbc05f;
+  --ds-palette-yellow-40: #eea22b;
+  --ds-palette-yellow-50: #ce8103;
+  --ds-palette-yellow-60: #b26d00;
+  --ds-palette-yellow-70: #7a4b00;
+  --ds-palette-yellow-80: #4e3104;
+  --ds-palette-yellow-90: #282115;
+}
+
+:root {
+  --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-80);
+  --ds-textColor-success: var(--ds-palette-green-80);
+  --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-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-white-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-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);
+}
+
+:root {
+  --ds-spacing-4xSmall: 0.125rem;
+  --ds-spacing-3xSmall: 0.25rem;
+  --ds-spacing-2xSmall: 0.5rem;
+  --ds-spacing-xSmall: 0.75rem;
+  --ds-spacing-small: 1rem;
+  --ds-spacing-medium: 1.5rem;
+  --ds-spacing-large: 2rem;
+  --ds-spacing-xLarge: 2.5rem;
+  --ds-spacing-2xLarge: 3rem;
+  --ds-spacing-3xLarge: 3.5rem;
+  --ds-spacing-4xLarge: 4rem;
+  --ds-spacing-5xLarge: 4.5rem;
+  --ds-spacing-layout-2xSmall: 1rem;
+  --ds-spacing-layout-xSmall: 1.5rem;
+  --ds-spacing-layout-small: 2rem;
+  --ds-spacing-layout-medium: 3rem;
+  --ds-spacing-layout-large: 4rem;
+  --ds-spacing-layout-xLarge: 6rem;
+  --ds-spacing-layout-2xLarge: 8rem;
+}
+
+.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);
+}