feat: add Notification component with styling and integration in the main page

2026-05-15 21:26:16 +02:00
parent b807a2a3c4
commit e8ed7e2a73
4 changed files with 100 additions and 0 deletions
@@ -0,0 +1,67 @@
+.notification {
+  display: flex;
+  align-items: center;
+  gap: var(--nds-spacing-sm);
+  padding: var(--nds-spacing-sm) var(--nds-spacing-md);
+  border-radius: var(--nds-radius-md);
+  border: var(--nds-border-width-thin) solid;
+  font-family: var(--nds-font-family-base);
+  font-size: var(--nds-type-body-medium-size);
+  font-weight: var(--nds-type-body-medium-weight);
+  letter-spacing: var(--nds-type-body-medium-letter-spacing);
+
+  &__content {
+    flex: 1;
+    line-height: 1.5;
+  }
+
+  &__close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--nds-focus-ring);
+      outline-offset: 2px;
+      border-radius: var(--nds-radius-xs);
+    }
+    &--error {
+      color: var(--nds-error-medium);
+    }
+  }
+
+  &--info {
+    background-color: var(--nds-info-low);
+    border-color: var(--nds-info-medium);
+    color: var(--nds-info-high);
+  }
+
+  &--success {
+    background-color: var(--nds-correct-low);
+    border-color: var(--nds-correct-medium);
+    color: var(--nds-correct-high);
+  }
+
+  &--warning {
+    background-color: var(--nds-warning-low);
+    border-color: var(--nds-warning-medium);
+    color: var(--nds-warning-high);
+  }
+
+  &--error {
+    background-color: var(--nds-error-low);
+    border-color: var(--nds-error-medium);
+    color: var(--nds-error-high);
+  }
+}
@@ -0,0 +1,23 @@
+---
+import { CloseIcon } from "../Icons";
+
+
+export interface Props {
+  type:        'info' | 'success' | 'warning' | 'error';
+}
+const notificationUUID  = `notification-${Math.random().toString(36).substr(2, 9)}`;
+const { type } = Astro.props;
+---
+
+<div class={`notification notification--${type}`} role="alert" id={notificationUUID}>
+  <div class="notification__content">
+    <slot />
+  </div>
+  <button class={`notification__close notification__close--${type}`} aria-label="Close notification" onclick={`document.getElementById('${notificationUUID}')?.remove()`}>
+    <CloseIcon size={16} label="Close notification" />
+  </button>
+</div>
+
+<style lang="scss">
+@use './_notification.scss';
+</style>
@@ -1,3 +1,4 @@
 // Auto-generated by scripts/generate-barrel.mjs — do not edit manually.

 export * from './Icons/index.ts';
+export { default as Notification } from './Notifications/notification.astro';