Skip to content

Commit 1b34a68

Browse files
lisalupilisalupi
authored
fix: indented prop selectable card (#5891)
1 parent c4708a8 commit 1b34a68

File tree

15 files changed

+454
-136
lines changed

15 files changed

+454
-136
lines changed

‎.changeset/fruity-cloths-flash.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": patch
3+
---
4+
5+
`SelectableCard`: new prop `indented` (true by default) to add or remove an indent in order to align the children with the label

‎packages/form/src/components/SelectableCardField/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ exports[`selectableCardField > should render correctly 1`] = `
2424
>
2525
<div
2626
aria-disabled="false"
27-
class="uv_475tndc uv_17da2jl3"
27+
class="uv_475tndd uv_17da2jl3"
2828
data-checked="false"
2929
data-error="false"
3030
>
@@ -109,7 +109,7 @@ exports[`selectableCardField > should render correctly checked 1`] = `
109109
>
110110
<div
111111
aria-disabled="false"
112-
class="uv_475tndc uv_17da2jl3"
112+
class="uv_475tndd uv_17da2jl3"
113113
data-checked="true"
114114
data-error="false"
115115
>
@@ -194,7 +194,7 @@ exports[`selectableCardField > should render correctly disabled 1`] = `
194194
>
195195
<div
196196
aria-disabled="true"
197-
class="uv_475tndc uv_17da2jl3"
197+
class="uv_475tndd uv_17da2jl3"
198198
data-checked="false"
199199
data-error="false"
200200
>
@@ -280,7 +280,7 @@ exports[`selectableCardField > should render correctly with errors 1`] = `
280280
>
281281
<div
282282
aria-disabled="false"
283-
class="uv_475tndc uv_17da2jl3"
283+
class="uv_475tndd uv_17da2jl3"
284284
data-checked="false"
285285
data-error="true"
286286
>
@@ -370,7 +370,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
370370
>
371371
<div
372372
aria-disabled="false"
373-
class="uv_475tndc uv_17da2jl3"
373+
class="uv_475tndd uv_17da2jl3"
374374
data-checked="true"
375375
data-error="false"
376376
>

‎packages/form/src/components/SelectableCardGroupField/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ exports[`selectableCardField > should render correctly 1`] = `
4242
>
4343
<div
4444
aria-disabled="false"
45-
class="uv_475tndc uv_17da2jl3"
45+
class="uv_475tndd uv_17da2jl3"
4646
data-checked="false"
4747
data-error="false"
4848
>
@@ -105,7 +105,7 @@ exports[`selectableCardField > should render correctly 1`] = `
105105
>
106106
<div
107107
aria-disabled="false"
108-
class="uv_475tndc uv_17da2jl3"
108+
class="uv_475tndd uv_17da2jl3"
109109
data-checked="false"
110110
data-error="false"
111111
>
@@ -202,7 +202,7 @@ exports[`selectableCardField > should render correctly checked as a checkbox 1`]
202202
>
203203
<div
204204
aria-disabled="false"
205-
class="uv_475tndc uv_9pjq8o6"
205+
class="uv_475tndd uv_9pjq8o6"
206206
data-checked="true"
207207
data-error="false"
208208
>
@@ -314,7 +314,7 @@ exports[`selectableCardField > should render correctly checked as radiofield 1`]
314314
>
315315
<div
316316
aria-disabled="false"
317-
class="uv_475tndc uv_17da2jl3"
317+
class="uv_475tndd uv_17da2jl3"
318318
data-checked="true"
319319
data-error="false"
320320
>
@@ -411,7 +411,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
411411
>
412412
<div
413413
aria-disabled="false"
414-
class="uv_475tndc uv_9pjq8o6"
414+
class="uv_475tndd uv_9pjq8o6"
415415
data-checked="false"
416416
data-error="false"
417417
>
@@ -482,7 +482,7 @@ exports[`selectableCardField > should trigger events correctly 1`] = `
482482
>
483483
<div
484484
aria-disabled="false"
485-
class="uv_475tndc uv_9pjq8o6"
485+
class="uv_475tndd uv_9pjq8o6"
486486
data-checked="false"
487487
data-error="false"
488488
>

‎packages/form/src/components/SelectableCardOptionGroupField/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
4242
>
4343
<div
4444
aria-disabled="false"
45-
class="uv_475tndc uv_17da2jl3"
45+
class="uv_475tndd uv_17da2jl3"
4646
data-checked="true"
4747
data-error="false"
4848
>
@@ -183,7 +183,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
183183
>
184184
<div
185185
aria-disabled="false"
186-
class="uv_475tndc uv_17da2jl3"
186+
class="uv_475tndd uv_17da2jl3"
187187
data-checked="false"
188188
data-error="false"
189189
>
@@ -323,7 +323,7 @@ exports[`selectableCardOptionGroupField > should render correctly 1`] = `
323323
>
324324
<div
325325
aria-disabled="false"
326-
class="uv_475tndc uv_17da2jl3"
326+
class="uv_475tndd uv_17da2jl3"
327327
data-checked="false"
328328
data-error="false"
329329
>

‎packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ exports[`switchButtonField > should render correctly 1`] = `
3030
>
3131
<div
3232
aria-disabled="false"
33-
class="uv_475tndc uv_17da2jl3"
33+
class="uv_475tndd uv_17da2jl3"
3434
data-checked="false"
3535
>
3636
<input
@@ -92,7 +92,7 @@ exports[`switchButtonField > should render correctly 1`] = `
9292
>
9393
<div
9494
aria-disabled="false"
95-
class="uv_475tndc uv_17da2jl3"
95+
class="uv_475tndd uv_17da2jl3"
9696
data-checked="false"
9797
>
9898
<input
@@ -176,7 +176,7 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
176176
>
177177
<div
178178
aria-disabled="false"
179-
class="uv_475tndc uv_17da2jl3"
179+
class="uv_475tndd uv_17da2jl3"
180180
data-checked="false"
181181
>
182182
<input
@@ -238,7 +238,7 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
238238
>
239239
<div
240240
aria-disabled="false"
241-
class="uv_475tndc uv_17da2jl3"
241+
class="uv_475tndd uv_17da2jl3"
242242
data-checked="false"
243243
>
244244
<input

‎packages/ui/src/components/SelectableCard/__stories__/Examples.stories.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Badge } from '../../Badge'
44
import { Button } from '../../Button'
55
import { Row } from '../../Row'
66
import { SelectInput } from '../../SelectInput'
7+
import { Separator } from '../../Separator'
78
import { Stack } from '../../Stack'
89
import { Text } from '../../Text'
910
import { TextArea } from '../../TextArea'
@@ -110,10 +111,11 @@ export const Examples: StoryFn = args => {
110111
type="checkbox"
111112
value="label-20"
112113
>
113-
<Stack gap={1}>
114-
<Text as="p" prominence="weak" sentiment="neutral" variant="body">
114+
<Text as="p" prominence="weak" sentiment="neutral" variant="body">
115+
<Stack gap={3} width="100%">
115116
This option will cost you 1.99€ and provide you with a lot of
116117
happiness
118+
<Separator />
117119
<SelectInput
118120
label="Select a sub option"
119121
options={[
@@ -122,9 +124,9 @@ export const Examples: StoryFn = args => {
122124
value: 'option1',
123125
},
124126
]}
125-
/>
126-
</Text>
127-
</Stack>
127+
/>{' '}
128+
</Stack>
129+
</Text>
128130
</SelectableCard>
129131
<SelectableCard
130132
{...args}
@@ -419,3 +421,7 @@ Examples.decorators = [
419421
</Stack>
420422
),
421423
]
424+
425+
Examples.args = {
426+
indented: true,
427+
}

‎packages/ui/src/components/SelectableCard/__stories__/Indented.stories.tsx‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import type { StoryFn } from '@storybook/react-vite'
2+
import { useState } from 'react'
3+
import { SelectInput } from '../../SelectInput'
4+
import { Separator } from '../../Separator'
5+
import { Stack } from '../../Stack'
6+
import { Text } from '../../Text'
7+
import { SelectableCard } from '..'
8+
9+
export const Indented: StoryFn = args => {
10+
const [value2, onChange2] = useState({ 'label-20': true, 'label-21': false })
11+
12+
return (
13+
<Stack flex={1} gap={8}>
14+
<Stack flex={1} gap={1}>
15+
<SelectableCard
16+
{...args}
17+
checked={value2['label-20']}
18+
label={
19+
<Stack direction="row" flex={1} justifyContent="space-between">
20+
<Text as="span" variant="bodyStrong">
21+
Default layout (indented is set to true)
22+
</Text>
23+
<Text as="span" variant="bodyStronger">
24+
4.99€
25+
</Text>
26+
</Stack>
27+
}
28+
name="label-20"
29+
onChange={event =>
30+
onChange2(prevState => ({
31+
...prevState,
32+
'label-20': event.currentTarget.checked,
33+
}))
34+
}
35+
showTick
36+
type="checkbox"
37+
value="label-20"
38+
>
39+
<Text as="p" prominence="weak" sentiment="neutral" variant="body">
40+
<Stack gap={3} width="100%">
41+
This option will cost you 1.99€ and provide you with a lot of
42+
happiness
43+
<Separator />
44+
<SelectInput
45+
label="Select a sub option"
46+
options={[
47+
{
48+
label: 'Sub option 1',
49+
value: 'option1',
50+
},
51+
]}
52+
/>{' '}
53+
</Stack>
54+
</Text>
55+
</SelectableCard>
56+
<SelectableCard
57+
{...args}
58+
checked={value2['label-21']}
59+
indented={false}
60+
label={
61+
<Stack direction="row" flex={1} justifyContent="space-between">
62+
<Text as="span" variant="bodyStrong">
63+
Intended set to false
64+
</Text>
65+
<Text as="span" variant="bodyStronger">
66+
4.99€
67+
</Text>
68+
</Stack>
69+
}
70+
name="label-21"
71+
onChange={event =>
72+
onChange2(prevState => ({
73+
...prevState,
74+
'label-21': event.currentTarget.checked,
75+
}))
76+
}
77+
showTick
78+
type="checkbox"
79+
value="label-21"
80+
>
81+
<Text as="p" prominence="weak" sentiment="neutral" variant="body">
82+
<Stack gap={3} width="100%">
83+
This option will cost you 1.99€ and provide you with a lot of
84+
happiness
85+
<Separator />
86+
<SelectInput
87+
label="Select a sub option"
88+
options={[
89+
{
90+
label: 'Sub option 1',
91+
value: 'option1',
92+
},
93+
]}
94+
/>
95+
</Stack>
96+
</Text>
97+
</SelectableCard>
98+
</Stack>
99+
</Stack>
100+
)
101+
}
102+
103+
Indented.decorators = [
104+
StoryComponent => (
105+
<Stack direction="row" gap={2}>
106+
<StoryComponent />
107+
</Stack>
108+
),
109+
]
110+
111+
Indented.parameters = {
112+
docs: {
113+
description: {
114+
story:
115+
'By default, the content of the card (children) is aligned with the label when `showTick` is set to `true`. It is possible to disabled this alignment by setting prop `indented` to `false`.',
116+
},
117+
},
118+
}

‎packages/ui/src/components/SelectableCard/__stories__/index.stories.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,5 @@ export { ShowTick } from './ShowTick.stories'
1515
export { Tooltip } from './Tooltip.stories'
1616
export { Type } from './Type.stories'
1717
export { Illustration } from './Illustration.stories'
18+
export { Indented } from './Indented.stories'
1819
export { Examples } from './Examples.stories'

0 commit comments

Comments
 (0)