Skip to content

Commit 47cf1c6

Browse files
Lukas742Lukas742
authored
docs(List): enhance and migrate story to mdx (#789)
1 parent ea3ed49 commit 47cf1c6

File tree

2 files changed

+188
-56
lines changed

2 files changed

+188
-56
lines changed

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

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
2+
import { List } from '@ui5/webcomponents-react/lib/List';
3+
import { ProgressIndicator } from '@ui5/webcomponents-react/lib/ProgressIndicator';
4+
import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
5+
import { ListItemTypes } from '@ui5/webcomponents-react/lib/ListItemTypes';
6+
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
7+
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
8+
import { Text } from '@ui5/webcomponents-react/lib/Text';
9+
import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
10+
import { ListMode } from '@ui5/webcomponents-react/lib/ListMode';
11+
import { ListSeparators } from '@ui5/webcomponents-react/lib/ListSeparators';
12+
import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
13+
import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem';
14+
import { GroupHeaderListItem } from '@ui5/webcomponents-react/lib/GroupHeaderListItem';
15+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
16+
import { DocsHeader } from '@shared/stories/DocsHeader';
17+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
18+
import '@ui5/webcomponents-icons/dist/icons/employee.js';
19+
20+
<Meta
21+
title="UI5 Web Components / List"
22+
component={List}
23+
subcomponents={{ StandardListItem, CustomListItem, GroupHeaderListItem }}
24+
argTypes={{
25+
...createSelectArgTypes({ mode: ListMode, separators: ListSeparators }),
26+
...DocsCommonProps,
27+
children: { control: { disable: true } },
28+
header: { control: { disable: true } }
29+
}}
30+
args={{
31+
headerText: 'List with StandardListItems',
32+
mode: ListMode.None,
33+
separators: ListSeparators.All,
34+
style: {},
35+
className: '',
36+
tooltip: '',
37+
slot: '',
38+
ref: null
39+
}}
40+
/>
41+
42+
<DocsHeader />
43+
44+
<Canvas>
45+
<Story name="Default">
46+
{(args) => {
47+
return (
48+
<List {...args}>
49+
<StandardListItem info={'3'}>List Item 1</StandardListItem>
50+
<StandardListItem info={'2'}>List Item 2</StandardListItem>
51+
<StandardListItem info={'1'}>List Item 3</StandardListItem>
52+
</List>
53+
);
54+
}}
55+
</Story>
56+
</Canvas>
57+
58+
<ArgsTable story="Default" />
59+
60+
<br />
61+
62+
# Stories
63+
64+
<br />
65+
66+
## StandardListItem
67+
68+
The <code>StandardListItem</code> represents the simplest type of item for a <code>StandardListItemst</code>. This is a
69+
list item, providing the most common use cases such as <code>text</code>, <code>image</code> and <code>icon</code>
70+
71+
<Canvas>
72+
<Story
73+
name="with StandardListItem"
74+
args={{
75+
...createSelectArgTypes({ mode: ListMode, separators: ListSeparators }),
76+
description: 'StandardListItem',
77+
icon: 'employee',
78+
iconEnd: false,
79+
image: '',
80+
info: 'info',
81+
infoState: ValueState.None,
82+
type: ListItemTypes.Active,
83+
selected: false,
84+
children: 'List Item'
85+
}}
86+
argTypes={{
87+
...createSelectArgTypes({ infoState: ValueState, type: ListItemTypes }),
88+
description: { description: `Defines the description displayed right under the item text, if such is present.` },
89+
icon: {
90+
description: `Defines the <code>icon</code> source URI. <br><br> <b>Note:</b> SAP-icons font provides numerous built-in icons. To find all the available icons, see the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.`
91+
},
92+
iconEnd: {
93+
description: `Defines whether the <code>icon</code> should be displayed in the beginning of the list item or in the end. <br><br> <b>Note:</b> If <code>image</code> is set, the <code>icon</code> would be displayed after the <code>image</code>.`
94+
},
95+
image: {
96+
description: `Defines the <code>image</code> source URI. <br><br> <b>Note:</b> The <code>image</code> would be displayed in the beginning of the list item.`
97+
},
98+
info: { description: `Defines the <code>info</code>, displayed in the end of the list item.` },
99+
infoState: {
100+
description: `Defines the state of the <code>info</code>. <br> Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Erorr"</code>.`
101+
},
102+
type: {
103+
description: `Defines the visual indication and behavior of the list items. Available options are <code>Active</code> (by default), <code>Inactive</code> and <code>Detail</code>. <br><br> <b>Note:</b> When set to <code>Active</code>, the item will provide visual response upon press and hover, while with type <code>Inactive</code> and <code>Detail</code> - will not.`
104+
},
105+
selected: { description: `Defines the selected state of the <code>ListItem</code>.` },
106+
children: {
107+
description: `Defines the text of the <code>StandardListItem</code>. <br><br> <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.`
108+
},
109+
busy: { table: { disable: true } },
110+
footerText: { table: { disable: true } },
111+
headerText: { table: { disable: true } },
112+
infiniteScroll: { table: { disable: true } },
113+
inset: { table: { disable: true } },
114+
mode: { table: { disable: true } },
115+
noDataText: { table: { disable: true } },
116+
separators: { table: { disable: true } },
117+
header: { table: { disable: true } },
118+
onItemClick: { table: { disable: true } },
119+
onItemClose: { table: { disable: true } },
120+
onItemDelete: { table: { disable: true } },
121+
onItemToggle: { table: { disable: true } },
122+
onLoadMore: { table: { disable: true } },
123+
onSelectionChange: { table: { disable: true } }
124+
}}
125+
>
126+
{(args) => {
127+
return (
128+
<List headerText="List with a customizable StandardListItem">
129+
<StandardListItem {...args} />
130+
</List>
131+
);
132+
}}
133+
</Story>
134+
</Canvas>
135+
136+
<ArgsTable story="with StandardListItem" />
137+
138+
<br />
139+
140+
## CustomListItem
141+
142+
A component to be used as custom list item within the <code>List</code> the same way as the standard <code>StandardListItem</code>. The <code>CustomListItem</code> accepts arbitrary HTML content to allow full
143+
customization
144+
145+
<Canvas>
146+
<Story name="with CustomListItem">
147+
{() => {
148+
return (
149+
<List headerText="List with a CustomListItem">
150+
<CustomListItem>
151+
<FlexBox justifyContent={FlexBoxJustifyContent.SpaceAround} style={{ width: '100%' }}>
152+
<Text style={{ fontWeight: 'bold' }}>FULLY</Text>
153+
<Text style={{ color: 'red' }}>CUSTOMIZABLE</Text>
154+
<Text style={{ color: 'white', backgroundColor: ThemingParameters.sapButton_Emphasized_Background }}>
155+
CHILDREN
156+
</Text>
157+
</FlexBox>
158+
</CustomListItem>
159+
<CustomListItem>
160+
<ProgressIndicator value={50} />
161+
</CustomListItem>
162+
</List>
163+
);
164+
}}
165+
</Story>
166+
</Canvas>
167+
168+
<br />
169+
170+
## GroupHeaderListItem
171+
172+
The <code>GroupHeaderListItem</code> is a special list item, used only to separate other list items into logical groups
173+
174+
<Canvas>
175+
<Story name="with GroupHeaderListItem">
176+
{() => {
177+
return (
178+
<List headerText="List with a GroupHeaderListItem">
179+
<GroupHeaderListItem>GroupHeaderListItem 1</GroupHeaderListItem>
180+
<StandardListItem>List Item</StandardListItem>
181+
<StandardListItem>List Item</StandardListItem>
182+
<GroupHeaderListItem>GroupHeaderListItem 2</GroupHeaderListItem>
183+
<StandardListItem>List Item</StandardListItem>
184+
</List>
185+
);
186+
}}
187+
</Story>
188+
</Canvas>

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

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

0 commit comments

Comments
 (0)