@uh-design-system/component-library 0.5.2 → 0.6.0

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

@@ -1,55 +1,48 @@
 import { html } from "lit";
+import { getDsElem } from "../../../../utils/tests/testUtils";
+import { expect } from "@storybook/test";
 const meta = {
     title: 'Base Components/Button/Features',
     component: 'ds-button',
     args: {
-        value: 'Button',
-    },
-    argTypes: {
-        value: { table: { disable: true } },
-        variant: { name: 'Variant', table: { disable: true } },
-        colour: { name: 'Colour', table: { disable: true } },
-        size: { name: 'Size', table: { disable: true } },
-        disabled: { name: 'Disabled', table: { disable: true } },
-        icon: { name: 'Icon', table: { disable: true } },
-        iconPosition: { name: 'Icon Position', table: { disable: true } },
+        dsValue: 'Button',
     },
 };
 export default meta;
 export const Primary = {
     args: {
-        value: 'Primary',
-        variant: 'primary',
+        dsValue: 'Primary',
+        dsVariant: 'primary',
     }
 };
 export const Secondary = {
     args: {
-        value: 'Secondary',
-        variant: 'secondary',
+        dsValue: 'Secondary',
+        dsVariant: 'secondary',
     }
 };
 export const Supplementary = {
     args: {
-        value: 'Supplementary',
-        variant: 'supplementary',
+        dsValue: 'Supplementary',
+        dsVariant: 'supplementary',
     }
 };
 export const Blue = {
     args: {
-        value: 'Blue',
-        colour: 'blue',
+        dsValue: 'Blue',
+        dsColour: 'blue',
     }
 };
 export const Black = {
     args: {
-        value: 'Black',
-        colour: 'black',
+        dsValue: 'Black',
+        dsColour: 'black',
     }
 };
 export const White = {
     args: {
-        value: 'White',
-        colour: 'white',
+        dsValue: 'White',
+        dsColour: 'white',
     },
     parameters: {
         backgrounds: { default: 'Black 90%' },
@@ -57,60 +50,74 @@ export const White = {
 };
 export const Medium = {
     args: {
-        value: 'Medium',
-        size: 'medium',
+        dsValue: 'Medium',
+        dsSize: 'medium',
     }
 };
 export const SmallPrimary = {
     args: {
-        size: 'small',
-        variant: 'primary',
+        dsSize: 'small',
+        dsVariant: 'primary',
     },
 };
 export const SmallSecondary = {
     args: {
-        size: 'small',
-        variant: 'secondary',
+        dsSize: 'small',
+        dsVariant: 'secondary',
     },
 };
 export const SmallSupplementary = {
     args: {
-        size: 'small',
-        variant: 'supplementary',
+        dsSize: 'small',
+        dsVariant: 'supplementary',
     },
 };
 export const Disabled = {
     args: {
-        value: 'Disabled',
-        disabled: true,
+        dsValue: 'Disabled',
+        dsDisabled: true,
     }
 };
 export const IconStart = {
     args: {
-        value: 'Icon start',
-        icon: 'arrow_forward',
+        dsValue: 'Icon start',
+        dsIcon: 'arrow_forward',
     }
 };
 export const IconEnd = {
     args: {
-        value: 'Icon end',
-        icon: 'arrow_forward',
-        iconPosition: 'end',
+        dsValue: 'Icon end',
+        dsIcon: 'arrow_forward',
+        dsIconPosition: 'end',
     }
 };
 export const IconOnly = {
     args: {
-        value: '',
-        icon: 'download',
+        dsValue: '',
+        dsIcon: 'download',
         ariaLabel: 'Download',
     }
 };
 export const FullWidth = {
-    render: () => html `<ds-button full-width value="Full width"></ds-button>`
+    render: () => html `<ds-button ds-full-width ds-value="Full width"></ds-button>`
 };
 export const FullWidthWithStartIcon = {
-    render: () => html `<ds-button full-width icon="ds_flame" value="Full width"></ds-button>`
+    render: () => html `<ds-button ds-full-width ds-icon="ds_flame" ds-value="Full width"></ds-button>`
 };
 export const FullWidthWithEndIcon = {
-    render: () => html `<ds-button full-width icon="ds_flame" icon-position="end" value="Full width"></ds-button>`
+    render: () => html `<ds-button ds-full-width ds-icon="ds_flame" ds-icon-position="end" ds-value="Full width"></ds-button>`
+};
+export const ProgrammaticFocus = {
+    args: {
+        dsValue: 'Primary',
+        dsVariant: 'primary',
+    },
+    play: async ({ canvasElement, step }) => {
+        const dsElem = await getDsElem(canvasElement, 'ds-button');
+        const buttonElem = dsElem.querySelector('button');
+        await step('Calling `dsFocus` should set focus to inner button element', async () => {
+            await dsElem.dsFocus();
+            expect(buttonElem).toHaveFocus();
+        });
+    }
 };

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

@@ -1,22 +1,4 @@
 import { icons } from "../../../00-foundations/icons/iconList";
-import { getAriaAttributeArgTypes } from "../../../../utils/attributes/attributes";
-const buttonAriaAttributes = [
-    'aria-busy',
-    'aria-live',
-    'aria-atomic',
-    'aria-disabled',
-    'aria-expanded',
-    'aria-pressed',
-    'aria-hidden',
-    'aria-label',
-    'aria-labelledby',
-    'aria-controls',
-    'aria-haspopup',
-    'aria-describedby',
-    'aria-relevant',
-    'aria-details',
-];
-const buttonAriaAttributeArgTypes = getAriaAttributeArgTypes(buttonAriaAttributes);
 const meta = {
     title: 'Base Components/Button',
     component: 'ds-button',
@@ -24,71 +6,33 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        value: 'button',
-        fontWeight: '700',
-        disabled: false,
+        dsValue: 'button',
+        dsDisabled: false,
     },
     argTypes: {
-        value: { control: 'text' },
-        disabled: { control: 'boolean' },
-        fontWeight: {
-            control: 'select',
-            options: [400, 600, 650, 700],
-        },
+        dsValue: { control: 'text' },
+        dsDisabled: { control: 'boolean' },
     },
 };
 export const Playground = {
     argTypes: {
-        ...Default.argTypes,
-        variant: {
-            options: ['primary', 'secondary', 'supplementary'],
-            control: {
-                type: 'radio',
-            },
-        },
-        colour: {
-            options: ['blue', 'black', 'white'],
-            control: {
-                type: 'radio',
-            },
-        },
-        size: {
-            options: ['medium', 'small'],
-            control: {
-                type: 'radio',
-            },
-        },
-        fontWeight: {
-            control: 'select',
-            options: [400, 600, 650, 700],
-        },
-        icon: {
+        dsIcon: {
             control: 'select',
             options: icons.map(icon => icon.name),
         },
-        iconPosition: {
-            options: ['start', 'end'],
-            control: {
-                type: 'radio',
-            },
-        },
-        type: {
-            options: ['submit', 'reset', 'button'],
-            control: {
-                type: 'radio',
-            },
-        },
-        ...buttonAriaAttributeArgTypes,
     },
     args: {
         ...Default.args,
-        variant: 'primary',
-        colour: 'blue',
-        size: 'medium',
-        disabled: false,
-        ariaLabel: '',
-        ariaLabelledby: '',
-        icon: '',
-        iconPosition: 'start',
+        dsVariant: 'primary',
+        dsColour: 'blue',
+        dsSize: 'medium',
+        dsDisabled: false,
+        dsIsLoading: false,
+        dsUseSpinner: false,
+        dsSpinnerHiddenText: '',
+        dsAriaLabel: '',
+        dsAriaLabelledby: '',
+        dsIcon: '',
+        dsIconPosition: 'start',
     },
 };

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

@@ -0,0 +1,127 @@
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
+:host {
+  display: block;
+}
+
+.ds-card {
+  background-color: var(--ds-palette-white);
+  border: 1px solid var(--ds-palette-black-20);
+  color: var(--ds-palette-black-95);
+  display: flex;
+  flex-direction: column;
+  hyphens: auto;
+  margin-bottom: var(--ds-spacing-2xSmall);
+}
+.ds-card:focus-within {
+  box-shadow: false 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * -1 * -1);
+}
+.ds-card:focus-within .ds-card__heading {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.ds-card.ds-card--link:hover {
+  border-color: var(--ds-palette-black-50);
+  cursor: pointer;
+}
+.ds-card.ds-card--link:hover ds-icon {
+  color: var(--ds-palette-black-80);
+}
+.ds-card.ds-card--link:hover .ds-card__heading {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.ds-card.ds-card--link:active {
+  border-color: var(--ds-palette-black-95);
+}
+.ds-card.ds-card--link:active ds-icon {
+  color: var(--ds-palette-black-80);
+}
+.ds-card.ds-card--link {
+  text-decoration: none;
+}
+.ds-card.ds-card--link:focus-within ds-icon {
+  color: var(--ds-palette-black-80);
+}
+.ds-card--filled {
+  background-color: var(--ds-palette-black-05);
+}
+.ds-card__image-container {
+  aspect-ratio: 16/9;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.ds-card__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ds-card__content--top {
+  align-items: center;
+  display: flex;
+  gap: var(--ds-spacing-small);
+  justify-content: space-between;
+  padding: var(--ds-spacing-xSmall) var(--ds-spacing-small);
+}
+.ds-card__content--top__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-3xSmall);
+}
+.ds-card__eyebrow {
+  color: var(--ds-palette-black-70);
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+  font-weight: var(--ds-fontWeight-semibold);
+  letter-spacing: 1px;
+  line-height: var(--ds-lineHeight-large);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  margin-bottom: var(--ds-spacing-3xSmall);
+  order: 1;
+}
+.ds-card__heading {
+  align-items: center;
+  color: var(--ds-palette-black-95);
+  display: flex;
+  font-size: var(--ds-fontSize-20);
+  font-weight: var(--ds-fontWeight-semibold);
+  margin: 0;
+  order: 2;
+  justify-content: space-between;
+  text-wrap: balance;
+}
+.ds-card__heading__link {
+  all: unset;
+}
+.ds-card__subtitle {
+  font-size: var(--ds-fontSize-16);
+  font-family: var(--ds-fontFamily-body);
+  color: var(--ds-palette-black-70);
+  line-height: var(--ds-lineHeight-large);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  order: 3;
+}
+.ds-card__description {
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+  line-height: var(--ds-lineHeight-large);
+  letter-spacing: var(--ds-letterSpacing-wide);
+  color: var(--ds-palette-black-95);
+  padding: 0 var(--ds-spacing-small);
+  margin: 0 0 var(--ds-spacing-small) 0;
+  text-wrap: pretty;
+}
+.ds-card ds-icon {
+  color: var(--ds-palette-mainBlue-70);
+  font-size: var(--ds-fontSize-20);
+  font-weight: normal;
+}