Skip to content

Commit

Permalink
feat: journey-header size s
Browse files Browse the repository at this point in the history
  • Loading branch information
DavideMininni-Fincons committed May 14, 2024
1 parent 3a87866 commit 5bb0182
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 7 deletions.
26 changes: 22 additions & 4 deletions src/components/journey-header/journey-header.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const size: InputType = {
control: {
type: 'inline-radio',
},
options: ['m', 'l'],
options: ['s', 'm', 'l'],
};

const negative: InputType = {
Expand All @@ -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,
};

Expand Down Expand Up @@ -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 = {
Expand All @@ -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],
},
};

Expand Down
4 changes: 2 additions & 2 deletions src/components/journey-header/journey-header.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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">
Expand Down
4 changes: 3 additions & 1 deletion src/components/journey-header/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 5bb0182

Please sign in to comment.