Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(ui-toolkit): composable CardInfo

Browse Source 
fixes #732
This commit is contained in:
Sérgio Ramos 2017-10-12 21:13:44 +01:00 committed by Sérgio Ramos
parent 85afe3a228
commit e53a9360ee
4 changed files with 181 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui-toolkit/src/button/usage.md
View File

@ -46,11 +46,12 @@
</span>; </span>;
``` ```
#### Button > Loading #### Button > Loading
```jsx ```jsx
<span> <span>
<Button secondary loading>Inspire the liars</Button> <Button secondary loading>
</span> Inspire the liars
</Button>
</span>;
``` ```

7
packages/ui-toolkit/src/card/index.js
View File

@ -11,4 +11,9 @@ export { default as CardAction } from './action.js';
export { default as CardView } from './view.js'; export { default as CardView } from './view.js';
export { default as CardFooter } from './footer.js'; export { default as CardFooter } from './footer.js';
export { default as CardLabel } from './label.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';

77
packages/ui-toolkit/src/card/info.js
View File

@ -2,25 +2,53 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import remcalc from 'remcalc'; 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; display: inline-block;
${props => (props.color === 'light' ? `color: ${props.theme.white};` : '')}; margin-left: 0;
${props => (props.color === 'disabled' ? `color: ${props.theme.text};` : '')};
margin-left: ${props => (props.iconPosition === 'left' ? remcalc(12) : 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; display: flex;
> svg { > svg {
${props => (props.color === 'light' ? `fill: ${props.theme.white};` : '')}; ${is('light')`
${props => fill: ${props => props.theme.white};
props.color === 'disabled' ? `fill: ${props.theme.text};` : ''}; `};
${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%; height: 100%;
float: right; float: right;
display: flex; display: flex;
@ -28,32 +56,3 @@ const CardInfoContainer = styled.div`
justify-content: flex-end; justify-content: flex-end;
flex-direction: row; 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;

228
packages/ui-toolkit/src/card/usage.md
View File

@ -10,8 +10,11 @@ const {
CardSubTitle, CardSubTitle,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { InstancesIconLight } = require('../icons'); const { InstancesIconLight } = require('../icons');
<Card collapsed headed> <Card collapsed headed>
@ -19,11 +22,12 @@ const { InstancesIconLight } = require('../icons');
<CardMeta> <CardMeta>
<CardTitle>Nginx</CardTitle> <CardTitle>Nginx</CardTitle>
<CardDescription> <CardDescription>
<CardInfo <CardInfo>
icon={<InstancesIconLight />} <CardInfoIconContainer>
iconPosition="left" <InstancesIconLight />
label="4 of 4 instances" </CardInfoIconContainer>
/> <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
</CardInfo>
</CardDescription> </CardDescription>
</CardMeta> </CardMeta>
<CardOptions /> <CardOptions />
@ -43,8 +47,11 @@ const {
CardSubTitle, CardSubTitle,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { InstancesIconLight, HealthyIcon } = require('../icons'); const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card headed> <Card headed>
@ -52,11 +59,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardMeta> <CardMeta>
<CardTitle>Nginx</CardTitle> <CardTitle>Nginx</CardTitle>
<CardDescription> <CardDescription>
<CardInfo <CardInfo>
icon={<InstancesIconLight />} <CardInfoIconContainer>
iconPosition="left" <InstancesIconLight />
label="4 of 4 instances" </CardInfoIconContainer>
/> <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
</CardInfo>
</CardDescription> </CardDescription>
</CardMeta> </CardMeta>
<CardOptions /> <CardOptions />
@ -86,8 +94,11 @@ const {
CardSubTitle, CardSubTitle,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { InstancesIconLight, HealthyIcon } = require('../icons'); const { InstancesIconLight, HealthyIcon } = require('../icons');
<Card headed> <Card headed>
@ -95,11 +106,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardMeta> <CardMeta>
<CardTitle>Nginx</CardTitle> <CardTitle>Nginx</CardTitle>
<CardDescription> <CardDescription>
<CardInfo <CardInfo>
icon={<InstancesIconLight />} <CardInfoIconContainer>
iconPosition="left" <InstancesIconLight />
label="4 of 4 instances" </CardInfoIconContainer>
/> <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
</CardInfo>
</CardDescription> </CardDescription>
</CardMeta> </CardMeta>
<CardOptions /> <CardOptions />
@ -126,8 +138,11 @@ const {
CardSubTitle, CardSubTitle,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid'); const { Row } = require('react-styled-flexboxgrid');
const metrics = require('./metrics.json'); const metrics = require('./metrics.json');
@ -138,11 +153,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardMeta> <CardMeta>
<CardTitle>Nginx</CardTitle> <CardTitle>Nginx</CardTitle>
<CardDescription> <CardDescription>
<CardInfo <CardInfo>
icon={<InstancesIconLight />} <CardInfoIconContainer>
iconPosition="left" <InstancesIconLight />
label="4 of 4 instances" </CardInfoIconContainer>
/> <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
</CardInfo>
</CardDescription> </CardDescription>
</CardMeta> </CardMeta>
<CardOptions /> <CardOptions />
@ -150,12 +166,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardView> <CardView>
<CardDescription> <CardDescription>
<span>Scaling from 1 to 4: finished</span> <span>Scaling from 1 to 4: finished</span>
<CardInfo <CardInfo>
icon={<HealthyIcon />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="Healthy" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
<CardDescription> <CardDescription>
<Row> <Row>
@ -189,8 +205,11 @@ const {
CardSubTitle, CardSubTitle,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const StatusLoader = require('../status-loader').default; const StatusLoader = require('../status-loader').default;
const { InstancesIconLight, HealthyIcon } = require('../icons'); const { InstancesIconLight, HealthyIcon } = require('../icons');
@ -217,8 +236,11 @@ const {
CardSubTitle, CardSubTitle,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const StatusLoader = require('../status-loader').default; const StatusLoader = require('../status-loader').default;
const { InstancesIconLight, HealthyIcon } = require('../icons'); const { InstancesIconLight, HealthyIcon } = require('../icons');
@ -228,11 +250,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardMeta> <CardMeta>
<CardTitle>Nginx</CardTitle> <CardTitle>Nginx</CardTitle>
<CardDescription> <CardDescription>
<CardInfo <CardInfo>
icon={<InstancesIconLight />} <CardInfoIconContainer>
iconPosition="left" <InstancesIconLight />
label="4 of 4 instances" </CardInfoIconContainer>
/> <CardInfoLabel left light>4 of 4 instances</CardInfoLabel>
</CardInfo>
</CardDescription> </CardDescription>
</CardMeta> </CardMeta>
<CardOptions /> <CardOptions />
@ -243,12 +266,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<br /> <br />
<br /> <br />
<br /> <br />
<CardInfo <CardInfo>
icon={<HealthyIcon />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="Healthy" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
</CardView> </CardView>
</Card>; </Card>;
@ -266,8 +289,11 @@ const {
CardSubTitle, CardSubTitle,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { InstancesIcon, HealthyIcon } = require('../icons'); const { InstancesIcon, HealthyIcon } = require('../icons');
const StatusLoader = require('../status-loader').default; const StatusLoader = require('../status-loader').default;
@ -276,12 +302,12 @@ const StatusLoader = require('../status-loader').default;
<CardMeta> <CardMeta>
<CardTitle disabled>Nginx</CardTitle> <CardTitle disabled>Nginx</CardTitle>
<CardDescription disabled> <CardDescription disabled>
<CardInfo <CardInfo>
icon={<InstancesIcon />} <CardInfoIconContainer>
iconPosition="left" <InstancesIcon />
label="4 of 4 instances" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>4 of 4 instances</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
</CardMeta> </CardMeta>
<CardOptions disabled /> <CardOptions disabled />
@ -302,8 +328,11 @@ const {
CardOutlet, CardOutlet,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid'); const { Row } = require('react-styled-flexboxgrid');
const metrics = require('./metrics.json'); const metrics = require('./metrics.json');
@ -313,12 +342,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardView> <CardView>
<CardDescription> <CardDescription>
<b>percona_primary</b> <b>percona_primary</b>
<CardInfo <CardInfo>
icon={<HealthyIcon />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="Healthy" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
</CardView> </CardView>
</Card>; </Card>;
@ -332,8 +361,11 @@ const {
CardOutlet, CardOutlet,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid'); const { Row } = require('react-styled-flexboxgrid');
const { InstancesIconLight, HealthyIcon } = require('../icons'); const { InstancesIconLight, HealthyIcon } = require('../icons');
@ -343,12 +375,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardDescription> <CardDescription>
<b>percona_primary</b> <b>percona_primary</b>
<span>4 instances</span> <span>4 instances</span>
<CardInfo <CardInfo>
icon={<HealthyIcon />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="Healthy" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
</CardView> </CardView>
</Card>; </Card>;
@ -362,8 +394,11 @@ const {
CardOutlet, CardOutlet,
CardTitle, CardTitle,
CardView, CardView,
CardInfo CardInfo,
CardInfoLabel,
CardInfoIconContainer
} = require('./'); } = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid'); const { Row } = require('react-styled-flexboxgrid');
const { InstancesIconLight, HealthyIcon } = require('../icons'); const { InstancesIconLight, HealthyIcon } = require('../icons');
@ -373,12 +408,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardView> <CardView>
<CardDescription> <CardDescription>
<b>percona_primary</b> <b>percona_primary</b>
<CardInfo <CardInfo>
icon={<HealthyIcon />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="Healthy" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
</CardView> </CardView>
</Card> </Card>
@ -386,12 +421,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardView> <CardView>
<CardDescription> <CardDescription>
<b>percona_primary</b> <b>percona_primary</b>
<CardInfo <CardInfo>
icon={<HealthyIcon />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="Healthy" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
</CardView> </CardView>
</Card> </Card>
@ -400,12 +435,12 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
<CardDescription> <CardDescription>
<b>percona_primary</b> <b>percona_primary</b>
<span>4 instances</span> <span>4 instances</span>
<CardInfo <CardInfo>
icon={<HealthyIcon />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="Healthy" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
</CardView> </CardView>
</Card> </Card>
@ -418,31 +453,34 @@ const { InstancesIconLight, HealthyIcon } = require('../icons');
const { const {
Card, Card,
CardInfo, CardInfo,
CardInfoLabel,
CardInfoIconContainer,
CardView, CardView,
CardTitle, CardTitle,
CardDescription, CardDescription,
CardOptions CardOptions
} = require('./'); } = require('./');
const { HealthyIcon, DataCenterIcon } = require('../icons'); const { HealthyIcon, DataCenterIcon } = require('../icons');
<Card collapsed> <Card collapsed>
<CardView> <CardView>
<CardTitle>WordPress_01</CardTitle> <CardTitle>WordPress_01</CardTitle>
<CardDescription> <CardDescription>
<CardInfo <CardInfo>
icon={<HealthyIcon healthy="HEALTHY" />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="Healthy" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
<CardDescription> <CardDescription>
<CardInfo <CardInfo>
icon={<DataCenterIcon />} <CardInfoIconContainer>
iconPosition="left" <HealthyIcon />
label="eu-ams-1" </CardInfoIconContainer>
color="dark" <CardInfoLabel left>Healthy</CardInfoLabel>
/> </CardInfo>
</CardDescription> </CardDescription>
<CardOptions /> <CardOptions />
</CardView> </CardView>