Skip to content

Commit aa46054

Browse files
MarcusNotheisMarcusNotheis
authored
Merge branch 'master' into docs/calendar-components
2 parents 0022eb1 + aebe1d2 commit aa46054

File tree

3 files changed

+153
-52
lines changed

3 files changed

+153
-52
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.

0 commit comments

Comments
 (0)