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-instant-results.stories.tsx b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx new file mode 100644 index 0000000000..237a24df40 --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx @@ -0,0 +1,202 @@ +/** @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 3 + +

Lorem ipsum subtitle

+
+
+ example +
+ + +
+ + 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..d7ab651840 --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx @@ -0,0 +1,162 @@ +/** @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. +
+
+ + +
+
+ + + + + + + +
+
+ Did you mean maybe: +
+ + Result title 1 + + + Result title 2 + +
+
+
+ +
+ + {/* ************************************************* + 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.common.tsx b/src/storybook/pages/search-overlay/search-overlay.common.tsx new file mode 100644 index 0000000000..a5a57602b1 --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay.common.tsx @@ -0,0 +1,365 @@ +/* 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..29ba06177e --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay.scss @@ -0,0 +1,90 @@ +@use '../../../global/styles' as sbb; + +$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%; +} + +.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); +} + +.search-result-item { + display: flex; + align-items: center; + gap: var(--sbb-spacing-fixed-4x); + padding-block: var(--sbb-spacing-fixed-3x); + 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; + + display: block; + color: var(--sbb-color-smoke-default); + margin: 0; + } + + .result-image { + margin-left: auto; + line-height: 0; + overflow: hidden; + border-radius: var(--sbb-border-radius-4x); + } +} + +.frequent-searches-item { + display: block; + 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 { + padding-block: var(--sbb-spacing-fixed-3x); +} 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..de52c04c6e --- /dev/null +++ b/src/storybook/pages/search-overlay/search-overlay.stories.tsx @@ -0,0 +1,171 @@ +/** @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 + + + Result title 2 + + + Result title 3 + + + Result title 4 + + + Result title 5 + +
+
+
+ +
+ + {/* ************************************************* + 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;