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

feat(ui-toolkit): add disabled card mode

Browse Source
This commit is contained in:
Sérgio Ramos 2017-07-27 18:44:29 +01:00
parent 08745d4b12
commit 68685284ea
13 changed files with 463 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-2.snap Normal file
View File

@ -0,0 +1,14 @@
exports[`Anchor-2 1`] = `
<span
style={
Object {
"background-color": "#343434",
}
}>
<a
className="baseline-bFpgpG gnUgwP sc-hEsumM dhfAIY"
disabled={true}>
Inspire the lazy disabled
</a>
</span>
`;

99
packages/ui-toolkit/.snapguidist/__snapshots__/Card-12.snap Normal file
View File

@ -0,0 +1,99 @@
exports[`Card-12 1`] = `
<div
className="baseline-jXLmkH gzkHKC sc-kvZOFW jRrOBA"
disabled={true}
name="card">
<div
className="baseline-kqfNug fnozEx sc-dNLxif ilGAh sc-kvZOFW gVvtRM"
disabled={true}
name="card-header">
<div
className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
disabled={true}
name="card-view">
<div
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm dfKoXL"
name="card-meta">
<div
className="sc-gqjmRU cVsyzo">
<div
className="baseline-hUQnaN htCKZi title__Container-KOVlp dKgaEf"
disabled={true}
name="card-title">
<span
className="title__Span-iBHACD geUdxg">
Title
</span>
</div>
<div
className="baseline-ixBCQn fBryli sc-uJMKN jtRVeL title__Container-KOVlp dKgaEf"
disabled={true}
name="card-subtitle">
<span
className="subtitle__Span-gbjeXx itnInm">
Subtitle
</span>
</div>
<div
className="baseline-cgfWYh cQuXkt sc-jqCOkK iqDuPh title__Container-KOVlp dKgaEf"
disabled={true}
name="card-description">
<div
className="description__InnerDescription-gTxtRa hulDZp">
Description
</div>
</div>
</div>
</div>
</div>
<nav
className="sc-jnlKLf jvMgYz"
disabled={true}
name="card-options">
<button
className="baseline-iSnHlx gdVREx sc-fYxtnH byWRPT sc-bxivhb PEVyF"
disabled={true}>
<div
className="options__StyledContainer-kWJktR cxevEJ">
<div
className="options__StyledCircle-UMbaE hNWITc"
disabled={true} />
<div
className="options__StyledCircle-UMbaE hNWITc"
disabled={true} />
<div
className="options__StyledCircle-UMbaE hNWITc"
disabled={true} />
</div>
</button>
</nav>
</div>
<div
className="baseline-fRqHUu hfQLiT sc-iwsKbI fJJDmf"
disabled={true}
name="card-view">
<div
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
name="card-meta">
<div
className="sc-gqjmRU gxBTEj">
<div
className="baseline-cgfWYh cQuXkt sc-jqCOkK cqajkP title__Container-KOVlp fVrmFB"
disabled={true}
name="card-description">
<div
className="description__InnerDescription-gTxtRa eYtutw">
Description
</div>
</div>
</div>
</div>
<div
className="baseline-eLJKIU lEtHv sc-frDJqD bpSsmz"
disabled={true}
name="card-outlet">
Outlet
</div>
</div>
</div>
`;

200
packages/ui-toolkit/.snapguidist/__snapshots__/Card-14.snap Normal file
View File

@ -0,0 +1,200 @@
exports[`Card-14 1`] = `
<div
className="baseline-jXLmkH gzkHKC sc-kvZOFW jRrOBA"
disabled={true}
name="card">
<div
className="baseline-kqfNug fnozEx sc-dNLxif ilGAh sc-kvZOFW gVvtRM"
disabled={true}
name="card-header">
<div
className="baseline-fRqHUu hfQLiT sc-iwsKbI chhxXT"
disabled={true}
name="card-view">
<div
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm dfKoXL"
name="card-meta">
<div
className="sc-gqjmRU cVsyzo">
<div
className="baseline-hUQnaN htCKZi title__Container-KOVlp dKgaEf"
disabled={true}
name="card-title">
<span
className="title__Span-iBHACD geUdxg">
Title
</span>
</div>
<div
className="baseline-ixBCQn fBryli sc-uJMKN jtRVeL title__Container-KOVlp dKgaEf"
disabled={true}
name="card-subtitle">
<span
className="subtitle__Span-gbjeXx itnInm">
Subtitle
</span>
</div>
<div
className="baseline-cgfWYh cQuXkt sc-jqCOkK iqDuPh title__Container-KOVlp dKgaEf"
disabled={true}
name="card-description">
<div
className="description__InnerDescription-gTxtRa hulDZp">
Description
</div>
</div>
</div>
</div>
</div>
<nav
className="sc-jnlKLf jvMgYz"
disabled={true}
name="card-options">
<button
className="baseline-iSnHlx gdVREx sc-fYxtnH byWRPT sc-bxivhb PEVyF"
disabled={true}>
<div
className="options__StyledContainer-kWJktR cxevEJ">
<div
className="options__StyledCircle-UMbaE hNWITc"
disabled={true} />
<div
className="options__StyledCircle-UMbaE hNWITc"
disabled={true} />
<div
className="options__StyledCircle-UMbaE hNWITc"
disabled={true} />
</div>
</button>
</nav>
</div>
<div
className="baseline-iMHSlr gIqaSF sc-gZMcBi uLhlE sc-iwsKbI fJJDmf"
disabled={true}
name="card-view">
<div
className="baseline-jXLmkH gzkHKC sc-kvZOFW iFKHfX"
disabled={true}
name="card">
<div
className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
disabled={true}
name="card-view">
<div
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
name="card-meta">
<div
className="sc-gqjmRU gxBTEj">
<div
className="baseline-hUQnaN htCKZi title__Container-KOVlp fVrmFB"
disabled={true}
name="card-title">
<span
className="title__Span-iBHACD geUdxg">
Title
</span>
</div>
</div>
</div>
<div
className="baseline-eLJKIU lEtHv sc-frDJqD bpSsmz"
disabled={true}
name="card-outlet">
Outlet
</div>
</div>
</div>
<div
className="baseline-jXLmkH gzkHKC sc-kvZOFW iFKHfX"
disabled={true}
name="card">
<div
className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
disabled={true}
name="card-view">
<div
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
name="card-meta">
<div
className="sc-gqjmRU gxBTEj">
<div
className="baseline-hUQnaN htCKZi title__Container-KOVlp fVrmFB"
disabled={true}
name="card-title">
<span
className="title__Span-iBHACD geUdxg">
Title
</span>
</div>
<div
className="baseline-ixBCQn fBryli sc-uJMKN fZgWsF title__Container-KOVlp fVrmFB"
disabled={true}
name="card-subtitle">
<span
className="subtitle__Span-gbjeXx czORam">
Subtitle
</span>
</div>
<div
className="baseline-cgfWYh cQuXkt sc-jqCOkK cqajkP title__Container-KOVlp fVrmFB"
disabled={true}
name="card-description">
<div
className="description__InnerDescription-gTxtRa eYtutw">
Description
</div>
</div>
</div>
</div>
<div
className="baseline-eLJKIU lEtHv sc-frDJqD bpSsmz"
disabled={true}
name="card-outlet">
Outlet
</div>
</div>
</div>
<div
className="baseline-jXLmkH gzkHKC sc-kvZOFW duluUG"
disabled={true}
name="card">
<div
className="baseline-fRqHUu hfQLiT sc-iwsKbI dsjohD"
disabled={true}
name="card-view">
<div
className="baseline-eWWlxG jbEgPu Col__Col-hCQanm cCCACO"
name="card-meta">
<div
className="sc-gqjmRU gxBTEj">
<div
className="baseline-hUQnaN htCKZi title__Container-KOVlp fVrmFB"
disabled={true}
name="card-title">
<span
className="title__Span-iBHACD geUdxg">
Title
</span>
</div>
<div
className="baseline-ixBCQn fBryli sc-uJMKN fZgWsF title__Container-KOVlp fVrmFB"
disabled={true}
name="card-subtitle">
<span
className="subtitle__Span-gbjeXx czORam">
Subtitle
</span>
</div>
</div>
</div>
<div
className="baseline-eLJKIU lEtHv sc-frDJqD bpSsmz"
disabled={true}
name="card-outlet">
Outlet
</div>
</div>
</div>
</div>
</div>
`;

6
packages/ui-toolkit/src/anchor/index.js
View File

@ -12,7 +12,11 @@ const style = css`
${is('secondary')`
color: ${props => props.theme.white};
text-decoration: none;
`}
`};
${is('disabled')`
color: ${props => props.theme.grey};
`};
`;
const StyledAnchor = A.extend`

8
packages/ui-toolkit/src/anchor/usage.md
View File

@ -6,4 +6,10 @@
<span style={{'background-color': '#343434'}}>
<Anchor secondary>Inspire the lazy secondary</Anchor>
</span>
```
```
```
<span>
<Anchor secondary disabled>Inspire the lazy disabled</Anchor>
</span>
```

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

@ -43,17 +43,18 @@ const StyledCard = Row.extend`
/**
* @example ./usage.md
*/
const Card = ({ children, collapsed = false, headed = false, ...rest }) => {
const Card = ({ children, collapsed = false, headed = false, disabled = false, ...rest }) => {
const render = value => {
const newValue = {
fromHeader: (value || {}).fromHeader,
headed,
collapsed
collapsed,
disabled
};
return (
<Broadcast channel="card" value={newValue}>
<StyledCard name="card" collapsed={collapsed} headed={headed} {...rest}>
<StyledCard name="card" disabled={disabled} collapsed={collapsed} headed={headed} {...rest}>
{children}
</StyledCard>
</Broadcast>

11
packages/ui-toolkit/src/card/header.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import { Broadcast, Subscriber } from 'react-broadcast';
import remcalc from 'remcalc';
import PropTypes from 'prop-types';
import is from 'styled-is';
import Baseline from '../baseline';
import Card from './card';
@ -15,10 +16,18 @@ const StyledCard = Card.extend`
width: calc(100% + ${remcalc(2)});
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
${is('disabled')`
background-color: ${props => props.theme.disabled};
border-color: ${props => props.theme.grey};
color: ${props => props.theme.grey};
`};
`;
const Header = ({ children, ...rest }) => {
const render = value => {
const { disabled } = value;
const newValue = {
...value,
fromHeader: true
@ -26,7 +35,7 @@ const Header = ({ children, ...rest }) => {
return (
<Broadcast channel="card" value={newValue}>
<StyledCard name="card-header" collapsed headed {...rest}>
<StyledCard name="card-header" disabled={disabled} collapsed headed {...rest}>
{children}
</StyledCard>
</Broadcast>

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

@ -6,6 +6,7 @@ import Label from '../label';
const StyledLabel = Label.extend`
${props => (props.color === 'light' ? `color: ${props.theme.white};` : '')};
${props => (props.color === 'disabled' ? `color: ${props.theme.grey};` : '')};
margin-left: ${props => (props.iconPosition === 'left' ? remcalc(24) : 0)};
`;
@ -14,6 +15,7 @@ const StyledIconContainer = styled.div`
> svg {
${props => (props.color === 'light' ? `fill: ${props.theme.white};` : '')};
${props => (props.color === 'disabled' ? `fill: ${props.theme.grey};` : '')};
}
`;
@ -34,7 +36,7 @@ CardInfo.propTypes = {
label: PropTypes.string.isRequired,
icon: PropTypes.node.isRequired,
iconPosition: PropTypes.string,
color: PropTypes.oneOf(['dark', 'light'])
color: PropTypes.oneOf(['dark', 'light', 'disabled'])
};
export default CardInfo;

19
packages/ui-toolkit/src/card/options.js
View File

@ -16,6 +16,10 @@ const StyledNav = Nav.extend`
${is('fromHeader')`
border-left-color: ${props => props.theme.primaryDesaturatedActive};
`};
${is('disabled')`
border-left-color: ${props => props.theme.grey};
`};
`;
const StyledButton = Button.extend`
@ -68,21 +72,26 @@ const StyledCircle = styled.div`
${is('secondary')`
background-color: ${props => props.theme.secondary};
`};
${is('disabled')`
background-color: ${props => props.theme.grey};
`};
`;
const Options = ({ children, ...rest }) => {
const render = ({ fromHeader = false, collapsed = false }) =>
<StyledNav fromHeader={fromHeader} name="card-options">
const render = ({ fromHeader = false, collapsed = false, disabled = false }) =>
<StyledNav disabled={disabled} fromHeader={fromHeader} name="card-options">
<StyledButton
secondary={!fromHeader}
collapsed={collapsed}
disabled={disabled}
rect
{...rest}
>
<StyledContainer>
<StyledCircle secondary={!fromHeader} />
<StyledCircle secondary={!fromHeader} />
<StyledCircle secondary={!fromHeader} />
<StyledCircle disabled={disabled} secondary={!fromHeader} />
<StyledCircle disabled={disabled} secondary={!fromHeader} />
<StyledCircle disabled={disabled} secondary={!fromHeader} />
</StyledContainer>
</StyledButton>
</StyledNav>;

8
packages/ui-toolkit/src/card/outlet.js
View File

@ -19,11 +19,15 @@ const StyledCol = Col.extend`
${is('collapsed')`
display: none;
`};
${is('disabled')`
color: ${props => props.theme.grey};
`};
`;
const Outlet = ({ children, ...rest }) => {
const render = ({ collapsed = false }) =>
<StyledCol name="card-outlet" collapsed={collapsed} xs={6} {...rest}>
const render = ({ disabled = false, collapsed = false }) =>
<StyledCol name="card-outlet" disabled={disabled} collapsed={collapsed} xs={6} {...rest}>
{children}
</StyledCol>;

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

@ -27,6 +27,10 @@ const Span = styled.span`
${is('fromHeader')`
color: ${props => props.theme.white};
`};
${is('disabled')`
color: ${props => props.theme.grey};
`};
`;
const StyledTitle = Title.extend`
@ -43,11 +47,12 @@ const StyledTitle = Title.extend`
`;
const Subtitle = ({ children, ...props }) => {
const render = ({ fromHeader = false, collapsed = false }) =>
const render = ({ disabled = false, fromHeader = false, collapsed = false }) =>
<StyledTitle
name="card-subtitle"
fromHeader={fromHeader}
collapsed={collapsed}
disabled={disabled}
{...props}
>
<Span fromHeader={fromHeader} collapsed={collapsed}>

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

@ -29,6 +29,10 @@ const Container = styled.div`
color: ${props => props.theme.white};
`};
${is('disabled')`
color: ${props => props.theme.grey};
`};
${is('collapsed')`
flex-grow: 0;
flex-direction: column;
@ -55,10 +59,11 @@ const Title = ({ children, ...rest }) => {
</Span>
: children;
const render = ({ collapsed = false, fromHeader = false }) =>
const render = ({ collapsed = false, disabled = false, fromHeader = false }) =>
<Container
collapsed={collapsed}
fromHeader={fromHeader}
disabled={disabled}
name="card-title"
xs={collapsed ? 6 : 12}
{...rest}

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

@ -201,3 +201,92 @@ const {
</CardGroupView>
</Card>
```
#### `disabled`
```
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
} = require('./');
<Card headed disabled>
<CardHeader>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardView>
<CardMeta>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
```
#### group and `disabled`
```
const {
CardDescription,
CardHeader,
CardMeta,
CardOptions,
CardOutlet,
CardSubTitle,
CardTitle,
CardView,
CardGroupView
} = require('./');
<Card headed disabled>
<CardHeader>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOptions />
</CardHeader>
<CardGroupView>
<Card flat disabled>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
<Card flat disabled>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
<CardDescription>Description</CardDescription>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
<Card flat stacked disabled>
<CardView>
<CardMeta>
<CardTitle>Title</CardTitle>
<CardSubTitle>Subtitle</CardSubTitle>
</CardMeta>
<CardOutlet>Outlet</CardOutlet>
</CardView>
</Card>
</CardGroupView>
</Card>
```