feat: new notification-box variants added

sbb-design-systems · Aug 14, 2024 · 128bc13 · 128bc13
1 parent a2b3a19
commit 128bc13
Show file tree

Hide file tree

Showing 38 changed files with 38 additions and 8 deletions.
diff --git a/src/assets/images/mobile/notification-default-with-title-dark.webp b/src/assets/images/mobile/notification-default-with-title-dark.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-default-with-title-light.webp b/src/assets/images/mobile/notification-default-with-title-light.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-default-without-title-dark.webp b/src/assets/images/mobile/notification-default-without-title-dark.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-default-without-title-light.webp b/src/assets/images/mobile/notification-default-without-title-light.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-interaction-with-title-dark.webp b/src/assets/images/mobile/notification-interaction-with-title-dark.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-interaction-with-title-light.webp b/src/assets/images/mobile/notification-interaction-with-title-light.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-interaction-without-title-dark.webp b/src/assets/images/mobile/notification-interaction-without-title-dark.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-interaction-without-title-light.webp b/src/assets/images/mobile/notification-interaction-without-title-light.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-with-title-dark.webp b/src/assets/images/mobile/notification-with-title-dark.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-with-title-light.webp b/src/assets/images/mobile/notification-with-title-light.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-without-title-dark.webp b/src/assets/images/mobile/notification-without-title-dark.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/notification-without-title-light.webp b/src/assets/images/mobile/notification-without-title-light.webp
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/assets/images/mobile/[email protected] b/src/assets/images/mobile/[email protected]
diff --git a/src/de/design-system/mobile/components/notification-box/variants-states.md b/src/de/design-system/mobile/components/notification-box/variants-states.md
@@ -22,17 +22,32 @@ Die Komponente hat folgende Varianten:{.lead}
 * Titel: Optional
 * Close-Button: Optional
 * Detail-Link: Optional
+* Interaction: Optional
 
-### Notificaton-Box mit Titel
+### Notification-Box mit Titel
 {{ imageWithMode({
-  url: '/assets/images/mobile/notification-with-title',
+  url: '/assets/images/mobile/notification-default-with-title',
   alt: 'Notification-Box, mit Titel',
   title: 'Notification-Box, mit Titel'
 }) }}
 
-### Notificaton-Box ohne Titel
+### Notification-Box ohne Titel
 {{ imageWithMode({
-  url: '/assets/images/mobile/notification-without-title',
+  url: '/assets/images/mobile/notification-default-without-title',
+  alt: 'Notification-Box, ohne Titel',
+  title: 'Notification-Box, ohne Titel'
+}) }}
+
+### Notification-Box mit Interaktion und Titel
+{{ imageWithMode({
+  url: '/assets/images/mobile/notification-interaction-with-title',
+  alt: 'Notification-Box, mit Titel',
+  title: 'Notification-Box, mit Titel'
+}) }}
+
+### Notification-Box mit Interaktion ohne Titel
+{{ imageWithMode({
+  url: '/assets/images/mobile/notification-interaction-without-title',
   alt: 'Notification-Box, ohne Titel',
   title: 'Notification-Box, ohne Titel'
 }) }}

diff --git a/src/en/design-system/mobile/components/notification-box/variants-states.md b/src/en/design-system/mobile/components/notification-box/variants-states.md
@@ -22,21 +22,36 @@ The component has the following variants:{.lead}
 * Title: Optional
 * Close-Button: Optional
 * Detail-Link: Optional
+* Interaction: Optional
 
-### Notificaton-Box with Titel
+### Notification-Box with Titel
 {{ imageWithMode({
-  url: '/assets/images/mobile/notification-with-title',
+  url: '/assets/images/mobile/notification-default-with-title',
   alt: 'Notificaton-Box, with Titel',
   title: 'Notificaton-Box, with Titel'
 }) }}
 
-### Notificaton-Box without Titel
+### Notification-Box without Titel
 {{ imageWithMode({
-  url: '/assets/images/mobile/notification-without-title',
+  url: '/assets/images/mobile/notification-default-without-title',
   alt: 'Notificaton-Box without Titel',
   title: 'Notificaton-Box without Titel'
 }) }}
 
+### Notification-Box with Interaction and Title
+{{ imageWithMode({
+  url: '/assets/images/mobile/notification-interaction-with-title',
+  alt: 'Notification-Box, mit Titel',
+  title: 'Notification-Box, mit Titel'
+}) }}
+
+### Notification-Box with Interaction without Title
+{{ imageWithMode({
+  url: '/assets/images/mobile/notification-interaction-without-title',
+  alt: 'Notification-Box, ohne Titel',
+  title: 'Notification-Box, ohne Titel'
+}) }}
+
 ## Spezifikationen
 {{ specificationLinks({
   figma: 'https://www.figma.com/file/WOtLIam1xwrqcgnAITsEhV/Design-System-Mobile?type=design&node-id=7254%3A25&mode=design&t=g20X3jZNv7HkqZou-1'