From f0c0989cae6a7c81f6529eed1745ef26775060cb Mon Sep 17 00:00:00 2001 From: Federico Iseppon <100614752+federicoisepponfincons@users.noreply.github.com> Date: Wed, 14 Jun 2023 11:12:59 +0200 Subject: [PATCH 1/8] feat: search-overlay page --- src/storybook/pages/search-overlay/readme.md | 0 .../search-overlay/search-overlay.common.tsx | 368 ++++++++++++++++++ .../pages/search-overlay/search-overlay.scss | 26 ++ .../search-overlay/search-overlay.stories.tsx | 179 +++++++++ 4 files changed, 573 insertions(+) create mode 100644 src/storybook/pages/search-overlay/readme.md create mode 100644 src/storybook/pages/search-overlay/search-overlay.common.tsx create mode 100644 src/storybook/pages/search-overlay/search-overlay.scss create mode 100644 src/storybook/pages/search-overlay/search-overlay.stories.tsx diff --git a/src/storybook/pages/search-overlay/readme.md b/src/storybook/pages/search-overlay/readme.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/storybook/pages/search-overlay/search-overlay.common.tsx b/src/storybook/pages/search-overlay/search-overlay.common.tsx new file mode 100644 index 0000000000..ef8bd7e79b --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay.common.tsx @@ -0,0 +1,368 @@ +/* eslint-disable @typescript-eslint/naming-convention */ +/** @jsx h */ +import { StoryContext } from '@storybook/html'; +import isChromatic from 'chromatic/isChromatic'; +import { JSX, h } from 'jsx-dom'; + +export const SkiplinkList = (): JSX.Element => ( + + Skip to content + Go to help page + +); + +export const TimetableInput = (): JSX.Element => ( +
+
+
+
+
+); + +const onNavigationClose = (dialog): void => { + dialog.addEventListener('didClose', () => { + (document.getElementById('nav-marker') as HTMLSbbNavigationMarkerElement).reset(); + }); +}; + +export const Navigation = (): JSX.Element => ( + onNavigationClose(dialog)}> + + Tickets & Offers + Vacations & Recreation + Travel information + + Help & Contact + + + + + Deutsch + Français + Italiano + + English + + + + + + Label + Label + Label + + + + Label + Label + Label + + + + Label + Label + Label + + + + Label + Label + Label + + + + Label + Label + Label + + + + Label + Label + Label + + + + All Tickets & Offers + + + + + + Label + Label + Label + + + + Label + Label + Label + + + + Label + Label + Label + + + + Label + Label + Label + + + + Label + Label + Label + + + + + + Label + Label + Label + + + + Label + Label + Label + + + + Label + Label + Label + + + + Travel Information + + + +); + +export const DailyTicketProduct = (): JSX.Element => ( + + + + + + Daily ticket + + Valid today + + + Buy + + + +); + +export const BikeProduct = (): JSX.Element => ( + + + + + + Bike day pass + + Valid today + + + Buy + + + +); + +export const LiberoProduct = (): JSX.Element => ( + + + + + + Libero short distance ticket + + Valid today + + + Buy + + + +); + +export const TeaserHero = (): JSX.Element => ( +
+ + Considerate with SBB Green Class. + +
+); + +export const Footer = (args): JSX.Element => ( + +
+ + + Refunds + + + Lost property office + + + Complaints + + + Praise + + + Report property damage + + + + All help topics + +
+ + + Jobs & careers + + + Rail traffic information + + + SBB News + + + SBB Community + + + Company + + +
+ + + Newsletter. + +

+ Our newsletter regularly informs you of attractive offers from SBB via e-mail. +

+ + + Subscribe + +
+ + + + + Refunds + + + Lost property office + + + Complaints + + + Praise + + + Report property damage + + + +); + +export const wrapperStyle = (context: StoryContext): Record => ({ + 'background-color': context.args.negative + ? 'var(--sbb-color-charcoal-default)' + : 'var(--sbb-color-white-default)', +}); diff --git a/src/storybook/pages/search-overlay/search-overlay.scss b/src/storybook/pages/search-overlay/search-overlay.scss new file mode 100644 index 0000000000..9a500a40c4 --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay.scss @@ -0,0 +1,26 @@ +@use '../../../global/styles' as sbb; + +$timetable-margin-block: 7vh; + +#search-overlay-field { + width: 100%; +} + +.search-result__wrapper { + padding-block: var(--sbb-spacing-fixed-3x); + padding-inline: var(--sbb-spacing-responsive-xxxs); +} + +.search-result-item { + display: block; + padding-block: var(--sbb-spacing-fixed-3x); + border-bottom: 1px solid var(--sbb-color-charcoal-default); + text-decoration: none; + + .subtitle { + @include sbb.text-xs--regular; + + display: block; + color: var(--sbb-color-smoke-default); + } +} diff --git a/src/storybook/pages/search-overlay/search-overlay.stories.tsx b/src/storybook/pages/search-overlay/search-overlay.stories.tsx new file mode 100644 index 0000000000..d78f00ce5a --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay.stories.tsx @@ -0,0 +1,179 @@ +/** @jsx h */ +import { h, JSX } from 'jsx-dom'; +import readme from './readme.md'; +import { Footer, Navigation, SkiplinkList, wrapperStyle } from './search-overlay.common'; +import './search-overlay.scss'; +import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html'; +import type { InputType } from '@storybook/types'; + +/* ************************************************* */ +/* Storybook controls */ +/* ************************************************* */ + +const negative: InputType = { + control: { + type: 'boolean', + }, +}; + +const defaultArgTypes: ArgTypes = { + negative, +}; + +const defaultArgs: Args = { + negative: false, +}; + +/* ************************************************* */ +/* Storybook template */ +/* ************************************************* */ + +const Template = (args): JSX.Element => ( +
+ + + {/* ************************************************* + Header section + ************************************************* */} + + + Menu + +
+ + Search + + Sign in + + English + + + Deutsch + Français + Italiano + English + + + + + + + + + {/* ************************************************* + Main section + ************************************************* */} +
+
+ (document.getElementById('search-dialog') as HTMLSbbDialogElement).open()} + > + Open search overlay + + +
+ + Page content + +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
+
+ + + + + + + + + +
+ + + Result title 1 + + Lorem ipsum subtitle + + + + Result title 2 + + Lorem ipsum subtitle + + + + Result title 3 + + Lorem ipsum subtitle + + + + Result title 4 + + Lorem ipsum subtitle + + + + Result title 5 + + Lorem ipsum subtitle + +
+ +
+ + {/* ************************************************* + Footer section + ************************************************* */} +
+
+); + +/* ************************************************* */ +/* The Stories */ +/* ************************************************* */ + +/* --- Search ------------------------ */ +export const search: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs }, +}; + +/* ************************************************* */ +/* Render storybook section and stories */ +/* ************************************************* */ + +const meta: Meta = { + decorators: [ + (Story, context) => ( +
+ +
+ ), + ], + parameters: { + chromatic: { disableSnapshot: false }, + docs: { + extractComponentDescription: () => readme, + }, + layout: 'fullscreen', + }, + title: 'pages/search-overlay', +}; + +export default meta; From 2b47bec90d62bbcdf32ac4895b236ee5b69a3de9 Mon Sep 17 00:00:00 2001 From: Federico Iseppon <100614752+federicoisepponfincons@users.noreply.github.com> Date: Wed, 5 Jul 2023 10:40:47 +0200 Subject: [PATCH 2/8] fix: added stories --- ...search-overlay-instant-results.stories.tsx | 189 ++++++++++++++++++ ...-overlay-suggested-corrections.stories.tsx | 189 ++++++++++++++++++ .../pages/search-overlay/search-overlay.scss | 18 ++ .../search-overlay/search-overlay.stories.tsx | 82 ++++---- 4 files changed, 433 insertions(+), 45 deletions(-) create mode 100644 src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx create mode 100644 src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx diff --git a/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx new file mode 100644 index 0000000000..70c308416c --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx @@ -0,0 +1,189 @@ +/** @jsx h */ +import { h, JSX } from 'jsx-dom'; +import readme from './readme.md'; +import { Footer, Navigation, SkiplinkList, wrapperStyle } from './search-overlay.common'; +import './search-overlay.scss'; +import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html'; +import type { InputType } from '@storybook/types'; + +/* ************************************************* */ +/* Storybook controls */ +/* ************************************************* */ + +const negative: InputType = { + control: { + type: 'boolean', + }, +}; + +const defaultArgTypes: ArgTypes = { + negative, +}; + +const defaultArgs: Args = { + negative: false, +}; + +/* ************************************************* */ +/* Storybook template */ +/* ************************************************* */ + +const Template = (args): JSX.Element => ( +
+ + + {/* ************************************************* + Header section + ************************************************* */} + + + Menu + +
+ + Search + + Sign in + + English + + + Deutsch + Français + Italiano + English + + + + + + + + + {/* ************************************************* + Main section + ************************************************* */} +
+
+ (document.getElementById('search-dialog') as HTMLSbbDialogElement).open()} + > + Open search overlay + + +
+ + Page content + +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
+
+ + +
+
+ + + + + + + +
+
+ + Frequently searched + +
+ + + Result title 1 + + Lorem ipsum subtitle + + + + Result title 2 + + Lorem ipsum subtitle + + + + Result title 3 + + Lorem ipsum subtitle + + + + Result title 4 + + Lorem ipsum subtitle + + + + Result title 5 + + Lorem ipsum subtitle + + Show all 13 results +
+
+
+ +
+ + {/* ************************************************* + Footer section + ************************************************* */} +
+
+); + +/* ************************************************* */ +/* The Stories */ +/* ************************************************* */ + +/* --- Search ------------------------ */ +export const searchInstantResults: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs }, +}; + +/* ************************************************* */ +/* Render storybook section and stories */ +/* ************************************************* */ + +const meta: Meta = { + decorators: [ + (Story, context) => ( +
+ +
+ ), + ], + parameters: { + chromatic: { disableSnapshot: false }, + docs: { + extractComponentDescription: () => readme, + }, + layout: 'fullscreen', + }, + title: 'pages/search-overlay', +}; + +export default meta; diff --git a/src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx b/src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx new file mode 100644 index 0000000000..714a666b14 --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx @@ -0,0 +1,189 @@ +/** @jsx h */ +import { h, JSX } from 'jsx-dom'; +import readme from './readme.md'; +import { Footer, Navigation, SkiplinkList, wrapperStyle } from './search-overlay.common'; +import './search-overlay.scss'; +import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html'; +import type { InputType } from '@storybook/types'; + +/* ************************************************* */ +/* Storybook controls */ +/* ************************************************* */ + +const negative: InputType = { + control: { + type: 'boolean', + }, +}; + +const defaultArgTypes: ArgTypes = { + negative, +}; + +const defaultArgs: Args = { + negative: false, +}; + +/* ************************************************* */ +/* Storybook template */ +/* ************************************************* */ + +const Template = (args): JSX.Element => ( +
+ + + {/* ************************************************* + Header section + ************************************************* */} + + + Menu + +
+ + Search + + Sign in + + English + + + Deutsch + Français + Italiano + English + + + + + + + + + {/* ************************************************* + Main section + ************************************************* */} +
+
+ (document.getElementById('search-dialog') as HTMLSbbDialogElement).open()} + > + Open search overlay + + +
+ + Page content + +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. +
+
+ + +
+
+ + + + + + + +
+
+ + Frequently searched + +
+ + + Result title 1 + + Lorem ipsum subtitle + + + + Result title 2 + + Lorem ipsum subtitle + + + + Result title 3 + + Lorem ipsum subtitle + + + + Result title 4 + + Lorem ipsum subtitle + + + + Result title 5 + + Lorem ipsum subtitle + + Show all 13 results +
+
+
+ +
+ + {/* ************************************************* + Footer section + ************************************************* */} +
+
+); + +/* ************************************************* */ +/* The Stories */ +/* ************************************************* */ + +/* --- Search ------------------------ */ +export const searchSuggestedCorrections: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs }, +}; + +/* ************************************************* */ +/* Render storybook section and stories */ +/* ************************************************* */ + +const meta: Meta = { + decorators: [ + (Story, context) => ( +
+ +
+ ), + ], + parameters: { + chromatic: { disableSnapshot: false }, + docs: { + extractComponentDescription: () => readme, + }, + layout: 'fullscreen', + }, + title: 'pages/search-overlay', +}; + +export default meta; diff --git a/src/storybook/pages/search-overlay/search-overlay.scss b/src/storybook/pages/search-overlay/search-overlay.scss index 9a500a40c4..30562e2200 100644 --- a/src/storybook/pages/search-overlay/search-overlay.scss +++ b/src/storybook/pages/search-overlay/search-overlay.scss @@ -6,6 +6,17 @@ $timetable-margin-block: 7vh; width: 100%; } +.search-result-frequent { + display: flex; + align-items: center; + height: var(--sbb-spacing-responsive-xl); + + span { + color: var(--sbb-color-metal-default); + text-decoration: none; + } +} + .search-result__wrapper { padding-block: var(--sbb-spacing-fixed-3x); padding-inline: var(--sbb-spacing-responsive-xxxs); @@ -24,3 +35,10 @@ $timetable-margin-block: 7vh; color: var(--sbb-color-smoke-default); } } + +.frequent-searches-item { + display: block; + padding-block: var(--sbb-spacing-fixed-3x); + text-decoration: none; + color: var(--sbb-color-white-default); +} diff --git a/src/storybook/pages/search-overlay/search-overlay.stories.tsx b/src/storybook/pages/search-overlay/search-overlay.stories.tsx index d78f00ce5a..de52c04c6e 100644 --- a/src/storybook/pages/search-overlay/search-overlay.stories.tsx +++ b/src/storybook/pages/search-overlay/search-overlay.stories.tsx @@ -87,51 +87,43 @@ const Template = (args): JSX.Element => (
- - - - - - - -
- - - Result title 1 - - Lorem ipsum subtitle - - - - Result title 2 - - Lorem ipsum subtitle - - - - Result title 3 - - Lorem ipsum subtitle - - - - Result title 4 - - Lorem ipsum subtitle - - - - Result title 5 - - Lorem ipsum subtitle - +
+
+ + + + + + + +
+
+ Frequently searched +
+ + Result title 1 + + + Result title 2 + + + Result title 3 + + + Result title 4 + + + Result title 5 + +
+
From 359bdb487a74a6da527e0e715851776346e79189 Mon Sep 17 00:00:00 2001 From: Federico Iseppon <100614752+federicoisepponfincons@users.noreply.github.com> Date: Fri, 7 Jul 2023 11:33:06 +0200 Subject: [PATCH 3/8] fix: search overlay instant results --- ...search-overlay-instant-results.stories.tsx | 30 +++++++++---------- .../pages/search-overlay/search-overlay.scss | 15 +++++++++- 2 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx index 70c308416c..485632eaa5 100644 --- a/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx +++ b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx @@ -104,42 +104,40 @@ const Template = (args): JSX.Element => ( >
-
- - Frequently searched - -
- Result title 1 + Result title 1Lorem ipsum subtitle - Lorem ipsum subtitle - Result title 2 + Result title 2Lorem ipsum subtitle - Lorem ipsum subtitle - Result title 3 + Result title 3Lorem ipsum subtitle - Lorem ipsum subtitle - Result title 4 + Result title 4Lorem ipsum subtitle - Lorem ipsum subtitle +
+ example +
- Result title 5 + Result title 5Lorem ipsum subtitle - Lorem ipsum subtitle - Show all 13 results +
+ Show all 13 results +
diff --git a/src/storybook/pages/search-overlay/search-overlay.scss b/src/storybook/pages/search-overlay/search-overlay.scss index 30562e2200..e19daf53f8 100644 --- a/src/storybook/pages/search-overlay/search-overlay.scss +++ b/src/storybook/pages/search-overlay/search-overlay.scss @@ -23,7 +23,9 @@ $timetable-margin-block: 7vh; } .search-result-item { - display: block; + display: flex; + align-items: center; + gap: var(--sbb-spacing-fixed-4x); padding-block: var(--sbb-spacing-fixed-3x); border-bottom: 1px solid var(--sbb-color-charcoal-default); text-decoration: none; @@ -34,6 +36,13 @@ $timetable-margin-block: 7vh; display: block; color: var(--sbb-color-smoke-default); } + + .result-image { + margin-left: auto; + line-height: 0; + overflow: hidden; + border-radius: var(--sbb-border-radius-4x); + } } .frequent-searches-item { @@ -42,3 +51,7 @@ $timetable-margin-block: 7vh; text-decoration: none; color: var(--sbb-color-white-default); } + +.show-more { + padding-block: var(--sbb-spacing-fixed-3x); +} From 2685f75ceceb4aded2e88b3049e216cd580b846f Mon Sep 17 00:00:00 2001 From: Federico Iseppon <100614752+federicoisepponfincons@users.noreply.github.com> Date: Mon, 10 Jul 2023 10:59:27 +0200 Subject: [PATCH 4/8] fix: suggested corrections --- ...-overlay-suggested-corrections.stories.tsx | 37 +++---------------- 1 file changed, 5 insertions(+), 32 deletions(-) diff --git a/src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx b/src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx index 714a666b14..d7ab651840 100644 --- a/src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx +++ b/src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx @@ -105,41 +105,14 @@ const Template = (args): JSX.Element => (
- - Frequently searched - + Did you mean maybe:
- - - Result title 1 - - Lorem ipsum subtitle + + Result title 1 - - - Result title 2 - - Lorem ipsum subtitle + + Result title 2 - - - Result title 3 - - Lorem ipsum subtitle - - - - Result title 4 - - Lorem ipsum subtitle - - - - Result title 5 - - Lorem ipsum subtitle - - Show all 13 results
From 0792789610720cf76873c0f4c36c521cb476c27c Mon Sep 17 00:00:00 2001 From: Federico Iseppon <100614752+federicoisepponfincons@users.noreply.github.com> Date: Wed, 9 Aug 2023 11:06:51 +0200 Subject: [PATCH 5/8] fix: grid --- .../pages/search-overlay/search-overlay.scss | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/storybook/pages/search-overlay/search-overlay.scss b/src/storybook/pages/search-overlay/search-overlay.scss index e19daf53f8..0484b38121 100644 --- a/src/storybook/pages/search-overlay/search-overlay.scss +++ b/src/storybook/pages/search-overlay/search-overlay.scss @@ -2,6 +2,26 @@ $timetable-margin-block: 7vh; +.search-overlay-grid { + &.sbb-grid { + padding-inline: 0; + } + + .grid-reduced-width { + grid-column: 1/-1; + + @include sbb.mq($from: large) { + grid-column: 2/-2; + } + @include sbb.mq($from: wide) { + grid-column: 3/-3; + } + @include sbb.mq($from: ultra) { + grid-column: 1/-1; + } + } +} + #search-overlay-field { width: 100%; } From b5d6c42e28b0f8ee6565e21e6aad03ab11e6cd25 Mon Sep 17 00:00:00 2001 From: Federico Iseppon <100614752+federicoisepponfincons@users.noreply.github.com> Date: Wed, 9 Aug 2023 17:46:28 +0200 Subject: [PATCH 6/8] fix: test --- src/storybook/pages/search-overlay/search-overlay.common.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/storybook/pages/search-overlay/search-overlay.common.tsx b/src/storybook/pages/search-overlay/search-overlay.common.tsx index ef8bd7e79b..a5a57602b1 100644 --- a/src/storybook/pages/search-overlay/search-overlay.common.tsx +++ b/src/storybook/pages/search-overlay/search-overlay.common.tsx @@ -153,7 +153,6 @@ export const Navigation = (): JSX.Element => ( export const DailyTicketProduct = (): JSX.Element => ( @@ -175,7 +174,6 @@ export const DailyTicketProduct = (): JSX.Element => ( export const BikeProduct = (): JSX.Element => ( @@ -197,7 +195,6 @@ export const BikeProduct = (): JSX.Element => ( export const LiberoProduct = (): JSX.Element => ( From 3c8fa2e6621a085c2c1cdf4a8fc220770d04008c Mon Sep 17 00:00:00 2001 From: Federico Iseppon <100614752+federicoisepponfincons@users.noreply.github.com> Date: Mon, 28 Aug 2023 11:31:05 +0200 Subject: [PATCH 7/8] fix: subtitles --- ...search-overlay-instant-results.stories.tsx | 45 ++++++++++++------- .../pages/search-overlay/search-overlay.scss | 1 + 2 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx index 485632eaa5..237a24df40 100644 --- a/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx +++ b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx @@ -105,24 +105,36 @@ const Template = (args): JSX.Element => (
- - Result title 1Lorem ipsum subtitle - +
+ + Result title 1 + +

Lorem ipsum subtitle

+
- - Result title 2Lorem ipsum subtitle - +
+ + Result title 2 + +

Lorem ipsum subtitle

+
- - Result title 3Lorem ipsum subtitle - +
+ + Result title 3 + +

Lorem ipsum subtitle

+
- - Result title 4Lorem ipsum subtitle - +
+ + Result title 3 + +

Lorem ipsum subtitle

+
example (
- - Result title 5Lorem ipsum subtitle - +
+ + Result title 5 + +

Lorem ipsum subtitle

+
Show all 13 results diff --git a/src/storybook/pages/search-overlay/search-overlay.scss b/src/storybook/pages/search-overlay/search-overlay.scss index 0484b38121..8965a36679 100644 --- a/src/storybook/pages/search-overlay/search-overlay.scss +++ b/src/storybook/pages/search-overlay/search-overlay.scss @@ -55,6 +55,7 @@ $timetable-margin-block: 7vh; display: block; color: var(--sbb-color-smoke-default); + margin: 0; } .result-image { From 1678e162edc138308bb70d8d657cd7f000f77bf9 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 29 Aug 2023 11:09:06 +0200 Subject: [PATCH 8/8] fix: focus outline --- .../pages/search-overlay/search-overlay.scss | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/storybook/pages/search-overlay/search-overlay.scss b/src/storybook/pages/search-overlay/search-overlay.scss index 8965a36679..29ba06177e 100644 --- a/src/storybook/pages/search-overlay/search-overlay.scss +++ b/src/storybook/pages/search-overlay/search-overlay.scss @@ -47,9 +47,15 @@ $timetable-margin-block: 7vh; align-items: center; gap: var(--sbb-spacing-fixed-4x); padding-block: var(--sbb-spacing-fixed-3x); - border-bottom: 1px solid var(--sbb-color-charcoal-default); + border-bottom: var(--sbb-border-width-1x) solid var(--sbb-color-charcoal-default); text-decoration: none; + &:focus-visible { + @include sbb.focus-outline; + + border-radius: var(--sbb-border-radius-2x); + } + .subtitle { @include sbb.text-xs--regular; @@ -71,6 +77,12 @@ $timetable-margin-block: 7vh; padding-block: var(--sbb-spacing-fixed-3x); text-decoration: none; color: var(--sbb-color-white-default); + + &:focus-visible { + @include sbb.focus-outline; + + border-radius: var(--sbb-border-radius-2x); + } } .show-more {