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')` ${is('secondary')`
color: ${props => props.theme.white}; color: ${props => props.theme.white};
text-decoration: none; text-decoration: none;
`} `};
${is('disabled')`
color: ${props => props.theme.grey};
`};
`; `;
const StyledAnchor = A.extend` const StyledAnchor = A.extend`

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

@ -6,4 +6,10 @@
<span style={{'background-color': '#343434'}}> <span style={{'background-color': '#343434'}}>
<Anchor secondary>Inspire the lazy secondary</Anchor> <Anchor secondary>Inspire the lazy secondary</Anchor>
</span> </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 * @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 render = value => {
const newValue = { const newValue = {
fromHeader: (value || {}).fromHeader, fromHeader: (value || {}).fromHeader,
headed, headed,
collapsed collapsed,
disabled
}; };
return ( return (
<Broadcast channel="card" value={newValue}> <Broadcast channel="card" value={newValue}>
<StyledCard name="card" collapsed={collapsed} headed={headed} {...rest}> <StyledCard name="card" disabled={disabled} collapsed={collapsed} headed={headed} {...rest}>
{children} {children}
</StyledCard> </StyledCard>
</Broadcast> </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 { Broadcast, Subscriber } from 'react-broadcast';
import remcalc from 'remcalc'; import remcalc from 'remcalc';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import is from 'styled-is';
import Baseline from '../baseline'; import Baseline from '../baseline';
import Card from './card'; import Card from './card';
@ -15,10 +16,18 @@ const StyledCard = Card.extend`
width: calc(100% + ${remcalc(2)}); width: calc(100% + ${remcalc(2)});
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)}; 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 Header = ({ children, ...rest }) => {
const render = value => { const render = value => {
const { disabled } = value;
const newValue = { const newValue = {
...value, ...value,
fromHeader: true fromHeader: true
@ -26,7 +35,7 @@ const Header = ({ children, ...rest }) => {
return ( return (
<Broadcast channel="card" value={newValue}> <Broadcast channel="card" value={newValue}>
<StyledCard name="card-header" collapsed headed {...rest}> <StyledCard name="card-header" disabled={disabled} collapsed headed {...rest}>
{children} {children}
</StyledCard> </StyledCard>
</Broadcast> </Broadcast>

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

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

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

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

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

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

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

@ -27,6 +27,10 @@ const Span = styled.span`
${is('fromHeader')` ${is('fromHeader')`
color: ${props => props.theme.white}; color: ${props => props.theme.white};
`}; `};
${is('disabled')`
color: ${props => props.theme.grey};
`};
`; `;
const StyledTitle = Title.extend` const StyledTitle = Title.extend`
@ -43,11 +47,12 @@ const StyledTitle = Title.extend`
`; `;
const Subtitle = ({ children, ...props }) => { const Subtitle = ({ children, ...props }) => {
const render = ({ fromHeader = false, collapsed = false }) => const render = ({ disabled = false, fromHeader = false, collapsed = false }) =>
<StyledTitle <StyledTitle
name="card-subtitle" name="card-subtitle"
fromHeader={fromHeader} fromHeader={fromHeader}
collapsed={collapsed} collapsed={collapsed}
disabled={disabled}
{...props} {...props}
> >
<Span fromHeader={fromHeader} collapsed={collapsed}> <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}; color: ${props => props.theme.white};
`}; `};
${is('disabled')`
color: ${props => props.theme.grey};
`};
${is('collapsed')` ${is('collapsed')`
flex-grow: 0; flex-grow: 0;
flex-direction: column; flex-direction: column;
@ -55,10 +59,11 @@ const Title = ({ children, ...rest }) => {
</Span> </Span>
: children; : children;
const render = ({ collapsed = false, fromHeader = false }) => const render = ({ collapsed = false, disabled = false, fromHeader = false }) =>
<Container <Container
collapsed={collapsed} collapsed={collapsed}
fromHeader={fromHeader} fromHeader={fromHeader}
disabled={disabled}
name="card-title" name="card-title"
xs={collapsed ? 6 : 12} xs={collapsed ? 6 : 12}
{...rest} {...rest}

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

@ -201,3 +201,92 @@ const {
</CardGroupView> </CardGroupView>
</Card> </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>
```