feat(notification): add size 's' (#2606)

sbb-design-systems · Apr 24, 2024 · cf97ecd · cf97ecd
1 parent 9ca43ca
commit cf97ecd
Show file tree

Hide file tree

Showing 6 changed files with 337 additions and 140 deletions.
diff --git a/src/components/notification/__snapshots__/notification.spec.snap.js b/src/components/notification/__snapshots__/notification.spec.snap.js
@@ -1,7 +1,70 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-notification renders"] = 
+snapshots["sbb-notification A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Test title",
+      "level": 3
+    },
+    {
+      "role": "text",
+      "name": "Lorem ipsum ..."
+    },
+    {
+      "role": "button",
+      "name": "Close message"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-notification A11y tree Chrome */
+
+snapshots["sbb-notification A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "heading",
+      "name": "Test title",
+      "level": 3
+    },
+    {
+      "role": "text leaf",
+      "name": "Lorem ipsum ..."
+    },
+    {
+      "role": "button",
+      "name": "Close message"
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-notification A11y tree Firefox */
+
+snapshots["sbb-notification renders Dom"] = 
+`<sbb-notification
+  animation="all"
+  data-slot-names="unnamed"
+  data-state="opening"
+  size="m"
+  type="info"
+>
+  The quick brown fox jumps over the lazy dog.
+</sbb-notification>
+`;
+/* end snapshot sbb-notification renders Dom */
+
+snapshots["sbb-notification renders ShadowDom"] = 
 `<div class="sbb-notification__wrapper">
   <div class="sbb-notification">
     <sbb-icon
@@ -51,9 +114,23 @@ snapshots["sbb-notification renders"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-notification renders */
+/* end snapshot sbb-notification renders ShadowDom */
 
-snapshots["sbb-notification renders with a title"] = 
+snapshots["sbb-notification renders with a title Dom"] = 
+`<sbb-notification
+  animation="all"
+  data-slot-names="unnamed"
+  data-state="opening"
+  size="m"
+  title-content="Title"
+  type="info"
+>
+  The quick brown fox jumps over the lazy dog.
+</sbb-notification>
+`;
+/* end snapshot sbb-notification renders with a title Dom */
+
+snapshots["sbb-notification renders with a title ShadowDom"] = 
 `<div class="sbb-notification__wrapper">
   <div class="sbb-notification">
     <sbb-icon
@@ -104,9 +181,25 @@ snapshots["sbb-notification renders with a title"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-notification renders with a title */
+/* end snapshot sbb-notification renders with a title ShadowDom */
+
+snapshots["sbb-notification renders with a slotted title Dom"] = 
+`<sbb-notification
+  animation="all"
+  data-slot-names="title unnamed"
+  data-state="opening"
+  size="m"
+  type="info"
+>
+  <span slot="title">
+    Slotted title
+  </span>
+  The quick brown fox jumps over the lazy dog.
+</sbb-notification>
+`;
+/* end snapshot sbb-notification renders with a slotted title Dom */
 
-snapshots["sbb-notification renders with a slotted title"] = 
+snapshots["sbb-notification renders with a slotted title ShadowDom"] = 
 `<div class="sbb-notification__wrapper">
   <div class="sbb-notification">
     <sbb-icon
@@ -156,9 +249,24 @@ snapshots["sbb-notification renders with a slotted title"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-notification renders with a slotted title */
+/* end snapshot sbb-notification renders with a slotted title ShadowDom */
+
+snapshots["sbb-notification renders without the close button Dom"] = 
+`<sbb-notification
+  animation="all"
+  data-slot-names="unnamed"
+  data-state="opening"
+  readonly=""
+  size="m"
+  title-content="Title"
+  type="info"
+>
+  The quick brown fox jumps over the lazy dog.
+</sbb-notification>
+`;
+/* end snapshot sbb-notification renders without the close button Dom */
 
-snapshots["sbb-notification renders without the close button"] = 
+snapshots["sbb-notification renders without the close button ShadowDom"] = 
 `<div class="sbb-notification__wrapper">
   <div class="sbb-notification">
     <sbb-icon
@@ -187,55 +295,72 @@ snapshots["sbb-notification renders without the close button"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-notification renders without the close button */
+/* end snapshot sbb-notification renders without the close button ShadowDom */
 
-snapshots["sbb-notification A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "heading",
-      "name": "Test title",
-      "level": 3
-    },
-    {
-      "role": "text",
-      "name": "Lorem ipsum ..."
-    },
-    {
-      "role": "button",
-      "name": "Close message"
-    }
-  ]
-}
-</p>
+snapshots["sbb-notification renders size s Dom"] = 
+`<sbb-notification
+  animation="all"
+  data-slot-names="unnamed"
+  data-state="opening"
+  size="s"
+  title-content="Title"
+  type="info"
+>
+  The quick brown fox jumps over the lazy dog.
+</sbb-notification>
 `;
-/* end snapshot sbb-notification A11y tree Chrome */
+/* end snapshot sbb-notification renders size s Dom */
 
-snapshots["sbb-notification A11y tree Firefox"] = 
-`<p>
-  {
-  "role": "document",
-  "name": "",
-  "children": [
-    {
-      "role": "heading",
-      "name": "Test title",
-      "level": 3
-    },
-    {
-      "role": "text leaf",
-      "name": "Lorem ipsum ..."
-    },
-    {
-      "role": "button",
-      "name": "Close message"
-    }
-  ]
-}
-</p>
+snapshots["sbb-notification renders size s ShadowDom"] = 
+`<div class="sbb-notification__wrapper">
+  <div class="sbb-notification">
+    <sbb-icon
+      aria-hidden="true"
+      class="sbb-notification__icon"
+      data-namespace="default"
+      name="circle-information-small"
+      role="img"
+    >
+    </sbb-icon>
+    <span class="sbb-notification__content">
+      <sbb-title
+        aria-level="3"
+        class="sbb-notification__title"
+        level="3"
+        role="heading"
+        visual-level="6"
+      >
+        <slot name="title">
+          Title
+        </slot>
+      </sbb-title>
+      <slot>
+      </slot>
+    </span>
+    <span class="sbb-notification__close-wrapper">
+      <sbb-divider
+        aria-orientation="vertical"
+        class="sbb-notification__divider"
+        orientation="vertical"
+        role="separator"
+      >
+      </sbb-divider>
+      <sbb-secondary-button
+        aria-label="Close message"
+        class="sbb-notification__close"
+        data-action=""
+        data-button=""
+        data-sbb-button=""
+        dir="ltr"
+        icon-name="cross-small"
+        role="button"
+        size="s"
+        tabindex="0"
+      >
+      </sbb-secondary-button>
+    </span>
+  </div>
+</div>
 `;
-/* end snapshot sbb-notification A11y tree Firefox */
+/* end snapshot sbb-notification renders size s ShadowDom */
 
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
@@ -13,6 +13,7 @@
   --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
   --sbb-notification-color: var(--sbb-color-charcoal);
   --sbb-notification-icon-color: var(--sbb-notification-type-color);
+  --sbb-notification-icon-margin-block-start: 0;
   --sbb-notification-border-width: var(--sbb-border-width-1x);
   --sbb-notification-border: var(--sbb-notification-border-width) solid
     var(--sbb-notification-type-color);
@@ -33,6 +34,8 @@
     border var(--sbb-notification-animation-duration) var(--sbb-animation-duration-2x)
       var(--sbb-notification-timing-function),
     opacity var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function);
+  --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)
+    var(--sbb-spacing-responsive-xs);
 
   // As the notification has always a light background, we have to fix the focus outline color
   // to default color for cases where the notification is used in a negative context.
@@ -94,6 +97,37 @@
   --sbb-notification-type-color-sass: #{color.mix(sbb-tokens.$sbb-color-red, white, 5%)};
 }
 
+:host([size='s']) {
+  --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)
+    var(--sbb-spacing-responsive-xxxs);
+  --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)
+    var(--sbb-spacing-responsive-xxs);
+}
+
+@include sbb.mq($from: small) {
+  :host {
+    --sbb-notification-icon-margin-block-start: calc(
+      ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2
+    );
+  }
+
+  :host(:where([data-slot-names~='title'], [title-content])) {
+    --sbb-notification-icon-margin-block-start: calc(
+      (
+          (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var(
+              --sbb-size-icon-ui-small
+            )
+        ) / 2
+    );
+  }
+
+  :host([size='s']) {
+    --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
+    --sbb-notification-icon-margin-block-start: 0;
+  }
+}
+
 .sbb-notification__wrapper {
   position: relative;
   margin: var(--sbb-notification-margin);
@@ -150,26 +184,15 @@
     grid-template-columns: auto 1fr auto;
     align-items: flex-start;
   }
+
+  :host([size='s']) & {
+    @include sbb.text-xs--regular;
+  }
 }
 
 .sbb-notification__icon {
   color: var(--sbb-notification-icon-color);
-
-  @include sbb.mq($from: small) {
-    margin-block-start: calc(
-      ((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2
-    );
-
-    :host(:where([data-slot-names~='title'], [title-content])) & {
-      margin-block-start: calc(
-        (
-            (var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var(
-                --sbb-size-icon-ui-small
-              )
-          ) / 2
-      );
-    }
-  }
+  margin-block-start: var(--sbb-notification-icon-margin-block-start);
 }
 
 .sbb-notification__title {
@@ -190,7 +213,7 @@
     order: initial;
     grid-area: initial;
     margin-block-start: 0;
-    padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
+    padding-inline: var(--sbb-notification-content-padding-inline);
   }
 }