Skip to content

Commit 0022eb1

Browse files
Lukas742Lukas742
committed
docs: migrate picker and calendar stories to mdx
1 parent 9697b43 commit 0022eb1

File tree

11 files changed

+344
-177
lines changed

11 files changed

+344
-177
lines changed

‎packages/main/src/webComponents/Calendar/Calendar.stories.mdx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
2+
import { Calendar } from '@ui5/webcomponents-react/lib/Calendar';
3+
import { CalendarType } from '@ui5/webcomponents-react/lib/CalendarType';
4+
import '@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js';
5+
import '@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js';
6+
import '@ui5/webcomponents-localization/dist/features/calendar/Islamic.js';
7+
import '@ui5/webcomponents-localization/dist/features/calendar/Japanese.js';
8+
import '@ui5/webcomponents-localization/dist/features/calendar/Persian.js';
9+
import { CSSProperties } from 'react';
10+
11+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
12+
import { DocsHeader } from '@shared/stories/DocsHeader';
13+
14+
<Meta
15+
title="UI5 Web Components / Calendar"
16+
component={Calendar}
17+
argTypes={{
18+
...createSelectArgTypes({ primaryCalendarType: CalendarType }),
19+
slot: { control: { disable: true } },
20+
ref: { control: { disable: true } },
21+
style: {
22+
type: CSSProperties,
23+
description:
24+
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
25+
},
26+
className: {
27+
type: 'string',
28+
description:
29+
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
30+
},
31+
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
32+
}}
33+
args={{
34+
primaryCalendarType: CalendarType.Gregorian,
35+
style: {},
36+
className: '',
37+
tooltip: '',
38+
slot: '',
39+
ref: null
40+
}}
41+
/>
42+
43+
<DocsHeader />
44+
45+
<Canvas>
46+
<Story name="Default">
47+
{(args) => {
48+
return <Calendar {...args} />;
49+
}}
50+
</Story>
51+
</Canvas>
52+
53+
<ArgsTable story="." />

‎packages/main/src/webComponents/Calendar/Calendar.stories.tsx

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎packages/main/src/webComponents/DatePicker/DatePicker.stories.mdx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
2+
import { DatePicker } from '@ui5/webcomponents-react/lib/DatePicker';
3+
import { CalendarType } from '@ui5/webcomponents-react/lib/CalendarType';
4+
import '@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js';
5+
import '@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js';
6+
import '@ui5/webcomponents-localization/dist/features/calendar/Islamic.js';
7+
import '@ui5/webcomponents-localization/dist/features/calendar/Japanese.js';
8+
import '@ui5/webcomponents-localization/dist/features/calendar/Persian.js';
9+
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
10+
import { CSSProperties, Ref } from 'react';
11+
12+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
13+
import { DocsHeader } from '@shared/stories/DocsHeader';
14+
15+
<Meta
16+
title="UI5 Web Components / DatePicker"
17+
component={DatePicker}
18+
argTypes={{
19+
...createSelectArgTypes({ primaryCalendarType: CalendarType, valueState: ValueState }),
20+
valueStateMessage: { control: { disable: true } },
21+
slot: { control: { disable: true } },
22+
ref: { control: { disable: true } },
23+
style: {
24+
type: CSSProperties,
25+
description:
26+
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
27+
},
28+
className: {
29+
type: 'string',
30+
description:
31+
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
32+
},
33+
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
34+
}}
35+
args={{
36+
primaryCalendarType: CalendarType.Gregorian,
37+
valueState: ValueState.None,
38+
style: {},
39+
className: '',
40+
tooltip: '',
41+
slot: '',
42+
ref: null
43+
}}
44+
/>
45+
46+
<DocsHeader />
47+
48+
<Canvas>
49+
<Story name="Default">
50+
{(args) => {
51+
return <DatePicker {...args} />;
52+
}}
53+
</Story>
54+
</Canvas>
55+
56+
<ArgsTable story="." />
57+
<div style={{fontFamily:'var(--sapFontFamily)', fontSize:'var(--sapFontSize)', color:'var(--sapTextColor)'}}>
58+
<h3>Usage</h3>
59+
The user can enter a date by:
60+
<ul>
61+
<li>Using the calendar that opens in a popup</li>
62+
<li>Typing it in directly in the input field</li>
63+
</ul>
64+
<br /><br />
65+
When the user makes an entry and chooses the enter key, the calendar shows the corresponding date. When the user
66+
directly triggers the calendar display, the actual date is displayed.
67+
</div>

‎packages/main/src/webComponents/DatePicker/DatePicker.stories.tsx

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎packages/main/src/webComponents/DateRangePicker/DateRangePicker.stories.mdx

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,45 @@
1-
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
22
import { DateRangePicker } from '@ui5/webcomponents-react/lib/DateRangePicker';
33
import { CalendarType } from '@ui5/webcomponents-react/lib/CalendarType';
4+
import '@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js';
5+
import '@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js';
6+
import '@ui5/webcomponents-localization/dist/features/calendar/Islamic.js';
7+
import '@ui5/webcomponents-localization/dist/features/calendar/Japanese.js';
8+
import '@ui5/webcomponents-localization/dist/features/calendar/Persian.js';
49
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
5-
import { DocsHeader } from '@shared/stories/DocsHeader';
10+
import { CSSProperties, Ref } from 'react';
11+
612
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
13+
import { DocsHeader } from '@shared/stories/DocsHeader';
714

815
<Meta
916
title="UI5 Web Components / DateRangePicker"
1017
component={DateRangePicker}
1118
argTypes={{
12-
...createSelectArgTypes({ primaryCalendarType: CalendarType, valueState: ValueState })
19+
...createSelectArgTypes({ primaryCalendarType: CalendarType, valueState: ValueState }),
20+
valueStateMessage: { control: { disable: true } },
21+
slot: { control: { disable: true } },
22+
ref: { control: { disable: true } },
23+
style: {
24+
type: CSSProperties,
25+
description:
26+
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
27+
},
28+
className: {
29+
type: 'string',
30+
description:
31+
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
32+
},
33+
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
1334
}}
1435
args={{
1536
primaryCalendarType: CalendarType.Gregorian,
16-
valueState: ValueState.None
37+
valueState: ValueState.None,
38+
style: {},
39+
className: '',
40+
tooltip: '',
41+
slot: '',
42+
ref: null
1743
}}
1844
/>
1945

@@ -28,3 +54,8 @@ import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
2854
</Canvas>
2955

3056
<ArgsTable story="." />
57+
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
58+
<h3>Usage</h3>
59+
The user can enter a date by: Using the calendar that opens in a popup or typing it in directly in the input field (not
60+
available for mobile devices).
61+
</div>

‎packages/main/src/webComponents/DateTimePicker/DateTimePicker.stories.mdx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
2+
import { DateTimePicker } from '@ui5/webcomponents-react/lib/DateTimePicker';
3+
import { CalendarType } from '@ui5/webcomponents-react/lib/CalendarType';
4+
import '@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js';
5+
import '@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js';
6+
import '@ui5/webcomponents-localization/dist/features/calendar/Islamic.js';
7+
import '@ui5/webcomponents-localization/dist/features/calendar/Japanese.js';
8+
import '@ui5/webcomponents-localization/dist/features/calendar/Persian.js';
9+
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
10+
import { CSSProperties, Ref } from 'react';
11+
12+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
13+
import { DocsHeader } from '@shared/stories/DocsHeader';
14+
15+
<Meta
16+
title="UI5 Web Components / DateTimePicker"
17+
component={DateTimePicker}
18+
argTypes={{
19+
...createSelectArgTypes({ primaryCalendarType: CalendarType, valueState: ValueState }),
20+
valueStateMessage: { control: { disable: true } },
21+
slot: { control: { disable: true } },
22+
ref: { control: { disable: true } },
23+
style: {
24+
type: CSSProperties,
25+
description:
26+
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
27+
},
28+
className: {
29+
type: 'string',
30+
description:
31+
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
32+
},
33+
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
34+
}}
35+
args={{
36+
primaryCalendarType: CalendarType.Gregorian,
37+
valueState: ValueState.None,
38+
style: {},
39+
className: '',
40+
tooltip: '',
41+
slot: '',
42+
ref: null
43+
}}
44+
/>
45+
46+
<DocsHeader />
47+
48+
<Canvas>
49+
<Story name="Default">
50+
{(args) => {
51+
return <DateTimePicker {...args} />;
52+
}}
53+
</Story>
54+
</Canvas>
55+
56+
<ArgsTable story="." />
57+
<div style={{fontFamily:'var(--sapFontFamily)', fontSize:'var(--sapFontSize)', color:'var(--sapTextColor)'}}>
58+
<h3>Usage</h3>
59+
Use the <code>DateTimePicker</code> if you need a combined date and time input component. Don't use it if you want to
60+
use either date, or time value. In this case, use the <code>DatePicker</code> or the <code>TimePicker</code> components
61+
instead. <br /><br />
62+
The user can set date/time by:
63+
<ul>
64+
<li>using the calendar and the time selectors</li>
65+
<li>typing in the input field</li>
66+
</ul>
67+
Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property <br /><br />
68+
As most of the input based components, the <code>DateTimePicker</code> supports properties, such as:
69+
<code>disabled</code>, <code>readonly</code>, <code>valueState</code> and <code>placeholder</code>.
70+
</div>

‎packages/main/src/webComponents/DateTimePicker/DateTimePicker.stories.tsx

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)