feat(notification): add size 's'

sbb-design-systems · Apr 18, 2024 · 545bb79 · 545bb79
1 parent 3a82c67
commit 545bb79
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 7 deletions.
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
@@ -30,6 +30,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.
@@ -82,6 +84,18 @@
   --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);
+  --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)
+    var(--sbb-spacing-responsive-xxs);
+
+  @include sbb.mq($to: small) {
+    --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)
+      var(--sbb-spacing-responsive-xxxs);
+  }
+}
+
 .sbb-notification__wrapper {
   position: relative;
   margin: var(--sbb-notification-margin);
@@ -138,6 +152,10 @@
     grid-template-columns: auto 1fr auto;
     align-items: flex-start;
   }
+
+  :host([size='s']) & {
+    @include sbb.text-xs--regular;
+  }
 }
 
 .sbb-notification__icon {
@@ -178,7 +196,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);
   }
 }
 

diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts
@@ -17,7 +17,7 @@ describe(`sbb-notification`, () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification disable-animation data-state="opened" type="info" size="m" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );
@@ -33,7 +33,7 @@ describe(`sbb-notification`, () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification disable-animation data-state="opened" title-content="Title" type="info" size="m" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );
@@ -50,7 +50,7 @@ describe(`sbb-notification`, () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation data-state="opened" type="info" data-slot-names="title unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification disable-animation data-state="opened" type="info" size="m" data-slot-names="title unnamed" style="--sbb-notification-height: auto;">
         <span slot="title">
           Slotted title
         </span>
@@ -69,7 +69,7 @@ describe(`sbb-notification`, () => {
 
     expect(root).dom.to.be.equal(
       `
-      <sbb-notification disable-animation readonly data-state="opened" title-content="Title" type="info" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
+      <sbb-notification disable-animation readonly data-state="opened" title-content="Title" type="info" size="m" data-slot-names="unnamed" style="--sbb-notification-height: auto;">
         The quick brown fox jumps over the lazy dog.
       </sbb-notification>`,
     );

diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts
@@ -27,6 +27,13 @@ const type: InputType = {
   options: ['info', 'success', 'warn', 'error'],
 };
 
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['s', 'm'],
+};
+
 const readonly: InputType = {
   control: {
     type: 'boolean',
@@ -42,13 +49,15 @@ const disableAnimation: InputType = {
 const basicArgTypes: ArgTypes = {
   'title-content': titleContent,
   type: type,
+  size: size,
   readonly: readonly,
   'disable-animation': disableAnimation,
 };
 
 const basicArgs: Args = {
   'title-content': 'Title',
   type: type.options[0],
+  size: size.options[1],
   readonly: false,
   'disable-animation': isChromatic(),
 };
@@ -62,6 +71,7 @@ const appendNotification = (event: Event, args: Args): void => {
   newNotification.titleContent = args['title-content'];
   newNotification.type = args['type'];
   newNotification.readonly = args['readonly'];
+  newNotification.size = args['size'];
   newNotification.disableAnimation = args['disable-animation'];
   newNotification.innerHTML =
     'Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.';
@@ -207,6 +217,12 @@ export const Readonly: StoryObj = {
   args: { ...basicArgs, readonly: true },
 };
 
+export const SizeS: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: { ...basicArgs, size: 's' },
+};
+
 export const NoTitle: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,

diff --git a/src/components/notification/notification.ts b/src/components/notification/notification.ts
@@ -67,6 +67,12 @@ export class SbbNotificationElement extends LitElement {
    */
   @property({ reflect: true, type: Boolean }) public readonly = false;
 
+  /**
+   * Whether the notification is readonly.
+   * In readonly mode, there is no dismiss button offered to the user.
+   */
+  @property({ reflect: true }) public size: 'm' | 's' = 'm';
+
   /**
    * Whether the animation is enabled.
    */
@@ -224,7 +230,11 @@ export class SbbNotificationElement extends LitElement {
           ></sbb-icon>
 
           <span class="sbb-notification__content">
-            <sbb-title class="sbb-notification__title" level=${this.titleLevel} visual-level="5">
+            <sbb-title
+              class="sbb-notification__title"
+              level=${this.titleLevel}
+              visual-level=${this.size === 'm' ? '5' : '6'}
+            >
               <slot name="title">${this.titleContent}</slot>
             </sbb-title>
             <slot></slot>
@@ -234,7 +244,7 @@ export class SbbNotificationElement extends LitElement {
             ? html`<span class="sbb-notification__close-wrapper">
                 <sbb-divider class="sbb-notification__divider" orientation="vertical"></sbb-divider>
                 <sbb-secondary-button
-                  size="m"
+                  size=${this.size}
                   icon-name="cross-small"
                   @click=${() => this.close()}
                   aria-label=${i18nCloseNotification[this._language.current]}