fix(KpiChart): add possible design for mobile devices (#458)

tillersystems · Apr 2, 2019 · b512cca · b512cca
1 parent df698d8
commit b512cca
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 9 deletions.
diff --git a/src/KpiChart/__stories__/KpiChart.stories.js b/src/KpiChart/__stories__/KpiChart.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import { ResponsiveBar } from '@nivo/bar';
 
 import { Button, KpiChart } from '../..';
@@ -67,12 +67,13 @@ const data = [
 storiesOf('KpiChart', module)
   .addDecorator(withKnobs)
   .add('default', () => {
-    const Title = text('Title', "Chiffre d'affaires de la journée", 'Title');
-    const label = text('Label', 'Afficher le rapport', 'Label');
+    const Title = text('Title', "Chiffre d'affaires de la journée", 'ALL');
+    const label = text('Label', 'Afficher le rapport', 'ALL');
+    const isCompactedValue = boolean('isCompacted', false, 'ALL');
     return (
-      <KpiChart>
+      <KpiChart isCompacted={isCompactedValue}>
         <KpiChart.Header>
-          <KpiChart.Title>{Title}</KpiChart.Title>
+          <KpiChart.Title isCompacted={isCompactedValue}>{Title}</KpiChart.Title>
         </KpiChart.Header>
         <KpiChart.Body>
           <ResponsiveBar

diff --git a/src/KpiChart/__tests__/KpiChart.test.js b/src/KpiChart/__tests__/KpiChart.test.js
@@ -23,7 +23,7 @@ describe('<KpiChart />', () => {
     expect(FooterNode).toBeInTheDocument();
   });
 
-  test('should render kpi chart with a title without a problem', () => {
+  test('should render kpi chart with a title', () => {
     const Title = 'My title';
     const { getByText } = render(
       <KpiChart>
@@ -37,4 +37,21 @@ describe('<KpiChart />', () => {
     const TitleNode = getByText(Title);
     expect(TitleNode).toBeInTheDocument();
   });
+
+  test('should render kpi chart with compacted design', () => {
+    const Title = 'My title';
+    const { container, getByText } = render(
+      <KpiChart isCompacted>
+        <KpiChart.Header>
+          <KpiChart.Title isCompacted>{Title}</KpiChart.Title>
+        </KpiChart.Header>
+        <KpiChart.Body>Body</KpiChart.Body>
+        <KpiChart.Footer>Footer</KpiChart.Footer>
+      </KpiChart>,
+    );
+    const TitleNode = getByText(Title);
+    expect(TitleNode).toHaveStyleRule('font-size', '1.4rem');
+    expect(TitleNode).toHaveStyleRule('padding-bottom', '1.2rem');
+    expect(container.firstChild).toHaveStyleRule('padding', '1.2rem 1.6rem');
+  });
 });
diff --git a/src/KpiChart/elements.js b/src/KpiChart/elements.js
@@ -2,9 +2,10 @@ import styled from 'styled-components';
 
 export const Title = styled.div`
   font-weight: 600;
-  font-size: 1.6rem;
+  font-size: ${({ isCompacted, theme: { fonts } }) =>
+    isCompacted ? fonts.size.medium : fonts.size.big};
 
-  padding-bottom: 1.5rem;
+  padding-bottom: ${({ isCompacted }) => (isCompacted ? '1.2rem' : '1.5rem')};
 
   border-bottom: 3px solid ${({ theme: { palette } }) => palette.primary.default};
   display: flex;

diff --git a/src/KpiChart/index.js b/src/KpiChart/index.js
@@ -29,12 +29,15 @@ class KpiChart extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    // eslint-disable-next-line react/no-unused-prop-types
+    isCompacted: PropTypes.bool,
   };
 
   /** Default props. */
   static defaultProps = {
     children: null,
     className: '',
+    isCompacted: false,
   };
 
   render() {
@@ -47,7 +50,7 @@ export default styled(KpiChart)`
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: 2.4rem 3rem;
+  padding: ${({ isCompacted }) => (isCompacted ? '1.2rem 1.6rem' : '2.4rem 3rem')};
   height: 100%;
   border-radius: ${({ theme: { dimensions } }) => dimensions.radius};
   border: 1px solid ${({ theme: { palette } }) => palette.lightGrey};