feat(ui-toolkit): composable CardInfo

fixes #732
2017-10-12 21:13:44 +01:00 · 2017-10-12 21:13:44 +01:00 · e53a9360ee
parent 85afe3a228
commit e53a9360ee
4 changed files with 181 additions and 138 deletions
--- a/packages/ui-toolkit/src/button/usage.md
+++ b/packages/ui-toolkit/src/button/usage.md
@ -46,11 +46,12 @@
 </span>;
 ```

-
 #### Button > Loading

 ```jsx
 <span>
-  <Button secondary loading>Inspire the liars</Button>
-</span>
+  <Button secondary loading>
+    Inspire the liars
+  </Button>
+</span>;
 ```
--- a/packages/ui-toolkit/src/card/index.js
+++ b/packages/ui-toolkit/src/card/index.js
@ -11,4 +11,9 @@ export { default as CardAction } from './action.js';
 export { default as CardView } from './view.js';
 export { default as CardFooter } from './footer.js';
 export { default as CardLabel } from './label.js';
-export { default as CardInfo } from './info.js';
+
+export {
+  default as CardInfo,
+  Label as CardInfoLabel,
+  IconContainer as CardInfoIconContainer
+} from './info.js';
--- a/packages/ui-toolkit/src/card/info.js
+++ b/packages/ui-toolkit/src/card/info.js
@ -2,25 +2,53 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
-import Label from '../label';
+import is from 'styled-is';

-const StyledLabel = Label.extend`
+import BaseLabel from '../label';
+
+export const Label = BaseLabel.extend`
  display: inline-block;
-  ${props => (props.color === 'light' ? `color: ${props.theme.white};` : '')};
-  ${props => (props.color === 'disabled' ? `color: ${props.theme.text};` : '')};
-  margin-left: ${props => (props.iconPosition === 'left' ? remcalc(12) : 0)};
+  margin-left: 0;
+
+  ${is('light')`
+    color: ${props => props.theme.white};
+  `};
+
+  ${is('disabled')`
+    color: ${props => props.theme.text};
+  `};
+
+  ${is('left')`
+    margin-left: ${remcalc(12)};
+  `};
 `;

-const StyledIconContainer = styled.div`
+Label.propTypes = {
+  light: PropTypes.bool,
+  disabled: PropTypes.bool,
+  left: PropTypes.bool
+};
+
+export const IconContainer = styled.div`
  display: flex;
+
  > svg {
-    ${props => (props.color === 'light' ? `fill: ${props.theme.white};` : '')};
-    ${props =>
-      props.color === 'disabled' ? `fill: ${props.theme.text};` : ''};
+    ${is('light')`
+      fill: ${props => props.theme.white};
+    `};
+
+    ${is('disabled')`
+      fill: ${props => props.theme.text};
+    `};
  }
 `;

-const CardInfoContainer = styled.div`
+IconContainer.propTypes = {
+  light: PropTypes.bool,
+  disabled: PropTypes.bool
+};
+
+export default styled.div`
  height: 100%;
  float: right;
  display: flex;
@ -28,32 +56,3 @@ const CardInfoContainer = styled.div`
  justify-content: flex-end;
  flex-direction: row;
 `;
-
-const CardInfo = ({
-  label,
-  icon,
-  iconPosition = 'left',
-  color = 'light',
-  onMouseOver,
-  onMouseOut
-}) => {
-  return (
-    <CardInfoContainer onMouseOver={onMouseOver} onMouseOut={onMouseOver}>
-      <StyledIconContainer iconPosition={iconPosition} color={color}>
-        {icon}
-      </StyledIconContainer>
-      <StyledLabel iconPosition={iconPosition} color={color}>
-        {label}
-      </StyledLabel>
-    </CardInfoContainer>
-  );
-};
-
-CardInfo.propTypes = {
-  label: PropTypes.string.isRequired,
-  icon: PropTypes.node.isRequired,
-  iconPosition: PropTypes.string,
-  color: PropTypes.oneOf(['dark', 'light', 'disabled'])
-};
-
-export default CardInfo;
--- a/packages/ui-toolkit/src/card/usage.md
+++ b/packages/ui-toolkit/src/card/usage.md
@ -10,8 +10,11 @@ const {
  CardSubTitle,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { InstancesIconLight } = require('../icons');

 <Card collapsed headed>
@ -19,11 +22,12 @@ const { InstancesIconLight } = require('../icons');
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
-        <CardInfo
-          icon={<InstancesIconLight />}
-          iconPosition="left"
-          label="4 of 4 instances"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <InstancesIconLight />
+          </CardInfoIconContainer>
+          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardMeta>
    <CardOptions />
@ -43,8 +47,11 @@ const {
  CardSubTitle,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { InstancesIconLight, HealthyIcon } = require('../icons');

 <Card headed>
@ -52,11 +59,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
-        <CardInfo
-          icon={<InstancesIconLight />}
-          iconPosition="left"
-          label="4 of 4 instances"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <InstancesIconLight />
+          </CardInfoIconContainer>
+          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardMeta>
    <CardOptions />
@ -86,8 +94,11 @@ const {
  CardSubTitle,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { InstancesIconLight, HealthyIcon } = require('../icons');

 <Card headed>
@ -95,11 +106,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
-        <CardInfo
-          icon={<InstancesIconLight />}
-          iconPosition="left"
-          label="4 of 4 instances"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <InstancesIconLight />
+          </CardInfoIconContainer>
+          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardMeta>
    <CardOptions />
@ -126,8 +138,11 @@ const {
  CardSubTitle,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const { Row } = require('react-styled-flexboxgrid');
 const metrics = require('./metrics.json');
@ -138,11 +153,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
-        <CardInfo
-          icon={<InstancesIconLight />}
-          iconPosition="left"
-          label="4 of 4 instances"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <InstancesIconLight />
+          </CardInfoIconContainer>
+          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardMeta>
    <CardOptions />
@ -150,12 +166,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
  <CardView>
    <CardDescription>
      <span>Scaling from 1 to 4: finished</span>
-      <CardInfo
-        icon={<HealthyIcon />}
-        iconPosition="left"
-        label="Healthy"
-        color="dark"
-      />
+      <CardInfo>
+        <CardInfoIconContainer>
+          <HealthyIcon />
+        </CardInfoIconContainer>
+        <CardInfoLabel left>Healthy</CardInfoLabel>
+      </CardInfo>
    </CardDescription>
    <CardDescription>
      <Row>
@ -189,8 +205,11 @@ const {
  CardSubTitle,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const StatusLoader = require('../status-loader').default;
 const { InstancesIconLight, HealthyIcon } = require('../icons');

@ -217,8 +236,11 @@ const {
  CardSubTitle,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const StatusLoader = require('../status-loader').default;
 const { InstancesIconLight, HealthyIcon } = require('../icons');
@ -228,11 +250,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
-        <CardInfo
-          icon={<InstancesIconLight />}
-          iconPosition="left"
-          label="4 of 4 instances"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <InstancesIconLight />
+          </CardInfoIconContainer>
+          <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardMeta>
    <CardOptions />
@ -243,12 +266,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
      <br />
      <br />
      <br />
-      <CardInfo
-        icon={<HealthyIcon />}
-        iconPosition="left"
-        label="Healthy"
-        color="dark"
-      />
+      <CardInfo>
+        <CardInfoIconContainer>
+          <HealthyIcon />
+        </CardInfoIconContainer>
+        <CardInfoLabel left>Healthy</CardInfoLabel>
+      </CardInfo>
    </CardDescription>
  </CardView>
 </Card>;
@ -266,8 +289,11 @@ const {
  CardSubTitle,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { InstancesIcon, HealthyIcon } = require('../icons');
 const StatusLoader = require('../status-loader').default;

@ -276,12 +302,12 @@ const StatusLoader = require('../status-loader').default;
    <CardMeta>
      <CardTitle disabled>Nginx</CardTitle>
      <CardDescription disabled>
-        <CardInfo
-          icon={<InstancesIcon />}
-          iconPosition="left"
-          label="4 of 4 instances"
-          color="dark"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <InstancesIcon />
+          </CardInfoIconContainer>
+          <CardInfoLabel left>4 of 4 instances</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardMeta>
    <CardOptions disabled />
@ -302,8 +328,11 @@ const {
  CardOutlet,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const { Row } = require('react-styled-flexboxgrid');
 const metrics = require('./metrics.json');
@ -313,12 +342,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
  <CardView>
    <CardDescription>
      <b>percona_primary</b>
-      <CardInfo
-        icon={<HealthyIcon />}
-        iconPosition="left"
-        label="Healthy"
-        color="dark"
-      />
+      <CardInfo>
+        <CardInfoIconContainer>
+          <HealthyIcon />
+        </CardInfoIconContainer>
+        <CardInfoLabel left>Healthy</CardInfoLabel>
+      </CardInfo>
    </CardDescription>
  </CardView>
 </Card>;
@ -332,8 +361,11 @@ const {
  CardOutlet,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const { Row } = require('react-styled-flexboxgrid');
 const { InstancesIconLight, HealthyIcon } = require('../icons');
@ -343,12 +375,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
    <CardDescription>
      <b>percona_primary</b>
      <span>4 instances</span>
-      <CardInfo
-        icon={<HealthyIcon />}
-        iconPosition="left"
-        label="Healthy"
-        color="dark"
-      />
+      <CardInfo>
+        <CardInfoIconContainer>
+          <HealthyIcon />
+        </CardInfoIconContainer>
+        <CardInfoLabel left>Healthy</CardInfoLabel>
+      </CardInfo>
    </CardDescription>
  </CardView>
 </Card>;
@ -362,8 +394,11 @@ const {
  CardOutlet,
  CardTitle,
  CardView,
-  CardInfo
+  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer
 } = require('./');
+
 const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
 const { Row } = require('react-styled-flexboxgrid');
 const { InstancesIconLight, HealthyIcon } = require('../icons');
@ -373,12 +408,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
    <CardView>
      <CardDescription>
        <b>percona_primary</b>
-        <CardInfo
-          icon={<HealthyIcon />}
-          iconPosition="left"
-          label="Healthy"
-          color="dark"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <HealthyIcon />
+          </CardInfoIconContainer>
+          <CardInfoLabel left>Healthy</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardView>
  </Card>
@ -386,12 +421,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
    <CardView>
      <CardDescription>
        <b>percona_primary</b>
-        <CardInfo
-          icon={<HealthyIcon />}
-          iconPosition="left"
-          label="Healthy"
-          color="dark"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <HealthyIcon />
+          </CardInfoIconContainer>
+          <CardInfoLabel left>Healthy</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardView>
  </Card>
@ -400,12 +435,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
      <CardDescription>
        <b>percona_primary</b>
        <span>4 instances</span>
-        <CardInfo
-          icon={<HealthyIcon />}
-          iconPosition="left"
-          label="Healthy"
-          color="dark"
-        />
+        <CardInfo>
+          <CardInfoIconContainer>
+            <HealthyIcon />
+          </CardInfoIconContainer>
+          <CardInfoLabel left>Healthy</CardInfoLabel>
+        </CardInfo>
      </CardDescription>
    </CardView>
  </Card>
@ -418,31 +453,34 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
 const {
  Card,
  CardInfo,
+  CardInfoLabel,
+  CardInfoIconContainer,
  CardView,
  CardTitle,
  CardDescription,
  CardOptions
 } = require('./');
+
 const { HealthyIcon, DataCenterIcon } = require('../icons');

 <Card collapsed>
  <CardView>
    <CardTitle>WordPress_01</CardTitle>
    <CardDescription>
-      <CardInfo
-        icon={<HealthyIcon healthy="HEALTHY" />}
-        iconPosition="left"
-        label="Healthy"
-        color="dark"
-      />
+      <CardInfo>
+        <CardInfoIconContainer>
+          <HealthyIcon />
+        </CardInfoIconContainer>
+        <CardInfoLabel left>Healthy</CardInfoLabel>
+      </CardInfo>
    </CardDescription>
    <CardDescription>
-      <CardInfo
-        icon={<DataCenterIcon />}
-        iconPosition="left"
-        label="eu-ams-1"
-        color="dark"
-      />
+      <CardInfo>
+        <CardInfoIconContainer>
+          <HealthyIcon />
+        </CardInfoIconContainer>
+        <CardInfoLabel left>Healthy</CardInfoLabel>
+      </CardInfo>
    </CardDescription>
    <CardOptions />
  </CardView>