Skip to content

Commit 891a374

Browse files
Lukas742Lukas742
authored
Merge branch 'master' into docs/cards
2 parents fb51d0a + b0a4588 commit 891a374

14 files changed

+497
-229
lines changed

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

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
22
import { Badge } from '@ui5/webcomponents-react/lib/Badge';
33
import '@ui5/webcomponents-icons/dist/icons/employee.js';
44
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
5-
import { CSSProperties, Ref } from 'react';
5+
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
6+
import { FlexBoxWrap } from '@ui5/webcomponents-react/lib/FlexBoxWrap';
7+
import { CSSProperties } from 'react';
68

79
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
810
import { DocsHeader } from '@shared/stories/DocsHeader';
@@ -50,14 +52,57 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
5052
</Canvas>
5153

5254
<ArgsTable story="." />
53-
<div style={{fontFamily:'var(--sapFontFamily)', fontSize:'var(--sapFontSize)', color:'var(--sapTextColor)'}}>
54-
<h3>Usage Guidelines</h3>
55-
<ul>
56-
<li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
57-
<li>
58-
When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be
59-
fully displayed.
60-
</li>
61-
<li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
62-
</ul>
63-
</div>
55+
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
56+
<h3>Usage Guidelines</h3>
57+
<ul>
58+
<li>If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.</li>
59+
<li>
60+
When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to
61+
be fully displayed.
62+
</li>
63+
<li>Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.</li>
64+
</ul>
65+
</div>
66+
67+
# Stories
68+
69+
## All available Badge colors
70+
71+
<Canvas>
72+
<Story name="All colors">
73+
{() => {
74+
return (
75+
<FlexBox wrap={FlexBoxWrap.Wrap}>
76+
<Badge colorScheme="1" style={{ marginRight: '10px', marginBottom: '10px' }}>
77+
colorScheme = "1"
78+
</Badge>
79+
<Badge colorScheme="2" style={{ marginRight: '10px', marginBottom: '10px' }}>
80+
colorScheme = "2"
81+
</Badge>
82+
<Badge colorScheme="3" style={{ marginRight: '10px', marginBottom: '10px' }}>
83+
colorScheme = "3"
84+
</Badge>
85+
<Badge colorScheme="4" style={{ marginRight: '10px', marginBottom: '10px' }}>
86+
colorScheme = "4"
87+
</Badge>
88+
<Badge colorScheme="5" style={{ marginRight: '10px', marginBottom: '10px' }}>
89+
colorScheme = "5"
90+
</Badge>
91+
<Badge colorScheme="6" style={{ marginRight: '10px', marginBottom: '10px' }}>
92+
colorScheme = "6"
93+
</Badge>
94+
<Badge colorScheme="7" style={{ marginRight: '10px', marginBottom: '10px' }}>
95+
colorScheme = "7"
96+
</Badge>
97+
<Badge colorScheme="8" style={{ marginRight: '10px', marginBottom: '10px' }}>
98+
colorScheme = "8"
99+
</Badge>
100+
<Badge colorScheme="9" style={{ marginRight: '10px', marginBottom: '10px' }}>
101+
colorScheme = "9"
102+
</Badge>
103+
<Badge colorScheme="10">colorScheme = "10"</Badge>
104+
</FlexBox>
105+
);
106+
}}
107+
</Story>
108+
</Canvas>

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
2+
import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
3+
import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
4+
import { Select } from '@ui5/webcomponents-react/lib/Select';
5+
import { Text } from '@ui5/webcomponents-react/lib/Text';
6+
import { CSSProperties } from 'react';
7+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
8+
import { DocsHeader } from '@shared/stories/DocsHeader';
9+
10+
<Meta
11+
title="UI5 Web Components / BusyIndicator"
12+
component={BusyIndicator}
13+
argTypes={{
14+
...createSelectArgTypes({ size: BusyIndicatorSize }),
15+
children: { control: { disable: true } },
16+
slot: { control: { disable: true } },
17+
ref: { control: { disable: true } },
18+
style: {
19+
type: CSSProperties,
20+
description:
21+
'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.'
22+
},
23+
className: {
24+
type: 'string',
25+
description:
26+
'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.'
27+
},
28+
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
29+
}}
30+
args={{
31+
size: BusyIndicatorSize.Medium,
32+
style: {},
33+
className: '',
34+
tooltip: '',
35+
slot: '',
36+
active: true,
37+
ref: null
38+
}}
39+
/>
40+
41+
<DocsHeader />
42+
43+
<Canvas>
44+
<Story name="Default">
45+
{(args) => {
46+
return <BusyIndicator {...args} />;
47+
}}
48+
</Story>
49+
</Canvas>
50+
51+
<ArgsTable story="." />
52+
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
53+
<h3>Usage</h3>
54+
For the <code>BusyIndicator</code> you can define the size of the indicator, as well as whether it is shown or hidden.
55+
In order to hide it, use the html attribute <code>hidden</code> or <code>display: none;</code> <br />
56+
<br />
57+
In order to show busy state for an HTML element, simply nest the HTML element in a <code>BusyIndicator</code> instance.
58+
<br />
59+
<b>Note:</b> Since <code>BusyIndicator</code> has <code>display: inline-block;</code> by default and no width of its own,
60+
whenever you need to wrap a block-level element, you should set <code>display: block</code> to the busy indicator as well.
61+
</div>
62+
63+
<br />
64+
<br />
65+
66+
# Stories
67+
68+
<br />
69+
70+
## BusyIndicator with children
71+
72+
<Canvas>
73+
<Story name="With children" args={{ active: true }}>
74+
{(args) => {
75+
return (
76+
<BusyIndicator {...args}>
77+
<Select />
78+
</BusyIndicator>
79+
);
80+
}}
81+
</Story>
82+
</Canvas>
83+
84+
<Canvas>
85+
<BusyIndicator active>
86+
<Text>
87+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
88+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
89+
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
90+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
91+
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
92+
sanctus est Lorem ipsum dolor sit amet.
93+
</Text>
94+
</BusyIndicator>
95+
</Canvas>

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

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

‎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>

0 commit comments

Comments
 (0)