diff --git a/packages/docs/.storybook/TableComponent.tsx b/packages/docs/.storybook/TableComponent.tsx index e845b65832e..95be9590ec0 100644 --- a/packages/docs/.storybook/TableComponent.tsx +++ b/packages/docs/.storybook/TableComponent.tsx @@ -1,6 +1,6 @@ import { ContentDensity, - InfoLabel, + Badge, Label, Table, TableCell, @@ -41,7 +41,7 @@ export const TableComponent = (props) => { {componentInfo.type.name} - {componentInfo.required && Yes} + {componentInfo.required && Yes} {componentInfo.defaultValue && {componentInfo.defaultValue.value}} {componentInfo.description} 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/__karma_snapshots__/ActionSheet.md b/packages/fiori3/__karma_snapshots__/ActionSheet.md index d23d34523b5..155ea9b49e9 100644 --- a/packages/fiori3/__karma_snapshots__/ActionSheet.md +++ b/packages/fiori3/__karma_snapshots__/ActionSheet.md @@ -11,15 +11,15 @@
-
- +
    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 @@
    -
    - - - + - + Variant 1 - + Variant 2 @@ -403,9 +397,9 @@
    -
    @@ -30,27 +30,27 @@ - - - + - + Variant 1 - + Variant 2 diff --git a/packages/fiori3/__karma_snapshots__/YearPicker.md b/packages/fiori3/__karma_snapshots__/YearPicker.md index d309955bc8d..3be64e2590b 100644 --- a/packages/fiori3/__karma_snapshots__/YearPicker.md +++ b/packages/fiori3/__karma_snapshots__/YearPicker.md @@ -3,14 +3,14 @@ #### `Basic Test (generated)` ``` -" + - + -" + ``` 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..13156c5e5c1 100644 --- a/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js +++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingStatements.js @@ -16,8 +16,9 @@ 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, - TitleLevel: require(path.resolve(fiori3Enums, 'TitleLevel.ts')).TitleLevel + SemanticColor: require(path.resolve(fiori3Enums, 'SemanticColor.ts')).SemanticColor, + TitleLevel: require(path.resolve(fiori3Enums, 'TitleLevel.ts')).TitleLevel, + BusyIndicatorType: require(path.resolve(fiori3Enums, 'BusyIndicatorType.ts')).BusyIndicatorType }; function getDefaultPropValue(meta) { diff --git a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js index 970cb7204a8..4141fd55de7 100644 --- a/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js +++ b/packages/fiori3/scripts/wrapperGeneration/generateTypingsWeb.js @@ -5,14 +5,14 @@ import UI5LinkType from '@ui5/webcomponents/dist/types/LinkType'; import UI5ListMode from '@ui5/webcomponents/dist/types/ListMode'; import UI5ListItemTypes from '@ui5/webcomponents/dist/types/ListItemType'; import UI5PopoverPlacementTypes from '@ui5/webcomponents/dist/types/PopoverPlacementType'; +import UI5BusyIndicatorType from '@ui5/webcomponents/dist/types/BusyIndicatorType'; 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'; @@ -30,6 +30,11 @@ const mappings = { tsType: 'PlacementType', isEnum: true }, + [UI5BusyIndicatorType]: { + importStatement: "import { BusyIndicatorType } from '../../lib/BusyIndicatorType';", + tsType: 'BusyIndicatorType', + isEnum: true + }, [UI5PopoverHorizontalAligns]: { importStatement: "import { PopoverHorizontalAlign } from '../../lib/PopoverHorizontalAlign';", tsType: 'PopoverHorizontalAlign', @@ -45,9 +50,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 +108,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/BusyIndicatorType.ts b/packages/fiori3/src/enums/BusyIndicatorType.ts new file mode 100644 index 00000000000..a5eac8d98f6 --- /dev/null +++ b/packages/fiori3/src/enums/BusyIndicatorType.ts @@ -0,0 +1,5 @@ +export enum BusyIndicatorType { + Small = 'Small', + Medium = 'Medium', + Large = 'Large' +} 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/internal/withWebComponent.tsx b/packages/fiori3/src/internal/withWebComponent.tsx index 711bf0ecad6..8cc3fb7cab8 100644 --- a/packages/fiori3/src/internal/withWebComponent.tsx +++ b/packages/fiori3/src/internal/withWebComponent.tsx @@ -1,5 +1,4 @@ import { Event } from '@fiori-for-react/utils'; -import { ContentDensity } from '../lib/ContentDensity'; import React, { Children, cloneElement, Component, CSSProperties, FC, ReactElement } from 'react'; import { withTheme } from 'react-jss'; import { Fiori3CommonProps } from '../interfaces/Fiori3CommonProps'; @@ -166,19 +165,6 @@ export function withWebComponent(WebComponent): FC { return { props, slotProps }; } - applyContentDensity = () => { - const { theme } = this.props as T & WithWebComponentInternalPropTypes; - const shadowRef = this.shadowDomRef; - if (!shadowRef) { - return; - } - if (theme.contentDensity === ContentDensity.Compact) { - shadowRef.parentElement.classList.add('sapUiSizeCompact'); - } else { - shadowRef.parentElement.classList.remove('sapUiSizeCompact'); - } - }; - applyInnerStyles = () => { const { innerStyles } = this.props; const shadowRef = this.shadowDomRef; @@ -201,13 +187,8 @@ export function withWebComponent(WebComponent): FC { }; componentDidUpdate(prevProps) { - const { theme } = this.props as T & WithWebComponentInternalPropTypes; - const executionList = []; - if (prevProps.theme.contentDensity !== theme.contentDensity) { - executionList.push(this.applyContentDensity); - } if (prevProps.innerStyles !== this.props.innerStyles) { executionList.push(() => this.removeOldStyles(prevProps.innerStyles)); executionList.push(this.applyInnerStyles); @@ -224,7 +205,6 @@ export function withWebComponent(WebComponent): FC { if (this.wcRef) { this.bindEvents(); requestAnimationFrame(() => { - this.applyContentDensity(); this.applyInnerStyles(); }); } else { @@ -235,20 +215,15 @@ export function withWebComponent(WebComponent): FC { } render() { - const { className } = this.props; + const { className = '' } = this.props; const CustomTag = WebComponent.getMetadata().getTag(); const slots = WebComponent.getMetadata().getSlots(); const { props, slotProps } = this.regularProps; const { children, theme, ...regularProps } = props as T & WithWebComponentInternalPropTypes; - - let classString = theme.contentDensity === ContentDensity.Compact ? 'sapUiSizeCompact' : ''; - if (className) { - classString = `${classString} ${className}`; - } return ( - + {Object.keys(slots).map((slot) => { if (slotProps[slot]) { return Children.map(slotProps[slot], (item: ReactElement, index) => 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/BusyIndicatorType.ts b/packages/fiori3/src/lib/BusyIndicatorType.ts new file mode 100644 index 00000000000..e29c9da5623 --- /dev/null +++ b/packages/fiori3/src/lib/BusyIndicatorType.ts @@ -0,0 +1,3 @@ +import { BusyIndicatorType } from '../enums/BusyIndicatorType'; + +export { BusyIndicatorType }; 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/Badge.karma.tsx b/packages/fiori3/src/webComponents/Badge/Badge.karma.tsx new file mode 100644 index 00000000000..5dae865fefe --- /dev/null +++ b/packages/fiori3/src/webComponents/Badge/Badge.karma.tsx @@ -0,0 +1,20 @@ +import { mountThemedComponent } from '@shared/tests/utils'; +import { expect, use } from 'chai'; +import { matchSnapshot } from 'chai-karma-snapshot'; +import React from 'react'; +import { Badge } from '../../lib/Badge'; +import { Icon } from '../../lib/Icon'; + +use(matchSnapshot); + +describe('Badge', () => { + it('Basic Test', () => { + const wrapper = mountThemedComponent(My Badge); + expect(wrapper.debug()).to.matchSnapshot(); + }); + + it('with Icon', () => { + const wrapper = mountThemedComponent(}>My Badge); + expect(wrapper.debug()).to.matchSnapshot(); + }); +}); 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..c50108e70a9 --- /dev/null +++ b/packages/fiori3/src/webComponents/Badge/demo.stories.tsx @@ -0,0 +1,14 @@ +import { select } from '@storybook/addon-knobs'; +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { Badge } from '../../lib/Badge'; +import { Icon } from '../../lib/Icon'; + +storiesOf('UI5 Web Components | Badge', module).add('Default story', () => ( + } + > + Badge + +)); diff --git a/packages/fiori3/src/webComponents/Badge/index.tsx b/packages/fiori3/src/webComponents/Badge/index.tsx new file mode 100644 index 00000000000..9a1d6ae8bdc --- /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?: string; // @generated + icon?: any; // @generated +} + +const Badge: FC = withWebComponent(UI5Badge); + +Badge.displayName = 'Badge'; + +export { Badge }; diff --git a/packages/fiori3/src/webComponents/BusyIndicator/BusyIndicator.karma.tsx b/packages/fiori3/src/webComponents/BusyIndicator/BusyIndicator.karma.tsx new file mode 100644 index 00000000000..15fe049b94f --- /dev/null +++ b/packages/fiori3/src/webComponents/BusyIndicator/BusyIndicator.karma.tsx @@ -0,0 +1,30 @@ +import { mountThemedComponent } from '@shared/tests/utils'; +import { expect, use } from 'chai'; +import { matchSnapshot } from 'chai-karma-snapshot'; +import React from 'react'; +import { BusyIndicator } from '../../lib/BusyIndicator'; +import { BusyIndicatorType } from '../../lib/BusyIndicatorType'; + +use(matchSnapshot); + +describe('BusyIndicator', () => { + it('Basic Test', () => { + const wrapper = mountThemedComponent(); + expect(wrapper.debug()).to.matchSnapshot(); + }); + + it('Inactive', () => { + const wrapper = mountThemedComponent(); + expect(wrapper.debug()).to.matchSnapshot(); + }); + + it('Size Medium', () => { + const wrapper = mountThemedComponent(); + expect(wrapper.debug()).to.matchSnapshot(); + }); + + it('Size Small', () => { + const wrapper = mountThemedComponent(); + expect(wrapper.debug()).to.matchSnapshot(); + }); +}); 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..5f9139e4bb2 --- /dev/null +++ b/packages/fiori3/src/webComponents/BusyIndicator/demo.stories.tsx @@ -0,0 +1,9 @@ +import { boolean, select } from '@storybook/addon-knobs'; +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { BusyIndicator } from '../../lib/BusyIndicator'; +import { BusyIndicatorType } from '../../lib/BusyIndicatorType'; + +storiesOf('UI5 Web Components | BusyIndicator', module).add('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..82088137fc1 --- /dev/null +++ b/packages/fiori3/src/webComponents/BusyIndicator/index.tsx @@ -0,0 +1,19 @@ +import React, { FC } from 'react'; +import UI5BusyIndicator from '@ui5/webcomponents/dist/BusyIndicator'; +import { withWebComponent, WithWebComponentPropTypes } from '../../internal/withWebComponent'; +import { BusyIndicatorType } from '../../enums/BusyIndicatorType'; + +export interface BusyIndicatorPropTypes extends WithWebComponentPropTypes { + size?: BusyIndicatorType; // @generated + active?: boolean; // @generated +} + +const BusyIndicator: FC = withWebComponent(UI5BusyIndicator); + +BusyIndicator.displayName = 'BusyIndicator'; + +BusyIndicator.defaultProps = { + size: BusyIndicatorType.Large // @generated +}; + +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 {