diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-2.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-2.snap new file mode 100644 index 00000000..25b8397a --- /dev/null +++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Anchor-2.snap @@ -0,0 +1,14 @@ +exports[`Anchor-2 1`] = ` + + + Inspire the lazy disabled + + +`; diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-12.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-12.snap new file mode 100644 index 00000000..0099cbee --- /dev/null +++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-12.snap @@ -0,0 +1,99 @@ +exports[`Card-12 1`] = ` +
+
+
+
+
+
+ + Title + +
+
+ + Subtitle + +
+
+
+ Description +
+
+
+
+
+ +
+
+
+
+
+
+ Description +
+
+
+
+
+ Outlet +
+
+
+`; diff --git a/packages/ui-toolkit/.snapguidist/__snapshots__/Card-14.snap b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-14.snap new file mode 100644 index 00000000..31863ae9 --- /dev/null +++ b/packages/ui-toolkit/.snapguidist/__snapshots__/Card-14.snap @@ -0,0 +1,200 @@ +exports[`Card-14 1`] = ` +
+
+
+
+
+
+ + Title + +
+
+ + Subtitle + +
+
+
+ Description +
+
+
+
+
+ +
+
+
+
+
+
+
+ + Title + +
+
+
+
+ Outlet +
+
+
+
+
+
+
+
+ + Title + +
+
+ + Subtitle + +
+
+
+ Description +
+
+
+
+
+ Outlet +
+
+
+
+
+
+
+
+ + Title + +
+
+ + Subtitle + +
+
+
+
+ Outlet +
+
+
+
+
+`; diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js index a2459b09..e58e220c 100644 --- a/packages/ui-toolkit/src/anchor/index.js +++ b/packages/ui-toolkit/src/anchor/index.js @@ -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` diff --git a/packages/ui-toolkit/src/anchor/usage.md b/packages/ui-toolkit/src/anchor/usage.md index 9a326a60..a7517b84 100644 --- a/packages/ui-toolkit/src/anchor/usage.md +++ b/packages/ui-toolkit/src/anchor/usage.md @@ -6,4 +6,10 @@ Inspire the lazy secondary -``` \ No newline at end of file +``` + +``` + + Inspire the lazy disabled + +``` diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js index 3aa45070..b2f058ea 100644 --- a/packages/ui-toolkit/src/card/card.js +++ b/packages/ui-toolkit/src/card/card.js @@ -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 ( - + {children} diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js index ea0c8d6b..ff37f44f 100644 --- a/packages/ui-toolkit/src/card/header.js +++ b/packages/ui-toolkit/src/card/header.js @@ -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 ( - + {children} diff --git a/packages/ui-toolkit/src/card/info.js b/packages/ui-toolkit/src/card/info.js index c114bbd6..a8879b0c 100644 --- a/packages/ui-toolkit/src/card/info.js +++ b/packages/ui-toolkit/src/card/info.js @@ -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; diff --git a/packages/ui-toolkit/src/card/options.js b/packages/ui-toolkit/src/card/options.js index 50637a1b..5b9a3d03 100644 --- a/packages/ui-toolkit/src/card/options.js +++ b/packages/ui-toolkit/src/card/options.js @@ -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 }) => - + const render = ({ fromHeader = false, collapsed = false, disabled = false }) => + - - - + + + ; diff --git a/packages/ui-toolkit/src/card/outlet.js b/packages/ui-toolkit/src/card/outlet.js index bf4433ae..3f3576fc 100644 --- a/packages/ui-toolkit/src/card/outlet.js +++ b/packages/ui-toolkit/src/card/outlet.js @@ -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 }) => - + const render = ({ disabled = false, collapsed = false }) => + {children} ; diff --git a/packages/ui-toolkit/src/card/subtitle.js b/packages/ui-toolkit/src/card/subtitle.js index 76f216d6..fa0ad40a 100644 --- a/packages/ui-toolkit/src/card/subtitle.js +++ b/packages/ui-toolkit/src/card/subtitle.js @@ -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 }) => diff --git a/packages/ui-toolkit/src/card/title.js b/packages/ui-toolkit/src/card/title.js index 094cfb53..bf051727 100644 --- a/packages/ui-toolkit/src/card/title.js +++ b/packages/ui-toolkit/src/card/title.js @@ -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 }) => { : children; - const render = ({ collapsed = false, fromHeader = false }) => + const render = ({ collapsed = false, disabled = false, fromHeader = false }) => ``` + +#### `disabled` + +``` +const { + CardDescription, + CardHeader, + CardMeta, + CardOptions, + CardOutlet, + CardSubTitle, + CardTitle, + CardView, + CardGroupView +} = require('./'); + + + + + Title + Subtitle + Description + + + + + + Description + + Outlet + + +``` + +#### group and `disabled` + +``` +const { + CardDescription, + CardHeader, + CardMeta, + CardOptions, + CardOutlet, + CardSubTitle, + CardTitle, + CardView, + CardGroupView +} = require('./'); + + + + + Title + Subtitle + Description + + + + + + + + Title + + Outlet + + + + + + Title + Subtitle + Description + + Outlet + + + + + + Title + Subtitle + + Outlet + + + + +``` \ No newline at end of file