feat: add size s in alert

sbb-design-systems · Apr 16, 2024 · 4c35b2f · 4c35b2f
1 parent ddfd884
commit 4c35b2f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/src/components/alert/alert/alert.scss b/src/components/alert/alert/alert.scss
@@ -17,6 +17,7 @@ $open-anim-opacity-to: 1;
   --sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
   --sbb-alert-icon-size: #{sbb.px-to-rem-build(20)};
   --sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);
+  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
   --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
   --sbb-alert-animation-duration: var(--sbb-animation-duration-6x);
 
@@ -39,6 +40,11 @@ $open-anim-opacity-to: 1;
   --sbb-alert-animation-duration: 0ms;
 }
 
+:host([size='s']) {
+  --sbb-alert-gap: var(--sbb-spacing-fixed-1x) var(--sbb-spacing-responsive-xxs);
+  --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxxs);
+}
+
 :host([size='l']) {
   --sbb-alert-icon-size: var(--sbb-size-icon-ui-small);
 
@@ -132,7 +138,7 @@ $open-anim-opacity-to: 1;
 
 .sbb-alert__close-button {
   @include sbb.mq($from: small) {
-    margin-inline-start: var(--sbb-spacing-responsive-xxs);
+    margin-inline-start: var(--sbb-alert-close-icon-margin);
   }
 }
 

diff --git a/src/components/alert/alert/alert.stories.ts b/src/components/alert/alert/alert.stories.ts
@@ -58,7 +58,7 @@ const size: InputType = {
   control: {
     type: 'select',
   },
-  options: ['m', 'l'],
+  options: ['m', 'l', 's'],
 };
 
 const readonly: InputType = {
@@ -177,7 +177,13 @@ export const defaultAlert: StoryObj = {
 export const sizeL: StoryObj = {
   render: Default,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: 'l' },
+  args: { ...defaultArgs, size: size.options[1] },
+};
+
+export const sizeS: StoryObj = {
+  render: Default,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options[2] },
 };
 
 export const withoutCloseButton: StoryObj = {

diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts
@@ -44,7 +44,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) {
   @property({ reflect: true, type: Boolean }) public readonly = false;
 
   /** You can choose between `m` or `l` size. */
-  @property({ reflect: true }) public size: 'm' | 'l' = 'm';
+  @property({ reflect: true }) public size: 's' | 'm' | 'l' = 'm';
 
   /** Whether the fade in animation should be disabled. */
   @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation = false;

diff --git a/src/components/alert/alert/readme.md b/src/components/alert/alert/readme.md
@@ -57,9 +57,11 @@ which automatically removes an alert after clicking the close button.
 
 ## Style
 
-Users can choose between two `size`, `m` (default) and `l`.
+Users can choose between three `size`: `s`, `m` (default) and `l`.
 
 ```html
+<sbb-alert size="s"> ... </sbb-alert>
+
 <sbb-alert size="l"> ... </sbb-alert>
 ```
 
@@ -78,7 +80,7 @@ Avoid slotting block elements (e.g. `<div>`) as this violates semantic rules and
 | Name                 | Attribute             | Privacy | Type                                    | Default  | Description                                                                                                                                                      |
 | -------------------- | --------------------- | ------- | --------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `readonly`           | `readonly`            | public  | `boolean`                               | `false`  | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user.                                                                 |
-| `size`               | `size`                | public  | `'m' \| 'l'`                            | `'m'`    | You can choose between `m` or `l` size.                                                                                                                          |
+| `size`               | `size`                | public  | `'s' \| 'm' \| 'l'`                     | `'m'`    | You can choose between `m` or `l` size.                                                                                                                          |
 | `disableAnimation`   | `disable-animation`   | public  | `boolean`                               | `false`  | Whether the fade in animation should be disabled.                                                                                                                |
 | `iconName`           | `icon-name`           | public  | `string \| undefined`                   | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. |
 | `titleContent`       | `title-content`       | public  | `string \| undefined`                   |          | Content of title.                                                                                                                                                |