Skip to content

Commit 63c3bf2

Browse files
kleinju1017kleinju1017
committed
Update stories of components
update stories of components
1 parent a233766 commit 63c3bf2

File tree

18 files changed

+402
-283
lines changed

18 files changed

+402
-283
lines changed

‎packages/main/src/components/ActionSheet/demo.stories.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
1-
import { select } from '@storybook/addon-knobs';
21
import { ActionSheet } from '@ui5/webcomponents-react/lib/ActionSheet';
32
import { Button } from '@ui5/webcomponents-react/lib/Button';
43
import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
54
import React, { useCallback, useRef } from 'react';
5+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
66

77
export default {
88
title: 'Components / ActionSheet',
9-
component: ActionSheet
9+
component: ActionSheet,
10+
argTypes: {
11+
...createSelectArgTypes({ placementType: PlacementType })
12+
},
13+
args: {
14+
placement: PlacementType.Bottom
15+
}
1016
};
1117

12-
export const defaultStory = () => {
18+
export const defaultStory = (props) => {
1319
const actionSheetRef = useRef();
1420
const onButtonClick = useCallback(
1521
(e) => {
@@ -20,7 +26,7 @@ export const defaultStory = () => {
2026
return (
2127
<>
2228
<Button onClick={onButtonClick}>Open ActionSheet</Button>
23-
<ActionSheet ref={actionSheetRef} placementType={select('placementType', PlacementType, PlacementType.Bottom)}>
29+
<ActionSheet ref={actionSheetRef} placementType={props.placement}>
2430
<Button icon="add">Accept</Button>
2531
<Button>Reject</Button>
2632
<Button>This is my super long text!</Button>

‎packages/main/src/components/AnalyticalCard/demo.stories.tsx

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,38 @@
1-
import { action } from '@storybook/addon-actions';
2-
import { boolean, select, text } from '@storybook/addon-knobs';
31
import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';
42
import { AnalyticalCard } from '@ui5/webcomponents-react/lib/AnalyticalCard';
53
import { AnalyticalCardHeader } from '@ui5/webcomponents-react/lib/AnalyticalCardHeader';
64
import { DeviationIndicator } from '@ui5/webcomponents-react/lib/DeviationIndicator';
75
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
86
import React from 'react';
7+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
98

109
export default {
1110
title: 'Components / Analytical Card',
1211
component: AnalyticalCard,
1312
parameters: {
1413
subcomponents: { AnalyticalCardHeader }
14+
},
15+
argTypes: {
16+
...createSelectArgTypes({ arrowIndicator: DeviationIndicator }),
17+
...createSelectArgTypes({ indicatorState: ValueState }),
18+
...createSelectArgTypes({ valueState: ValueState }),
19+
...createSelectArgTypes({ counterState: ValueState })
20+
},
21+
args: {
22+
title: 'Title',
23+
subTitle: 'Subtitle',
24+
arrowIndicator: DeviationIndicator.Down,
25+
indicatorState: ValueState.Success,
26+
value: 'Value',
27+
valueState: ValueState.Success,
28+
unit: 'Unit',
29+
target: 'Target',
30+
deviation: 'Deviation',
31+
showIndicator: true,
32+
description: 'Description',
33+
counter: 'Counter',
34+
counterState: ValueState.Success,
35+
currency: 'EUR'
1536
}
1637
};
1738

@@ -38,25 +59,25 @@ const simpleDataSet = [
3859
}
3960
];
4061

41-
export const defaultStory = () => (
62+
export const defaultStory = (props) => (
4263
<AnalyticalCard
4364
header={
4465
<AnalyticalCardHeader
45-
title={text('title', 'Title')}
46-
subTitle={text('subTitle', 'Subtitle')}
47-
arrowIndicator={select('arrowIndicator', DeviationIndicator, DeviationIndicator.Down)}
48-
indicatorState={select('indicatorState', ValueState, ValueState.Success)}
49-
value={text('value', 'Value')}
50-
valueState={select('valueState', ValueState, ValueState.Success)}
51-
unit={text('unit', 'Unit')}
52-
target={text('target', 'target')}
53-
deviation={text('deviation', 'deviation')}
54-
onHeaderPress={action('Header pressed')}
55-
showIndicator={boolean('showIndicator', true)}
56-
description={text('description', 'Description')}
57-
counter={text('counter', 'Counter')}
58-
counterState={select('counterState', ValueState, ValueState.Success)}
59-
currency={text('currency', 'EUR')}
66+
title={props.title}
67+
subTitle={props.subTitle}
68+
arrowIndicator={props.arrowIndicator}
69+
indicatorState={props.indicatorState}
70+
value={props.value}
71+
valueState={props.valueState}
72+
unit={props.unit}
73+
target={props.target}
74+
deviation={props.deviation}
75+
onHeaderPress={props.onHeaderPress}
76+
showIndicator={props.showIndicator}
77+
description={props.description}
78+
counter={props.counter}
79+
counterState={props.counterState}
80+
currency={props.currency}
6081
/>
6182
}
6283
>

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

Lines changed: 66 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { action } from '@storybook/addon-actions';
2-
import { array, boolean, number, object, select, text } from '@storybook/addon-knobs';
31
import '@ui5/webcomponents-icons/dist/icons/delete';
42
import '@ui5/webcomponents-icons/dist/icons/edit';
53
import '@ui5/webcomponents-icons/dist/icons/settings';
@@ -16,6 +14,7 @@ import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJusti
1614
import React from 'react';
1715
import generateData from './demo/generateData';
1816
import mdx from './AnalyticalTable.mdx';
17+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
1918

2019
const columns = [
2120
{
@@ -83,7 +82,7 @@ const columns = [
8382
const data = generateData(10_000);
8483
const dataTree = generateData(20, true);
8584

86-
export const defaultTable = () => {
85+
export const defaultTable = (props) => {
8786
return (
8887
<div style={{ display: 'flex', flexDirection: 'column' }}>
8988
<AnalyticalTable
@@ -95,69 +94,57 @@ export const defaultTable = () => {
9594
}
9695
data={data}
9796
columns={columns}
98-
loading={boolean('loading', false)}
99-
busyIndicatorEnabled={boolean('busyIndicatorEnabled', true)}
100-
alternateRowColor={boolean('alternateRowColor', false)}
101-
sortable={boolean('sortable', true)}
102-
filterable={boolean('filterable', true)}
103-
visibleRows={number('visibleRows', 15)}
104-
minRows={number('minRows', 5)}
105-
groupable={boolean('groupable', true)}
106-
selectionMode={select<TableSelectionMode>(
107-
'selectionMode',
108-
TableSelectionMode,
109-
TableSelectionMode.SINGLE_SELECT
110-
)}
111-
scaleWidthMode={select<TableScaleWidthMode>('scaleWidthMode', TableScaleWidthMode, TableScaleWidthMode.Default)}
112-
onRowSelected={action('onRowSelected')}
113-
onSort={action('onSort')}
114-
onGroup={action('onGroup')}
115-
onRowExpandChange={action('onRowExpandChange')}
116-
groupBy={array('groupBy', [])}
117-
rowHeight={number('rowHeight', 44)}
118-
selectedRowIds={object('selectedRowIds', { 3: true })}
119-
onColumnsReordered={action('onColumnsReordered')}
120-
withRowHighlight={boolean('withRowHighlight', true)}
121-
highlightField={text('highlightField', 'status')}
122-
infiniteScroll={boolean('infiniteScroll', true)}
123-
infiniteScrollThreshold={number('infiniteScrollThreshold', 20)}
124-
onLoadMore={action('onLoadMore')}
125-
selectionBehavior={select<TableSelectionBehavior>(
126-
'selectionBehavior',
127-
TableSelectionBehavior,
128-
TableSelectionBehavior.ROW
129-
)}
97+
loading={props.loading}
98+
busyIndicatorEnabled={props.busyIndicatorEnabled}
99+
alternateRowColor={props.alternateRowColor}
100+
sortable={props.sortable}
101+
filterable={props.filterable}
102+
visibleRows={props.visibleRows}
103+
minRows={props.minRows}
104+
groupable={props.groupable}
105+
selectionMode={props.selectionMode}
106+
scaleWidthMode={props.scaleWidthMode}
107+
onRowSelected={props.onRowSelected}
108+
onSort={props.onSort}
109+
onGroup={props.onGroup}
110+
onRowExpandChange={props.onRowExpandChange}
111+
groupBy={props.groupBy}
112+
rowHeight={props.rowHeight}
113+
selectedRowIds={props.selectedRowIds}
114+
onColumnsReordered={props.onColumnsReordered}
115+
withRowHighlight={props.withRowHighlight}
116+
highlightField={props.highlightField}
117+
infiniteScroll={props.infiniteScroll}
118+
infiniteScrollThreshold={props.infiniteScrollThreshold}
119+
onLoadMore={props.onLoadMore}
120+
selectionBehavior={props.selectionBehavior}
130121
/>
131122
</div>
132123
);
133124
};
134125

135126
defaultTable.storyName = 'Default';
136127

137-
export const treeTable = () => {
128+
export const treeTable = (props) => {
138129
return (
139130
<AnalyticalTable
140131
title="Table Title"
141132
data={dataTree}
142133
columns={columns}
143-
loading={boolean('loading', false)}
144-
busyIndicatorEnabled={boolean('busyIndicatorEnabled', true)}
145-
sortable={boolean('sortable', true)}
146-
filterable={boolean('filterable', true)}
147-
visibleRows={number('visibleRows', 15)}
148-
minRows={number('minRows', 5)}
149-
selectionMode={select<TableSelectionMode>('selectionMode', TableSelectionMode, TableSelectionMode.MULTI_SELECT)}
150-
onRowSelected={action('onRowSelected')}
151-
onSort={action('onSort')}
152-
onRowExpandChange={action('onRowExpandChange')}
153-
subRowsKey={text('subRowsKey', 'subRows')}
154-
selectedRowIds={object('selectedRowIds', { 3: true })}
155-
selectionBehavior={select<TableSelectionBehavior>(
156-
'selectionBehavior',
157-
TableSelectionBehavior,
158-
TableSelectionBehavior.ROW
159-
)}
160-
isTreeTable={boolean('isTreeTable', true)}
134+
loading={props.loading}
135+
busyIndicatorEnabled={props.busyIndicatorEnabled}
136+
sortable={props.sortable}
137+
filterable={props.filterable}
138+
visibleRows={props.visibleRows}
139+
minRows={props.minRows}
140+
selectionMode={props.selectionMode}
141+
onRowSelected={props.onRowSelected}
142+
onSort={props.onSort}
143+
onRowExpandChange={props.onRowExpandChange}
144+
subRowsKey={props.subRowsKey}
145+
selectedRowIds={props.selectedRowIds}
146+
selectionBehavior={props.selectionBehavior}
147+
isTreeTable={props.isTreeTable}
161148
/>
162149
);
163150
};
@@ -170,5 +157,30 @@ export default {
170157
docs: {
171158
page: mdx
172159
}
160+
},
161+
argTypes: {
162+
...createSelectArgTypes({ scaleWidthMode: TableScaleWidthMode }),
163+
...createSelectArgTypes({ selectionMode: TableSelectionMode }),
164+
...createSelectArgTypes({ selectionBehavior: TableSelectionBehavior })
165+
},
166+
args: {
167+
busyIndicatorEnabled: true,
168+
sortable: true,
169+
filterable: true,
170+
visibleRows: 15,
171+
minRows: 5,
172+
groupable: true,
173+
groupBy: [],
174+
rowHeight: 44,
175+
selectedRowIds: { 3: true },
176+
withRowHighlight: true,
177+
highlightField: 'status',
178+
infiniteScroll: true,
179+
infiniteScrollThreshold: 20,
180+
subRowsKey: 'subRows',
181+
isTreeTable: true,
182+
scaleWidthMode: TableScaleWidthMode.Default,
183+
selectionMode: TableSelectionMode.SINGLE_SELECT,
184+
selectionBehavior: TableSelectionBehavior.ROW
173185
}
174186
};

‎packages/main/src/components/Bar/demo.stories.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { select } from '@storybook/addon-knobs';
21
import { Bar } from '@ui5/webcomponents-react/lib/Bar';
32
import { BarDesign } from '@ui5/webcomponents-react/lib/BarDesign';
43
import { Label } from '@ui5/webcomponents-react/lib/Label';
54
import React from 'react';
5+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
66

7-
export const defaultStory = () => {
7+
export const defaultStory = (props) => {
88
return (
99
<Bar
10-
design={select('design', BarDesign, BarDesign.Auto)}
10+
design={props.design}
1111
contentLeft={<Label>Content Left</Label>}
1212
contentMiddle={<Label>Content Middle</Label>}
1313
contentRight={<Label>Content Right</Label>}
@@ -18,5 +18,11 @@ defaultStory.storyName = 'Default';
1818

1919
export default {
2020
title: 'Components / Bar',
21-
component: Bar
21+
component: Bar,
22+
argTypes: {
23+
...createSelectArgTypes({ design: BarDesign })
24+
},
25+
args: {
26+
design: BarDesign.Auto
27+
}
2228
};

‎packages/main/src/components/Breadcrumbs/demo.stories.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { select, text } from '@storybook/addon-knobs';
21
import { Breadcrumbs } from '@ui5/webcomponents-react/lib/Breadcrumbs';
32
import { BreadcrumbsSeparatorStyle } from '@ui5/webcomponents-react/lib/BreadcrumbsSeparatorStyle';
43
import { Link } from '@ui5/webcomponents-react/lib/Link';
54
import React from 'react';
5+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
66

7-
export const defaultStory = () => {
7+
export const defaultStory = (props) => {
88
return (
9-
<Breadcrumbs separatorStyle={select('separatorStyle', BreadcrumbsSeparatorStyle, BreadcrumbsSeparatorStyle.Slash)}>
9+
<Breadcrumbs separatorStyle={props.separatorStyle}>
1010
<Link>Products</Link>
1111
<Link>Hardware</Link>
1212
<Link>Notebooks</Link>
@@ -15,12 +15,9 @@ export const defaultStory = () => {
1515
);
1616
};
1717
defaultStory.storyName = 'Default';
18-
export const withCurrentLocation = () => {
18+
export const withCurrentLocation = (props) => {
1919
return (
20-
<Breadcrumbs
21-
separatorStyle={select('separatorStyle', BreadcrumbsSeparatorStyle, BreadcrumbsSeparatorStyle.Slash)}
22-
currentLocationText={text('currentLocationText', 'Super Slim Notebook 13 inch')}
23-
>
20+
<Breadcrumbs separatorStyle={props.separatorStyle} currentLocationText={props.currentLocationText}>
2421
<Link>Products</Link>
2522
<Link>Hardware</Link>
2623
<Link>Notebooks</Link>
@@ -35,5 +32,12 @@ export default {
3532
component: Breadcrumbs,
3633
parameters: {
3734
subcomponents: { Link }
35+
},
36+
argTypes: {
37+
...createSelectArgTypes({ separatorStyle: BreadcrumbsSeparatorStyle })
38+
},
39+
args: {
40+
separatorStyle: BreadcrumbsSeparatorStyle.Slash,
41+
currentLocationText: 'Super Slim Notebook 13 inch'
3842
}
3943
};

0 commit comments

Comments
 (0)