@ndwnu/design-system 14.2.1 → 14.3.0

package/styles/components/_guided-tour.scss

@@ -1,70 +1,70 @@
-@use 'shepherd.js/dist/css/shepherd.css';
-@use '../base/typography' as typo;
-@use '../components/button' as ndwButton;
-
-.shepherd-theme-ndw {
-  --image-height: 200px;
-
-  position: relative;
-  background-color: var(--ndw-color-white);
-  border-radius: var(--ndw-border-radius-md);
-  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
-  padding: var(--ndw-spacing-lg);
-
-  &.shepherd-has-title {
-    .shepherd-header {
-      padding: 0;
-      background-color: var(--ndw-color-white);
-
-      .shepherd-title {
-        @include typo.ndw-heading-sm;
-      }
-    }
-  }
-
-  // Add padding-top when image is present to make room for the absolute positioned image
-  &.shepherd-has-image {
-    padding-top: calc(var(--image-height) + var(--ndw-spacing-lg));
-  }
-
-  .shepherd-text {
-    display: block;
-    padding: 0;
-    margin-block: var(--ndw-spacing-md);
-    @include typo.ndw-paragraph-md;
-
-    // Styling for optional step images - positioned absolutely above title
-    .shepherd-step-image {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      display: block;
-      width: 100%;
-      height: var(--image-height);
-      border-radius: var(--ndw-border-radius-md) var(--ndw-border-radius-md) 0 0;
-      object-fit: cover;
-    }
-  }
-
-  .shepherd-footer {
-    padding: 0;
-
-    .primary.shepherd-button {
-      @extend [ndwButton];
-    }
-
-    .secondary.shepherd-button {
-      @extend [ndwButton], [secondary];
-    }
-
-    .tertiary.shepherd-button {
-      @extend [ndwButton], [tertiary];
-    }
-  }
-
-  // Override Shepherd's default grey arrow for elements with titles
-  &.shepherd-has-title[data-popper-placement^='bottom'] > .shepherd-arrow:before {
-    background-color: var(--ndw-color-white);
-  }
-}
+@use 'shepherd.js/dist/css/shepherd.css';
+@use '../base/typography' as typo;
+@use '../components/button' as ndwButton;
+
+.shepherd-theme-ndw {
+  --image-height: 200px;
+
+  position: relative;
+  background-color: var(--ndw-color-white);
+  border-radius: var(--ndw-border-radius-md);
+  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.5);
+  padding: var(--ndw-spacing-lg);
+
+  &.shepherd-has-title {
+    .shepherd-header {
+      padding: 0;
+      background-color: var(--ndw-color-white);
+
+      .shepherd-title {
+        @include typo.ndw-heading-sm;
+      }
+    }
+  }
+
+  // Add padding-top when image is present to make room for the absolute positioned image
+  &.shepherd-has-image {
+    padding-top: calc(var(--image-height) + var(--ndw-spacing-lg));
+  }
+
+  .shepherd-text {
+    display: block;
+    padding: 0;
+    margin-block: var(--ndw-spacing-md);
+    @include typo.ndw-paragraph-md;
+
+    // Styling for optional step images - positioned absolutely above title
+    .shepherd-step-image {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: block;
+      width: 100%;
+      height: var(--image-height);
+      border-radius: var(--ndw-border-radius-md) var(--ndw-border-radius-md) 0 0;
+      object-fit: cover;
+    }
+  }
+
+  .shepherd-footer {
+    padding: 0;
+
+    .primary.shepherd-button {
+      @extend [ndwButton];
+    }
+
+    .secondary.shepherd-button {
+      @extend [ndwButton], [secondary];
+    }
+
+    .tertiary.shepherd-button {
+      @extend [ndwButton], [tertiary];
+    }
+  }
+
+  // Override Shepherd's default grey arrow for elements with titles
+  &.shepherd-has-title[data-popper-placement^='bottom'] > .shepherd-arrow:before {
+    background-color: var(--ndw-color-white);
+  }
+}

package/styles/components/_input.scss

@@ -1,253 +1,253 @@
-// Styles shared between regular [ndwInput] and [ndwInput] inside .input-container.
-@mixin shared-style() {
-  display: flex;
-  align-items: center;
-  background-color: var(--ndw-color-white);
-  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
-  border-radius: var(--ndw-border-radius-sm);
-  box-sizing: border-box;
-  outline: var(--ndw-border-size-sm) solid transparent;
-  outline-offset: calc(var(--ndw-border-size-sm) * -1);
-  transition: (
-    background-color 150ms ease-in-out,
-    border-color 150ms ease-in-out,
-    outline-color 150ms ease-in-out
-  );
-
-  &:has([ndwInput]:hover) {
-    border-color: var(--ndw-color-grey-400);
-  }
-
-  &:has([ndwInput]:active),
-  &:has([ndwInput]:focus),
-  &:has([ndwInput]:focus-visible) {
-    border-color: transparent;
-    box-shadow: var(--ndw-elevation-info);
-    outline-color: var(--ndw-color-info-500);
-  }
-
-  &[success] {
-    background-color: var(--ndw-color-positive-100);
-    border-color: var(--ndw-color-positive-500);
-
-    &:hover {
-      border-color: var(--ndw-color-grey-300);
-    }
-
-    &:active,
-    &:focus,
-    &:focus-visible {
-      background-color: var(--ndw-color-white);
-      border-color: transparent;
-      outline-color: var(--ndw-color-info-500);
-    }
-  }
-
-  &[error] {
-    background-color: var(--ndw-color-critical-100);
-    border-color: var(--ndw-color-critical-500);
-
-    [ndwInput] {
-      background-color: var(--ndw-color-critical-100);
-    }
-
-    &:hover {
-      border-color: var(--ndw-color-grey-300);
-    }
-
-    &:active,
-    &:focus,
-    &:focus-visible {
-      background-color: var(--ndw-color-white);
-      border-color: transparent;
-      outline-color: var(--ndw-color-info-500);
-    }
-  }
-
-  &[disabled],
-  &[readonly],
-  &:has([ndwInput]:disabled),
-  &:has([ndwInput]:read-only):not(:has(select[ndwInput])) {
-    background-color: var(--ndw-color-grey-100);
-    border-color: var(--ndw-color-grey-300);
-    color: var(--ndw-color-grey-500);
-    cursor: default;
-
-    &:hover,
-    &:has([ndwInput]:hover) {
-      border-color: var(--ndw-color-grey-300);
-    }
-
-    &:has([ndwInput]:active),
-    &:has([ndwInput]:focus),
-    &:has([ndwInput]:focus-visible) {
-      border-color: var(--ndw-color-grey-300);
-      box-shadow: none;
-      outline-color: transparent;
-    }
-
-    [ndwInput] {
-      background-color: var(--ndw-color-grey-100);
-      user-select: text;
-    }
-
-    ndw-icon {
-      color: var(--ndw-color-grey-500);
-      pointer-events: none;
-    }
-  }
-}
-
-@mixin input-focus-visible-label {
-  outline-color: Highlight;
-  outline-color: -webkit-focus-ring-color;
-  outline-style: auto;
-  outline-width: 1px;
-}
-
-.input-container:has([ndwInput][error]) {
-  background-color: var(--ndw-color-critical-100);
-  border-color: var(--ndw-color-critical-500);
-}
-
-// Add input container right padding when select element is used
-.input-container:has(select[ndwInput]) {
-  padding-inline-end: var(--ndw-spacing-xs);
-}
-
-.input-container[error]:has([ndwInput]:is(:active, :focus, :focus-visible)) {
-  background-color: var(--ndw-color-white);
-  select[ndwInput] {
-    background-color: var(--ndw-color-white);
-  }
-}
-
-// When an ndwInput is contained in an input-container hide the
-// ndwInput borders and instead put the borders on the container.
-.input-container:has([ndwInput]) {
-  @include shared-style();
-
-  gap: var(--ndw-spacing-xs);
-
-  // When input has a ndw-input-icon enable the inline padding
-  &:has(> ndw-input-icon) {
-    padding-inline: var(--ndw-spacing-xs);
-  }
-  &:has(> ndw-picker-button) {
-    padding-inline-end: var(--ndw-spacing-xs);
-  }
-
-  // Any elements before the input have a lighter grey color
-  > *:has(~ [ndwInput]) {
-    color: var(--ndw-color-grey-400);
-  }
-
-  // Remove inline padding when the input has prefix or suffix items
-  * + [ndwInput] {
-    padding-inline-start: 0;
-  }
-
-  [ndwInput]:has(+ *) {
-    padding-inline-end: 0;
-  }
-  [ndwInput]:is(textarea) {
-    padding-inline-end: var(--ndw-spacing-sm);
-  }
-
-  // Except when the input is a select, to prevent text from overflowing the chevron
-  select[ndwInput]:has(+ *) {
-    padding-inline-end: 0;
-  }
-
-  // Remove border from the input, the container has the borders
-  [ndwInput] {
-    border: none;
-    outline: none;
-
-    &:hover,
-    &:active,
-    &:focus,
-    &:focus-visible {
-      border: none;
-      outline: none;
-    }
-  }
-
-  &:has(textarea) {
-    padding-inline: 0;
-  }
-
-  // Set correct background color for max char counter for text areas
-  & .max-char-counter {
-    background-color: var(--ndw-color-white);
-  }
-
-  &[success] .max-char-counter {
-    background-color: var(--ndw-color-positive-100);
-  }
-
-  &[error] .max-char-counter {
-    background-color: var(--ndw-color-critical-100);
-  }
-}
-
-[ndwInput] {
-  @include shared-style();
-
-  width: 100%;
-  padding-inline: var(--ndw-spacing-sm);
-  color: var(--ndw-color-grey-700);
-  font-family: var(--ndw-font-family-body);
-  font-size: var(--ndw-font-size-sm);
-  height: var(--ndw-spacing-2xl);
-  line-height: var(--ndw-line-height-md);
-  border-radius: var(--ndw-border-radius-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &::placeholder {
-    color: var(--ndw-color-grey-400);
-  }
-
-  // Hide clear button in search inputs on chrome-based browsers
-  &[type='search']::-webkit-search-decoration,
-  &[type='search']::-webkit-search-cancel-button,
-  &[type='search']::-webkit-search-results-button,
-  &[type='search']::-webkit-search-results-decoration {
-    display: none;
-  }
-
-  &[type='date'],
-  &[type='datetime-local'],
-  &[type='month'],
-  &[type='time'],
-  &[type='week'] {
-    &::-webkit-calendar-picker-indicator {
-      cursor: pointer;
-      opacity: 0;
-    }
-  }
-}
-
-select[ndwInput] {
-  appearance: none;
-  cursor: pointer;
-
-  &[ndw-placeholder],
-  option[disabled] {
-    color: var(--ndw-color-grey-400);
-  }
-
-  option:not([disabled]) {
-    color: var(--ndw-color-grey-700);
-  }
-}
-
-textarea[ndwInput] {
-  min-height: 4rem;
-  padding-block: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
-  padding-inline: var(--ndw-spacing-sm);
-  line-height: normal;
-  white-space: pre-wrap;
-  resize: vertical;
-}
+// Styles shared between regular [ndwInput] and [ndwInput] inside .input-container.
+@mixin shared-style() {
+  display: flex;
+  align-items: center;
+  background-color: var(--ndw-color-white);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
+  border-radius: var(--ndw-border-radius-sm);
+  box-sizing: border-box;
+  outline: var(--ndw-border-size-sm) solid transparent;
+  outline-offset: calc(var(--ndw-border-size-sm) * -1);
+  transition: (
+    background-color 150ms ease-in-out,
+    border-color 150ms ease-in-out,
+    outline-color 150ms ease-in-out
+  );
+
+  &:has([ndwInput]:hover) {
+    border-color: var(--ndw-color-grey-400);
+  }
+
+  &:has([ndwInput]:active),
+  &:has([ndwInput]:focus),
+  &:has([ndwInput]:focus-visible) {
+    border-color: transparent;
+    box-shadow: var(--ndw-elevation-info);
+    outline-color: var(--ndw-color-info-500);
+  }
+
+  &[success] {
+    background-color: var(--ndw-color-positive-100);
+    border-color: var(--ndw-color-positive-500);
+
+    &:hover {
+      border-color: var(--ndw-color-grey-300);
+    }
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      background-color: var(--ndw-color-white);
+      border-color: transparent;
+      outline-color: var(--ndw-color-info-500);
+    }
+  }
+
+  &[error] {
+    background-color: var(--ndw-color-critical-100);
+    border-color: var(--ndw-color-critical-500);
+
+    [ndwInput] {
+      background-color: var(--ndw-color-critical-100);
+    }
+
+    &:hover {
+      border-color: var(--ndw-color-grey-300);
+    }
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      background-color: var(--ndw-color-white);
+      border-color: transparent;
+      outline-color: var(--ndw-color-info-500);
+    }
+  }
+
+  &[disabled],
+  &[readonly],
+  &:has([ndwInput]:disabled),
+  &:has([ndwInput]:read-only):not(:has(select[ndwInput])) {
+    background-color: var(--ndw-color-grey-100);
+    border-color: var(--ndw-color-grey-300);
+    color: var(--ndw-color-grey-500);
+    cursor: default;
+
+    &:hover,
+    &:has([ndwInput]:hover) {
+      border-color: var(--ndw-color-grey-300);
+    }
+
+    &:has([ndwInput]:active),
+    &:has([ndwInput]:focus),
+    &:has([ndwInput]:focus-visible) {
+      border-color: var(--ndw-color-grey-300);
+      box-shadow: none;
+      outline-color: transparent;
+    }
+
+    [ndwInput] {
+      background-color: var(--ndw-color-grey-100);
+      user-select: text;
+    }
+
+    ndw-icon {
+      color: var(--ndw-color-grey-500);
+      pointer-events: none;
+    }
+  }
+}
+
+@mixin input-focus-visible-label {
+  outline-color: Highlight;
+  outline-color: -webkit-focus-ring-color;
+  outline-style: auto;
+  outline-width: 1px;
+}
+
+.input-container:has([ndwInput][error]) {
+  background-color: var(--ndw-color-critical-100);
+  border-color: var(--ndw-color-critical-500);
+}
+
+// Add input container right padding when select element is used
+.input-container:has(select[ndwInput]) {
+  padding-inline-end: var(--ndw-spacing-xs);
+}
+
+.input-container[error]:has([ndwInput]:is(:active, :focus, :focus-visible)) {
+  background-color: var(--ndw-color-white);
+  select[ndwInput] {
+    background-color: var(--ndw-color-white);
+  }
+}
+
+// When an ndwInput is contained in an input-container hide the
+// ndwInput borders and instead put the borders on the container.
+.input-container:has([ndwInput]) {
+  @include shared-style();
+
+  gap: var(--ndw-spacing-xs);
+
+  // When input has a ndw-input-icon enable the inline padding
+  &:has(> ndw-input-icon) {
+    padding-inline: var(--ndw-spacing-xs);
+  }
+  &:has(> ndw-picker-button) {
+    padding-inline-end: var(--ndw-spacing-xs);
+  }
+
+  // Any elements before the input have a lighter grey color
+  > *:has(~ [ndwInput]) {
+    color: var(--ndw-color-grey-400);
+  }
+
+  // Remove inline padding when the input has prefix or suffix items
+  * + [ndwInput] {
+    padding-inline-start: 0;
+  }
+
+  [ndwInput]:has(+ *) {
+    padding-inline-end: 0;
+  }
+  [ndwInput]:is(textarea) {
+    padding-inline-end: var(--ndw-spacing-sm);
+  }
+
+  // Except when the input is a select, to prevent text from overflowing the chevron
+  select[ndwInput]:has(+ *) {
+    padding-inline-end: 0;
+  }
+
+  // Remove border from the input, the container has the borders
+  [ndwInput] {
+    border: none;
+    outline: none;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible {
+      border: none;
+      outline: none;
+    }
+  }
+
+  &:has(textarea) {
+    padding-inline: 0;
+  }
+
+  // Set correct background color for max char counter for text areas
+  & .max-char-counter {
+    background-color: var(--ndw-color-white);
+  }
+
+  &[success] .max-char-counter {
+    background-color: var(--ndw-color-positive-100);
+  }
+
+  &[error] .max-char-counter {
+    background-color: var(--ndw-color-critical-100);
+  }
+}
+
+[ndwInput] {
+  @include shared-style();
+
+  width: 100%;
+  padding-inline: var(--ndw-spacing-sm);
+  color: var(--ndw-color-grey-700);
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  height: var(--ndw-spacing-2xl);
+  line-height: var(--ndw-line-height-md);
+  border-radius: var(--ndw-border-radius-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::placeholder {
+    color: var(--ndw-color-grey-400);
+  }
+
+  // Hide clear button in search inputs on chrome-based browsers
+  &[type='search']::-webkit-search-decoration,
+  &[type='search']::-webkit-search-cancel-button,
+  &[type='search']::-webkit-search-results-button,
+  &[type='search']::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  &[type='date'],
+  &[type='datetime-local'],
+  &[type='month'],
+  &[type='time'],
+  &[type='week'] {
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+}
+
+select[ndwInput] {
+  appearance: none;
+  cursor: pointer;
+
+  &[ndw-placeholder],
+  option[disabled] {
+    color: var(--ndw-color-grey-400);
+  }
+
+  option:not([disabled]) {
+    color: var(--ndw-color-grey-700);
+  }
+}
+
+textarea[ndwInput] {
+  min-height: 4rem;
+  padding-block: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
+  padding-inline: var(--ndw-spacing-sm);
+  line-height: normal;
+  white-space: pre-wrap;
+  resize: vertical;
+}