Skip to content

Commit 3abbde3

Browse files
johnykeijohnykei
authored
Merge pull request #224 from digital-go-jp/v2
merge v2 into main
2 parents 2a2caca + a8576c4 commit 3abbde3

14 files changed

+527
-338
lines changed

‎package-lock.json

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

‎src/components/DatePicker/DatePicker.stories.tsx

Lines changed: 77 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -65,16 +65,25 @@ const meta = {
6565
type: { summary: 'boolean' },
6666
},
6767
},
68+
isReadonly: {
69+
description: '編集不可（読み取り専用）状態であるかどうかを指定します。',
70+
control: { type: 'boolean' },
71+
table: {
72+
defaultValue: { summary: 'false' },
73+
type: { summary: 'boolean' },
74+
},
75+
},
6876
},
6977
args: {
7078
size: 'lg',
7179
isError: false,
7280
isDisabled: false,
73-
children: ({ yearRef, monthRef, dateRef }) => (
81+
isReadonly: false,
82+
children: ({ yearRef, monthRef, dateRef, ...rest }) => (
7483
<>
75-
<DatePickerYear ref={yearRef} />
76-
<DatePickerMonth ref={monthRef} />
77-
<DatePickerDate ref={dateRef} />
84+
<DatePickerYear ref={yearRef} {...rest} />
85+
<DatePickerMonth ref={monthRef} {...rest} />
86+
<DatePickerDate ref={dateRef} {...rest} />
7887
</>
7988
),
8089
},
@@ -95,11 +104,11 @@ export const WithFieldset: Story = {
95104
</Legend>
96105
<SupportText id='date-picker-1-support-text'>例：2025年01月20日</SupportText>
97106
<DatePicker {...args}>
98-
{({ yearRef, monthRef, dateRef }) => (
107+
{({ yearRef, monthRef, dateRef, ...rest }) => (
99108
<>
100-
<DatePickerYear ref={yearRef} />
101-
<DatePickerMonth ref={monthRef} />
102-
<DatePickerDate ref={dateRef} />
109+
<DatePickerYear ref={yearRef} {...rest} />
110+
<DatePickerMonth ref={monthRef} {...rest} />
111+
<DatePickerDate ref={dateRef} {...rest} />
103112
</>
104113
)}
105114
</DatePicker>
@@ -125,24 +134,24 @@ export const Errored: Story = {
125134
</Legend>
126135
<SupportText id='date-picker-3-support-text'>例：2025年01月20日</SupportText>
127136
<DatePicker {...args}>
128-
{({ yearRef, monthRef, dateRef }) => (
137+
{({ yearRef, monthRef, dateRef, ...rest }) => (
129138
<>
130139
<DatePickerYear
131140
ref={yearRef}
132141
aria-describedby='date-picker-3-support-text date-picker-3-error-text'
133-
aria-invalid={true}
142+
{...rest}
134143
/>
135144
<DatePickerMonth
136145
ref={monthRef}
137146
defaultValue={10}
138147
aria-describedby='date-picker-3-support-text date-picker-3-error-text'
139-
aria-invalid={true}
148+
{...rest}
140149
/>
141150
<DatePickerDate
142151
ref={dateRef}
143152
defaultValue={28}
144153
aria-describedby='date-picker-3-support-text date-picker-3-error-text'
145-
aria-invalid={true}
154+
{...rest}
146155
/>
147156
</>
148157
)}
@@ -166,24 +175,71 @@ export const Disabled: Story = {
166175
<Legend>
167176
日付<RequirementBadge isOptional>※任意</RequirementBadge>
168177
</Legend>
169-
<SupportText id='date-picker-5-support-text'>例：2025年01月20日</SupportText>
178+
<SupportText id='date-picker-5-support-text'>
179+
〜の理由により、この項目は編集できません。
180+
</SupportText>
170181
<DatePicker {...args}>
171-
{({ yearRef, monthRef, dateRef }) => (
182+
{({ yearRef, monthRef, dateRef, ...rest }) => (
172183
<>
173184
<DatePickerYear
174185
ref={yearRef}
175-
aria-disabled={true}
176186
aria-describedby='date-picker-5-support-text'
187+
{...rest}
177188
/>
178189
<DatePickerMonth
179190
ref={monthRef}
180-
aria-disabled={true}
181191
aria-describedby='date-picker-5-support-text'
192+
{...rest}
182193
/>
183194
<DatePickerDate
184195
ref={dateRef}
185-
aria-disabled={true}
186196
aria-describedby='date-picker-5-support-text'
197+
{...rest}
198+
/>
199+
</>
200+
)}
201+
</DatePicker>
202+
</fieldset>
203+
);
204+
},
205+
};
206+
207+
/**
208+
* Readonly状態を表示した例
209+
*/
210+
export const Readonly: Story = {
211+
args: {
212+
isReadonly: true,
213+
},
214+
render({ ...args }) {
215+
return (
216+
<fieldset className='flex flex-col gap-2 items-start'>
217+
<Legend>
218+
日付<RequirementBadge isOptional>※任意</RequirementBadge>
219+
</Legend>
220+
<SupportText id='date-picker-6-support-text'>
221+
〜の理由により、この項目は編集できません。
222+
</SupportText>
223+
<DatePicker {...args}>
224+
{({ yearRef, monthRef, dateRef, ...rest }) => (
225+
<>
226+
<DatePickerYear
227+
ref={yearRef}
228+
value={2025}
229+
aria-describedby='date-picker-6-support-text'
230+
{...rest}
231+
/>
232+
<DatePickerMonth
233+
ref={monthRef}
234+
value={10}
235+
aria-describedby='date-picker-6-support-text'
236+
{...rest}
237+
/>
238+
<DatePickerDate
239+
ref={dateRef}
240+
value={28}
241+
aria-describedby='date-picker-6-support-text'
242+
{...rest}
187243
/>
188244
</>
189245
)}
@@ -230,25 +286,28 @@ export const WithCalendar: Story = {
230286
return (
231287
<>
232288
<DatePicker size={size} {...args}>
233-
{({ yearRef, monthRef, dateRef }) => (
289+
{({ yearRef, monthRef, dateRef, ...rest }) => (
234290
<>
235291
<DatePickerYear
236292
ref={yearRef}
237293
value={yearInput}
238294
onChange={(e) => setYearInput(e.target.value)}
239295
onBlur={updateCalendarDate}
296+
{...rest}
240297
/>
241298
<DatePickerMonth
242299
ref={monthRef}
243300
value={monthInput}
244301
onChange={(e) => setMonthInput(e.target.value)}
245302
onBlur={updateCalendarDate}
303+
{...rest}
246304
/>
247305
<DatePickerDate
248306
ref={dateRef}
249307
value={dayInput}
250308
onChange={(e) => setDayInput(e.target.value)}
251309
onBlur={updateCalendarDate}
310+
{...rest}
252311
/>
253312
</>
254313
)}

‎src/components/DatePicker/DatePicker.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,20 @@ export type DatePickerSize = 'lg' | 'md' | 'sm';
77
export type DatePickerProps = Omit<ComponentProps<'div'>, 'children'> & {
88
size?: DatePickerSize;
99
isError?: boolean;
10+
isReadonly?: boolean;
1011
isDisabled?: boolean;
1112
children: (props: {
1213
yearRef: Ref<HTMLInputElement>;
1314
monthRef: Ref<HTMLInputElement>;
1415
dateRef: Ref<HTMLInputElement>;
16+
readOnly?: boolean;
17+
'aria-disabled'?: boolean;
18+
'aria-invalid'?: boolean;
1519
}) => JSX.Element;
1620
};
1721

1822
export const DatePicker = (props: DatePickerProps) => {
19-
const { className, size = 'lg', isError, isDisabled, children, ...rest } = props;
23+
const { className, size = 'lg', isError, isReadonly, isDisabled, children, ...rest } = props;
2024

2125
const yearRef = useRef<HTMLInputElement>(null);
2226
const monthRef = useRef<HTMLInputElement>(null);
@@ -67,14 +71,22 @@ export const DatePicker = (props: DatePickerProps) => {
6771
return (
6872
// biome-ignore lint/a11y/noStaticElementInteractions: For date input navigation
6973
<div
70-
className={`inline-flex h-14 -space-x-1 rounded-8 border border-solid-gray-600 bg-[--bg] p-0.5 pe-0 text-solid-gray-900 [--bg:theme(colors.white)] focus-within:border-black hover:border-solid-gray-900 data-[size=md]:h-12 data-[size=sm]:h-10 data-[disabled]:border-solid-gray-300 data-[error]:border-error-1 data-[disabled]:text-solid-gray-420 data-[disabled]:[--bg:theme(colors.solid-gray.50)] data-[error]:focus-within:border-red-1000 data-[error]:hover:border-red-1000 forced-colors:data-[disabled]:border-[GrayText] forced-colors:data-[disabled]:text-[GrayText] ${className ?? ''}`}
74+
className={`inline-flex h-14 -space-x-1 rounded-8 border border-solid-gray-600 bg-[--bg] p-0.5 pe-0 text-solid-gray-900 [--bg:theme(colors.white)] focus-within:border-black hover:border-solid-gray-900 data-[size=md]:h-12 data-[size=sm]:h-10 data-[readonly]:border-dashed data-[disabled]:border-solid-gray-300 data-[error]:border-error-1 data-[disabled]:text-solid-gray-420 data-[disabled]:[--bg:theme(colors.solid-gray.50)] data-[error]:focus-within:border-red-1000 data-[error]:hover:border-red-1000 data-[error]:hover:data-[readonly]:border-error-1 hover:data-[readonly]:border-solid-gray-600 forced-colors:data-[disabled]:border-[GrayText] forced-colors:data-[disabled]:text-[GrayText] ${className ?? ''}`}
7175
data-size={size}
7276
data-error={isError || null}
77+
data-readonly={isReadonly || null}
7378
data-disabled={isDisabled || null}
7479
onKeyDown={handleKeyDown}
7580
{...rest}
7681
>
77-
{children({ yearRef, monthRef, dateRef })}
82+
{children({
83+
yearRef,
84+
monthRef,
85+
dateRef,
86+
readOnly: isReadonly,
87+
'aria-disabled': isDisabled,
88+
'aria-invalid': isError,
89+
})}
7890
</div>
7991
);
8092
};

‎src/components/DatePicker/parts/DatePickerDate.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type ComponentProps, forwardRef } from 'react';
33
export type DatePickerDateProps = ComponentProps<'input'> & {};
44

55
export const DatePickerDate = forwardRef<HTMLInputElement, DatePickerDateProps>((props, ref) => {
6-
const { className, 'aria-disabled': disabled, readOnly, ...rest } = props;
6+
const { className, 'aria-disabled': ariaDisabled, readOnly, ...rest } = props;
77

88
return (
99
<label className='relative z-0 inline-flex flex-row-reverse last:pe-4 [&:has([aria-disabled="true"])]:pointer-events-none'>
@@ -13,8 +13,8 @@ export const DatePickerDate = forwardRef<HTMLInputElement, DatePickerDateProps>(
1313
type='text'
1414
inputMode='numeric'
1515
pattern='\d+'
16-
readOnly={disabled ? true : readOnly}
17-
aria-disabled={disabled}
16+
readOnly={ariaDisabled === 'true' || ariaDisabled === true || readOnly}
17+
aria-disabled={ariaDisabled}
1818
ref={ref}
1919
{...rest}
2020
/>

‎src/components/DatePicker/parts/DatePickerMonth.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type ComponentProps, forwardRef } from 'react';
33
export type DatePickerMonthProps = ComponentProps<'input'> & {};
44

55
export const DatePickerMonth = forwardRef<HTMLInputElement, DatePickerMonthProps>((props, ref) => {
6-
const { className, 'aria-disabled': disabled, readOnly, ...rest } = props;
6+
const { className, 'aria-disabled': ariaDisabled, readOnly, ...rest } = props;
77

88
return (
99
<label className='relative z-0 inline-flex flex-row-reverse last:pe-4 [&:has([aria-disabled="true"])]:pointer-events-none'>
@@ -13,8 +13,8 @@ export const DatePickerMonth = forwardRef<HTMLInputElement, DatePickerMonthProps
1313
type='text'
1414
inputMode='numeric'
1515
pattern='\d+'
16-
readOnly={disabled ? true : readOnly}
17-
aria-disabled={disabled}
16+
readOnly={ariaDisabled === 'true' || ariaDisabled === true || readOnly}
17+
aria-disabled={ariaDisabled}
1818
ref={ref}
1919
{...rest}
2020
/>

‎src/components/DatePicker/parts/DatePickerYear.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type ComponentProps, forwardRef } from 'react';
33
export type DatePickerYearProps = ComponentProps<'input'> & {};
44

55
export const DatePickerYear = forwardRef<HTMLInputElement, DatePickerYearProps>((props, ref) => {
6-
const { className, 'aria-disabled': disabled, readOnly, ...rest } = props;
6+
const { className, 'aria-disabled': ariaDisabled, readOnly, ...rest } = props;
77

88
return (
99
<label className='relative z-0 inline-flex flex-row-reverse last:pe-4 [&:has([aria-disabled="true"])]:pointer-events-none'>
@@ -13,8 +13,8 @@ export const DatePickerYear = forwardRef<HTMLInputElement, DatePickerYearProps>(
1313
type='text'
1414
inputMode='numeric'
1515
pattern='\d+'
16-
readOnly={disabled ? true : readOnly}
17-
aria-disabled={disabled}
16+
readOnly={ariaDisabled === 'true' || ariaDisabled === true || readOnly}
17+
aria-disabled={ariaDisabled}
1818
ref={ref}
1919
{...rest}
2020
/>

0 commit comments

Comments
 (0)