Skip to content

Commit d0ba065

Browse files
tsmdtsmd
authored
Merge pull request #110 from digital-go-jp/v2
merge v2 into main
2 parents ceffa1f + 458d9bd commit d0ba065

File tree

11 files changed

+2081
-2442
lines changed

11 files changed

+2081
-2442
lines changed

‎package-lock.json‎

Lines changed: 1504 additions & 2254 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,28 +45,28 @@
4545
"tailwindcss": "^3.4.13"
4646
},
4747
"devDependencies": {
48-
"@biomejs/biome": "^1.9.2",
48+
"@biomejs/biome": "^1.9.4",
4949
"@markuplint/jsx-parser": "^4.7.7",
50-
"@markuplint/react-spec": "^4.5.5",
51-
"@storybook/addon-a11y": "^8.3.3",
52-
"@storybook/addon-essentials": "^8.3.3",
53-
"@storybook/addon-interactions": "^8.3.3",
54-
"@storybook/addon-links": "^8.3.3",
55-
"@storybook/blocks": "^8.3.3",
56-
"@storybook/react": "^8.3.3",
57-
"@storybook/react-vite": "^8.3.3",
58-
"@storybook/test": "^8.3.3",
50+
"@markuplint/react-spec": "^4.5.9",
51+
"@storybook/addon-a11y": "^8.3.6",
52+
"@storybook/addon-essentials": "^8.3.6",
53+
"@storybook/addon-interactions": "^8.3.6",
54+
"@storybook/addon-links": "^8.3.6",
55+
"@storybook/blocks": "^8.3.6",
56+
"@storybook/react": "^8.3.6",
57+
"@storybook/react-vite": "^8.3.6",
58+
"@storybook/test": "^8.3.6",
5959
"@tsconfig/node20": "^20.1.4",
60-
"@types/node": "^20.14.10",
61-
"@types/react": "^18.3.3",
60+
"@types/node": "^22.7.6",
61+
"@types/react": "^18.3.11",
6262
"@types/react-dom": "^18.3.0",
6363
"@vitejs/plugin-react-swc": "^3.7.0",
64-
"autoprefixer": "^10.4.19",
64+
"autoprefixer": "^10.4.20",
6565
"markuplint": "^4.9.4",
6666
"postcss": "^8.4.47",
67-
"storybook": "^8.3.3",
67+
"storybook": "^8.3.6",
6868
"typescript": "^5.6.2",
69-
"vite": "^5.4.7"
69+
"vite": "^5.4.9"
7070
},
7171
"engines": {
7272
"node": ">=18"

‎src/components/Checkbox/Checkbox.stories.tsx‎

Lines changed: 208 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,16 @@ const meta = {
88
component: Checkbox,
99
tags: ['autodocs'],
1010
argTypes: {
11+
size: {
12+
type: 'string',
13+
description: 'チェックボックスのサイズを以下から選択します。',
14+
control: { type: 'radio' },
15+
options: ['sm', 'md', 'lg'],
16+
table: {
17+
defaultValue: { summary: 'sm' },
18+
type: { summary: "'sm' | 'md' | 'lg'" },
19+
},
20+
},
1121
isError: {
1222
description: 'エラー状態であるかどうかを指定します。',
1323
control: { type: 'boolean' },
@@ -31,105 +41,254 @@ const meta = {
3141
export default meta;
3242
type Story = StoryObj<typeof meta>;
3343

34-
export const Example: Story = {
44+
export const Playground: Story = {
45+
args: {
46+
size: 'sm',
47+
'aria-disabled': false,
48+
isError: false,
49+
children: '選択肢',
50+
},
51+
};
52+
53+
export const Stacked: Story = {
54+
render: () => (
55+
<div className='flex gap-8'>
56+
<fieldset>
57+
<Legend>
58+
ラベル<RequirementBadge>※必須</RequirementBadge>
59+
</Legend>
60+
<SupportText className='mt-2' id='stacked-1-support-text'>
61+
サポートテキスト
62+
</SupportText>
63+
<div className='mt-1 flex flex-col'>
64+
<Checkbox aria-describedby='stacked-1-support-text' name='a'>
65+
選択肢1
66+
</Checkbox>
67+
<Checkbox aria-describedby='stacked-1-support-text' name='a'>
68+
選択肢2
69+
</Checkbox>
70+
<Checkbox aria-describedby='stacked-1-support-text' name='a'>
71+
選択肢3
72+
</Checkbox>
73+
</div>
74+
</fieldset>
75+
<fieldset>
76+
<Legend>
77+
ラベル<RequirementBadge>※必須</RequirementBadge>
78+
</Legend>
79+
<SupportText className='mt-2' id='stacked-2-support-text'>
80+
サポートテキスト
81+
</SupportText>
82+
<div className='mt-2 flex flex-col gap-2'>
83+
<Checkbox size='md' aria-describedby='stacked-2-support-text' name='b'>
84+
選択肢1
85+
</Checkbox>
86+
<Checkbox size='md' aria-describedby='stacked-2-support-text' name='b'>
87+
選択肢2
88+
</Checkbox>
89+
<Checkbox size='md' aria-describedby='stacked-2-support-text' name='b'>
90+
選択肢3
91+
</Checkbox>
92+
</div>
93+
</fieldset>
94+
<fieldset>
95+
<Legend>
96+
ラベル<RequirementBadge>※必須</RequirementBadge>
97+
</Legend>
98+
<SupportText className='mt-2' id='stacked-3-support-text'>
99+
サポートテキスト
100+
</SupportText>
101+
<div className='mt-3 flex flex-col gap-2'>
102+
<Checkbox size='lg' aria-describedby='stacked-3-support-text' name='c'>
103+
選択肢1
104+
</Checkbox>
105+
<Checkbox size='lg' aria-describedby='stacked-3-support-text' name='c'>
106+
選択肢2
107+
</Checkbox>
108+
<Checkbox size='lg' aria-describedby='stacked-3-support-text' name='c'>
109+
選択肢3
110+
</Checkbox>
111+
</div>
112+
</fieldset>
113+
</div>
114+
),
115+
};
116+
117+
export const Inline: Story = {
118+
render: () => (
119+
<div className='flex flex-col gap-16'>
120+
<fieldset>
121+
<Legend>
122+
ラベル<RequirementBadge>※必須</RequirementBadge>
123+
</Legend>
124+
<SupportText className='mt-2' id='inline-1-support-text'>
125+
サポートテキスト
126+
</SupportText>
127+
<div className='mt-1 flex flex-wrap gap-x-4'>
128+
<Checkbox aria-describedby='inline-1-support-text' name='d'>
129+
選択肢1
130+
</Checkbox>
131+
<Checkbox aria-describedby='inline-1-support-text' name='d'>
132+
選択肢2
133+
</Checkbox>
134+
<Checkbox aria-describedby='inline-1-support-text' name='d'>
135+
選択肢3
136+
</Checkbox>
137+
</div>
138+
</fieldset>
139+
<fieldset>
140+
<Legend>
141+
ラベル<RequirementBadge>※必須</RequirementBadge>
142+
</Legend>
143+
<SupportText className='mt-2' id='inline-2-support-text'>
144+
サポートテキスト
145+
</SupportText>
146+
<div className='mt-2 flex flex-wrap gap-x-8 gap-y-2'>
147+
<Checkbox size='md' aria-describedby='inline-2-support-text' name='e'>
148+
選択肢1
149+
</Checkbox>
150+
<Checkbox size='md' aria-describedby='inline-2-support-text' name='e'>
151+
選択肢2
152+
</Checkbox>
153+
<Checkbox size='md' aria-describedby='inline-2-support-text' name='e'>
154+
選択肢3
155+
</Checkbox>
156+
</div>
157+
</fieldset>
158+
<fieldset>
159+
<Legend>
160+
ラベル<RequirementBadge>※必須</RequirementBadge>
161+
</Legend>
162+
<SupportText className='mt-2' id='inline-3-support-text'>
163+
サポートテキスト
164+
</SupportText>
165+
<div className='mt-3 flex flex-wrap gap-10 gap-y-2'>
166+
<Checkbox size='lg' aria-describedby='inline-3-support-text' name='f'>
167+
選択肢1
168+
</Checkbox>
169+
<Checkbox size='lg' aria-describedby='inline-3-support-text' name='f'>
170+
選択肢2
171+
</Checkbox>
172+
<Checkbox size='lg' aria-describedby='inline-3-support-text' name='f'>
173+
選択肢3
174+
</Checkbox>
175+
</div>
176+
</fieldset>
177+
</div>
178+
),
179+
};
180+
181+
export const Errored: Story = {
35182
render: () => {
36183
return (
37-
<div className='flex flex-col gap-8'>
38-
<fieldset className='flex flex-col'>
39-
<Legend className='mt-2'>
40-
ラベル<RequirementBadge isOptional={true}>※任意</RequirementBadge>
184+
<div className='flex flex-col gap-16'>
185+
<fieldset>
186+
<Legend>
187+
ラベル<RequirementBadge>※必須</RequirementBadge>
41188
</Legend>
42-
<SupportText className='mt-2' id='test-support-text'>
189+
<SupportText className='mt-2' id='error-1-support-text'>
43190
サポートテキスト
44191
</SupportText>
45-
<div className='flex flex-col'>
46-
<Checkbox aria-describedby='test-support-text' name='w'>
192+
<div className='mt-1 flex flex-col'>
193+
<Checkbox aria-describedby='error-1-support-text error-1-text' isError={true} name='g'>
47194
選択肢1
48195
</Checkbox>
49-
<Checkbox aria-describedby='test-support-text' name='w'>
196+
<Checkbox
197+
aria-describedby='error-1-support-text error-1-text'
198+
isError={true}
199+
name='g'
200+
defaultChecked
201+
>
50202
選択肢2
51203
</Checkbox>
52-
<Checkbox aria-describedby='test-support-text' name='w'>
204+
<Checkbox aria-describedby='error-1-support-text error-1-text' isError={true} name='g'>
53205
選択肢3
54206
</Checkbox>
55207
</div>
208+
<ErrorText className='mt-2' id='error-1-text'>
209+
＊エラーテキストが入ります。
210+
</ErrorText>
56211
</fieldset>
57-
58-
<fieldset className='flex flex-col'>
59-
<Legend className='mt-2'>
212+
<fieldset>
213+
<Legend>
60214
ラベル<RequirementBadge>※必須</RequirementBadge>
61215
</Legend>
62-
<SupportText className='mt-2' id='test-inline-support-text'>
216+
<SupportText className='mt-2' id='error-2-support-text'>
63217
サポートテキスト
64218
</SupportText>
65-
<div className='flex gap-8'>
66-
<Checkbox aria-describedby='test-inline-support-text' name='x'>
219+
<div className='mt-1 flex flex-wrap gap-x-4'>
220+
<Checkbox aria-describedby='error-2-support-text error-2-text' isError={true} name='h'>
67221
選択肢1
68222
</Checkbox>
69-
<Checkbox aria-describedby='test-inline-support-text' name='x'>
223+
<Checkbox
224+
aria-describedby='error-2-support-text error-2-text'
225+
isError={true}
226+
name='h'
227+
defaultChecked
228+
>
70229
選択肢2
71230
</Checkbox>
72-
<Checkbox aria-describedby='test-inline-support-text' name='x'>
231+
<Checkbox aria-describedby='error-2-support-text error-2-text' isError={true} name='h'>
73232
選択肢3
74233
</Checkbox>
75234
</div>
235+
<ErrorText className='mt-2' id='error-2-text'>
236+
＊エラーテキストが入ります。
237+
</ErrorText>
76238
</fieldset>
239+
</div>
240+
);
241+
},
242+
};
77243

78-
<fieldset className='flex flex-col'>
79-
<Legend className='mt-2'>
244+
export const Disabled: Story = {
245+
render: () => {
246+
return (
247+
<div className='flex flex-col gap-16'>
248+
<fieldset>
249+
<Legend>
80250
ラベル<RequirementBadge>※必須</RequirementBadge>
81251
</Legend>
82-
<SupportText className='mt-2' id='test-error-support-text'>
83-
サポートテキスト
252+
<SupportText className='mt-2' id='disabled-1-support-text'>
253+
〜の理由により、この項目は無効化されています。
84254
</SupportText>
85-
<div className='flex flex-col'>
86-
<Checkbox
87-
aria-describedby='test-error-support-text test-error-text'
88-
isError={true}
89-
name='y'
90-
>
255+
<div className='mt-1 flex flex-col'>
256+
<Checkbox aria-describedby='disabled-1-support-text' aria-disabled={true} name='i'>
91257
選択肢1
92258
</Checkbox>
93259
<Checkbox
94-
aria-describedby='test-error-support-text test-error-text'
95-
isError={true}
96-
name='y'
260+
aria-describedby='disabled-1-support-text'
261+
aria-disabled={true}
262+
name='i'
263+
defaultChecked
97264
>
98265
選択肢2
99266
</Checkbox>
100-
<Checkbox
101-
aria-describedby='test-error-support-text test-error-text'
102-
isError={true}
103-
name='y'
104-
>
267+
<Checkbox aria-describedby='disabled-1-support-text' aria-disabled={true} name='i'>
105268
選択肢3
106269
</Checkbox>
107270
</div>
108-
<ErrorText className='mt-2' id='test-error-text'>
109-
＊エラーテキスト
110-
</ErrorText>
111271
</fieldset>
112-
113-
<fieldset className='flex flex-col gap-2'>
114-
<Legend className='mt-2'>
272+
<fieldset>
273+
<Legend>
115274
ラベル<RequirementBadge>※必須</RequirementBadge>
116275
</Legend>
117-
<SupportText className='mt-2' id='test-disabled-support-text'>
276+
<SupportText className='mt-2' id='disabled-2-support-text'>
118277
〜の理由により、この項目は無効化されています。
119278
</SupportText>
120-
<div className='flex flex-col'>
121-
<Checkbox aria-describedby='test-disabled-support-text' aria-disabled={true} name='z'>
279+
<div className='mt-1 flex flex-wrap gap-x-4'>
280+
<Checkbox aria-describedby='disabled-2-support-text' aria-disabled={true} name='j'>
122281
選択肢1
123282
</Checkbox>
124283
<Checkbox
125-
aria-describedby='test-disabled-support-text'
126-
checked
284+
aria-describedby='disabled-2-support-text'
127285
aria-disabled={true}
128-
name='z'
286+
name='j'
287+
defaultChecked
129288
>
130289
選択肢2
131290
</Checkbox>
132-
<Checkbox aria-describedby='test-disabled-support-text' aria-disabled={true} name='z'>
291+
<Checkbox aria-describedby='disabled-2-support-text' aria-disabled={true} name='j'>
133292
選択肢3
134293
</Checkbox>
135294
</div>

0 commit comments

Comments
 (0)