Skip to content

Commit 0bc8624

Browse files
Lukas742MarcusNotheis
Lukas742
authored and
MarcusNotheis
committed
refactor(AnalyticalCard): Overhauled design and refactored to functional component (#82)
1 parent cde497a commit 0bc8624

File tree

11 files changed

+412
-349
lines changed

11 files changed

+412
-349
lines changed

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ script:
2121
- |
2222
if [ ${TRAVIS_NODE_VERSION} = "10" ]
2323
then
24-
cat ${TRAVIS_BUILD_DIR}/coverage/lcov.info | ${TRAVIS_BUILD_DIR}/node_modules/.bin/coveralls
24+
cat ${TRAVIS_BUILD_DIR}/coverage/lcov.info | ${TRAVIS_BUILD_DIR}/node_modules/.bin/coveralls || exit 0
2525
fi
2626
2727
jobs:

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,10 @@
99
"build": "node ./scripts/rollup/build.js",
1010
"build:storybook": "build-storybook -c packages/docs/.storybook -o .out",
1111
"pretest": "node scripts/test/clean.js",
12-
"test": "npm-run-all --sequential test:jest test:karma test:combineCoverage",
13-
"test:coveralls": "npm run test && cat ./coverage/lcov.info | coveralls",
12+
"test": "npm-run-all --sequential test:jest test:karma",
1413
"test:karma": "karma start ./config/karma.conf.js --coverage",
1514
"test:jest": "jest --config=config/jest.config.js --coverage",
16-
"test:combineCoverage": "nyc report -r text -r lcov",
15+
"posttest": "nyc report -r text -r lcov || exit 0",
1716
"clean": "lerna clean --yes && node scripts/clean.js",
1817
"postversion": "node ./scripts/postversion/index.js",
1918
"prettier:all": "prettier --write --config ./prettier.config.js \"packages/**/*.{ts,tsx}\""

‎packages/main/__karma_snapshots__/AnalyticalCard.md

Lines changed: 61 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -6,83 +6,86 @@
66
<ThemeProvider withToastContainer={false}>
77
<JssProvider generateId={[Function]}>
88
<ThemeProvider theme={{...}}>
9-
<WithStyles(AnalyticalCard) renderHeader={[Function: renderHeader]}>
10-
<AnalyticalCard renderHeader={[Function: renderHeader]} innerRef={{...}} classes={{...}} theme={{...}}>
11-
<div className="AnalyticalCard-card---" style={[undefined]} title={[undefined]}>
12-
<WithStyles(AnalyticalCardHeader) title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" loading={false} showIndicator={true} description="Description" onHeaderPress={{...}}>
13-
<AnalyticalCardHeader title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" loading={false} showIndicator={true} description="Description" onHeaderPress={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
14-
<div onClick={[Function]} className="AnalyticalCardHeader-cardHeader---" title={[undefined]} style={[undefined]}>
15-
<div className="AnalyticalCardHeader-headerContent---">
16-
<div className="AnalyticalCardHeader-headerText---">
17-
<span>
9+
<AnalyticalCard header={{...}} width="20rem">
10+
<div className="AnalyticalCard--card---" style={{...}} title={[undefined]}>
11+
<AnalyticalCardHeader title="Title" subTitle="Subtitle" arrowIndicator="Down" indicatorState="Success" value="Value" valueState="Success" unit="Unit" target="Target" deviation="Deviation" showIndicator={true} description="Description" onHeaderPress={{...}} counter={{...}} counterState="None" currency={{...}}>
12+
<div onClick={[Function]} className="AnalyticalCardHeader--cardHeader---" title={[undefined]} style={[undefined]}>
13+
<div className="AnalyticalCardHeader--headerContent---">
14+
<div className="AnalyticalCardHeader--headerTitles---">
15+
<FlexBox justifyContent="SpaceBetween" wrap="NoWrap" alignItems="Stretch" direction="Row" displayInline={false} height="" width="">
16+
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentSpaceBetween--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap---" style={{...}} title={[undefined]} slot={[undefined]}>
17+
<div className="AnalyticalCardHeader--headerText---">
1818
Title
19-
</span>
20-
<div className="AnalyticalCardHeader-subHeaderText---">
21-
Subtitle
2219
</div>
20+
<WithStyles(Component) className="AnalyticalCardHeader--counter---" state="None" showDefaultIcon={false} icon={{...}}>
21+
<Component className="AnalyticalCardHeader--counter---" state="None" showDefaultIcon={false} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
22+
<div className="Component-objectStatus--- AnalyticalCardHeader--counter---" style={[undefined]} title={[undefined]} slot={[undefined]} />
23+
</Component>
24+
</WithStyles(Component)>
2325
</div>
24-
<div className="AnalyticalCardHeader-kpiContent---">
25-
<div className="AnalyticalCardHeader-leftContent---">
26-
<div className="AnalyticalCardHeader-valueAndUnit--- AnalyticalCardHeader-good---">
27-
<div className="AnalyticalCardHeader-value---">
26+
</FlexBox>
27+
<div className="AnalyticalCardHeader--subHeaderText---">
28+
Subtitle
29+
</div>
30+
</div>
31+
<FlexBox direction="Row" className="AnalyticalCardHeader--kpiContent---" alignItems="End" displayInline={false} height="" justifyContent="Start" width="" wrap="NoWrap">
32+
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsEnd--- FlexBox--flexWrapNoWrap--- AnalyticalCardHeader--kpiContent---" style={{...}} title={[undefined]} slot={[undefined]}>
33+
<FlexBox direction="Row" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="" wrap="NoWrap">
34+
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap---" style={{...}} title={[undefined]} slot={[undefined]}>
35+
<div className="AnalyticalCardHeader--valueAndUnit--- AnalyticalCardHeader--good---">
36+
<div className="AnalyticalCardHeader--value---">
2837
Value
2938
</div>
30-
<div className="AnalyticalCardHeader-indicatorAndUnit---">
31-
<div className="AnalyticalCardHeader-arrowIndicatorShape--- AnalyticalCardHeader-arrowDown--- AnalyticalCardHeader-good---" />
32-
<div className="AnalyticalCardHeader-unit---">
39+
<div className="AnalyticalCardHeader--indicatorAndUnit---">
40+
<div className="AnalyticalCardHeader--arrowIndicatorShape--- AnalyticalCardHeader--arrowDown--- AnalyticalCardHeader--good---" />
41+
<div className="AnalyticalCardHeader--unit---">
3342
Unit
3443
</div>
3544
</div>
3645
</div>
3746
</div>
38-
<div className="AnalyticalCardHeader-targetAndDeviation---">
39-
<div>
40-
<Label for="">
41-
<ui5-label for="" class="">
47+
</FlexBox>
48+
<FlexBox direction="Row" wrap="NoWrap" className="AnalyticalCardHeader--targetAndDeviation---" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
49+
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- AnalyticalCardHeader--targetAndDeviation---" style={{...}} title={[undefined]} slot={[undefined]}>
50+
<FlexBox direction="Column" className="AnalyticalCardHeader--targetAndDeviationColumn---" wrap="NoWrap" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
51+
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionColumn--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- AnalyticalCardHeader--targetAndDeviationColumn---" style={{...}} title={[undefined]} slot={[undefined]}>
52+
<span>
4253
Target
43-
</ui5-label>
44-
</Label>
45-
<div>
46-
<Text renderWhitespace={false} wrapping={true} width={{...}}>
47-
<span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
48-
Target
49-
</span>
50-
</Text>
54+
</span>
55+
<span className="AnalyticalCardHeader--targetAndDeviationValue---">
56+
Target
57+
</span>
5158
</div>
52-
</div>
53-
<div className="AnalyticalCardHeader-deviation---">
54-
<Label for="">
55-
<ui5-label for="" class="">
59+
</FlexBox>
60+
<FlexBox direction="Column" className="AnalyticalCardHeader--targetAndDeviationColumn---" wrap="NoWrap" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
61+
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionColumn--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- AnalyticalCardHeader--targetAndDeviationColumn---" style={{...}} title={[undefined]} slot={[undefined]}>
62+
<span>
5663
Deviation
57-
</ui5-label>
58-
</Label>
59-
<div>
60-
<Text renderWhitespace={false} wrapping={true} width={{...}}>
61-
<span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
62-
Deviation
63-
</span>
64-
</Text>
64+
</span>
65+
<span className="AnalyticalCardHeader--targetAndDeviationValue---">
66+
Deviation
67+
</span>
6568
</div>
66-
</div>
69+
</FlexBox>
6770
</div>
68-
</div>
69-
<div className="AnalyticalCardHeader-subHeaderText---">
70-
Description
71-
</div>
71+
</FlexBox>
7272
</div>
73+
</FlexBox>
74+
<div className="AnalyticalCardHeader--description---">
75+
Description
7376
</div>
74-
</AnalyticalCardHeader>
75-
</WithStyles(AnalyticalCardHeader)>
76-
<div style={{...}}>
77-
<Text renderWhitespace={false} wrapping={true} width={{...}}>
78-
<span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
79-
I&#39;m a content!
80-
</span>
81-
</Text>
77+
</div>
8278
</div>
79+
</AnalyticalCardHeader>
80+
<div className="AnalyticalCard--content---">
81+
<Text renderWhitespace={false} wrapping={true} width={{...}}>
82+
<span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
83+
I&#39;m a content!
84+
</span>
85+
</Text>
8386
</div>
84-
</AnalyticalCard>
85-
</WithStyles(AnalyticalCard)>
87+
</div>
88+
</AnalyticalCard>
8689
</ThemeProvider>
8790
</JssProvider>
8891
</ThemeProvider>

‎packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
import { fonts } from '@ui5/webcomponents-react-base';
1+
import { fonts, spacing } from '@ui5/webcomponents-react-base';
22
import { JSSTheme } from '../../interfaces/JSSTheme';
33

4-
const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
4+
const styles = ({ parameters }: JSSTheme) => ({
55
card: {
66
backgroundColor: parameters.sapUiTileBackground,
7-
border: `1px solid ${parameters.sapUiTileBorderColor}`,
8-
boxShadow: '0 0 0 1px rgba(0,0,0,0.15)',
7+
// TODO There is a border mentioned in the specs, but this one looks weird.
8+
// border: `0.625rem solid ${parameters.sapUiTileBorderColor}`,
9+
boxShadow: parameters.sapUiShadowLevel0,
910
borderRadius: '0.25rem',
1011
textAlign: 'start',
1112
overflow: 'hidden',
1213
position: 'relative',
13-
width: '20rem',
14-
fontFamily: fonts.sapUiFontFamily
15-
}
14+
fontFamily: fonts.sapUiFontFamily,
15+
boxSizing: 'border-box'
16+
},
17+
content: spacing.sapUiContentPadding
1618
});
1719

1820
export default styles;

‎packages/main/src/components/AnalyticalCard/AnalyticalCard.karma.tsx

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,27 @@ import { ValueState } from '../../lib/ValueState';
1010

1111
use(matchSnapshot);
1212

13-
const renderHeader = () => {
14-
return (
15-
<AnalyticalCardHeader
16-
title="Title"
17-
subTitle="Subtitle"
18-
arrowIndicator={DeviationIndicator.Down}
19-
indicatorState={ValueState.Success}
20-
value="Value"
21-
valueState={ValueState.Success}
22-
unit="Unit"
23-
target="Target"
24-
deviation="Deviation"
25-
loading={false}
26-
showIndicator
27-
description="Description"
28-
/>
29-
);
30-
};
13+
const Header = (
14+
<AnalyticalCardHeader
15+
title="Title"
16+
subTitle="Subtitle"
17+
arrowIndicator={DeviationIndicator.Down}
18+
indicatorState={ValueState.Success}
19+
value="Value"
20+
valueState={ValueState.Success}
21+
unit="Unit"
22+
target="Target"
23+
deviation="Deviation"
24+
showIndicator
25+
description="Description"
26+
/>
27+
);
3128

3229
// TODO Add more tests
3330
describe('Analytical Card', () => {
3431
it('Render without Crashing', () => {
3532
const wrapper = mountThemedComponent(
36-
<AnalyticalCard renderHeader={renderHeader}>
33+
<AnalyticalCard header={Header}>
3734
<Text>I'm a content!</Text>
3835
</AnalyticalCard>
3936
);

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

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { action } from '@storybook/addon-actions';
2-
import { boolean, select } from '@storybook/addon-knobs';
2+
import { boolean, select, text } from '@storybook/addon-knobs';
33
import { storiesOf } from '@storybook/react';
44
import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';
55
import React from 'react';
@@ -10,23 +10,26 @@ import { ValueState } from '../../lib/ValueState';
1010

1111
storiesOf('Components | Analytical Card', module).add('default', () => (
1212
<AnalyticalCard
13-
renderHeader={() => (
13+
width={text('width', '20rem')}
14+
header={
1415
<AnalyticalCardHeader
15-
title="Title"
16-
subTitle="Subtitle"
16+
title={text('title', 'Title')}
17+
subTitle={text('subTitle', 'Subtitle')}
1718
arrowIndicator={select('arrowIndicator', DeviationIndicator, DeviationIndicator.Down)}
1819
indicatorState={select('indicatorState', ValueState, ValueState.Success)}
19-
value="Value"
20+
value={text('value', 'Value')}
2021
valueState={select('valueState', ValueState, ValueState.Success)}
21-
unit="Unit"
22-
target="Target"
23-
deviation="Deviation"
22+
unit={text('unit', 'Unit')}
23+
target={text('target', 'target')}
24+
deviation={text('deviation', 'deviation')}
2425
onHeaderPress={action('Header pressed')}
25-
loading={boolean('loading', false)}
26-
showIndicator
27-
description="Description"
26+
showIndicator={boolean('showIndicator', true)}
27+
description={text('description', 'Description')}
28+
counter={text('counter', 'Counter')}
29+
counterState={select('counterState', ValueState, ValueState.Success)}
30+
currency={text('currency', 'EUR')}
2831
/>
29-
)}
32+
}
3033
>
3134
<LineChart
3235
labels={[

0 commit comments

Comments
 (0)