From 5bb0182b0ac0d7eae8f791283f1600a37d6ea799 Mon Sep 17 00:00:00 2001
From: Davide Mininni <davide.mininni@finconsgroup.com>
Date: Tue, 14 May 2024 09:15:14 +0200
Subject: [PATCH] feat: journey-header size s

---
 .../journey-header/journey-header.stories.ts  | 26 ++++++++++++++++---
 .../journey-header/journey-header.ts          |  4 +--
 src/components/journey-header/readme.md       |  4 ++-
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/journey-header/journey-header.stories.ts b/src/components/journey-header/journey-header.stories.ts
index ee781b8994..0f8152f48d 100644
--- 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
index 5563541d72..44bbbfcc76 100644
--- a/src/components/journey-header/journey-header.ts
+++ b/src/components/journey-header/journey-header.ts
@@ -14,7 +14,7 @@ import '../icon.js';
 import '../screen-reader-only.js';
 import '../title.js';
 
-export type JourneyHeaderSize = 'm' | 'l';
+export type JourneyHeaderSize = 's' | 'm' | 'l';
 
 /**
  * Combined with the `sbb-journey-summary`, it displays the journey's detail.
@@ -47,7 +47,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=${this.size === 'l' ? '4' : this.size === 'm' ? '5' : '6'}
       >
         <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
index 4d6d5e1333..753df6be59 100644
--- 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>