Skip to content

Commit

Permalink
Show correct colors in Highlight story (#680)
Browse files Browse the repository at this point in the history 
* Parameterise text color, remove repetition

* Refine inverseColor logic

* Fix incorrect merge conflict resolution
  • Loading branch information
@alimpens
alimpens authored Oct 27, 2023
1 parent 9762155 commit cd29063
Showing 1 changed file with 12 additions and 93 deletions.
105 changes: 12 additions & 93 deletions storybook/storybook-react/src/Highlight/Highlight.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,151 +32,70 @@ const meta = {
},
},
},
} satisfies Meta<typeof Highlight>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
args: {
children: (
render: ({ color }) => (
<Highlight color={color}>
<PageGrid>
<GridCell fullWidth>
<Blockquote inverseColor>
<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>
</GridCell>
</PageGrid>
),
},
}
</Highlight>
),
} satisfies Meta<typeof Highlight>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {}

export const Yellow: Story = {
args: {
color: 'yellow',
children: (
<PageGrid>
<GridCell fullWidth>
<Blockquote>
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>
</GridCell>
</PageGrid>
),
},
}

export const Orange: Story = {
args: {
color: 'orange',
children: (
<PageGrid>
<GridCell fullWidth>
<Blockquote>
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>
</GridCell>
</PageGrid>
),
},
}

export const Magenta: Story = {
args: {
color: 'magenta',
children: (
<PageGrid>
<GridCell fullWidth>
<Blockquote inverseColor>
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>
</GridCell>
</PageGrid>
),
},
}

export const Purple: Story = {
args: {
color: 'purple',
children: (
<PageGrid>
<GridCell fullWidth>
<Blockquote inverseColor>
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>
</GridCell>
</PageGrid>
),
},
}

export const Blue: Story = {
args: {
color: 'blue',
children: (
<PageGrid>
<GridCell fullWidth>
<Blockquote inverseColor>
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>
</GridCell>
</PageGrid>
),
},
}

export const LightBlue: Story = {
args: {
color: 'light-blue',
children: (
<PageGrid>
<GridCell fullWidth>
<Blockquote>
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>
</GridCell>
</PageGrid>
),
},
}

export const Green: Story = {
args: {
color: 'green',
children: (
<PageGrid>
<GridCell fullWidth>
<Blockquote>
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>
</GridCell>
</PageGrid>
),
},
}

export const DarkGreen: Story = {
args: {
color: 'dark-green',
children: (
<PageGrid>
<GridCell fullWidth>
<Blockquote inverseColor>
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>
</GridCell>
</PageGrid>
),
},
}

0 comments on commit cd29063

Please sign in to comment.