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

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

@@ -0,0 +1,107 @@
+import { html } from "lit";
+import { litTemplateResultToString } from "../../../../utils/utils";
+const meta = {
+    title: 'Base Components/Spinner/Features',
+    component: 'ds-spinner',
+};
+export default meta;
+const spinnerColorsDom = html `
+    <div class="ds-sp-container">
+      <div class="ds-sp-item">
+        <span>Blue</span>
+        <ds-spinner ds-spinner-color="blue" ds-size="large"></ds-spinner>
+      </div>
+      <div class="ds-sp-item">
+        <span>Black</span>
+        <ds-spinner ds-spinner-color="black" ds-size="large"></ds-spinner>
+      </div>
+      <div class="ds-sp-item white">
+        <span>White</span>
+        <ds-spinner ds-spinner-color="white" ds-size="large"></ds-spinner>
+      </div>
+    </div>
+`;
+export const Colours = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(spinnerColorsDom),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sp-container {
+        display: flex;
+        gap: 1rem;
+        width: 100%;
+      }
+      .ds-sp-item {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+        padding: 0.5rem;
+      }
+      .white {
+        color: #FFF;
+        background: #000;
+      }
+    </style>
+    ${spinnerColorsDom}
+  `
+};
+const spinnerSizesDom = html `
+  <div class="ds-sp-container">
+    <div class="ds-sp-item">
+      <span>Small</span>
+      <ds-spinner ds-size="small"></ds-spinner>
+    </div>
+    <div class="ds-sp-item">
+      <span>Medium</span>
+      <ds-spinner ds-size="medium"></ds-spinner>
+    </div>
+    <div class="ds-sp-item">
+      <span>Large</span>
+      <ds-spinner ds-size="large"></ds-spinner>
+    </div>
+    <div class="ds-sp-item">
+      <span>xLarge</span>
+      <ds-spinner ds-size="xLarge"></ds-spinner>
+    </div>
+    <div class="ds-sp-item">
+      <span>2xLarge</span>
+      <ds-spinner ds-size="2xLarge"></ds-spinner>
+    </div>
+  </div>
+`;
+export const Sizes = {
+    parameters: {
+        docs: {
+            source: {
+                code: litTemplateResultToString(spinnerSizesDom),
+            },
+        },
+    },
+    render: () => html `
+    <style>
+      .ds-sp-container {
+        display: flex;
+        gap: 1rem;
+        width: 100%;
+      }
+      .ds-sp-item {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+        padding: 0.5rem;
+      }
+      .white {
+        color: #FFF;
+        background: #000;
+      }
+    </style>
+    ${spinnerSizesDom}
+  `
+};

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

@@ -0,0 +1,14 @@
+const meta = {
+    title: 'Base Components/Spinner',
+    component: 'ds-spinner',
+};
+export default meta;
+export const Default = {};
+export const Playground = {
+    args: {
+        dsText: 'Loading...',
+        dsSpinnerTextPosition: 'below',
+        dsSize: 'medium',
+        dsSpinnerColor: 'blue',
+    },
+};

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

@@ -6,7 +6,7 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
-.no-style-leak *, :host * {
+:host *, .ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
   display: block;
@@ -22,18 +22,18 @@
   }
 }
 
-.ds-input--label-container {
+.ds-input__label-container {
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-input--label-container label {
+.ds-input__label-container label {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
 }
-.ds-input--label-container small {
+.ds-input__label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
@@ -41,9 +41,9 @@
   line-height: var(--ds-lineHeight-large);
   display: block;
   margin-block-start: var(--ds-spacing-3xSmall);
-  color: var(--ds-textColor-secondary);
+  color: var(--ds-palette-black-70);
 }
-.ds-input--container {
+.ds-input__container {
   box-sizing: border-box;
   width: 100%;
   display: inline-flex;
@@ -51,76 +51,78 @@
   align-items: center;
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
-  border-color: var(--ds-borderColor-default);
+  border-color: var(--ds-palette-black-50);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-input--container: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-input--container:focus-within {
-  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-input--container.invalid {
-  background-color: var(--ds-bgColor-danger);
-  border-color: var(--ds-borderColor-danger);
-}
-.ds-input--container.invalid:hover:not(.ds-input--container.invalid:focus-within) {
-  background-color: var(--ds-bgColor-danger-hover);
-  border-color: var(--ds-borderColor-danger);
-}
-.ds-input--container.invalid.active {
-  background-color: var(--ds-bgColor-danger-active);
-  border-color: var(--ds-borderColor-danger);
-}
-.ds-input--container.valid {
-  background-color: var(--ds-bgColor-success);
-  border-color: var(--ds-borderColor-success);
-}
-.ds-input--container.valid:hover:not(.ds-input--container.valid:focus-within) {
-  background-color: var(--ds-bgColor-success-hover);
-  border-color: var(--ds-borderColor-success);
-}
-.ds-input--container.valid.active {
-  background-color: var(--ds-bgColor-success-active);
-  border-color: var(--ds-borderColor-success);
-}
-.ds-input--container.readonly, .ds-input--container.disabled {
-  background-color: var(--ds-bgColor-disabled-onLight);
-  border-color: var(--ds-borderColor-disabled-onLight);
-}
-.ds-input--container:has(input:active) {
+.ds-input__container: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);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.ds-input__container:focus-within {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
+}
+.ds-input__container.invalid {
+  background-color: var(--ds-palette-red-05);
+  border-color: var(--ds-palette-red-50);
+}
+.ds-input__container.invalid:hover:not(.ds-input__container.invalid:focus-within) {
+  background-color: var(--ds-palette-red-10);
+  border-color: var(--ds-palette-red-50);
+}
+.ds-input__container.invalid.active {
+  background-color: var(--ds-palette-red-20);
+  border-color: var(--ds-palette-red-50);
+}
+.ds-input__container.valid {
+  background-color: var(--ds-palette-green-05);
+  border-color: var(--ds-palette-green-50);
+}
+.ds-input__container.valid:hover:not(.ds-input__container.valid:focus-within) {
+  background-color: var(--ds-palette-green-10);
+  border-color: var(--ds-palette-green-50);
+}
+.ds-input__container.valid.active {
+  background-color: var(--ds-palette-green-20);
+  border-color: var(--ds-palette-green-50);
+}
+.ds-input__container.readonly, .ds-input__container.disabled {
+  background-color: var(--ds-overlay-black-10);
+  border-color: var(--ds-overlay-black-15);
+}
+.ds-input__container:has(span.prefix, ds-icon.prefix) {
+  padding-inline-start: var(--ds-spacing-2xSmall);
+}
+.ds-input__container:has(ds-button.suffix) {
+  padding-inline-end: unset;
+}
+.ds-input__container:has(input:active) {
   outline: none;
 }
-.ds-input--container:has(input:active):not:has(input:disabled, input:readonly) {
-  border-color: var(--ds-borderColor-default);
+.ds-input__container:has(input:active):not:has(input:disabled, input:read-only) {
+  border-color: var(--ds-palette-black-50);
 }
-.ds-input--container.active:not(.ds-input--container.disabled, .ds-input--container.readonly, .ds-input--container.invalid, .ds-input--container.valid) {
-  border-color: var(--ds-borderColor-default);
-  background-color: var(--ds-bgColor-white-active);
+.ds-input__container.active:not(.ds-input__container.disabled, .ds-input__container.readonly, .ds-input__container.invalid, .ds-input__container.valid) {
+  border-color: var(--ds-palette-black-50);
+  background-color: var(--ds-palette-black-20);
 }
-.ds-input--container:hover:not(.ds-input--container.disabled, .ds-input--container.readonly, .ds-input--container.active, .ds-input--container.invalid, .ds-input--container.valid, .ds-input--container:focus-within) {
-  border-color: var(--ds-borderColor-default);
-  background-color: var(--ds-bgColor-white-hover);
+.ds-input__container:hover:not(.ds-input__container.disabled, .ds-input__container.readonly, .ds-input__container.active, .ds-input__container.invalid, .ds-input__container.valid, .ds-input__container:focus-within) {
+  border-color: var(--ds-palette-black-50);
+  background-color: var(--ds-palette-black-10);
 }
-.ds-input--container:focus-within:not(.ds-input--container:focus-within.invalid, .ds-input--container:focus-within.valid, .ds-input--container:focus-within.readonly) {
-  border-color: var(--ds-borderColor-primary);
+.ds-input__container:focus-within:not(.ds-input__container:focus-within.invalid, .ds-input__container:focus-within.valid, .ds-input__container:focus-within.readonly) {
+  border-color: var(--ds-palette-mainBlue-70);
 }
-.ds-input--container:focus-within * > ds-button.suffix > button:focus-visible {
+.ds-input__container:focus-within * > ds-button.suffix > button:focus-visible {
   background-clip: padding-box;
   outline-offset: -5px;
   box-shadow: none;
   height: var(--ds-spacing-xLarge);
-  background-color: var(--ds-bgColor-transparent-onLight-hover);
+  background-color: var(--ds-overlay-black-10);
 }
-.ds-input--container > input {
+.ds-input__container > input {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -132,82 +134,47 @@
   flex-grow: 1;
   height: var(--ds-spacing-xLarge);
   line-height: var(--ds-fontSize-24);
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
   border: none;
   padding-block: var(--ds-spacing-4xSmall);
 }
-.ds-input--container > input:disabled {
-  color: var(--ds-textColor-disabled-onLight);
-}
-.ds-input--container > input:disabled::placeholder {
-  color: var(--ds-textColor-disabled-onLight);
-}
-.ds-input--container > input::placeholder {
+.ds-input__container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
-  color: var(--ds-textColor-secondary);
+  color: var(--ds-palette-black-70);
+}
+.ds-input__container > input:disabled {
+  color: var(--ds-palette-black-40);
 }
-.ds-input--container > input:focus {
+.ds-input__container > input:disabled::placeholder {
+  color: var(--ds-palette-black-40);
+}
+.ds-input__container > input:focus {
   outline: none;
   border: none;
 }
-.ds-input--container > input[type=number] {
-  -moz-appearance: textfield;
+.ds-input__container > input[type=number] {
+  appearance: textfield;
 }
-.ds-input--container > input::-webkit-search-decoration, .ds-input--container > input::-webkit-search-cancel-button, .ds-input--container > input::-webkit-search-results-button, .ds-input--container > input::-webkit-search-results-decoration, .ds-input--container > input::-webkit-inner-spin-button, .ds-input--container > input::-webkit-outer-spin-button {
-  -webkit-appearance: none;
+.ds-input__container > input::-webkit-search-decoration, .ds-input__container > input::-webkit-search-cancel-button, .ds-input__container > input::-webkit-search-results-button, .ds-input__container > input::-webkit-search-results-decoration, .ds-input__container > input::-webkit-inner-spin-button, .ds-input__container > input::-webkit-outer-spin-button {
+  appearance: none;
   margin: 0;
 }
-.ds-input--container:has(span.prefix, ds-icon.prefix) {
+.ds-input__container:has(span.prefix, ds-icon.prefix) > input {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-input--container:has(span.prefix, ds-icon.prefix) > input {
-  padding-inline-start: var(--ds-spacing-2xSmall);
-}
-.ds-input--container:has(ds-button.suffix) {
-  padding-inline-end: unset;
-}
-.ds-input--container span.prefix, .ds-input--container span.suffix {
+.ds-input__container span.prefix, .ds-input__container span.suffix {
   color: var(--ds-palette-black-70);
 }
-.ds-input--container ds-icon.prefix, .ds-input--container ::slotted([slot=prefix]) {
+.ds-input__container ds-icon.prefix, .ds-input__container ::slotted([slot=prefix]) {
   height: 1.5rem;
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
 }
-.ds-input--container ds-button.suffix {
+.ds-input__container ds-button.suffix {
   margin-top: calc(var(--ds-spacing-3xSmall) * -1);
   margin-right: calc(var(--ds-spacing-4xSmall) * -1);
   max-height: 40px;
-}
-
-.error-text--container,
-.success-text--container {
-  display: flex;
-  align-items: center;
-  margin-top: var(--ds-spacing-2xSmall);
-  gap: var(--ds-spacing-2xSmall);
-}
-.error-text--container ds-icon,
-.success-text--container ds-icon {
-  display: block;
-  height: 1.5rem;
-}
-.error-text--container small,
-.success-text--container small {
-  font-family: var(--ds-fontFamily-body);
-  font-size: var(--ds-fontSize-16);
-  font-weight: var(--ds-fontWeight-regular);
-  letter-spacing: var(--ds-letterSpacing-wide);
-  line-height: var(--ds-lineHeight-large);
-}
-
-.error-text--container {
-  color: var(--ds-textColor-danger);
-}
-
-.success-text--container {
-  color: var(--ds-textColor-success);
 }