Skip to content

Commit

Permalink
docs(SelectableCard): add more examples in doc
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthprost
matthprost committed Dec 5, 2024
1 parent 007019c commit 12e8c0b
Show file tree
Hide file tree
Showing 8 changed files with 276 additions and 90 deletions.
69 changes: 69 additions & 0 deletions packages/ui/src/components/SelectableCard/__stories__/Examples.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import { Badge } from '../../Badge'
import { Row } from '../../Row'
import { Stack } from '../../Stack'
import { Text } from '../../Text'
import fr from './assets/fr.svg'
import nl from './assets/nl.svg'
import pl from './assets/pl.svg'

export const Examples: StoryFn = args => {
const [value, onChange] = useState('label-14')
Expand All @@ -15,6 +18,11 @@ export const Examples: StoryFn = args => {
'label-24': false,
'label-25': false,
})
const [value4, onChange4] = useState({
'label-26': true,
'label-27': false,
'label-28': false,
})

return (
<Stack gap={8} flex={1}>
Expand Down Expand Up @@ -215,6 +223,67 @@ export const Examples: StoryFn = args => {
happiness
</SelectableCard>
</Row>

<Row templateColumns="repeat(3, auto)" gap={1}>
<SelectableCard
{...args}
name="label-26"
checked={value4['label-26']}
value="label-26"
type="checkbox"
onChange={event =>
onChange4({ ...value4, 'label-26': event.currentTarget.checked })
}
showTick
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<img src={fr} alt="fr" width={24} />
<Text variant="bodyStrong" as="span">
France
</Text>
</Stack>
}
/>
<SelectableCard
{...args}
name="label-27"
checked={value4['label-27']}
value="label-27"
type="checkbox"
onChange={event =>
onChange4({ ...value4, 'label-27': event.currentTarget.checked })
}
showTick
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<img src={nl} alt="nl" width={24} />
<Text variant="bodyStrong" as="span">
Netherlands
</Text>
</Stack>
}
/>

<SelectableCard
{...args}
name="label-28"
checked={value4['label-28']}
value="label-28"
type="checkbox"
onChange={event =>
onChange4({ ...value4, 'label-28': event.currentTarget.checked })
}
showTick
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<img src={pl} alt="pl" width={24} />
<Text variant="bodyStrong" as="span">
Poland
</Text>
</Stack>
}
/>
</Row>
</Stack>
)
}
Expand Down
12 changes: 12 additions & 0 deletions packages/ui/src/components/SelectableCard/__stories__/assets/fr.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions packages/ui/src/components/SelectableCard/__stories__/assets/nl.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions packages/ui/src/components/SelectableCard/__stories__/assets/pl.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
241 changes: 151 additions & 90 deletions packages/ui/src/components/SelectableCardGroup/__stories__/Examples.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@ import type { StoryFn } from '@storybook/react'
import { useState } from 'react'
import { SelectableCardGroup } from '..'
import { Badge } from '../../Badge'
import { Row } from '../../Row'
import { Stack } from '../../Stack'
import { Text } from '../../Text'
import fr from './assets/fr.svg'
import nl from './assets/nl.svg'
import pl from './assets/pl.svg'

export const Examples: StoryFn = args => {
const [value, onChange] = useState('label-14')
const [value3, onChange3] = useState([''])
const [value4, onChange4] = useState([''])

return (
<Stack gap={8} flex={1}>
Expand Down Expand Up @@ -59,99 +62,157 @@ export const Examples: StoryFn = args => {
</SelectableCardGroup.Card>
</SelectableCardGroup>

<Row templateColumns="repeat(2, auto)" gap={1}>
<SelectableCardGroup
<SelectableCardGroup
{...args}
name="label-22"
legend="Second group"
value={value3}
type="checkbox"
columns={2}
showTick
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const data = [...value3]
if (data.includes(event.currentTarget.value)) {
data.splice(data.indexOf(event.currentTarget?.value), 1)
} else {
data.push(event.currentTarget.value)
}
onChange3(data)
// oxlint-disable-next-line eslint/no-console
console.log(data)
}}
>
<SelectableCardGroup.Card
value="label-22"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<Text variant="bodyStrong" as="span">
Backup
</Text>
<Badge sentiment="primary" size="small">
Recommended
</Badge>
</Stack>
}
>
This option will cost you 2.99€ and provide you with a lot more of
happiness
</SelectableCardGroup.Card>
<SelectableCardGroup.Card
{...args}
name="label-22"
legend="Second group"
value={value3}
type="checkbox"
columns={2}
showTick
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const data = [...value3]
if (data.includes(event.currentTarget.value)) {
data.splice(data.indexOf(event.currentTarget?.value), 1)
} else {
data.push(event.currentTarget.value)
}
onChange3(data)
// oxlint-disable-next-line eslint/no-console
console.log(data)
}}
name="label-23"
value="label-23"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<Text variant="bodyStrong" as="span">
Redundancy
</Text>
<Badge sentiment="primary" size="small">
Recommended
</Badge>
</Stack>
}
>
This option will cost you 2.99€ and provide you with a lot more of
happiness
</SelectableCardGroup.Card>

<SelectableCardGroup.Card
name="label-24"
value="label-24"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<Text variant="bodyStrong" as="span">
Morning Reboot 9am
</Text>
<Badge sentiment="neutral" size="small">
Optional
</Badge>
</Stack>
}
>
This option will cost you 2.99€ and provide you with a lot more of
happiness
</SelectableCardGroup.Card>

<SelectableCardGroup.Card
name="label-25"
value="label-25"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<Text variant="bodyStrong" as="span">
Monitoring
</Text>
<Badge sentiment="neutral" size="small">
Optional
</Badge>
</Stack>
}
>
<SelectableCardGroup.Card
value="label-22"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<Text variant="bodyStrong" as="span">
Backup
</Text>
<Badge sentiment="primary" size="small">
Recommended
</Badge>
</Stack>
}
>
This option will cost you 2.99€ and provide you with a lot more of
happiness
</SelectableCardGroup.Card>
<SelectableCardGroup.Card
{...args}
name="label-23"
value="label-23"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<Text variant="bodyStrong" as="span">
Redundancy
</Text>
<Badge sentiment="primary" size="small">
Recommended
</Badge>
</Stack>
}
>
This option will cost you 2.99€ and provide you with a lot more of
happiness
</SelectableCardGroup.Card>
This option will cost you 2.99€ and provide you with a lot more of
happiness
</SelectableCardGroup.Card>
</SelectableCardGroup>

<SelectableCardGroup.Card
name="label-24"
value="label-24"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<Text variant="bodyStrong" as="span">
Morning Reboot 9am
</Text>
<Badge sentiment="neutral" size="small">
Optional
</Badge>
</Stack>
}
>
This option will cost you 2.99€ and provide you with a lot more of
happiness
</SelectableCardGroup.Card>
<SelectableCardGroup
{...args}
name="label-23"
legend="Choose country"
helper="Select one or more countries"
value={value4}
type="checkbox"
columns={3}
showTick
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
const data = [...value4]
if (data.includes(event.currentTarget.value)) {
data.splice(data.indexOf(event.currentTarget?.value), 1)
} else {
data.push(event.currentTarget.value)
}
onChange4(data)
// oxlint-disable-next-line eslint/no-console
console.log(data)
}}
>
<SelectableCardGroup.Card
value="label-23"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<img src={fr} alt="fr" width={24} />
<Text variant="bodyStrong" as="span">
France
</Text>
</Stack>
}
/>
<SelectableCardGroup.Card
{...args}
name="label-24"
value="label-24"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<img src={nl} alt="nl" width={24} />
<Text variant="bodyStrong" as="span">
Netherlands
</Text>
</Stack>
}
/>

<SelectableCardGroup.Card
name="label-25"
value="label-25"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<Text variant="bodyStrong" as="span">
Monitoring
</Text>
<Badge sentiment="neutral" size="small">
Optional
</Badge>
</Stack>
}
>
This option will cost you 2.99€ and provide you with a lot more of
happiness
</SelectableCardGroup.Card>
</SelectableCardGroup>
</Row>
<SelectableCardGroup.Card
name="label-25"
value="label-25"
label={
<Stack direction="row" gap={1} flex={1} alignItems="center">
<img src={pl} alt="pl" width={24} />
<Text variant="bodyStrong" as="span">
Poland
</Text>
</Stack>
}
/>
</SelectableCardGroup>
</Stack>
)
}
Expand Down
12 changes: 12 additions & 0 deletions packages/ui/src/components/SelectableCardGroup/__stories__/assets/fr.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 12e8c0b

Please sign in to comment.