diff --git a/packages/ui-toolkit/src/boxes/index.js b/packages/ui-toolkit/src/boxes/index.js index f0f27dfa..4530d597 100644 --- a/packages/ui-toolkit/src/boxes/index.js +++ b/packages/ui-toolkit/src/boxes/index.js @@ -2,8 +2,8 @@ import { css } from 'styled-components'; import remcalc from 'remcalc'; export const borderRadius = remcalc(4); -export const bottomShaddow = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`; -export const bottomShaddowDarker = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`; +export const bottomShadow = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`; +export const bottomShadowDarker = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`; export const insetShaddow = `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`; export const tooltipShadow = `0 ${remcalc(2)} ${remcalc(6)} ${remcalc( 1 diff --git a/packages/ui-toolkit/src/card/card.js b/packages/ui-toolkit/src/card/card.js index 93dba8c9..23a6555c 100644 --- a/packages/ui-toolkit/src/card/card.js +++ b/packages/ui-toolkit/src/card/card.js @@ -1,7 +1,7 @@ import { Broadcast, Subscriber } from 'joy-react-broadcast'; import Baseline from '../baseline'; import paperEffect from '../paper-effect'; -import { bottomShaddow, bottomShaddowDarker } from '../boxes'; +import { bottomShadow, bottomShadowDarker } from '../boxes'; import remcalc from 'remcalc'; import is, { isNot } from 'styled-is'; import { Row } from 'react-styled-flexboxgrid'; @@ -15,7 +15,7 @@ const StyledCard = Row.extend` margin-bottom: ${remcalc(10)}; border: ${remcalc(1)} solid ${props => props.theme.grey}; background-color: ${props => props.theme.white}; - box-shadow: ${bottomShaddow}; + box-shadow: ${bottomShadow}; flex-direction: column; margin-right: ${remcalc(0)}; @@ -28,7 +28,7 @@ const StyledCard = Row.extend` `}; ${is('collapsed', 'headed')` - box-shadow: ${bottomShaddowDarker}; + box-shadow: ${bottomShadowDarker}; `}; ${is('flat')` diff --git a/packages/ui-toolkit/src/form/toggle.js b/packages/ui-toolkit/src/form/toggle.js index 6e13f4e4..c889fef9 100644 --- a/packages/ui-toolkit/src/form/toggle.js +++ b/packages/ui-toolkit/src/form/toggle.js @@ -1,13 +1,13 @@ import React from 'react'; import styled from 'styled-components'; import { Input } from 'normalized-styled-components'; +import { Subscriber } from 'joy-react-broadcast'; import remcalc from 'remcalc'; import unitcalc from 'unitcalc'; import rndId from 'rnd-id'; import is from 'styled-is'; -import { Subscriber } from 'joy-react-broadcast'; -import { bottomShaddow, border, borderRadius } from '../boxes'; +import { bottomShadow, border, borderRadius } from '../boxes'; import Baseline from '../baseline'; import BaseInput from './base/input'; import typography from '../typography'; @@ -16,36 +16,40 @@ const StyledInput = Input.extend` display: none; &:checked + label { - border-radius: ${remcalc(4)}; - background-color: ${props => props.theme.white}; - box-shadow: ${bottomShaddow}; color: ${props => props.theme.secondary}; + font-weight: bold; + width: 100%; + position: relative; } &:selected + label { - border-radius: ${remcalc(4)}; - background-color: ${props => props.theme.white}; - box-shadow: ${bottomShaddow}; color: ${props => props.theme.secondary}; + font-weight: bold; + width: 100%; } &:disabled + label { color: ${props => props.theme.grey}; + + & + .background { + display: none; + } } `; const Label = styled.label` ${typography.normal}; - position: absolute; box-sizing: border-box; - width: ${unitcalc(20)}; - height: ${unitcalc(8)}; - top: 0; - left: 0; - text-align: center; - padding-top: ${unitcalc(2)}; + height: 100%; + display: flex; + align-items: center; + justify-content: center; color: ${props => props.theme.text}; + cursor: pointer; + user-select: none; + position: relative; + z-index: 1; ${is('error')` border-color: ${props => props.theme.redDark} @@ -74,24 +78,49 @@ const InputContainer = styled.div` const Li = BaseInput(styled.li` display: inline-block; list-style-type: none; - vertical-align: text-bottom; - border-top: ${border.unchecked}; - border-bottom: ${border.unchecked}; - border-left: ${border.unchecked}; - &:first-of-type { - border-radius: ${borderRadius} 0 0 ${borderRadius}; - } - &:last-of-type { - border-radius: 0 ${borderRadius} ${borderRadius} 0; - border-right: ${border.unchecked}; - } + box-sizing: border-box; `); +const Background = styled.span` + border-right: ${border.unchecked}; + background-color: ${props => props.theme.white}; + display: block; + border-radius: ${borderRadius}; + position: absolute; + height: 100%; + width: 100%; + z-index: 0; + transition: ${props => props.theme.transition}; + border: ${props => `${remcalc(1)} solid ${props.theme.grey}`}; + top: ${remcalc(-1)}; +`; + const Ul = styled.ul` display: inline-block; margin: 0; padding: 0; - box-shadow: ${bottomShaddow}; + height: ${remcalc(48)}; + display: inline-flex; + align-items: flex-end; + background-color: ${props => props.theme.disabled}; + border-radius: ${borderRadius}; + border: ${border.unchecked}; + position: relative; + margin-top: ${unitcalc(1)}; + + li:first-of-type { + input + label + .background { + transform: translateX(calc(100% - ${remcalc(3)})); + } + + input:checked + label + .background { + transform: translateX(${remcalc(-1)}); + } + } + + li:last-of-type .background { + display: none; + } `; const BaseToggle = BaseInput(({ children, ...rest }) => { @@ -100,13 +129,7 @@ const BaseToggle = BaseInput(({ children, ...rest }) => { return (
  • - + +
    • ); diff --git a/packages/ui-toolkit/src/form/usage-toggle.md b/packages/ui-toolkit/src/form/usage-toggle.md index a4e91c4f..608b3e57 100644 --- a/packages/ui-toolkit/src/form/usage-toggle.md +++ b/packages/ui-toolkit/src/form/usage-toggle.md @@ -3,23 +3,7 @@ const { ToggleList } = require('./toggle'); const FormGroup = require('./group').default; const Legend = require('./legend').default; - - Who killed the radio star? - - Video - TV - - -``` - -#### selected - -``` -const { ToggleList } = require('./toggle'); -const FormGroup = require('./group').default; -const Legend = require('./legend').default; - - + Who killed the radio star? Video @@ -28,14 +12,14 @@ const Legend = require('./legend').default; ``` -#### `disabled` +#### Toggle > Disabled ``` const { ToggleList } = require('./toggle'); const FormGroup = require('./group').default; const Legend = require('./legend').default; - + Who killed the radio star? Video diff --git a/packages/ui-toolkit/src/icon-button/usage.md b/packages/ui-toolkit/src/icon-button/usage.md deleted file mode 100644 index c8ff21e9..00000000 --- a/packages/ui-toolkit/src/icon-button/usage.md +++ /dev/null @@ -1,7 +0,0 @@ -``` -const CloseIcon = require('../icons/close').default; - - - - -``` diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js index 04679490..537e37c4 100644 --- a/packages/ui-toolkit/src/index.js +++ b/packages/ui-toolkit/src/index.js @@ -38,8 +38,8 @@ export { export { borderRadius, - bottomShaddow, - bottomShaddowDarker, + bottomShadow, + bottomShadowDarker, insetShaddow, tooltipShadow, border diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js index 6dd06151..241d49ef 100644 --- a/packages/ui-toolkit/src/message/index.js +++ b/packages/ui-toolkit/src/message/index.js @@ -8,13 +8,13 @@ import remcalc from 'remcalc'; import { H4 } from '../text/headings'; import P from '../text/p'; import CloseButton from '../close-button'; -import { border, bottomShaddow } from '../boxes'; +import { border, bottomShadow } from '../boxes'; const Container = styled.div` position: relative; margin-bottom: ${unitcalc(2)}; background-color: ${props => props.theme.white}; - box-shadow: ${bottomShaddow}; + box-shadow: ${bottomShadow}; border: ${border.confirmed}; width: 100%; display: flex; diff --git a/packages/ui-toolkit/src/theme/index.js b/packages/ui-toolkit/src/theme/index.js index 8588c23f..8f2ae0bd 100644 --- a/packages/ui-toolkit/src/theme/index.js +++ b/packages/ui-toolkit/src/theme/index.js @@ -105,6 +105,8 @@ export const seperator = '#D9DEF3'; */ export const topologyBackground = base.secondaryActive; +export const transition = 'all 200ms ease-out'; + export default { ...base, fonts, @@ -113,5 +115,6 @@ export default { inputError, inputWarning, topologyBackground, - brandBackground + brandBackground, + transition }; diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js index ca8b3abe..e1afef63 100644 --- a/packages/ui-toolkit/styleguide.config.js +++ b/packages/ui-toolkit/styleguide.config.js @@ -97,7 +97,6 @@ module.exports = { 'src/card/card.js', 'src/form/checkbox.js', 'src/header/index.js', - 'src/icon-button/index.js', 'src/icons/icons.js', 'src/form/input.js', 'src/message/index.js', @@ -105,10 +104,8 @@ module.exports = { 'src/form/radio.js', 'src/section-list/index.js', 'src/form/select.js', - 'src/slider/index.js', 'src/form/toggle.js', - 'src/topology/index.js', - 'src/form/number-input.js' + 'src/topology/index.js' ] } ], diff --git a/packages/ui-toolkit/test/__image_snapshots__/__diff_output__/cards-spec-js-visual-regressions-card-headed-1-diff.png b/packages/ui-toolkit/test/__image_snapshots__/__diff_output__/cards-spec-js-visual-regressions-card-headed-1-diff.png new file mode 100644 index 00000000..db38c69d Binary files /dev/null and b/packages/ui-toolkit/test/__image_snapshots__/__diff_output__/cards-spec-js-visual-regressions-card-headed-1-diff.png differ