Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: search-overlay page #1815

Closed
wants to merge 8 commits into from
Closed

feat: search-overlay page #1815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f0c0989
feat: search-overlay page
federicoisepponfincons Jun 14, 2023
2b47bec
fix: added stories
federicoisepponfincons Jul 5, 2023
359bdb4
fix: search overlay instant results
federicoisepponfincons Jul 7, 2023
2685f75
fix: suggested corrections
federicoisepponfincons Jul 10, 2023
0792789
fix: grid
federicoisepponfincons Aug 9, 2023
b5d6c42
fix: test
federicoisepponfincons Aug 9, 2023
3c8fa2e
fix: subtitles
federicoisepponfincons Aug 28, 2023
1678e16
fix: focus outline
jeripeierSBB Aug 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Empty file added src/storybook/pages/search-overlay/readme.md
View file
Open in desktop
Empty file.
202 changes: 202 additions & 0 deletions src/storybook/pages/search-overlay/search-overlay-instant-results.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 => (
<div>
<SkiplinkList />

{/* *************************************************
Header section
************************************************* */}
<sbb-header hide-on-scroll="true">
<sbb-header-action id="hamburger-menu" icon-name="hamburger-menu-small" expand-from="small">
Menu
</sbb-header-action>
<div class="spacer" />
<sbb-header-action icon-name="magnifying-glass-small" href="/">
Search
</sbb-header-action>
<sbb-header-action icon-name="user-small">Sign in</sbb-header-action>
<sbb-header-action icon-name="globe-small" id="language-menu-trigger" class="last-element">
English
</sbb-header-action>
<sbb-menu trigger="language-menu-trigger">
<sbb-menu-action>Deutsch</sbb-menu-action>
<sbb-menu-action>Français</sbb-menu-action>
<sbb-menu-action>Italiano</sbb-menu-action>
<sbb-menu-action icon-name="tick-small">English</sbb-menu-action>
</sbb-menu>
<a href="https://www.sbb.ch" slot="logo">
<sbb-logo protective-room="none"></sbb-logo>
</a>
</sbb-header>

<Navigation />

{/* *************************************************
Main section
************************************************* */}
<section class="sbb-page-spacing">
<div class="grid-reduced-width logged-in-overview">
<sbb-button
variant="secondary"
class="all-purchased-tickets-button"
onClick={() => (document.getElementById('search-dialog') as HTMLSbbDialogElement).open()}
>
Open search overlay
</sbb-button>

<div>
<sbb-title level="2" visual-level="1">
Page content
</sbb-title>
<br />
<br />
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.
</div>
</div>

<sbb-dialog id="search-dialog" data-fullscreen negative>
<div class="sbb-grid search-overlay-grid">
<div class="grid-reduced-width">
<sbb-form-field error-space="none" size="m" id="search-overlay-field" borderless>
<span slot="prefix">
<sbb-icon name="magnifying-glass-small" role="img"></sbb-icon>
</span>
<input placeholder="Search" value="" name="message" />
<sbb-button
slot="suffix"
icon-name="cross-small"
data-icon-small=""
role="button"
variant="primary"
size="l"
></sbb-button>
</sbb-form-field>
<div class="search-result__wrapper">
<a href="http://www.sbb.ch/" class="search-result-item">
<div>
<sbb-title visual-level="6" negative>
Result title 1
</sbb-title>
<p class="subtitle">Lorem ipsum subtitle</p>
</div>
</a>
<a href="http://www.sbb.ch/" class="search-result-item">
<div>
<sbb-title visual-level="6" negative>
Result title 2
</sbb-title>
<p class="subtitle">Lorem ipsum subtitle</p>
</div>
</a>
<a href="http://www.sbb.ch/" class="search-result-item">
<div>
<sbb-title visual-level="6" negative>
Result title 3
</sbb-title>
<p class="subtitle">Lorem ipsum subtitle</p>
</div>
</a>
<a href="http://www.sbb.ch/" class="search-result-item">
<div>
<sbb-title visual-level="6" negative>
Result title 3
</sbb-title>
<p class="subtitle">Lorem ipsum subtitle</p>
</div>
<div class="result-image">
<img
alt="example"
src="https://cdn.img.sbb.ch/content/dam/internet/sharedimages/personen/Paar-Abend-Perron.jpg?w=96&h=72&auto=format,compress,cs=tinysrgb&q=45"
/>
</div>
</a>
<a href="http://www.sbb.ch/" class="search-result-item">
<div>
<sbb-title visual-level="6" negative>
Result title 5
</sbb-title>
<p class="subtitle">Lorem ipsum subtitle</p>
</div>
</a>
<div class="show-more">
<sbb-button variant="primary">Show all 13 results</sbb-button>
</div>
</div>
</div>
</div>
</sbb-dialog>
</section>

{/* *************************************************
Footer section
************************************************* */}
<Footer {...args} />
</div>
);

/* ************************************************* */
/* The Stories */
/* ************************************************* */

/* --- Search ------------------------ */
export const searchInstantResults: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: { ...defaultArgs },
};

/* ************************************************* */
/* Render storybook section and stories */
/* ************************************************* */

const meta: Meta = {
decorators: [
(Story, context) => (
<div style={wrapperStyle(context)}>
<Story />
</div>
),
],
parameters: {
chromatic: { disableSnapshot: false },
docs: {
extractComponentDescription: () => readme,
},
layout: 'fullscreen',
},
title: 'pages/search-overlay',
};

export default meta;
162 changes: 162 additions & 0 deletions src/storybook/pages/search-overlay/search-overlay-suggested-corrections.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 => (
<div>
<SkiplinkList />

{/* *************************************************
Header section
************************************************* */}
<sbb-header hide-on-scroll="true">
<sbb-header-action id="hamburger-menu" icon-name="hamburger-menu-small" expand-from="small">
Menu
</sbb-header-action>
<div class="spacer" />
<sbb-header-action icon-name="magnifying-glass-small" href="/">
Search
</sbb-header-action>
<sbb-header-action icon-name="user-small">Sign in</sbb-header-action>
<sbb-header-action icon-name="globe-small" id="language-menu-trigger" class="last-element">
English
</sbb-header-action>
<sbb-menu trigger="language-menu-trigger">
<sbb-menu-action>Deutsch</sbb-menu-action>
<sbb-menu-action>Français</sbb-menu-action>
<sbb-menu-action>Italiano</sbb-menu-action>
<sbb-menu-action icon-name="tick-small">English</sbb-menu-action>
</sbb-menu>
<a href="https://www.sbb.ch" slot="logo">
<sbb-logo protective-room="none"></sbb-logo>
</a>
</sbb-header>

<Navigation />

{/* *************************************************
Main section
************************************************* */}
<section class="sbb-page-spacing">
<div class="grid-reduced-width logged-in-overview">
<sbb-button
variant="secondary"
class="all-purchased-tickets-button"
onClick={() => (document.getElementById('search-dialog') as HTMLSbbDialogElement).open()}
>
Open search overlay
</sbb-button>

<div>
<sbb-title level="2" visual-level="1">
Page content
</sbb-title>
<br />
<br />
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.
</div>
</div>

<sbb-dialog id="search-dialog" data-fullscreen negative>
<div class="sbb-grid search-overlay-grid">
<div class="grid-reduced-width">
<sbb-form-field error-space="none" size="m" id="search-overlay-field" borderless>
<span slot="prefix">
<sbb-icon name="magnifying-glass-small" role="img"></sbb-icon>
</span>
<input placeholder="Search" value="" name="message" />
<sbb-button
slot="suffix"
icon-name="cross-small"
data-icon-small=""
role="button"
variant="primary"
size="l"
></sbb-button>
</sbb-form-field>
<div class="search-result__wrapper">
<div class="search-result-frequent">
<span>Did you mean maybe:</span>
</div>
<a href="http://www.sbb.ch/" class="frequent-searches-item">
Result title 1
</a>
<a href="http://www.sbb.ch/" class="frequent-searches-item">
Result title 2
</a>
</div>
</div>
</div>
</sbb-dialog>
</section>

{/* *************************************************
Footer section
************************************************* */}
<Footer {...args} />
</div>
);

/* ************************************************* */
/* The Stories */
/* ************************************************* */

/* --- Search ------------------------ */
export const searchSuggestedCorrections: StoryObj = {
render: Template,
argTypes: defaultArgTypes,
args: { ...defaultArgs },
};

/* ************************************************* */
/* Render storybook section and stories */
/* ************************************************* */

const meta: Meta = {
decorators: [
(Story, context) => (
<div style={wrapperStyle(context)}>
<Story />
</div>
),
],
parameters: {
chromatic: { disableSnapshot: false },
docs: {
extractComponentDescription: () => readme,
},
layout: 'fullscreen',
},
title: 'pages/search-overlay',
};

export default meta;