Skip to content

feat(AnalyticalCard): Overhauled design and refactored to functional component #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Aug 12, 2019
Merged

feat(AnalyticalCard): Overhauled design and refactored to functional component #82

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
af5fa99
feat(AnalyticalCard): Refactored to functional component and overhaul…
Lukas742 Aug 5, 2019
0af20ed
Merge branch 'master' into feature/AnalyticalCard
MarcusNotheis Aug 8, 2019
b0cdcf1
feat(AnalyticalCard): requested changes
Lukas742 Aug 9, 2019
07202f2
feat(AnalyticalCard): updated snapshots
Lukas742 Aug 9, 2019
4067c70
WIP: Remove unused variable
MarcusNotheis Aug 12, 2019
fcb37e2
Merge branch 'master' into feature/AnalyticalCard
MarcusNotheis Aug 12, 2019
9f2e1f6
WIP: Minor Adjustments
MarcusNotheis Aug 12, 2019
b0c22c5
WIP: Moved AnalyticalCardHeader to components folder
MarcusNotheis Aug 12, 2019
a4be97f
WIP: Make CodeCoverage optional
MarcusNotheis Aug 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 61 additions & 58 deletions packages/main/__karma_snapshots__/AnalyticalCard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,83 +6,86 @@
<ThemeProvider withToastContainer={false}>
<JssProvider generateId={[Function]}>
<ThemeProvider theme={{...}}>
<WithStyles(AnalyticalCard) renderHeader={[Function: renderHeader]}>
<AnalyticalCard renderHeader={[Function: renderHeader]} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="AnalyticalCard-card---" style={[undefined]} title={[undefined]}>
<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={{...}}>
<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={{...}}>
<div onClick={[Function]} className="AnalyticalCardHeader-cardHeader---" title={[undefined]} style={[undefined]}>
<div className="AnalyticalCardHeader-headerContent---">
<div className="AnalyticalCardHeader-headerText---">
<span>
<ForwardRef header={{...}} width="20rem">
<div className="AnalyticalCard--card--- AnalyticalCard--card----" style={[undefined]} title={[undefined]}>
<ForwardRef 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={{...}}>
<div onClick={[Function: onClick]} className="Analytical-Card-Header--cardHeader---" title={[undefined]} style={[undefined]}>
<div className="Analytical-Card-Header--headerContent---">
<div className="Analytical-Card-Header--headerTitles---">
<FlexBox justifyContent="SpaceBetween" wrap="NoWrap" alignItems="Stretch" direction="Row" displayInline={false} height="" width="">
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentSpaceBetween--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap---" style={{...}} title={[undefined]} slot={[undefined]}>
<div className="Analytical-Card-Header--headerText---">
Title
</span>
<div className="AnalyticalCardHeader-subHeaderText---">
Subtitle
</div>
<WithStyles(Component) className="Analytical-Card-Header--counter---" state="None" showDefaultIcon={false} icon={{...}}>
<Component className="Analytical-Card-Header--counter---" state="None" showDefaultIcon={false} icon={{...}} innerRef={{...}} classes={{...}} theme={{...}}>
<div className="Component-objectStatus--- Analytical-Card-Header--counter---" style={[undefined]} title={[undefined]} slot={[undefined]} />
</Component>
</WithStyles(Component)>
</div>
<div className="AnalyticalCardHeader-kpiContent---">
<div className="AnalyticalCardHeader-leftContent---">
<div className="AnalyticalCardHeader-valueAndUnit--- AnalyticalCardHeader-good---">
<div className="AnalyticalCardHeader-value---">
</FlexBox>
<div className="Analytical-Card-Header--subHeaderText---">
Subtitle
</div>
</div>
<FlexBox direction="Row" className="Analytical-Card-Header--kpiContent---" alignItems="End" displayInline={false} height="" justifyContent="Start" width="" wrap="NoWrap">
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsEnd--- FlexBox--flexWrapNoWrap--- Analytical-Card-Header--kpiContent---" style={{...}} title={[undefined]} slot={[undefined]}>
<FlexBox direction="Row" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="" wrap="NoWrap">
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap---" style={{...}} title={[undefined]} slot={[undefined]}>
<div className="Analytical-Card-Header--valueAndUnit--- Analytical-Card-Header--good---">
<div className="Analytical-Card-Header--value---">
Value
</div>
<div className="AnalyticalCardHeader-indicatorAndUnit---">
<div className="AnalyticalCardHeader-arrowIndicatorShape--- AnalyticalCardHeader-arrowDown--- AnalyticalCardHeader-good---" />
<div className="AnalyticalCardHeader-unit---">
<div className="Analytical-Card-Header--indicatorAndUnit---">
<div className="Analytical-Card-Header--arrowIndicatorShape--- Analytical-Card-Header--arrowDown--- Analytical-Card-Header--good---" />
<div className="Analytical-Card-Header--unit---">
Unit
</div>
</div>
</div>
</div>
<div className="AnalyticalCardHeader-targetAndDeviation---">
<div>
<Label for="">
<ui5-label for="" class="">
</FlexBox>
<FlexBox direction="Row" wrap="NoWrap" className="Analytical-Card-Header--targetAndDeviation---" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionRow--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- Analytical-Card-Header--targetAndDeviation---" style={{...}} title={[undefined]} slot={[undefined]}>
<FlexBox direction="Column" className="Analytical-Card-Header--targetAndDeviationColumn---" wrap="NoWrap" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionColumn--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- Analytical-Card-Header--targetAndDeviationColumn---" style={{...}} title={[undefined]} slot={[undefined]}>
<span>
Target
</ui5-label>
</Label>
<div>
<Text renderWhitespace={false} wrapping={true} width={{...}}>
<span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
Target
</span>
</Text>
</span>
<span className="Analytical-Card-Header--targetAndDeviationValue---">
Target
</span>
</div>
</div>
<div className="AnalyticalCardHeader-deviation---">
<Label for="">
<ui5-label for="" class="">
</FlexBox>
<FlexBox direction="Column" className="Analytical-Card-Header--targetAndDeviationColumn---" wrap="NoWrap" alignItems="Stretch" displayInline={false} height="" justifyContent="Start" width="">
<div className="FlexBox--flexBox--- FlexBox--flexBoxDirectionColumn--- FlexBox--justifyContentStart--- FlexBox--alignItemsStretch--- FlexBox--flexWrapNoWrap--- Analytical-Card-Header--targetAndDeviationColumn---" style={{...}} title={[undefined]} slot={[undefined]}>
<span>
Deviation
</ui5-label>
</Label>
<div>
<Text renderWhitespace={false} wrapping={true} width={{...}}>
<span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
Deviation
</span>
</Text>
</span>
<span className="Analytical-Card-Header--targetAndDeviationValue---">
Deviation
</span>
</div>
</div>
</FlexBox>
</div>
</div>
<div className="AnalyticalCardHeader-subHeaderText---">
Description
</div>
</FlexBox>
</div>
</FlexBox>
<div className="Analytical-Card-Header--description---">
Description
</div>
</AnalyticalCardHeader>
</WithStyles(AnalyticalCardHeader)>
<div style={{...}}>
<Text renderWhitespace={false} wrapping={true} width={{...}}>
<span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
I&#39;m a content!
</span>
</Text>
</div>
</div>
</ForwardRef>
<div className="AnalyticalCard--content---">
<Text renderWhitespace={false} wrapping={true} width={{...}}>
<span style={{...}} className="Text--text---" title={[undefined]} slot={[undefined]}>
I&#39;m a content!
</span>
</Text>
</div>
</AnalyticalCard>
</WithStyles(AnalyticalCard)>
</div>
</ForwardRef>
</ThemeProvider>
</JssProvider>
</ThemeProvider>
Expand Down
13 changes: 8 additions & 5 deletions packages/main/src/components/AnalyticalCard/AnalyticalCard.jss.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import { fonts } from '@ui5/webcomponents-react-base';
import { JSSTheme } from '../../interfaces/JSSTheme';
import { spacing } from '@ui5/webcomponents-react-base';

const styles = ({ theme, contentDensity, parameters }: JSSTheme) => ({
card: {
backgroundColor: parameters.sapUiTileBackground,
border: `1px solid ${parameters.sapUiTileBorderColor}`,
boxShadow: '0 0 0 1px rgba(0,0,0,0.15)',
border: `0.625rem solid ${parameters.sapUiTileBorderColor}`,
boxShadow: parameters.sapUiShadowLevel0,
borderRadius: '0.25rem',
textAlign: 'start',
overflow: 'hidden',
position: 'relative',
width: '20rem',
fontFamily: fonts.sapUiFontFamily
}
width: (props) => props.width,
fontFamily: fonts.sapUiFontFamily,
boxSizing: 'border-box'
},
content: spacing.sapUiContentPadding
});

export default styles;
35 changes: 16 additions & 19 deletions packages/main/src/components/AnalyticalCard/AnalyticalCard.karma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,27 @@ import { ValueState } from '../../lib/ValueState';

use(matchSnapshot);

const renderHeader = () => {
return (
<AnalyticalCardHeader
title="Title"
subTitle="Subtitle"
arrowIndicator={DeviationIndicator.Down}
indicatorState={ValueState.Success}
value="Value"
valueState={ValueState.Success}
unit="Unit"
target="Target"
deviation="Deviation"
loading={false}
showIndicator
description="Description"
/>
);
};
const Header = (
<AnalyticalCardHeader
title="Title"
subTitle="Subtitle"
arrowIndicator={DeviationIndicator.Down}
indicatorState={ValueState.Success}
value="Value"
valueState={ValueState.Success}
unit="Unit"
target="Target"
deviation="Deviation"
showIndicator
description="Description"
/>
);

// TODO Add more tests
describe('Analytical Card', () => {
it('Render without Crashing', () => {
const wrapper = mountThemedComponent(
<AnalyticalCard renderHeader={renderHeader}>
<AnalyticalCard header={Header}>
<Text>I'm a content!</Text>
</AnalyticalCard>
);
Expand Down
27 changes: 15 additions & 12 deletions packages/main/src/components/AnalyticalCard/demo.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { boolean, select } from '@storybook/addon-knobs';
import { boolean, select, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/react';
import { LineChart } from '@ui5/webcomponents-react-charts';
import React from 'react';
Expand All @@ -10,23 +10,26 @@ import { ValueState } from '../../lib/ValueState';

storiesOf('Components | Analytical Card', module).add('default', () => (
<AnalyticalCard
renderHeader={() => (
width={text('width', '20rem')}
header={
<AnalyticalCardHeader
title="Title"
subTitle="Subtitle"
title={text('title', 'Title')}
subTitle={text('subTitle', 'Subtitle')}
arrowIndicator={select('arrowIndicator', DeviationIndicator, DeviationIndicator.Down)}
indicatorState={select('indicatorState', ValueState, ValueState.Success)}
value="Value"
value={text('value', 'Value')}
valueState={select('valueState', ValueState, ValueState.Success)}
unit="Unit"
target="Target"
deviation="Deviation"
unit={text('unit', 'Unit')}
target={text('target', 'target')}
deviation={text('deviation', 'deviation')}
onHeaderPress={action('Header pressed')}
loading={boolean('loading', false)}
showIndicator
description="Description"
showIndicator={boolean('showIndicator', true)}
description={text('description', 'Description')}
counter={text('counter', 'Counter')}
counterState={select('counterState', ValueState, ValueState.Success)}
currency={text('currency', 'EUR')}
/>
)}
}
>
<LineChart
labels={[
Expand Down
Loading