diff --git a/README.md b/README.md index e43cdd3c775..b5fcfb2219b 100644 --- a/README.md +++ b/README.md @@ -76,14 +76,12 @@ npm install @fiori-for-react/fiori3 --save In order to use `fiori-for-react` you have to wrap your application's root component into the `ThemeProvider`.
You will find this component most likely in `src/App.js`: ```jsx -import { ContentDensity } from '@fiori-for-react/fiori3/lib/ContentDensity'; import { ThemeProvider } from '@fiori-for-react/fiori3/lib/ThemeProvider'; -import { Themes } from '@fiori-for-react/fiori3/lib/Themes'; ... render() { return (
- +
diff --git a/config/jest.config.js b/config/jest.config.js index 1e7177bebee..8a2bb46ac34 100644 --- a/config/jest.config.js +++ b/config/jest.config.js @@ -1,5 +1,6 @@ const PATHS = require('./paths'); const path = require('path'); +// const webComponentConfigMock = require('./webComponentConfigMock'); module.exports = { preset: 'ts-jest', @@ -29,6 +30,12 @@ module.exports = { moduleNameMapper: { '^@shared/(.*)$': '/shared/$1', '^@ui5/webcomponents/dist(.*)$': 'identity-obj-proxy', // ui5 web components can be mocked, not relevant for jest tests + '^@ui5/webcomponents-base/src/Configuration(.*)$': path.resolve( + PATHS.shared, + 'tests', + 'mock', + 'webComponentConfigMock.js' + ), '\\.(css|less)$': 'identity-obj-proxy' }, moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'], diff --git a/lerna.json b/lerna.json index 987701ddc87..9a07832d8cd 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "packages/*" ], - "version": "0.3.1-rc.2", + "version": "0.3.1", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/package.json b/package.json index cba7f2a5edd..5233395a39a 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "filesize": "^4.1.2", "fs-extra": "^7.0.0", "glob": "^7.1.4", + "global": "^4.4.0", "google-closure-compiler": "^20190415.0.0", "gzip-size": "^5.1.0", "husky": "^2.2.0", @@ -97,6 +98,7 @@ "nyc": "^13.3.0", "ora": "^3.4.0", "puppeteer": "^1.15.0", + "qs": "^6.7.0", "react": "^16.8.6", "react-docgen-typescript-loader": "^3.1.0", "react-docgen-typescript-webpack-plugin": "^1.1.0", diff --git a/packages/charts/src/util/populateData.ts b/packages/charts/src/util/populateData.ts index 8e326a82b06..d053eee435f 100644 --- a/packages/charts/src/util/populateData.ts +++ b/packages/charts/src/util/populateData.ts @@ -4,7 +4,7 @@ import belizePlus from './../themes/sap_belize_plus'; const getMapForTheme = (theme) => { switch (theme) { case 'sap_belize': - case 'sap_fiori3_light': // TODO This needs to change as soon there is a Fiori3 Color Map Available + case 'sap_fiori_3': // TODO This needs to change as soon there is a Fiori3 Color Map Available return belize; case 'sap_belize_plus': return belizePlus; diff --git a/packages/docs/.storybook/TableComponent.tsx b/packages/docs/.storybook/TableComponent.tsx index 95be9590ec0..1fe3c464b88 100644 --- a/packages/docs/.storybook/TableComponent.tsx +++ b/packages/docs/.storybook/TableComponent.tsx @@ -1,15 +1,4 @@ -import { - ContentDensity, - Badge, - Label, - Table, - TableCell, - TableColumn, - TableRow, - Text, - ThemeProvider, - Themes -} from '@fiori-for-react/fiori3'; +import { Badge, Label, Table, TableCell, TableColumn, TableRow, Text, ThemeProvider } from '@fiori-for-react/fiori3'; import React from 'react'; const columns = [ @@ -24,13 +13,13 @@ export const TableComponent = (props) => { const info = props.type.__docgenInfo; if (!info || !info.props) { return ( - + Unfortunately, there are no prop types available for this component. ); } return ( - + ( diff --git a/packages/docs/.storybook/config.js b/packages/docs/.storybook/config.js index 8252146bb9b..ba98b731ed1 100644 --- a/packages/docs/.storybook/config.js +++ b/packages/docs/.storybook/config.js @@ -7,6 +7,8 @@ import { withInfo } from '@storybook/addon-info'; import { TableComponent } from './TableComponent'; import { withStyleInfo } from './decorators/withStyleInfo'; import { Fiori4ReactTheme } from './theme'; +import { document, history, window } from 'global'; +import qs from 'qs'; export const propTablesExclude = [ThemeProvider]; @@ -94,23 +96,66 @@ addParameters({ } }); -const themr = makeDecorator({ - name: 'themr', - parameterName: 'themr', - skipIfNoParametersOrOptions: false, - wrapper: (getStory, context, { parameters }) => { +class ThemeContainer extends React.PureComponent { + componentDidUpdate(prevProps) { + const { contentDensity, setQueryParam } = this.props; + if (contentDensity !== prevProps.contentDensity) { + setQueryParam({ + 'sap-ui-compactSize': contentDensity === ContentDensity.Compact + }); + } + } + + render() { + return this.props.children; + } +} + +const withQuery = makeDecorator({ + name: 'withQuery', + parameterName: 'query', + wrapper: (getStory, context) => { + function setQueryParam(queryObj) { + const iframe = window.parent.document.getElementById('storybook-preview-iframe'); + const [base, search] = iframe.src.split('?'); + const currentQuery = qs.parse(search, { ignoreQueryPrefix: true }); + iframe.src = `${base}?${qs.stringify({ ...currentQuery, ...queryObj })}`; + } + let contentDensity; + try { + const iframe = window.parent.document.getElementById('storybook-preview-iframe'); + const currentQuery = qs.parse(iframe.src.split('?')[1]); + contentDensity = + currentQuery['sap-ui-compactSize'] && currentQuery['sap-ui-compactSize'] !== 'false' + ? ContentDensity.Compact + : ContentDensity.Cozy; + } catch (e) { + contentDensity = ContentDensity.Cozy; + } + return ( - {getStory(context)} - + ); } }); +const themr = makeDecorator({ + name: 'themr', + parameterName: 'themr', + skipIfNoParametersOrOptions: false, + wrapper: (getStory, context) => { + // debugger; + return {getStory(context)}; + } +}); + +addDecorator(withQuery); addDecorator(themr); // Load all Stories diff --git a/packages/docs/.storybook/decorators/withStyleInfo.tsx b/packages/docs/.storybook/decorators/withStyleInfo.tsx index 667ffeefc15..1f34a551dd8 100644 --- a/packages/docs/.storybook/decorators/withStyleInfo.tsx +++ b/packages/docs/.storybook/decorators/withStyleInfo.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { ContentDensity, Label, Text, ThemeProvider, Themes } from '@fiori-for-react/fiori3'; +import { Label, Text, ThemeProvider } from '@fiori-for-react/fiori3'; const withStyleContainer = { fontFamily: @@ -64,7 +64,7 @@ class WithStyleInfo extends Component {
{children}
- +

Styling API

{styleInfo.attributes.map((info) => ( diff --git a/packages/docs/Welcome.tsx b/packages/docs/Welcome.tsx index 773fa2de0bf..5c5d38528b3 100644 --- a/packages/docs/Welcome.tsx +++ b/packages/docs/Welcome.tsx @@ -91,13 +91,11 @@ storiesOf(' Welcome | Fiori-for-React', module) {dedent`... - import { ContentDensity } from '@fiori-for-react/fiori3/lib/ContentDensity'; import { ThemeProvider } from '@fiori-for-react/fiori3/lib/ThemeProvider'; - import { Themes } from '@fiori-for-react/fiori3/lib/Themes'; ... render() { return ( - + ); diff --git a/packages/fiori3/__karma_snapshots__/ActionSheet.md b/packages/fiori3/__karma_snapshots__/ActionSheet.md index 155ea9b49e9..e0c77d007b7 100644 --- a/packages/fiori3/__karma_snapshots__/ActionSheet.md +++ b/packages/fiori3/__karma_snapshots__/ActionSheet.md @@ -3,7 +3,7 @@ #### `Render without Crashing` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/AnalyticalCard.md b/packages/fiori3/__karma_snapshots__/AnalyticalCard.md index 8113bf55d46..82c41d7e98f 100644 --- a/packages/fiori3/__karma_snapshots__/AnalyticalCard.md +++ b/packages/fiori3/__karma_snapshots__/AnalyticalCard.md @@ -3,7 +3,7 @@ #### `Render without Crashing` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/Avatar.md b/packages/fiori3/__karma_snapshots__/Avatar.md index 3a37d403693..6c53092b2c5 100644 --- a/packages/fiori3/__karma_snapshots__/Avatar.md +++ b/packages/fiori3/__karma_snapshots__/Avatar.md @@ -3,7 +3,7 @@ #### `Avatar - size: XL shape: Circle` ``` - + @@ -19,7 +19,7 @@ #### `Avatar - size: XL shape: Square` ``` - + @@ -35,7 +35,7 @@ #### `Avatar - size: L shape: Circle` ``` - + @@ -51,7 +51,7 @@ #### `Avatar - size: L shape: Square` ``` - + @@ -67,7 +67,7 @@ #### `Avatar - size: M shape: Circle` ``` - + @@ -83,7 +83,7 @@ #### `Avatar - size: M shape: Square` ``` - + @@ -99,7 +99,7 @@ #### `Avatar - size: S shape: Circle` ``` - + @@ -115,7 +115,7 @@ #### `Avatar - size: S shape: Square` ``` - + @@ -131,7 +131,7 @@ #### `Avatar - size: XS shape: Circle` ``` - + @@ -147,7 +147,7 @@ #### `Avatar - size: XS shape: Square` ``` - + @@ -163,7 +163,7 @@ #### `Avatar - size: Custom shape: Circle` ``` - + @@ -179,7 +179,7 @@ #### `Avatar - size: Custom shape: Square` ``` - + @@ -195,7 +195,7 @@ #### `with Initials` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/Badge.md b/packages/fiori3/__karma_snapshots__/Badge.md index 0171e607b48..5b17e732bea 100644 --- a/packages/fiori3/__karma_snapshots__/Badge.md +++ b/packages/fiori3/__karma_snapshots__/Badge.md @@ -3,7 +3,7 @@ #### `Basic Test` ``` - + @@ -19,7 +19,7 @@ #### `with Icon` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/BusyIndicator.md b/packages/fiori3/__karma_snapshots__/BusyIndicator.md index a39f098ecfe..0dd80728758 100644 --- a/packages/fiori3/__karma_snapshots__/BusyIndicator.md +++ b/packages/fiori3/__karma_snapshots__/BusyIndicator.md @@ -3,7 +3,7 @@ #### `Basic Test` ``` - + @@ -17,7 +17,7 @@ #### `Inactive` ``` - + @@ -31,7 +31,7 @@ #### `Size Medium` ``` - + @@ -45,7 +45,7 @@ #### `Size Small` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/Button.md b/packages/fiori3/__karma_snapshots__/Button.md index d68f10be967..71218c7e8e3 100644 --- a/packages/fiori3/__karma_snapshots__/Button.md +++ b/packages/fiori3/__karma_snapshots__/Button.md @@ -3,7 +3,7 @@ #### `Basic Test (generated)` ``` - +
diff --git a/packages/fiori3/__karma_snapshots__/TableCell.md b/packages/fiori3/__karma_snapshots__/TableCell.md index 8dba9654419..c6101b09779 100644 --- a/packages/fiori3/__karma_snapshots__/TableCell.md +++ b/packages/fiori3/__karma_snapshots__/TableCell.md @@ -3,7 +3,7 @@ #### `Basic Test (generated)` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/TableColumn.md b/packages/fiori3/__karma_snapshots__/TableColumn.md index a651a829452..d9200757cfe 100644 --- a/packages/fiori3/__karma_snapshots__/TableColumn.md +++ b/packages/fiori3/__karma_snapshots__/TableColumn.md @@ -3,7 +3,7 @@ #### `Basic Test (generated)` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/TableRow.md b/packages/fiori3/__karma_snapshots__/TableRow.md index a906e17c483..3d55e362683 100644 --- a/packages/fiori3/__karma_snapshots__/TableRow.md +++ b/packages/fiori3/__karma_snapshots__/TableRow.md @@ -3,7 +3,7 @@ #### `Basic Test (generated)` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/Text.md b/packages/fiori3/__karma_snapshots__/Text.md index 28ca6f40dc2..f1cbc3a2535 100644 --- a/packages/fiori3/__karma_snapshots__/Text.md +++ b/packages/fiori3/__karma_snapshots__/Text.md @@ -3,7 +3,7 @@ #### `Render Basic Text` ``` - + @@ -21,7 +21,7 @@ #### `No Wrap` ``` - + @@ -39,7 +39,7 @@ #### `Render Whitespace` ``` - + diff --git a/packages/fiori3/__karma_snapshots__/TextArea.md b/packages/fiori3/__karma_snapshots__/TextArea.md index ea8912ec7c8..54e879a053d 100644 --- a/packages/fiori3/__karma_snapshots__/TextArea.md +++ b/packages/fiori3/__karma_snapshots__/TextArea.md @@ -3,7 +3,7 @@ #### `Basic Test (generated)` ``` - +