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

chore: Wrap all stories in a Screen #1728

Merged
merged 11 commits into from
Nov 8, 2024
Merged

chore: Wrap all stories in a Screen #1728

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7bf2741
Wrap all stories in a Screen
VincentSmedinga Oct 28, 2024
d9aafe4
Move Skip Link into Screen in example as well
VincentSmedinga Oct 28, 2024
271bf3b
Remove unnecessary fragment
VincentSmedinga Oct 29, 2024
2b7720e
Merge branch 'develop' into feature/DES-974-storybook-screen-decorator
VincentSmedinga Nov 8, 2024
b4b069a
Fix merge
VincentSmedinga Nov 8, 2024
66587bd
Restore root selector for HTML tab
VincentSmedinga Nov 8, 2024
1ae4dfb
Add type to Story function
VincentSmedinga Nov 8, 2024
820aa53
Instruct to position the Skip Link within the Screen
VincentSmedinga Nov 8, 2024
2185beb
Merge branch 'develop' into feature/DES-974-storybook-screen-decorator
VincentSmedinga Nov 8, 2024
e519b85
Restore part of the wording of the rationale
VincentSmedinga Nov 8, 2024
3f771d6
Remove incorrect decorator from Skip Link
VincentSmedinga Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions storybook/config/preview.tsx
View file
Open in desktop
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import '@amsterdam/design-system-assets/font/index.css'
import '@amsterdam/design-system-css/dist/index.css'
import '../src/styles/docs.css'
import '../src/styles/overrides.css'
import { Screen } from '@amsterdam/design-system-react'
import { withThemeByClassName } from '@storybook/addon-themes'
import { viewports } from './viewports'

Expand All @@ -13,12 +14,12 @@ export const argTypes = {
},
}

// Set language to Dutch for Canvas and Stories
// Wrap in Screen, set language to Dutch for Canvas and Stories
export const decorators = [
(Story: any) => (
<div lang="nl">
<Screen lang="nl">
alimpens marked this conversation as resolved.
Show resolved Hide resolved
<Story />
</div>
</Screen>
),
withThemeByClassName({
themes: {
Expand Down Expand Up @@ -57,7 +58,4 @@ export const parameters = {
viewports,
},
viewMode: 'docs',
html: {
root: 'div[lang="nl"]',
alimpens marked this conversation as resolved.
Show resolved Hide resolved
},
}
9 changes: 1 addition & 8 deletions storybook/src/components/Breakout/Breakout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,13 @@
* Copyright Gemeente Amsterdam
*/

import { AspectRatio, Image, Paragraph, Screen, Spotlight } from '@amsterdam/design-system-react'
import { AspectRatio, Image, Paragraph, Spotlight } from '@amsterdam/design-system-react'
import { Breakout } from '@amsterdam/design-system-react/src'
import { Meta, StoryObj } from '@storybook/react'

const meta = {
title: 'Components/Layout/Breakout',
component: Breakout,
decorators: [
(Story) => (
<Screen>
<Story />
</Screen>
),
],
} satisfies Meta<typeof Breakout>

export default meta
Expand Down
9 changes: 4 additions & 5 deletions storybook/src/components/Grid/Grid.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* Copyright Gemeente Amsterdam
*/

import { Screen } from '@amsterdam/design-system-react'
import { Grid } from '@amsterdam/design-system-react/src'
import type { GridCellProps } from '@amsterdam/design-system-react/src'
import { Meta, StoryObj } from '@storybook/react'
Expand Down Expand Up @@ -85,23 +84,23 @@ const BackgroundGrid = () => (
const StoryTemplate: Story = {
decorators: [
(Story) => (
<Screen>
<>
<BackgroundGrid />
<Story />
</Screen>
</>
),
],
}

const CellStoryTemplate: CellStory = {
decorators: [
(Story) => (
<Screen>
<>
<BackgroundGrid />
<Grid paddingVertical="medium">
<Story />
</Grid>
</Screen>
</>
),
],
render: ({ children, ...args }) => <Grid.Cell {...args}>{children}</Grid.Cell>,
Expand Down
10 changes: 1 addition & 9 deletions storybook/src/components/ImageSlider/ImageSlider.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
* Copyright Gemeente Amsterdam
*/

import { ImageSlider, Screen } from '@amsterdam/design-system-react/src'
import { ImageSlider } from '@amsterdam/design-system-react/src'
import { Meta, StoryObj } from '@storybook/react'
import React from 'react'

const meta = {
title: 'Components/Media/Image Slider',
Expand Down Expand Up @@ -40,13 +39,6 @@ const meta = {
},
],
},
decorators: [
(Story) => (
<Screen>
<Story />
</Screen>
),
],
} satisfies Meta<typeof ImageSlider>

export default meta
Expand Down
9 changes: 1 addition & 8 deletions storybook/src/components/MegaMenu/MegaMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright Gemeente Amsterdam
*/

import { Grid, Heading, LinkList, Screen } from '@amsterdam/design-system-react'
import { Grid, Heading, LinkList } from '@amsterdam/design-system-react'
import { MegaMenu } from '@amsterdam/design-system-react/src'
import { Meta, StoryObj } from '@storybook/react'

Expand All @@ -13,13 +13,6 @@ const meta = {
parameters: {
layout: 'fullscreen',
},
decorators: [
(Story) => (
<Screen>
<Story />
</Screen>
),
],
} satisfies Meta<typeof MegaMenu>

export default meta
Expand Down
6 changes: 3 additions & 3 deletions storybook/src/components/SkipLink/SkipLink.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright Gemeente Amsterdam
*/

import { Grid, Paragraph, Screen } from '@amsterdam/design-system-react'
import { Grid, Paragraph } from '@amsterdam/design-system-react'
import { SkipLink } from '@amsterdam/design-system-react/src'
import { Meta, StoryObj } from '@storybook/react'

Expand All @@ -28,13 +28,13 @@ const meta = {
},
decorators: [
(Story) => (
<Screen>
<>
<Grid>
<Grid.Cell span="all">
<Story />
</Grid.Cell>
</Grid>
</Screen>
</>
),
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
],
} satisfies Meta<typeof SkipLink>
Expand Down
9 changes: 1 addition & 8 deletions storybook/src/components/Spotlight/Spotlight.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* Copyright Gemeente Amsterdam
*/

import { Blockquote, Grid, Screen } from '@amsterdam/design-system-react'
import { Blockquote, Grid } from '@amsterdam/design-system-react'
import { Spotlight } from '@amsterdam/design-system-react/src'
import { Meta, StoryObj } from '@storybook/react'
import { exampleQuote } from '../shared/exampleContent'
Expand All @@ -13,13 +13,6 @@ const quote = exampleQuote()
const meta = {
title: 'Components/Containers/Spotlight',
component: Spotlight,
decorators: [
(Story) => (
<Screen>
<Story />
</Screen>
),
],
render: ({ as, color }) => (
<Spotlight as={as} color={color}>
<Grid paddingVertical="medium">
Expand Down
4 changes: 2 additions & 2 deletions storybook/src/pages/amsterdam/HomePage/HomePage.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ The starting page of an application generally provides a broad overview of subje
A typical layout for a homepage:

```tsx
<SkipLink href="#main">Direct naar inhoud</SkipLink>
<Screen maxWidth="wide">
<Screen>
<SkipLink href="#main">Direct naar inhoud</SkipLink>
<Grid>
<Header />
</Grid>
Expand Down
10 changes: 4 additions & 6 deletions storybook/src/pages/amsterdam/common/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Footer, Screen, SkipLink } from '@amsterdam/design-system-react'
import { Footer, SkipLink } from '@amsterdam/design-system-react'
import type { HTMLAttributes, PropsWithChildren } from 'react'
import { AppHeader } from './AppHeader'
import { Default as FooterStory } from '../../../components/Footer/Footer.stories'
Expand All @@ -8,10 +8,8 @@ type LayoutProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
export const Layout = ({ children }: LayoutProps) => (
<>
<SkipLink href="#main">Direct naar inhoud</SkipLink>
<Screen maxWidth="wide">
<AppHeader />
{children}
<Footer>{FooterStory.args?.children}</Footer>
</Screen>
<AppHeader />
{children}
<Footer>{FooterStory.args?.children}</Footer>
</>
)
Loading