feat(journey-header): add size s (#2656)

sbb-design-systems · May 23, 2024 · 610ef3a · 610ef3a
1 parent 38efbd8
commit 610ef3a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 16 deletions.
diff --git a/src/components/journey-header/journey-header.stories.ts b/src/components/journey-header/journey-header.stories.ts
@@ -37,7 +37,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['m', 'l'],
+  options: ['s', 'm', 'l'],
 };
 
 const negative: InputType = {
@@ -60,7 +60,7 @@ const defaultArgs: Args = {
   destination: 'Loèche-les-Bains',
   'round-trip': false,
   level: level.options![2],
-  size: size.options![0],
+  size: size.options![1],
   negative: false,
 };
 
@@ -99,7 +99,7 @@ export const SizeMRoundTripShortText: StoryObj = {
 export const SizeL: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,
-  args: { ...defaultArgs, size: size.options![1] },
+  args: { ...defaultArgs, size: size.options![2] },
 };
 
 export const SizeLRoundTripShortText: StoryObj = {
@@ -110,7 +110,25 @@ export const SizeLRoundTripShortText: StoryObj = {
     origin: 'Bern',
     destination: 'Thun',
     'round-trip': true,
-    size: size.options![1],
+    size: size.options![2],
+  },
+};
+
+export const SizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![0] },
+};
+
+export const SizeSRoundTripShortText: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: {
+    ...defaultArgs,
+    origin: 'Bern',
+    destination: 'Thun',
+    'round-trip': true,
+    size: size.options![0],
   },
 };
 

diff --git a/src/components/journey-header/journey-header.ts b/src/components/journey-header/journey-header.ts
@@ -14,7 +14,13 @@ import '../icon.js';
 import '../screen-reader-only.js';
 import '../title.js';
 
-export type JourneyHeaderSize = 'm' | 'l';
+export type JourneyHeaderSize = 's' | 'm' | 'l';
+
+const sizeToLevel: Map<JourneyHeaderSize, string> = new Map<JourneyHeaderSize, string>([
+  ['s', '6'],
+  ['m', '5'],
+  ['l', '4'],
+]);
 
 /**
  * Combined with the `sbb-journey-summary`, it displays the journey's detail.
@@ -36,7 +42,7 @@ export class SbbJourneyHeaderElement extends SbbNegativeMixin(LitElement) {
   @property() public level: SbbTitleLevel = '3';
 
   /** Journey header size. */
-  @property({ reflect: true }) public size?: JourneyHeaderSize = 'm';
+  @property({ reflect: true }) public size: JourneyHeaderSize = 'm';
 
   private _language = new SbbLanguageController(this);
 
@@ -47,7 +53,7 @@ export class SbbJourneyHeaderElement extends SbbNegativeMixin(LitElement) {
       <sbb-title
         level=${this.level || nothing}
         ?negative=${this.negative}
-        visual-level=${this.size === 'l' ? '4' : '5'}
+        visual-level=${sizeToLevel.get(this.size)!}
       >
         <span class="sbb-journey-header" dir=${getDocumentWritingMode()}>
           <span class="sbb-journey-header__origin">

diff --git a/src/components/journey-header/readme.md b/src/components/journey-header/readme.md
@@ -16,9 +16,11 @@ the icon is an arrow pointing to the `destination`, otherwise it is a double arr
 The component has a `level` property, which is passed to its inner `sbb-title` component;
 it is rendered as a heading from `h1` to `h6`. Default `level` is `3`.
 
-The component also has two sizes, named `m` (default) and `l`, and a `negative` background variant.
+The component also has three sizes, named `s`, `m` (default) and `l`, and a `negative` background variant.
 
 ```html
+<sbb-journey-header origin="Point A" destination="Point B" size="s"></sbb-journey-header>
+
 <sbb-journey-header origin="Point A" destination="Point B" size="l"></sbb-journey-header>
 
 <sbb-journey-header origin="Point A" destination="Point B" level="5"></sbb-journey-header>
@@ -46,11 +48,11 @@ The following one will be read as (locale: ENG): `Connection from Point A to Poi
 
 ## Properties
 
-| Name          | Attribute     | Privacy | Type                             | Default | Description                                                                       |
-| ------------- | ------------- | ------- | -------------------------------- | ------- | --------------------------------------------------------------------------------- |
-| `destination` | `destination` | public  | `string`                         |         | Destination location for the journey header.                                      |
-| `level`       | `level`       | public  | `SbbTitleLevel`                  | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                         |
-| `negative`    | `negative`    | public  | `boolean`                        | `false` | Negative coloring variant flag.                                                   |
-| `origin`      | `origin`      | public  | `string`                         |         | Origin location for the journey header.                                           |
-| `roundTrip`   | `round-trip`  | public  | `boolean \| undefined`           |         | Whether the journey is a round trip. If so, the icon changes to a round-trip one. |
-| `size`        | `size`        | public  | `JourneyHeaderSize \| undefined` | `'m'`   | Journey header size.                                                              |
+| Name          | Attribute     | Privacy | Type                   | Default | Description                                                                       |
+| ------------- | ------------- | ------- | ---------------------- | ------- | --------------------------------------------------------------------------------- |
+| `destination` | `destination` | public  | `string`               |         | Destination location for the journey header.                                      |
+| `level`       | `level`       | public  | `SbbTitleLevel`        | `'3'`   | Heading level of the journey header element (e.g. h1-h6).                         |
+| `negative`    | `negative`    | public  | `boolean`              | `false` | Negative coloring variant flag.                                                   |
+| `origin`      | `origin`      | public  | `string`               |         | Origin location for the journey header.                                           |
+| `roundTrip`   | `round-trip`  | public  | `boolean \| undefined` |         | Whether the journey is a round trip. If so, the icon changes to a round-trip one. |
+| `size`        | `size`        | public  | `JourneyHeaderSize`    | `'m'`   | Journey header size.                                                              |