feat(KpiBlock): update component design for mobile (#457)

* refactor(KpiBlock): use grid to position elements * refactor(KpiBlock): add mobile version of the component * test(KpiBlock): update snapshot * style(KpiBlock): fix typo in README
tillersystems · Apr 1, 2019 · 78b92ce · 78b92ce
1 parent 7d0b705
commit 78b92ce
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 79 deletions.
diff --git a/src/KpiBlock/README.md b/src/KpiBlock/README.md
@@ -15,12 +15,12 @@ import { KpiBlock } from '@tillersystems/stardust';
 - `value` - KpiBlock value.
 - `variation` - KpiBlock variation (negative or positive).
 
-| propName    |        propType         | defaultValue | isRequired |
-| ----------- | :---------------------: | :----------: | :--------: |
-| `className` |        `string`         |     `''`     |     -      |
-| `title`     |        `string`         |              |     \*     |
-| `value`     | `string` / `node | | \* |
-| `variation` |    `number` / `bool`    |              |     -      |
+| propName    |     propType      | defaultValue | isRequired |
+| ----------- | :---------------: | :----------: | :--------: |
+| `className` |     `string`      |     `''`     |     -      |
+| `title`     |     `string`      |              |     \*     |
+| `value`     | `string` / `node` |              |     \*     |
+| `variation` | `number` / `bool` |              |     -      |
 
 ### Example
 

diff --git a/src/KpiBlock/__stories__/KpiBlock.stories.js b/src/KpiBlock/__stories__/KpiBlock.stories.js
@@ -12,16 +12,18 @@ storiesOf('KpiBlock', module)
       max: 100,
       step: 10,
     };
-    const Variation = number('Variation', 50, options, 'Variation');
-    const Title = text('Title', 'Commandes', 'Title');
-    const Value = text('Value', '621', 'Value');
-    const hasVariation = boolean('HasVariation', true, 'Variation');
-    const withCustomValue = boolean('withCustomValue', false, 'Value');
+    const Variation = number('Variation', 50, options, 'ALL');
+    const Title = text('Title', 'Commandes', 'ALL');
+    const Value = text('Value', '621', 'ALL');
+    const hasVariation = boolean('HasVariation', true, 'ALL');
+    const withCustomValue = boolean('withCustomValue', false, 'ALL');
+    const isCompactedValue = boolean('isCompactedValue', false, 'ALL');
     return (
       <KpiBlock
         value={withCustomValue ? <div>19</div> : Value}
         title={Title}
         variation={hasVariation ? Variation : false}
+        isCompacted={isCompactedValue}
       />
     );
   });
diff --git a/src/KpiBlock/__tests__/KpiBlock.test.js b/src/KpiBlock/__tests__/KpiBlock.test.js
@@ -22,10 +22,25 @@ describe('<KpiBlock />', () => {
   });
 
   test('should render with a custom a value', () => {
-    const Custom = () => <div data-testid="customeValue">custom</div>;
+    const Custom = () => <div data-testid="customValue">custom</div>;
     const { getByTestId } = render(<KpiBlock title="title" value={<Custom />} variation={-100} />);
-    const customeValueNode = getByTestId('customeValue');
+    const customValueNode = getByTestId('customValue');
 
-    expect(customeValueNode).toBeInTheDocument();
+    expect(customValueNode).toBeInTheDocument();
+  });
+
+  test('should render with compacted style', () => {
+    const { container, getByText } = render(
+      <KpiBlock title="title" value="value" variation={-100} isCompacted />,
+    );
+    const titleNode = getByText('title');
+    const valueNode = getByText('value');
+
+    expect(titleNode).toHaveStyleRule('font-size', '1.2rem');
+    expect(valueNode).toHaveStyleRule('font-size', '2.6rem');
+    expect(container.firstChild).toHaveStyleRule(
+      'grid-template-areas',
+      "'title' 'value' 'variation'",
+    );
   });
 });
diff --git a/src/KpiBlock/__tests__/__snapshots__/KpiBlock.test.js.snap b/src/KpiBlock/__tests__/__snapshots__/KpiBlock.test.js.snap
@@ -10,13 +10,22 @@ exports[`<KpiBlock /> should render with a negative variation value 1`] = `
   line-height: 20;
 }
 
+.c4 {
+  grid-area: title;
+  color: hsl(207,13%,45%);
+  font-size: 1.4rem;
+  margin-top: 0.3rem;
+}
+
 .c3 {
+  grid-area: value;
   color: hsl(213,17%,20%);
   font-size: 3rem;
   font-weight: 500;
 }
 
 .c1 {
+  grid-area: variation;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -26,18 +35,12 @@ exports[`<KpiBlock /> should render with a negative variation value 1`] = `
   display: -ms-flexbox;
   display: flex;
   font-size: 1.2rem;
-  position: absolute;
   right: 1rem;
   top: 1rem;
+  justify-self: end;
   color: hsl(6,79%,65%);
 }
 
-.c4 {
-  color: hsl(207,13%,45%);
-  font-size: 1.4rem;
-  margin-top: 0.5rem;
-}
-
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -48,15 +51,11 @@ exports[`<KpiBlock /> should render with a negative variation value 1`] = `
   border-radius: 0.4rem;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04);
   box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 6.6rem;
-  padding: 3rem 1rem;
+  display: grid;
+  grid-template-areas: 'variation' 'value' 'title';
+  height: 10rem;
+  grid-template-rows: max-content max-content max-content;
+  padding: 1rem;
   position: relative;
 }
 
@@ -114,13 +113,22 @@ exports[`<KpiBlock /> should render with a positive variation value 1`] = `
   line-height: 20;
 }
 
+.c4 {
+  grid-area: title;
+  color: hsl(207,13%,45%);
+  font-size: 1.4rem;
+  margin-top: 0.3rem;
+}
+
 .c3 {
+  grid-area: value;
   color: hsl(213,17%,20%);
   font-size: 3rem;
   font-weight: 500;
 }
 
 .c1 {
+  grid-area: variation;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -130,18 +138,12 @@ exports[`<KpiBlock /> should render with a positive variation value 1`] = `
   display: -ms-flexbox;
   display: flex;
   font-size: 1.2rem;
-  position: absolute;
   right: 1rem;
   top: 1rem;
+  justify-self: end;
   color: hsl(89,53%,52%);
 }
 
-.c4 {
-  color: hsl(207,13%,45%);
-  font-size: 1.4rem;
-  margin-top: 0.5rem;
-}
-
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -152,15 +154,11 @@ exports[`<KpiBlock /> should render with a positive variation value 1`] = `
   border-radius: 0.4rem;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04);
   box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 6.6rem;
-  padding: 3rem 1rem;
+  display: grid;
+  grid-template-areas: 'variation' 'value' 'title';
+  height: 10rem;
+  grid-template-rows: max-content max-content max-content;
+  padding: 1rem;
   position: relative;
 }
 
@@ -210,18 +208,20 @@ exports[`<KpiBlock /> should render with a positive variation value 1`] = `
 `;
 
 exports[`<KpiBlock /> should render without a problem 1`] = `
+.c2 {
+  grid-area: title;
+  color: hsl(207,13%,45%);
+  font-size: 1.4rem;
+  margin-top: 0.3rem;
+}
+
 .c1 {
+  grid-area: value;
   color: hsl(213,17%,20%);
   font-size: 3rem;
   font-weight: 500;
 }
 
-.c2 {
-  color: hsl(207,13%,45%);
-  font-size: 1.4rem;
-  margin-top: 0.5rem;
-}
-
 .c0 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -232,15 +232,11 @@ exports[`<KpiBlock /> should render without a problem 1`] = `
   border-radius: 0.4rem;
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.04);
   box-sizing: content-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 6.6rem;
-  padding: 3rem 1rem;
+  display: grid;
+  grid-template-areas: 'variation' 'value' 'title';
+  height: 10rem;
+  grid-template-rows: max-content max-content max-content;
+  padding: 1rem;
   position: relative;
 }
 

diff --git a/src/KpiBlock/elements.js b/src/KpiBlock/elements.js
@@ -1,18 +1,29 @@
 import styled, { css } from 'styled-components';
 
+export const Title = styled.div`
+  grid-area: title;
+  color: ${({ theme: { palette } }) => palette.spaceGrey};
+  font-size: ${({ isCompacted, theme: { fonts } }) =>
+    isCompacted ? fonts.size.default : fonts.size.medium};
+  margin-top: 0.3rem;
+`;
+
 export const Value = styled.div`
+  grid-area: value;
   color: ${({ theme: { palette } }) => palette.darkBlue};
-  font-size: ${({ theme: { fonts } }) => fonts.size.h2};
+  font-size: ${({ isCompacted, theme: { fonts } }) =>
+    isCompacted ? fonts.size.h3 : fonts.size.h2};
   font-weight: ${({ theme: { fonts } }) => fonts.weight.thick};
 `;
 
 export const Variation = styled.div`
+  grid-area: variation;
   align-items: center;
   display: flex;
   font-size: ${({ theme: { fonts } }) => fonts.size.default};
-  position: absolute;
   right: 1rem;
   top: 1rem;
+  justify-self: ${({ isCompacted }) => (isCompacted ? 'center' : 'end')};
 
   /* Negative */
   ${({ negative }) =>
@@ -28,9 +39,3 @@ export const Variation = styled.div`
       color: ${({ theme: { palette } }) => palette.success.default};
     `};
 `;
-
-export const Title = styled.div`
-  color: ${({ theme: { palette } }) => palette.spaceGrey};
-  font-size: ${({ theme: { fonts } }) => fonts.size.medium};
-  margin-top: 0.5rem;
-`;
diff --git a/src/KpiBlock/index.js b/src/KpiBlock/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { Icon, Theme } from '..';
 import { Title, Value, Variation } from './elements';
@@ -15,25 +15,26 @@ import { Title, Value, Variation } from './elements';
  * @param {string} title // KpiBlock title.
  * @param {string} value // KpiBlock value.
  * @param {number} variation // KpiBlock variation (negative or positive).
+ * @param {boolean} isCompacted // Display or not mobile version of the component
  *
  * @return {jsx}
  */
 
-const KpiBlock = ({ className, title, value, variation }) => (
+const KpiBlock = ({ className, title, value, variation, isCompacted }) => (
   <div className={className}>
     {variation !== false && variation < 0 && (
-      <Variation negative>
+      <Variation negative isCompacted={isCompacted}>
         {variation.toFixed(2)} % <Icon name="caret-down" color={Theme.palette.failure.default} />
       </Variation>
     )}
     {variation !== false && variation >= 0 && (
-      <Variation positive>
+      <Variation positive isCompacted={isCompacted}>
         +{variation.toFixed(2)} % <Icon name="caret-up" color={Theme.palette.success.default} />
       </Variation>
     )}
-    {typeof value === 'string' && <Value>{value}</Value>}
+    {typeof value === 'string' && <Value isCompacted={isCompacted}>{value}</Value>}
     {React.isValidElement(value) && value}
-    <Title>{title}</Title>
+    <Title isCompacted={isCompacted}>{title}</Title>
   </div>
 );
 
@@ -43,6 +44,7 @@ const KpiBlock = ({ className, title, value, variation }) => (
 const { bool, number, node, oneOfType, string } = PropTypes;
 KpiBlock.propTypes = {
   className: string,
+  isCompacted: bool,
   title: string.isRequired,
   value: oneOfType([string, node]).isRequired,
   variation: oneOfType([bool, number]),
@@ -53,6 +55,7 @@ KpiBlock.propTypes = {
  */
 KpiBlock.defaultProps = {
   className: '',
+  isCompacted: false,
   variation: false,
 };
 
@@ -63,9 +66,18 @@ export default styled(KpiBlock)`
   border-radius: ${({ theme: { dimensions } }) => dimensions.radius};
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
   box-sizing: content-box;
-  display: flex;
-  flex-direction: column;
-  height: 6.6rem;
-  padding: 3rem 1rem;
+  display: grid;
+  grid-template-areas: ${({ isCompacted }) =>
+    isCompacted ? "'title' 'value' 'variation'" : "'variation' 'value' 'title'"};
+
+  height: ${({ isCompacted }) => (isCompacted ? '7.8rem' : '10rem')};
+
+  ${({ isCompacted }) =>
+    !isCompacted &&
+    css`
+      grid-template-rows: max-content max-content max-content;
+    `};
+
+  padding: ${({ isCompacted }) => (isCompacted ? '1.2rem' : '1rem')};
   position: relative;
 `;