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: Enhance examples of text components through random content #880

Merged
merged 9 commits into from
Dec 11, 2023
Merged

chore: Enhance examples of text components through random content #880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
3c0d5d5
Enhance examples of text components through random content
VincentSmedinga Dec 3, 2023
31f6a27
Rename ‘title’ to ‘heading’
VincentSmedinga Dec 4, 2023
ee6d6b0
Randomize multiple examples on a single page
VincentSmedinga Dec 4, 2023
90234a6
Add text to primary heading example and restore fallbacks
VincentSmedinga Dec 4, 2023
88a6ce4
Randomize multiple quotes on a single page
VincentSmedinga Dec 4, 2023
1a9e40a
Randomize quotes in examples for highlight
VincentSmedinga Dec 4, 2023
0d567d7
Remove braces around arrow function bodies
VincentSmedinga Dec 4, 2023
558f6a8
Merge branch 'develop' into chore/randomize-content-in-text-component…
VincentSmedinga Dec 4, 2023
6118bee
Merge branch 'develop' into chore/randomize-content-in-text-component…
VincentSmedinga Dec 8, 2023
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
19 changes: 10 additions & 9 deletions storybook/storybook-react/src/Accordion/Accordion.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import { Accordion, Paragraph } from '@amsterdam/design-system-react'
import { Meta, StoryObj } from '@storybook/react'
import { exampleParagraph } from '../shared/exampleContent'

const meta = {
title: 'Containers/Accordion',
Expand Down Expand Up @@ -36,13 +37,13 @@ export const Default: Story = {
args: {
children: [
<Accordion.Section key={1} label="Eerste sectie">
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
</Accordion.Section>,
<Accordion.Section key={2} label="Tweede sectie">
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
</Accordion.Section>,
<Accordion.Section key={3} label="Derde sectie">
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
</Accordion.Section>,
],
},
Expand All @@ -52,13 +53,13 @@ export const ExpandedByDefault: Story = {
args: {
children: [
<Accordion.Section key={1} label="Eerste sectie">
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
</Accordion.Section>,
<Accordion.Section key={2} label="Tweede sectie" expanded>
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
</Accordion.Section>,
<Accordion.Section key={3} label="Derde sectie">
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
</Accordion.Section>,
],
},
Expand All @@ -69,13 +70,13 @@ export const TooManyLandmarks: Story = {
section: false,
children: [
<Accordion.Section key={1} label="Eerste sectie">
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
</Accordion.Section>,
<Accordion.Section key={2} label="Tweede sectie">
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
</Accordion.Section>,
<Accordion.Section key={3} label="Derde sectie">
<Paragraph>Jouw typograaf biedt mij zulke exquise schreven!</Paragraph>
<Paragraph>{exampleParagraph()}</Paragraph>
</Accordion.Section>,
],
},
Expand Down
7 changes: 6 additions & 1 deletion storybook/storybook-react/src/Blockquote/Blockquote.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@

import { Blockquote } from '@amsterdam/design-system-react'
import { Meta, StoryObj } from '@storybook/react'
import { exampleQuote } from '../shared/exampleContent'

const meta = {
title: 'Text/Blockquote',
component: Blockquote,
args: {
children: 'Jouw typograaf biedt mij zulke exquise schreven!',
children: exampleQuote(),
inverseColor: false,
},
argTypes: {
Expand All @@ -23,6 +24,9 @@ export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
args: {
children: exampleQuote(),
},
decorators: [
(Story, context) => (
<div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
Expand All @@ -34,6 +38,7 @@ export const Default: Story = {

export const InvertedColor: Story = {
args: {
children: exampleQuote(),
inverseColor: true,
},
decorators: [
Expand Down
16 changes: 14 additions & 2 deletions storybook/storybook-react/src/Heading/Heading.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@

import { Heading } from '@amsterdam/design-system-react'
import { Meta, StoryObj } from '@storybook/react'
import { exampleHeading } from '../shared/exampleContent'

const meta = {
title: 'Text/Heading',
component: Heading,
args: {
children: 'Jouw typograaf biedt mij zulke exquise schreven!',
children: exampleHeading(),
inverseColor: false,
},
argTypes: {
Expand All @@ -31,6 +32,9 @@ export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
args: {
children: exampleHeading(),
},
decorators: [
(Story, context) => (
<div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
Expand All @@ -40,28 +44,36 @@ export const Default: Story = {
],
}

export const Heading1: Story = {}
export const Heading1: Story = {
args: {
children: exampleHeading(),
},
}

export const Heading2: Story = {
args: {
children: exampleHeading(),
level: 2,
},
}

export const Heading3: Story = {
args: {
children: exampleHeading(),
level: 3,
},
}

export const Heading4: Story = {
args: {
children: exampleHeading(),
level: 4,
},
}

export const InvertedColor: Story = {
args: {
children: exampleHeading(),
inverseColor: true,
},
decorators: [
Expand Down
6 changes: 2 additions & 4 deletions storybook/storybook-react/src/Highlight/Highlight.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import { Blockquote, Grid, Highlight } from '@amsterdam/design-system-react'
import { Meta, StoryObj } from '@storybook/react'
import { exampleQuote } from '../shared/exampleContent'

const meta = {
title: 'Containers/Highlight',
Expand Down Expand Up @@ -36,10 +37,7 @@ const meta = {
<Highlight color={color}>
<Grid paddingVertical="medium">
<Grid.Cell fullWidth>
<Blockquote inverseColor={!color || !['green', 'yellow'].includes(color)}>
We kunnen in heel Nederland schoolpleinen creëren waar kinderen worden uitgedaagd om samen te spelen en te
sporten. Buitenspelen zou een vak moeten zijn op school.
</Blockquote>
<Blockquote inverseColor={!color || !['green', 'yellow'].includes(color)}>{exampleQuote()}</Blockquote>
</Grid.Cell>
</Grid>
</Highlight>
Expand Down
22 changes: 2 additions & 20 deletions storybook/storybook-react/src/OrderedList/OrderedList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import { Heading, OrderedList, Paragraph } from '@amsterdam/design-system-react'
import type { Meta, StoryObj } from '@storybook/react'
import { exampleOrderedList } from '../shared/exampleContent'

const meta = {
title: 'Text/Ordered List',
Expand All @@ -20,26 +21,7 @@ type Story = StoryObj<typeof meta>

export const Basis: Story = {
args: {
children: [
<OrderedList.Item key={1}>
Voor deze actie hebben uw kinderen een persoonlijke OV-chipkaart nodig. Hebben zij die nog niet, dan kunt u die
nu al aanvragen. Ieder kind heeft een eigen OV-chipkaart nodig.
</OrderedList.Item>,
<OrderedList.Item key={2}>
U kunt hem aanvragen via ov-chipkaart.nl. De kaart kost € 7,50. U krijgt hem na een dag of 5 thuisgestuurd.
</OrderedList.Item>,
<OrderedList.Item key={3}>
Op de OV-chipkaart kunt u gratis reizen voor kinderen aanvragen vanaf maandag 3 juli 9.00 uur tot uiterlijk 23
november.
</OrderedList.Item>,
<OrderedList.Item key={4}>
We helpen mensen die er zelf niet uitkomen. Daarvoor zit een speciaal belteam klaar, bereikbaar via 14 020.
</OrderedList.Item>,
<OrderedList.Item key={5}>
Het product is geldig in alle bussen, trams en metro’s van GVB. Kinderen reizen met ten minste 1 volwassen
begeleider.
</OrderedList.Item>,
],
children: exampleOrderedList().map((item, index) => <OrderedList.Item key={index}>{item}</OrderedList.Item>),
},
}

Expand Down
9 changes: 8 additions & 1 deletion storybook/storybook-react/src/Paragraph/Paragraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@

import { Paragraph } from '@amsterdam/design-system-react'
import { Meta, StoryObj } from '@storybook/react'
import { exampleParagraph } from '../shared/exampleContent'

const meta = {
title: 'Text/Paragraph',
component: Paragraph,
args: {
children: 'Jouw typograaf biedt mij zulke exquise schreven!',
children: exampleParagraph(),
inverseColor: false,
},
argTypes: {
Expand All @@ -29,6 +30,9 @@ export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
args: {
children: exampleParagraph(),
},
decorators: [
(Story, context) => (
<div className={context.args.inverseColor ? 'amsterdam-docs-dark-background' : undefined}>
Expand All @@ -40,18 +44,21 @@ export const Default: Story = {

export const Large: Story = {
args: {
children: exampleParagraph(),
size: 'large',
},
}

export const Small: Story = {
args: {
children: exampleParagraph(),
size: 'small',
},
}

export const InvertedColor: Story = {
args: {
children: exampleParagraph(),
inverseColor: true,
},
decorators: [
Expand Down
14 changes: 2 additions & 12 deletions storybook/storybook-react/src/UnorderedList/UnorderedList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
TrashBinIcon,
} from '@amsterdam/design-system-react-icons'
import type { Meta, StoryObj } from '@storybook/react'
import { exampleUnorderedList } from '../shared/exampleContent'

const meta = {
title: 'Text/Unordered List',
Expand All @@ -30,18 +31,7 @@ type Story = StoryObj<typeof meta>

export const Basis: Story = {
args: {
children: [
<UnorderedList.Item key="contract">
Kopie van de pagina’s van het huur- of koopcontract waarop uw naam, adres en handtekeningen staan.
</UnorderedList.Item>,
<UnorderedList.Item key="toestemmingsverklaring">
Als u bij iemand woont: een toestemmingsverklaring van de bewoner en een kopie van het paspoort, rijbewijs of
ID-kaart van de bewoner.
</UnorderedList.Item>,
<UnorderedList.Item key="gebruikersovereenkomst">
Bij antikraak: kopie gebruikersovereenkomst.
</UnorderedList.Item>,
],
children: exampleUnorderedList().map((item, index) => <UnorderedList.Item key={index}>{item}</UnorderedList.Item>),
},
}

Expand Down
Loading