From 6cdb78b29ef629052384f93307e4f2e279292d31 Mon Sep 17 00:00:00 2001 From: Viktor Bersch Date: Wed, 12 Jun 2019 11:43:39 +0200 Subject: [PATCH 01/12] feat: Updated UI5 WebComponents to v0.12.0 --- packages/docs/.storybook/preview-head.html | 3 +- packages/fiori3/package.json | 2 +- .../generateTypingStatements.js | 2 +- .../wrapperGeneration/generateTypingsWeb.js | 12 +-- .../BusyIndicator/BusyIndicator.jss.ts | 65 ------------ .../BusyIndicator/BusyIndicator.karma.tsx | 20 ---- .../components/BusyIndicator/demo.stories.tsx | 8 -- .../src/components/BusyIndicator/index.tsx | 50 ---------- .../src/components/InfoLabel/InfoLabel.jss.ts | 99 ------------------- .../components/InfoLabel/InfoLabel.test.tsx | 28 ------ .../__snapshots__/InfoLabel.test.tsx.snap | 37 ------- .../src/components/InfoLabel/demo.stories.tsx | 43 -------- .../fiori3/src/components/InfoLabel/index.tsx | 68 ------------- .../enums/{IconColor.ts => SemanticColor.ts} | 2 +- packages/fiori3/src/index.ts | 8 +- packages/fiori3/src/lib/Badge.ts | 3 + packages/fiori3/src/lib/BusyIndicator.ts | 2 +- packages/fiori3/src/lib/IconColor.ts | 3 - packages/fiori3/src/lib/InfoLabel.ts | 3 - packages/fiori3/src/lib/SemanticColor.ts | 3 + .../src/webComponents/Badge/demo.stories.tsx | 9 ++ .../fiori3/src/webComponents/Badge/index.tsx | 15 +++ .../BusyIndicator/demo.stories.tsx | 9 ++ .../src/webComponents/BusyIndicator/index.tsx | 14 +++ .../src/webComponents/Button/demo.stories.tsx | 4 +- .../fiori3/src/webComponents/Button/index.tsx | 5 +- .../webComponents/StandardListItem/index.tsx | 7 +- .../fiori3/src/webComponents/Tab/index.tsx | 9 +- .../src/webComponents/TabContainer/index.tsx | 2 + .../fiori3/src/webComponents/Table/index.tsx | 4 + .../src/webComponents/TableRow/index.tsx | 4 +- .../src/webComponents/ToggleButton/index.tsx | 5 +- yarn.lock | 30 +++--- 33 files changed, 100 insertions(+), 478 deletions(-) delete mode 100644 packages/fiori3/src/components/BusyIndicator/BusyIndicator.jss.ts delete mode 100644 packages/fiori3/src/components/BusyIndicator/BusyIndicator.karma.tsx delete mode 100644 packages/fiori3/src/components/BusyIndicator/demo.stories.tsx delete mode 100644 packages/fiori3/src/components/BusyIndicator/index.tsx delete mode 100644 packages/fiori3/src/components/InfoLabel/InfoLabel.jss.ts delete mode 100644 packages/fiori3/src/components/InfoLabel/InfoLabel.test.tsx delete mode 100644 packages/fiori3/src/components/InfoLabel/__snapshots__/InfoLabel.test.tsx.snap delete mode 100644 packages/fiori3/src/components/InfoLabel/demo.stories.tsx delete mode 100644 packages/fiori3/src/components/InfoLabel/index.tsx rename packages/fiori3/src/enums/{IconColor.ts => SemanticColor.ts} (81%) create mode 100644 packages/fiori3/src/lib/Badge.ts delete mode 100644 packages/fiori3/src/lib/IconColor.ts delete mode 100644 packages/fiori3/src/lib/InfoLabel.ts create mode 100644 packages/fiori3/src/lib/SemanticColor.ts create mode 100644 packages/fiori3/src/webComponents/Badge/demo.stories.tsx create mode 100644 packages/fiori3/src/webComponents/Badge/index.tsx create mode 100644 packages/fiori3/src/webComponents/BusyIndicator/demo.stories.tsx create mode 100644 packages/fiori3/src/webComponents/BusyIndicator/index.tsx diff --git a/packages/docs/.storybook/preview-head.html b/packages/docs/.storybook/preview-head.html index cc4e4167ec8..4ff9958649e 100644 --- a/packages/docs/.storybook/preview-head.html +++ b/packages/docs/.storybook/preview-head.html @@ -28,7 +28,8 @@ diff --git a/packages/fiori3/package.json b/packages/fiori3/package.json index dccbe715907..0dbf9829826 100644 --- a/packages/fiori3/package.json +++ b/packages/fiori3/package.json @@ -18,7 +18,7 @@ "dependencies": { "@fiori-for-react/styles": "0.3.1-rc.1", "@fiori-for-react/utils": "0.3.1-rc.1", - "@ui5/webcomponents": "0.11.1", + "@ui5/webcomponents": "0.12.0", "core-js": "^2.6.4", "react-scroll": "^1.7.11", "react-toastify": "^5.0.1" diff --git a/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js b/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js index bb4a93fb549..46790e2e586 100644 --- a/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js +++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js @@ -16,7 +16,7 @@ const f4rEnums = { PanelAccessibleRoles: require(path.resolve(fiori3Enums, 'PanelAccessibleRoles.ts')).PanelAccessibleRoles, PlacementType: require(path.resolve(fiori3Enums, 'PlacementType.ts')).PlacementType, PopoverVerticalAlign: require(path.resolve(fiori3Enums, 'PopoverVerticalAlign.ts')).PopoverVerticalAlign, - IconColor: require(path.resolve(fiori3Enums, 'IconColor.ts')).IconColor, + SemanticColor: require(path.resolve(fiori3Enums, 'SemanticColor.ts')).SemanticColor, TitleLevel: require(path.resolve(fiori3Enums, 'TitleLevel.ts')).TitleLevel }; diff --git a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js index 970cb7204a8..67f182adf1d 100644 --- a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js +++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js @@ -9,10 +9,9 @@ import UI5ListSeparators from '@ui5/webcomponents/dist/types/ListSeparators'; import UI5PanelAccessibleRoles from '@ui5/webcomponents/dist/types/PanelAccessibleRole'; import UI5PopoverHorizontalAligns from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign'; import UI5PopoverVerticalAligns from '@ui5/webcomponents/dist/types/PopoverVerticalAlign'; -import UI5IconColors from '@ui5/webcomponents/dist/types/IconColor'; +import UI5SemanticColors from '@ui5/webcomponents/dist/types/SemanticColor'; import UI5TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel'; import UI5MessageStripType from '@ui5/webcomponents/dist/types/MessageStripType'; -import URI from '@ui5/webcomponents-base/src/types/URI'; import CSSSize from '@ui5/webcomponents-base/src/types/CSSSize'; import Integer from '@ui5/webcomponents-base/src/types/Integer'; import UI5ValueState from '@ui5/webcomponents-base/src/types/ValueState'; @@ -45,9 +44,9 @@ const mappings = { tsType: 'LinkType', isEnum: true }, - [UI5IconColors]: { - importStatement: "import { IconColor } from '../../lib/IconColor';", - tsType: 'IconColor', + [UI5SemanticColors]: { + importStatement: "import { SemanticColor } from '../../lib/SemanticColor';", + tsType: 'SemanticColor', isEnum: true }, [UI5ListItemTypes]: { @@ -103,9 +102,6 @@ const mappings = { tsType: 'boolean', defaultPropAsString: false }, - [URI]: { - tsType: 'string' - }, [CSSSize]: { tsType: "CSSProperties['width'] | CSSProperties['height']", reactImport: 'CSSProperties' diff --git a/packages/fiori3/src/components/BusyIndicator/BusyIndicator.jss.ts b/packages/fiori3/src/components/BusyIndicator/BusyIndicator.jss.ts deleted file mode 100644 index 6a1b9b141f2..00000000000 --- a/packages/fiori3/src/components/BusyIndicator/BusyIndicator.jss.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { JSSTheme } from '../../interfaces/JSSTheme'; - -const styles = ({ parameters }: JSSTheme) => ({ - '@global': { - '@keyframes horizontal': { - '0%': { - transform: 'scale(0.3)', - background: parameters.sapUiContentIconColor - }, - '40%': { - transform: 'scale(1)' - // background: rgba(parameters.sapUiContentIconColor, 0.1), - // boxShadow: `inset 0px 0px 2px 1px ${rgba(parameters.sapUiContentIconColor, 0.8)}` - }, - '80%': { - transform: 'scale(0.3)' - }, - '100%': { - transform: 'scale(0.3)' - } - }, - '@keyframes fiori4react_busy_indicator_fadeIn': { - '0%': { - opacity: 0 - }, - '50%': { - opacity: 0 - }, - '100%': { - opacity: 1 - } - } - }, - // base class with textAlign center - busyIndicator: { - textAlign: 'center' - }, - // using global keyframe fiori4react_busy_indicator_fadeIn to fade in the BusyIndicator - fadeIn: { - animation: 'fiori4react_busy_indicator_fadeIn 2s' - }, - /** - * used to style each of the three circles within the BusyIndicator. - * Modify width and height in here to change the overall size. - */ - circle: { - width: '1rem', - height: '1rem', - borderRadius: '100%', - display: 'inline-block', - margin: '0', - position: 'relative', - animationFillMode: 'both', - animation: `horizontal 1.4s infinite ease-in-out`, - boxShadow: `inset 0px 0px 3px 16px ${parameters.sapUiContentIconColor}`, - '&:first-child': { - animationDelay: '-0.32s' - }, - '&:nth-child(2)': { - animationDelay: '-0.16s' - } - } -}); - -export default styles; diff --git a/packages/fiori3/src/components/BusyIndicator/BusyIndicator.karma.tsx b/packages/fiori3/src/components/BusyIndicator/BusyIndicator.karma.tsx deleted file mode 100644 index a38eafd04a2..00000000000 --- a/packages/fiori3/src/components/BusyIndicator/BusyIndicator.karma.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import { BusyIndicator } from '../../lib/BusyIndicator'; -import { expect, use } from 'chai'; -import { matchSnapshot } from 'chai-karma-snapshot'; -import { mountThemedComponent } from '@shared/tests/utils'; - -use(matchSnapshot); - -describe('BusyIndicator', () => { - it('Check Elements', () => { - const wrapper = mountThemedComponent(); - expect(wrapper.find('div').length).to.equal(4); - expect(wrapper.debug()).to.matchSnapshot(); - }); - - it('Fade In', () => { - const wrapper = mountThemedComponent(); - expect(wrapper.debug()).to.matchSnapshot(); - }); -}); diff --git a/packages/fiori3/src/components/BusyIndicator/demo.stories.tsx b/packages/fiori3/src/components/BusyIndicator/demo.stories.tsx deleted file mode 100644 index 4d489c1ed9d..00000000000 --- a/packages/fiori3/src/components/BusyIndicator/demo.stories.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { BusyIndicator } from '../../lib/BusyIndicator'; -import { boolean } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/react'; -import React from 'react'; - -storiesOf('F4R Components | BusyIndicator', module).add('Default', () => ( - -)); diff --git a/packages/fiori3/src/components/BusyIndicator/index.tsx b/packages/fiori3/src/components/BusyIndicator/index.tsx deleted file mode 100644 index 84ddf042eb8..00000000000 --- a/packages/fiori3/src/components/BusyIndicator/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { StyleClassHelper } from '@fiori-for-react/utils'; -import React, { FC } from 'react'; -import { ClassProps } from '../../interfaces/ClassProps'; -import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps'; -import { withStyles } from '@fiori-for-react/styles'; -import styles from './BusyIndicator.jss'; - -export interface BusyIndicatorProps extends Fiori3CommonProps { - /** - * Flag whether the Busy Indicator should show up immediately or with 1 second delay if set to true. - */ - fadeIn?: boolean; -} - -interface BusyIndicatorInternalProps extends BusyIndicatorProps, ClassProps {} - -export const BusyIndicator: FC = withStyles(styles)((props) => { - const { fadeIn, classes, className, style, tooltip } = props as BusyIndicatorInternalProps; - - const classNameBusyIndicator = StyleClassHelper.of(classes.busyIndicator); - - if (fadeIn === true) classNameBusyIndicator.put(classes.fadeIn); - - if (className) { - classNameBusyIndicator.put(className); - } - - return ( -
-
-
-
-
- ); -}); - -BusyIndicator.defaultProps = { - fadeIn: false -}; diff --git a/packages/fiori3/src/components/InfoLabel/InfoLabel.jss.ts b/packages/fiori3/src/components/InfoLabel/InfoLabel.jss.ts deleted file mode 100644 index caf0481cd00..00000000000 --- a/packages/fiori3/src/components/InfoLabel/InfoLabel.jss.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { fonts, HSLColor } from '@fiori-for-react/styles'; -import { JSSTheme } from '../../interfaces/JSSTheme'; - -const lighten = (color, amount) => HSLColor.lighten(color, amount).hsl; - -const backgroundColorFactory = (sap_fiori_3: JSSTheme['parameters']) => ({ - 1: lighten(sap_fiori_3.sapAccentColor1, 50), - 2: lighten(sap_fiori_3.sapAccentColor2, 40), - 3: lighten(sap_fiori_3.sapAccentColor3, 46), - 4: lighten(sap_fiori_3.sapAccentColor4, 46), - 5: lighten(sap_fiori_3.sapAccentColor5, 32), - 6: lighten(sap_fiori_3.sapAccentColor6, 52), - 7: lighten(sap_fiori_3.sapAccentColor7, 64), - 8: lighten(sap_fiori_3.sapAccentColor8, 61), - 9: lighten(sap_fiori_3.sapAccentColor9, 37), - 10: lighten(sap_fiori_3.sapAccentColor10, 49) -}); - -const borderColorsFactory = (sap_fiori_3: JSSTheme['parameters']) => ({ - 1: sap_fiori_3.sapAccentColor1, - 2: sap_fiori_3.sapAccentColor2, - 3: sap_fiori_3.sapAccentColor3, - 4: sap_fiori_3.sapAccentColor4, - 5: sap_fiori_3.sapAccentColor5, - 6: sap_fiori_3.sapAccentColor6, - 7: sap_fiori_3.sapAccentColor7, - 8: sap_fiori_3.sapAccentColor8, - 9: sap_fiori_3.sapAccentColor9, - 10: sap_fiori_3.sapAccentColor10 -}); - -const flavors = Array.from(Array(11).keys()).slice(1); - -const styles = ({ parameters }: JSSTheme) => { - const backgroundColors = backgroundColorFactory(parameters); - const borderColors = borderColorsFactory(parameters); - - const flavorClasses = flavors.reduce( - (acc, val) => ({ - ...acc, - [`flavour${val}`]: { - border: `1px solid ${borderColors[val]}`, - backgroundColor: backgroundColors[val] - } - }), - {} - ); - return { - /** - * outer container - */ - infoLabelContainer: { - boxSizing: 'border-box', - borderRadius: '1.125rem', - display: 'inline-block', - maxWidth: '100%', - textAlign: 'center', - height: '1.125rem', - '&$numeric': { - padding: '0 0.3125rem' - }, - '&$text': { - padding: '0 0.625rem' - }, - '&$displayOnly': { - height: '1rem', - lineHeight: '1rem', - margin: 0, - '& $label': { - lineHeight: '1rem' - } - } - }, - // is being applied to the span which represents the InfoLabel Text - label: { - fontSize: fonts.sapMFontSmallSize, - fontFamily: fonts.sapUiFontFamily, - lineHeight: '1.125rem', - fontWeight: 600, - letterSpacing: '0.0125rem', - textTransform: 'uppercase', - textAlign: 'center', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - display: 'inline-block', - color: parameters.sapUiBaseText, - verticalAlign: 'top' - }, - // specific padding needed for purely numeric input - numeric: {}, - // specific padding needed for text input - text: {}, - // displayOnly mode - displayOnly: {}, - ...flavorClasses - }; -}; - -export default styles; diff --git a/packages/fiori3/src/components/InfoLabel/InfoLabel.test.tsx b/packages/fiori3/src/components/InfoLabel/InfoLabel.test.tsx deleted file mode 100644 index c34e7b02254..00000000000 --- a/packages/fiori3/src/components/InfoLabel/InfoLabel.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { InfoLabel } from '../../lib/InfoLabel'; -import { mountThemedComponent } from '@shared/tests/utils'; -import React from 'react'; - -describe('InfoLabel', () => { - test('Render without crashing', () => { - const wrapper = mountThemedComponent(); - expect(wrapper.render()).toMatchSnapshot(); - }); - - test('With Text', () => { - const wrapper = mountThemedComponent( - - Test - - ); - expect(wrapper.render()).toMatchSnapshot(); - }); - - test('With Number', () => { - const wrapper = mountThemedComponent( - - 123 - - ); - expect(wrapper.render()).toMatchSnapshot(); - }); -}); diff --git a/packages/fiori3/src/components/InfoLabel/__snapshots__/InfoLabel.test.tsx.snap b/packages/fiori3/src/components/InfoLabel/__snapshots__/InfoLabel.test.tsx.snap deleted file mode 100644 index 9789bae51df..00000000000 --- a/packages/fiori3/src/components/InfoLabel/__snapshots__/InfoLabel.test.tsx.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`InfoLabel Render without crashing 1`] = ` -
- -
-`; - -exports[`InfoLabel With Number 1`] = ` -
- - 123 - -
-`; - -exports[`InfoLabel With Text 1`] = ` -
- - Test - -
-`; diff --git a/packages/fiori3/src/components/InfoLabel/demo.stories.tsx b/packages/fiori3/src/components/InfoLabel/demo.stories.tsx deleted file mode 100644 index 656121e8d46..00000000000 --- a/packages/fiori3/src/components/InfoLabel/demo.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { InfoLabel } from '../../lib/InfoLabel'; -import { Label } from '../../lib/Label'; -import { boolean, text, select } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/react'; -import React from 'react'; -import { propTablesExclude } from '../../../../docs/.storybook/config'; - -const flavours = []; -for (let i = 1; i <= 10; i++) { - flavours.push(i); -} - -function renderStory() { - return ( -
- - - {text('children', 'Text')} - - - Flavour 1 - Flavour 2 - Flavour 3 - Flavour 4 - Flavour 5 - Flavour 6 - Flavour 7 - Flavour 8 - Flavour 9 - Flavour 10 - - 13345345 -
- ); -} - -storiesOf('F4R Components | InfoLabel', module) - .addParameters({ - info: { - propTablesExclude: [...propTablesExclude, Label] - } - }) - .add('Default', renderStory); diff --git a/packages/fiori3/src/components/InfoLabel/index.tsx b/packages/fiori3/src/components/InfoLabel/index.tsx deleted file mode 100644 index 41a8e554145..00000000000 --- a/packages/fiori3/src/components/InfoLabel/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { withStyles } from '@fiori-for-react/styles'; -import { isNumeric, StyleClassHelper } from '@fiori-for-react/utils'; -import React, { CSSProperties, PureComponent, ReactText } from 'react'; -import { UnknownFlavourException } from '../../exceptions/UnknownFlavourException'; -import { ClassProps } from '../../interfaces/ClassProps'; -import { Fiori3CommonProps } from '../../interfaces/Fiori3CommonProps'; -import styles from './InfoLabel.jss'; - -export interface InfoLabelPropTypes extends Fiori3CommonProps { - children?: ReactText; - displayOnly?: boolean; - flavour?: ReactText; - width?: CSSProperties['width']; -} - -interface InfoLabelInternalProps extends InfoLabelPropTypes, ClassProps {} - -@withStyles(styles) -export class InfoLabel extends PureComponent { - static defaultProps = { - children: '', - displayOnly: true, - flavour: 3 - }; - - render() { - const { children, classes, displayOnly, width, style, className, flavour, tooltip } = this - .props as InfoLabelInternalProps; - - if (!(flavour >= 1 && flavour <= 10)) { - throw new UnknownFlavourException('Unknown Flavour prop passed to InfoLabel'); - } - - const containerStyles = StyleClassHelper.of(classes.infoLabelContainer); - - if (isNumeric(children)) { - containerStyles.put(classes.numeric); - } else { - containerStyles.put(classes.text); - } - - if (displayOnly) { - containerStyles.put(classes.displayOnly); - } - - if (className) { - containerStyles.put(className); - } - - containerStyles.put(classes[`flavour${flavour}`]); - - const inlineStyle = { width }; - if (style) { - Object.assign(inlineStyle, style); - } - - return ( -
- {children} -
- ); - } -} diff --git a/packages/fiori3/src/enums/IconColor.ts b/packages/fiori3/src/enums/SemanticColor.ts similarity index 81% rename from packages/fiori3/src/enums/IconColor.ts rename to packages/fiori3/src/enums/SemanticColor.ts index ddaf08eb32c..4190e57a7e8 100644 --- a/packages/fiori3/src/enums/IconColor.ts +++ b/packages/fiori3/src/enums/SemanticColor.ts @@ -1,4 +1,4 @@ -export enum IconColor { +export enum SemanticColor { Default = 'Default', Positive = 'Positive', Negative = 'Negative', diff --git a/packages/fiori3/src/index.ts b/packages/fiori3/src/index.ts index 9f084c73c20..8ba36cb0174 100644 --- a/packages/fiori3/src/index.ts +++ b/packages/fiori3/src/index.ts @@ -8,6 +8,7 @@ import { AnalyticalCardHeader } from './lib/AnalyticalCardHeader'; import { Avatar } from './lib/Avatar'; import { AvatarShape } from './lib/AvatarShape'; import { AvatarSize } from './lib/AvatarSize'; +import { Badge } from './lib/Badge'; import { Bar } from './lib/Bar'; import { BusyIndicator } from './lib/BusyIndicator'; import { Button } from './lib/Button'; @@ -37,8 +38,6 @@ import { Grid } from './lib/Grid'; import { GridPosition } from './lib/GridPosition'; import { GroupHeaderListItem } from './lib/GroupHeaderListItem'; import { Icon } from './lib/Icon'; -import { IconColor } from './lib/IconColor'; -import { InfoLabel } from './lib/InfoLabel'; import { Input } from './lib/Input'; import { InputType } from './lib/InputType'; import { Label } from './lib/Label'; @@ -79,6 +78,7 @@ import { ResponsivePopover } from './lib/ResponsivePopover'; import { SegmentedButton } from './lib/SegmentedButton'; import { SegmentedButtonItem } from './lib/SegmentedButtonItem'; import { Select } from './lib/Select'; +import { SemanticColor } from './lib/SemanticColor'; import { ShellBar } from './lib/ShellBar'; import { ShellBarItem } from './lib/ShellBarItem'; import { Size } from './lib/Size'; @@ -115,6 +115,7 @@ export { Avatar, AvatarShape, AvatarSize, + Badge, Bar, BusyIndicator, Button, @@ -144,8 +145,6 @@ export { GridPosition, GroupHeaderListItem, Icon, - IconColor, - InfoLabel, Input, InputType, Label, @@ -186,6 +185,7 @@ export { SegmentedButton, SegmentedButtonItem, Select, + SemanticColor, ShellBar, ShellBarItem, Size, diff --git a/packages/fiori3/src/lib/Badge.ts b/packages/fiori3/src/lib/Badge.ts new file mode 100644 index 00000000000..222de761eee --- /dev/null +++ b/packages/fiori3/src/lib/Badge.ts @@ -0,0 +1,3 @@ +import { Badge } from '../webComponents/Badge'; + +export { Badge }; diff --git a/packages/fiori3/src/lib/BusyIndicator.ts b/packages/fiori3/src/lib/BusyIndicator.ts index ba59e9a2d60..802c84fe0dc 100644 --- a/packages/fiori3/src/lib/BusyIndicator.ts +++ b/packages/fiori3/src/lib/BusyIndicator.ts @@ -1,3 +1,3 @@ -import { BusyIndicator } from '../components/BusyIndicator'; +import { BusyIndicator } from '../webComponents/BusyIndicator'; export { BusyIndicator }; diff --git a/packages/fiori3/src/lib/IconColor.ts b/packages/fiori3/src/lib/IconColor.ts deleted file mode 100644 index ce2bec2cc13..00000000000 --- a/packages/fiori3/src/lib/IconColor.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { IconColor } from '../enums/IconColor'; - -export { IconColor }; diff --git a/packages/fiori3/src/lib/InfoLabel.ts b/packages/fiori3/src/lib/InfoLabel.ts deleted file mode 100644 index 405ea3654f1..00000000000 --- a/packages/fiori3/src/lib/InfoLabel.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { InfoLabel } from '../components/InfoLabel'; - -export { InfoLabel }; diff --git a/packages/fiori3/src/lib/SemanticColor.ts b/packages/fiori3/src/lib/SemanticColor.ts new file mode 100644 index 00000000000..81cbb61f452 --- /dev/null +++ b/packages/fiori3/src/lib/SemanticColor.ts @@ -0,0 +1,3 @@ +import { SemanticColor } from '../enums/SemanticColor'; + +export { SemanticColor }; diff --git a/packages/fiori3/src/webComponents/Badge/demo.stories.tsx b/packages/fiori3/src/webComponents/Badge/demo.stories.tsx new file mode 100644 index 00000000000..0f7a8b066d5 --- /dev/null +++ b/packages/fiori3/src/webComponents/Badge/demo.stories.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { Badge } from './index'; + +storiesOf('UI5 Web Components | Badge', module).add('Generated default story', () => ( + + null + +)); diff --git a/packages/fiori3/src/webComponents/Badge/index.tsx b/packages/fiori3/src/webComponents/Badge/index.tsx new file mode 100644 index 00000000000..0943d9ffa8a --- /dev/null +++ b/packages/fiori3/src/webComponents/Badge/index.tsx @@ -0,0 +1,15 @@ +import React, { FC } from 'react'; +import UI5Badge from '@ui5/webcomponents/dist/Badge'; +import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; + +export interface BadgePropTypes extends WithWebComponentPropTypes { + colorScheme?: string; // @generated + children?: any[]; // @generated + icon?: any; // @generated +} + +const Badge: FC = withWebComponent(UI5Badge); + +Badge.displayName = 'Badge'; + +export { Badge }; diff --git a/packages/fiori3/src/webComponents/BusyIndicator/demo.stories.tsx b/packages/fiori3/src/webComponents/BusyIndicator/demo.stories.tsx new file mode 100644 index 00000000000..2b4b87f8c39 --- /dev/null +++ b/packages/fiori3/src/webComponents/BusyIndicator/demo.stories.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; + +import { boolean } from '@storybook/addon-knobs'; +import { BusyIndicator } from './index'; + +storiesOf('UI5 Web Components | BusyIndicator', module).add('Generated default story', () => ( + +)); diff --git a/packages/fiori3/src/webComponents/BusyIndicator/index.tsx b/packages/fiori3/src/webComponents/BusyIndicator/index.tsx new file mode 100644 index 00000000000..f146b8fa280 --- /dev/null +++ b/packages/fiori3/src/webComponents/BusyIndicator/index.tsx @@ -0,0 +1,14 @@ +import React, { FC } from 'react'; +import UI5BusyIndicator from '@ui5/webcomponents/dist/BusyIndicator'; +import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; + +export interface BusyIndicatorPropTypes extends WithWebComponentPropTypes { + size?: any; // @generated + active?: boolean; // @generated +} + +const BusyIndicator: FC = withWebComponent(UI5BusyIndicator); + +BusyIndicator.displayName = 'BusyIndicator'; + +export { BusyIndicator }; diff --git a/packages/fiori3/src/webComponents/Button/demo.stories.tsx b/packages/fiori3/src/webComponents/Button/demo.stories.tsx index e497cd4181c..844c4645978 100644 --- a/packages/fiori3/src/webComponents/Button/demo.stories.tsx +++ b/packages/fiori3/src/webComponents/Button/demo.stories.tsx @@ -34,7 +34,7 @@ class DemoButton extends React.Component {
diff --git a/packages/fiori3/__karma_snapshots__/FilterBar.md b/packages/fiori3/__karma_snapshots__/FilterBar.md index 3faa90ad94c..d2fd2247ccd 100644 --- a/packages/fiori3/__karma_snapshots__/FilterBar.md +++ b/packages/fiori3/__karma_snapshots__/FilterBar.md @@ -26,9 +26,9 @@ -
@@ -36,9 +36,9 @@ - @@ -367,9 +361,9 @@ - - +
    diff --git a/packages/fiori3/__karma_snapshots__/AnalyticalCard.md b/packages/fiori3/__karma_snapshots__/AnalyticalCard.md index dc8e12b0091..8113bf55d46 100644 --- a/packages/fiori3/__karma_snapshots__/AnalyticalCard.md +++ b/packages/fiori3/__karma_snapshots__/AnalyticalCard.md @@ -40,7 +40,7 @@