@ndwnu/design-system 12.2.1 → 13.0.0

package/package.json

@@ -1,29 +1,31 @@
 {
   "name": "@ndwnu/design-system",
-  "version": "12.2.1",
+  "version": "13.0.0",
   "peerDependencies": {
-    "@angular/animations": "^20.0.0",
-    "@angular/cdk": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@angular/material": "^20.0.0",
-    "@angular/router": "^20.0.0",
-    "@ndwnu/core": "2.1.1",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/material": "^21.0.0",
+    "@angular/router": "^21.0.0",
     "@github/markdown-toolbar-element": "2.2.3",
+    "dompurify": "^3.3.0",
+    "marked": "^17.0.1",
+    "@ndwnu/core": "2.1.1",
     "ag-grid-angular": "^34.0.2",
     "ag-grid-community": "^34.0.2",
-    "rxjs": "^7.8.0"
+    "rxjs": "^7.8.0",
+    "shepherd.js": "^14.5.1"
   },
   "sideEffects": false,
   "module": "fesm2022/ndwnu-design-system.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/ndwnu-design-system.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/ndwnu-design-system.d.ts",
       "default": "./fesm2022/ndwnu-design-system.mjs"
     }
   },

package/styles/components/_guided-tour.scss

@@ -0,0 +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);
+  }
+}

package/styles/components/_input.scss

@@ -39,7 +39,7 @@
     &:focus-visible {
       background-color: var(--ndw-color-white);
       border-color: transparent;
-      outline-color: var(--ndw-color-secondary-500);
+      outline-color: var(--ndw-color-info-500);
     }
   }
 
@@ -60,7 +60,7 @@
     &:focus-visible {
       background-color: var(--ndw-color-white);
       border-color: transparent;
-      outline-color: var(--ndw-color-secondary-500);
+      outline-color: var(--ndw-color-info-500);
     }
   }
 
@@ -161,6 +161,19 @@
   &: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] {

package/styles/components/_menu-button.scss

@@ -3,7 +3,7 @@
     background-color: transparent;
     border-color: transparent;
     border-radius: 0;
-    color: var(--ndw-color-grey-400);
+    color: var(--ndw-color-grey-300);
     gap: var(--ndw-spacing-xs);
     height: 2.625rem;
     padding-inline: 0;

package/styles/components/_summary-card.scss

@@ -29,7 +29,7 @@
     }
 
     &:has(a:focus:not(:active)) {
-      outline: var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500);
+      outline: var(--ndw-border-size-sm) solid var(--ndw-color-info-500);
     }
   }
 

package/styles/components/index.scss

@@ -5,6 +5,7 @@
 @forward 'dropdown';
 @forward 'edit-bar';
 @forward 'filter-button';
+@forward 'guided-tour';
 @forward 'input';
 @forward 'label';
 @forward 'link';

package/styles/storybook/overrides.css

@@ -42,14 +42,14 @@
   --ndw-color-primary-hover: var(--ndw-color-primary-600);
   --ndw-color-primary-active: var(--ndw-color-primary-700);
 
-  --_secondary-050: 209, 100%, 96%;
-  --_secondary-100: 209, 85%, 91%;
-  --_secondary-200: 209, 85%, 78%;
-  --_secondary-300: 209, 85%, 69%;
-  --_secondary-400: 208, 100%, 46%;
-  --_secondary-500: 208, 100%, 41%;
-  --_secondary-600: 209, 100%, 32%;
-  --_secondary-700: 209, 100%, 18%;
+  --_secondary-050: 339, 67%, 94%;
+  --_secondary-100: 333, 19%, 70%;
+  --_secondary-200: 327, 17%, 47%;
+  --_secondary-300: 324, 25%, 29%;
+  --_secondary-400: 317, 26%, 23%;
+  --_secondary-500: 312, 29%, 18%;
+  --_secondary-600: 312, 29%, 15%;
+  --_secondary-700: 312, 30%, 12%;
 
   --ndw-color-secondary-050: hsl(var(--_secondary-050));
   --ndw-color-secondary-100: hsl(var(--_secondary-100));