From ecab1560a9a134a12e2824b7b11dd6afba612ddf Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Mon, 1 Jul 2019 19:54:51 +0200 Subject: [PATCH] feat(WebComponents): Updated Wrappers to v1.0.0-rc.1 BREAKING CHANGE **Button**: `onPress` renamed to `onClick` BREAKING CHANGE **Card**: `onHeaderPress` renamed to `onHeaderClick` BREAKING CHANGE **Link**: `onPress` renamed to `onClick` BREAKING CHANGE **List**: `onItemPress` renamed to `onItemClick` BREAKING CHANGE **ShellBar**: `onNotificationsPress` renamed to `onNotificationsClick` BREAKING CHANGE **ShellBar**: `onProfilePress` renamed to `onProfileClick` BREAKING CHANGE **ShellBar**: `onProductSwitchPress` renamed to `onProductSwitchClick` BREAKING CHANGE **ShellBar**: `onLogoPress` renamed to `onLogoClick` BREAKING CHANGE **ShellBar**: `onCoPilotPress` renamed to `onCoPilotClick` BREAKING CHANGE **TimelineItem**: `onItemNamePress` renamed to `onItemNameClick` BREAKING CHANGE **ToggleButton**: `onPress` renamed to `onClick` Closes #43 --- .../__karma_snapshots__/AnalyticalTable.md | 30 ++++---- packages/main/__karma_snapshots__/Card.md | 4 +- .../main/__karma_snapshots__/FilterBar.md | 18 ++--- .../main/__karma_snapshots__/MessageBox.md | 26 +++---- .../main/__karma_snapshots__/ObjectPage.md | 12 +-- packages/main/__karma_snapshots__/ShellBar.md | 4 +- .../__karma_snapshots__/VariantManagement.md | 4 +- packages/main/package.json | 4 +- .../main/src/components/ActionSheet/index.tsx | 12 +-- .../AnalyticalTable/AnalyticalTable.karma.tsx | 8 +- .../columnHeader/ColumnHeaderModal.tsx | 2 +- .../AnalyticalTable/pagination/index.tsx | 2 +- .../components/FilterBar/FilterBar.karma.tsx | 10 +-- .../main/src/components/FilterBar/index.tsx | 2 +- .../MessageBox/MessageBox.karma.tsx | 75 +++++++++---------- .../MessageBox/MessageBoxButton.tsx | 2 +- .../components/MessageToast/demo.stories.tsx | 8 +- .../components/ObjectPage/ObjectPage.jss.ts | 2 +- .../ObjectPage/ObjectPageAnchor.tsx | 2 +- .../components/ObjectPage/demo.stories.tsx | 4 +- .../main/src/components/ObjectPage/index.tsx | 2 +- packages/main/src/components/Page/index.tsx | 2 +- .../components/VariantManagement/index.tsx | 4 +- .../src/internal/WithWebComponent.karma.tsx | 8 +- .../src/webComponents/BusyIndicator/index.tsx | 4 +- .../src/webComponents/Button/demo.stories.tsx | 8 +- .../main/src/webComponents/Button/index.tsx | 4 +- .../src/webComponents/Card/demo.stories.tsx | 2 +- .../main/src/webComponents/Card/index.tsx | 14 +--- .../src/webComponents/Link/demo.stories.tsx | 3 +- .../main/src/webComponents/Link/index.tsx | 2 +- .../src/webComponents/List/demo.stories.tsx | 7 +- .../main/src/webComponents/List/index.tsx | 2 +- .../src/webComponents/Option/demo.stories.tsx | 9 +++ .../webComponents/ShellBar/demo.stories.tsx | 12 +-- .../main/src/webComponents/ShellBar/index.tsx | 23 +++--- .../src/webComponents/TimelineItem/index.tsx | 2 +- .../ToggleButton/demo.stories.tsx | 3 +- .../src/webComponents/ToggleButton/index.tsx | 2 +- scripts/rollup/results.json | 32 ++++---- yarn.lock | 30 ++++---- 41 files changed, 201 insertions(+), 205 deletions(-) create mode 100644 packages/main/src/webComponents/Option/demo.stories.tsx diff --git a/packages/main/__karma_snapshots__/AnalyticalTable.md b/packages/main/__karma_snapshots__/AnalyticalTable.md index 8c4675767ce..fdf9f72c702 100644 --- a/packages/main/__karma_snapshots__/AnalyticalTable.md +++ b/packages/main/__karma_snapshots__/AnalyticalTable.md @@ -46,7 +46,7 @@ - + @@ -85,7 +85,7 @@ - + @@ -124,7 +124,7 @@ - + @@ -165,7 +165,7 @@ - + @@ -552,21 +552,21 @@ - + < - + 1 - + > @@ -639,7 +639,7 @@ - + @@ -678,7 +678,7 @@ - + @@ -717,7 +717,7 @@ - + @@ -758,7 +758,7 @@ - + @@ -1153,28 +1153,28 @@ - + < - + 1 - + 2 - + > diff --git a/packages/main/__karma_snapshots__/Card.md b/packages/main/__karma_snapshots__/Card.md index a2d66d5d358..3451807df89 100644 --- a/packages/main/__karma_snapshots__/Card.md +++ b/packages/main/__karma_snapshots__/Card.md @@ -6,8 +6,8 @@ - - + + diff --git a/packages/main/__karma_snapshots__/FilterBar.md b/packages/main/__karma_snapshots__/FilterBar.md index 3ffe24df882..4fa0ae09594 100644 --- a/packages/main/__karma_snapshots__/FilterBar.md +++ b/packages/main/__karma_snapshots__/FilterBar.md @@ -29,12 +29,12 @@ - - + @@ -61,7 +61,7 @@
-
- - + @@ -173,7 +173,7 @@
-
- - + @@ -299,7 +299,7 @@
- - - - -
-
@@ -117,7 +117,7 @@ - + @@ -153,7 +153,7 @@ - + @@ -562,7 +562,7 @@
-
@@ -618,7 +618,7 @@ - + @@ -654,7 +654,7 @@ - + diff --git a/packages/main/__karma_snapshots__/ShellBar.md b/packages/main/__karma_snapshots__/ShellBar.md index 9b71976f272..3f6e5a3d54f 100644 --- a/packages/main/__karma_snapshots__/ShellBar.md +++ b/packages/main/__karma_snapshots__/ShellBar.md @@ -6,8 +6,8 @@ - - + + diff --git a/packages/main/__karma_snapshots__/VariantManagement.md b/packages/main/__karma_snapshots__/VariantManagement.md index 9ef7fbaf445..79e2f94a443 100644 --- a/packages/main/__karma_snapshots__/VariantManagement.md +++ b/packages/main/__karma_snapshots__/VariantManagement.md @@ -25,12 +25,12 @@ - - + diff --git a/packages/main/package.json b/packages/main/package.json index 2de078ae4d2..ef65f65a43c 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -14,13 +14,13 @@ "license": "Apache-2.0", "private": false, "scripts": { - "generateWebComponents": "ts-node -O '{\"module\": \"commonjs\"}' -r esm ./scripts/wrapperGeneration/generateWebComponentWrappers --onlyStopForMerge && prettier --write --config ../../prettier.config.js \"src/webComponents/**/*.tsx\"", + "generateWebComponents": "ts-node -O '{\"module\": \"commonjs\"}' -r esm ./scripts/wrapperGeneration/generateWebComponentWrappers --onlyStopForMerge", "build": "webpack --config ./scripts/wrapperGeneration/webpack.config.js", "test:karma": "karma start ../../config/karma.conf.js", "test:karma:update": "cross-env UPDATE=1 yarn run test:karma" }, "dependencies": { - "@ui5/webcomponents": "0.13.1", + "@ui5/webcomponents": "1.0.0-rc.1", "@ui5/webcomponents-react-base": "0.3.2-rc.8", "react-scroll": "^1.7.11", "react-table": "6.8.6", diff --git a/packages/main/src/components/ActionSheet/index.tsx b/packages/main/src/components/ActionSheet/index.tsx index a61b84a3487..c5aac2edc15 100644 --- a/packages/main/src/components/ActionSheet/index.tsx +++ b/packages/main/src/components/ActionSheet/index.tsx @@ -17,12 +17,8 @@ export interface ActionSheetPropTypes extends Fiori3CommonProps { export interface ActionSheetPropsInternal extends ActionSheetPropTypes, ClassProps {} -interface ActionSheetState { - open: boolean; -} - @withStyles(styles) -export class ActionSheet extends Component { +export class ActionSheet extends Component { static defaultProps = { placement: PlacementType.Bottom }; @@ -30,8 +26,8 @@ export class ActionSheet extends Component = React.createRef(); private onActionButtonClicked = (handler) => () => { - this.setState({ open: false }); - handler(); + this.popoverRef.current.close(); + typeof handler === 'function' && handler(); }; private renderActionSheetButton = (element) => { @@ -45,7 +41,7 @@ export class ActionSheet extends Component ); diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.karma.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.karma.tsx index b1d67164ba0..ca58b0c4c01 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.karma.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.karma.tsx @@ -80,7 +80,7 @@ describe('AnalyticalTable', () => { .at(3) .instance(); // @ts-ignore - component.onclick({}); + component.fireEvent('click'); // test the right page number link of the pagination component = wrapper @@ -88,7 +88,7 @@ describe('AnalyticalTable', () => { .at(2) .instance(); // @ts-ignore - component.onclick({}); + component.fireEvent('click'); // test the left page number link of the pagination component = wrapper @@ -96,7 +96,7 @@ describe('AnalyticalTable', () => { .at(1) .instance(); // @ts-ignore - component.onclick({}); + component.fireEvent('click'); // test the left arrow of the pagination component = wrapper @@ -104,7 +104,7 @@ describe('AnalyticalTable', () => { .at(0) .instance(); // @ts-ignore - component.onclick({}); + component.fireEvent('click'); expect(wrapper.debug()).to.matchSnapshot(); }); diff --git a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx index 95da9591e4c..6252e757d17 100644 --- a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx @@ -84,7 +84,7 @@ export class ColumnHeaderModal extends Component { placementType={PlacementType.Bottom} ref={this.popoverRef} > - + {showSort && ( Sort Ascending diff --git a/packages/main/src/components/AnalyticalTable/pagination/index.tsx b/packages/main/src/components/AnalyticalTable/pagination/index.tsx index 9fb7e076460..ff472ed37f1 100644 --- a/packages/main/src/components/AnalyticalTable/pagination/index.tsx +++ b/packages/main/src/components/AnalyticalTable/pagination/index.tsx @@ -41,7 +41,7 @@ export const LinkHOC: FC = (props) => { return ( {children.toString()} diff --git a/packages/main/src/components/FilterBar/FilterBar.karma.tsx b/packages/main/src/components/FilterBar/FilterBar.karma.tsx index 868fa977f54..a9f8786bfbd 100644 --- a/packages/main/src/components/FilterBar/FilterBar.karma.tsx +++ b/packages/main/src/components/FilterBar/FilterBar.karma.tsx @@ -73,11 +73,11 @@ describe('FilterBar', () => { ); - (wrapper - .find('Button') - .at(2) - .prop('onPress') as any)({ target: {} }); - + const component = wrapper + .find('ui5-button') + .first() + .instance() as any; + component.fireEvent('click'); expect(wrapper.debug()).to.matchSnapshot(); }); diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx index 14c5ff6bad3..1aa47d1ff0c 100644 --- a/packages/main/src/components/FilterBar/index.tsx +++ b/packages/main/src/components/FilterBar/index.tsx @@ -38,7 +38,7 @@ export class FilterBar extends PureComponent { {renderVariants && renderVariants()} {renderSearch &&
{renderSearch()}
}
-
diff --git a/packages/main/src/components/MessageBox/MessageBox.karma.tsx b/packages/main/src/components/MessageBox/MessageBox.karma.tsx index 36018794a63..3167800b2d6 100644 --- a/packages/main/src/components/MessageBox/MessageBox.karma.tsx +++ b/packages/main/src/components/MessageBox/MessageBox.karma.tsx @@ -10,17 +10,6 @@ import { MessageBoxTypes } from '../../lib/MessageBoxTypes'; use(matchSnapshot); describe('MessageBox', () => { - // let appRoot: HTMLElement; - // - // before(() => { - // appRoot = document.createElement("div"); - // document.body.appendChild(appRoot); - // }); - // - // after(() => { - // document.body.removeChild(appRoot); - // }); - it('Confirm - OK', () => { const callback = spy(); const wrapper = mountThemedComponent( @@ -31,10 +20,12 @@ describe('MessageBox', () => { ); expect(wrapper.debug()).to.matchSnapshot(); - (wrapper - .find('Button') + const component = wrapper + .find('ui5-button') .first() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + + component.fireEvent('click'); expect(getEventFromCallback(callback).getParameter('action')).to.equal(MessageBoxActions.OK); }); @@ -47,10 +38,11 @@ describe('MessageBox', () => { ); expect(wrapper.debug()).to.matchSnapshot(); - (wrapper - .find('Button') + const component = wrapper + .find('ui5-button') .last() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + component.fireEvent('click'); expect(getEventFromCallback(callback).getParameter('action')).to.equal(MessageBoxActions.CANCEL); }); @@ -63,10 +55,11 @@ describe('MessageBox', () => { ); expect(wrapper.debug()).to.matchSnapshot(); - (wrapper - .find('Button') + const component = wrapper + .find('ui5-button') .first() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + component.fireEvent('click'); expect(getEventFromCallback(callback).getParameter('action')).to.equal(MessageBoxActions.OK); }); @@ -79,10 +72,11 @@ describe('MessageBox', () => { ); expect(wrapper.debug()).to.matchSnapshot(); - (wrapper - .find('Button') + const component = wrapper + .find('ui5-button') .first() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + component.fireEvent('click'); expect(getEventFromCallback(callback).getParameter('action')).to.equal(MessageBoxActions.OK); }); @@ -95,10 +89,11 @@ describe('MessageBox', () => { ); expect(wrapper.debug()).to.matchSnapshot(); - (wrapper - .find('Button') + const component = wrapper + .find('ui5-button') .first() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + component.fireEvent('click'); expect(getEventFromCallback(callback).getParameter('action')).to.equal(MessageBoxActions.CLOSE); }); @@ -111,10 +106,11 @@ describe('MessageBox', () => { ); expect(wrapper.debug()).to.matchSnapshot(); - (wrapper - .find('Button') + const component = wrapper + .find('ui5-button') .first() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + component.fireEvent('click'); expect(getEventFromCallback(callback).getParameter('action')).to.equal(MessageBoxActions.OK); }); @@ -127,16 +123,18 @@ describe('MessageBox', () => { ); expect(wrapper.debug()).to.matchSnapshot(); - (wrapper - .find('Button') + let component = wrapper + .find('ui5-button') .first() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + component.fireEvent('click'); expect(getEventFromCallback(callback).getParameter('action')).to.equal(MessageBoxActions.YES); - (wrapper - .find('Button') + component = wrapper + .find('ui5-button') .last() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + component.fireEvent('click'); expect(getEventFromCallback(callback, 1).getParameter('action')).to.equal(MessageBoxActions.NO); }); @@ -149,10 +147,11 @@ describe('MessageBox', () => { ); expect(wrapper.debug()).to.matchSnapshot(); - (wrapper - .find('Button') + const component = wrapper + .find('ui5-button') .first() - .prop('onPress') as any)({ target: {} }); + .instance() as any; + component.fireEvent('click'); expect(getEventFromCallback(callback).getParameter('action')).to.equal(MessageBoxActions.OK); }); diff --git a/packages/main/src/components/MessageBox/MessageBoxButton.tsx b/packages/main/src/components/MessageBox/MessageBoxButton.tsx index de0ad1440f8..af87f103098 100644 --- a/packages/main/src/components/MessageBox/MessageBoxButton.tsx +++ b/packages/main/src/components/MessageBox/MessageBoxButton.tsx @@ -18,7 +18,7 @@ export class MessageBoxButton extends PureComponent<{ style={{ minWidth: '4rem' }} - onPress={this.handleClick} + onClick={this.handleClick} design={emphasize ? ButtonDesign.Emphasized : ButtonDesign.Transparent} > {this.props.action} diff --git a/packages/main/src/components/MessageToast/demo.stories.tsx b/packages/main/src/components/MessageToast/demo.stories.tsx index 11b696665c0..c00e150a85d 100644 --- a/packages/main/src/components/MessageToast/demo.stories.tsx +++ b/packages/main/src/components/MessageToast/demo.stories.tsx @@ -9,7 +9,7 @@ storiesOf('Components | MessageToast', module).add( () => (
, - ]} diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx index 3c6c1bba8f9..a299fa0aa5e 100644 --- a/packages/main/src/components/ObjectPage/index.tsx +++ b/packages/main/src/components/ObjectPage/index.tsx @@ -280,7 +280,7 @@ export class ObjectPage extends PureComponent )}
diff --git a/packages/main/src/components/Page/index.tsx b/packages/main/src/components/Page/index.tsx index 6dae991de1d..e5ecccbe9fc 100644 --- a/packages/main/src/components/Page/index.tsx +++ b/packages/main/src/components/Page/index.tsx @@ -43,7 +43,7 @@ export class Page extends Component { private renderBackButton = () => { return ( - - + + diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx index 17baf1923d0..c7fa747337b 100644 --- a/packages/main/src/webComponents/Button/index.tsx +++ b/packages/main/src/webComponents/Button/index.tsx @@ -10,8 +10,8 @@ export interface ButtonPropTypes extends WithWebComponentPropTypes { icon?: string; // @generated iconEnd?: boolean; // @generated submits?: boolean; // @generated - onPress?: (event: Event) => void; // @generated - children?: string; // @generated + onClick?: (event: Event) => void; // @generated + default?: string; // @generated } const Button: FC = withWebComponent(UI5Button); diff --git a/packages/main/src/webComponents/Card/demo.stories.tsx b/packages/main/src/webComponents/Card/demo.stories.tsx index 6211e684a2b..bbade16461b 100644 --- a/packages/main/src/webComponents/Card/demo.stories.tsx +++ b/packages/main/src/webComponents/Card/demo.stories.tsx @@ -17,7 +17,7 @@ storiesOf('UI5 Web Components | Card', module).add( status={text('status', '5 of 22')} avatar={text('avatar', 'sap-icon://order-status')} headerInteractive={boolean('headerInteractive', false)} - onHeaderPress={action('onHeaderPress')} + onHeaderClick={action('onHeaderClick')} > Keyboard diff --git a/packages/main/src/webComponents/Card/index.tsx b/packages/main/src/webComponents/Card/index.tsx index 12b0b995d74..d291b59c43e 100644 --- a/packages/main/src/webComponents/Card/index.tsx +++ b/packages/main/src/webComponents/Card/index.tsx @@ -1,5 +1,6 @@ -import UI5Card from '@ui5/webcomponents/dist/Card'; import React, { FC, ReactNode } from 'react'; +import { Event } from '@ui5/webcomponents-react-base'; +import UI5Card from '@ui5/webcomponents/dist/Card'; import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; export interface CardPropTypes extends WithWebComponentPropTypes { @@ -8,19 +9,12 @@ export interface CardPropTypes extends WithWebComponentPropTypes { status?: string; // @generated headerInteractive?: boolean; // @generated avatar?: string; // @generated - onHeaderPress?: (event: Event) => void; // @generated - children?: ReactNode | ReactNode[]; + onHeaderClick?: (event: Event) => void; // @generated + children?: ReactNode | ReactNode[]; // @generated } const Card: FC = withWebComponent(UI5Card); Card.displayName = 'Card'; -Card.defaultProps = { - heading: '', // @generated - subtitle: '', // @generated - status: '', // @generated - avatar: null // @generated -}; - export { Card }; diff --git a/packages/main/src/webComponents/Link/demo.stories.tsx b/packages/main/src/webComponents/Link/demo.stories.tsx index b4a6d198d91..2d04b81536d 100644 --- a/packages/main/src/webComponents/Link/demo.stories.tsx +++ b/packages/main/src/webComponents/Link/demo.stories.tsx @@ -1,4 +1,5 @@ import { boolean, select } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; import { storiesOf } from '@storybook/react'; import React from 'react'; import { Link } from '../../lib/Link'; @@ -11,7 +12,7 @@ storiesOf('UI5 Web Components | Link', module).add('Generated default story', () target={'generatedString'} design={select('design', LinkDesign, null)} wrap={boolean('wrap', false)} - onPress={null} + onClick={action('onClick')} > Some Content diff --git a/packages/main/src/webComponents/Link/index.tsx b/packages/main/src/webComponents/Link/index.tsx index 8430b999b0e..f3793bc0713 100644 --- a/packages/main/src/webComponents/Link/index.tsx +++ b/packages/main/src/webComponents/Link/index.tsx @@ -10,7 +10,7 @@ export interface LinkPropTypes extends WithWebComponentPropTypes { target?: string; // @generated design?: LinkDesign; // @generated wrap?: boolean; // @generated - onPress?: (event: Event) => void; // @generated + onClick?: (event: Event) => void; // @generated children?: string; // @generated } diff --git a/packages/main/src/webComponents/List/demo.stories.tsx b/packages/main/src/webComponents/List/demo.stories.tsx index ae1b2d1fa55..49bf4d2ceca 100644 --- a/packages/main/src/webComponents/List/demo.stories.tsx +++ b/packages/main/src/webComponents/List/demo.stories.tsx @@ -1,4 +1,5 @@ import { boolean, select } from '@storybook/addon-knobs'; +import { action } from '@storybook/addon-actions'; import { storiesOf } from '@storybook/react'; import React from 'react'; import { List } from '../../lib/List'; @@ -15,9 +16,9 @@ storiesOf('UI5 Web Components | List', module).add('Generated default story', () mode={select('mode', ListMode, null)} noDataText={'generatedString'} separators={select('separators', ListSeparators, null)} - onItemPress={null} - onItemDelete={null} - onSelectionChange={null} + onItemClick={action('onItemClick')} + onItemDelete={action('onItemDelete')} + onSelectionChange={action('onSelectionChange')} header={null} > diff --git a/packages/main/src/webComponents/List/index.tsx b/packages/main/src/webComponents/List/index.tsx index 5e73be5a31d..dcc98b0d37e 100644 --- a/packages/main/src/webComponents/List/index.tsx +++ b/packages/main/src/webComponents/List/index.tsx @@ -12,7 +12,7 @@ export interface ListPropTypes extends WithWebComponentPropTypes { mode?: ListMode; noDataText?: string; separators?: ListSeparators; - onItemPress?: (event: Event) => void; + onItemClick?: (event: Event) => void; onItemDelete?: (event: Event) => void; onSelectionChange?: (event: Event) => void; header?: ReactNode; diff --git a/packages/main/src/webComponents/Option/demo.stories.tsx b/packages/main/src/webComponents/Option/demo.stories.tsx new file mode 100644 index 00000000000..449ec6dd8e6 --- /dev/null +++ b/packages/main/src/webComponents/Option/demo.stories.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { boolean } from '@storybook/addon-knobs'; +import { Option } from './index'; + +storiesOf('UI5 Web Components | Option', module).add('Generated default story', () => ( +