From 8a0a0a44574cfb766b367f89d272dbe05f5f145b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Ramos?= Date: Thu, 2 Nov 2017 15:18:25 +0000 Subject: [PATCH] feat(ui-toolkit): abstract view-container in the Header implementation * feat(ui-toolkit): abstract view-container in the Header implementation * fix(ui-toolkit): import react in triton-beta logo this fixes a missing import error because svgs are compiled to react components * style(ui-toolkit): convert px leftovers --- .../src/components/navigation/header.js | 39 ++++++------ packages/ui-toolkit/src/form/base/toggle.js | 4 +- packages/ui-toolkit/src/header/brand.js | 4 +- .../ui-toolkit/src/header/header-wrapper.js | 11 ---- packages/ui-toolkit/src/header/index.js | 22 +++++-- packages/ui-toolkit/src/header/item.js | 2 +- packages/ui-toolkit/src/header/nav.js | 61 +++++++++++++------ packages/ui-toolkit/src/header/usage.md | 19 +++--- packages/ui-toolkit/src/icons/triton-beta.js | 3 + packages/ui-toolkit/src/index.js | 2 +- .../react-input-range/input-range/label.jsx | 2 +- .../react-input-range/input-range/slider.jsx | 4 +- packages/ui-toolkit/src/theme/colors.js | 10 +-- 13 files changed, 102 insertions(+), 81 deletions(-) delete mode 100644 packages/ui-toolkit/src/header/header-wrapper.js diff --git a/packages/my-joy-beta/src/components/navigation/header.js b/packages/my-joy-beta/src/components/navigation/header.js index f7ecb6b9..a1e6ccb2 100644 --- a/packages/my-joy-beta/src/components/navigation/header.js +++ b/packages/my-joy-beta/src/components/navigation/header.js @@ -1,37 +1,34 @@ import React from 'react'; -import { Link } from 'react-router-dom'; import { Header, HeaderBrand, - HeaderWrapper, TritonBetaIcon, DataCenterIconLight, UserIconLight, HeaderNav, + HeaderNavAnchor, HeaderItem } from 'joyent-ui-toolkit'; export default () => (
- - - - - - - -
  • - Compute -
    • -     - Return to existing portal - - eu-east-1 - - - Nicola - -     + + + + + + +
  • + Compute +
    • +     + Return to existing portal + + eu-east-1 + + + Nicola +
    ); diff --git a/packages/ui-toolkit/src/form/base/toggle.js b/packages/ui-toolkit/src/form/base/toggle.js index 05e25df3..365dd4dc 100644 --- a/packages/ui-toolkit/src/form/base/toggle.js +++ b/packages/ui-toolkit/src/form/base/toggle.js @@ -40,11 +40,11 @@ const Label = styled.label` background-color: rgb(255, 255, 255); box-shadow: none; - border: 1px solid ${props => props.theme.grey}; + border: ${remcalc(1)} solid ${props => props.theme.grey}; cursor: pointer; ${is('checkbox')` - border-radius: 4px; + border-radius: ${remcalc(4)}; width: ${remcalc(18)}; height: ${remcalc(18)}; `}; diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js index 73b3fb7a..b11565bd 100644 --- a/packages/ui-toolkit/src/header/brand.js +++ b/packages/ui-toolkit/src/header/brand.js @@ -20,9 +20,7 @@ const Brand = H2.extend` const Box = styled.div` align-self: stretch; order: 0; - width: 150px; - - padding: ${remcalc(11)} 0; + width: ${remcalc(150)}; `; export default ({ children, ...rest }) => ( diff --git a/packages/ui-toolkit/src/header/header-wrapper.js b/packages/ui-toolkit/src/header/header-wrapper.js deleted file mode 100644 index 34340c12..00000000 --- a/packages/ui-toolkit/src/header/header-wrapper.js +++ /dev/null @@ -1,11 +0,0 @@ -import { ViewContainer } from '../layout'; -import remcalc from 'remcalc'; - -export default ViewContainer.extend` - display: flex; - flex-wrap: nowrap; - align-content: stretch; - align-items: stretch; - max-height: ${remcalc(53)}; - min-height: ${remcalc(53)}; -`; diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js index 362c6324..f53f6364 100644 --- a/packages/ui-toolkit/src/header/index.js +++ b/packages/ui-toolkit/src/header/index.js @@ -2,6 +2,17 @@ import React from 'react'; import styled from 'styled-components'; import remcalc from 'remcalc'; +import { ViewContainer } from '../layout'; + +const Container = ViewContainer.extend` + display: flex; + flex-wrap: nowrap; + align-content: stretch; + align-items: stretch; + max-height: ${remcalc(53)}; + min-height: ${remcalc(53)}; +`; + const Header = styled.div` display: flex; flex-direction: row; @@ -18,9 +29,12 @@ const Header = styled.div` /** * @example ./usage.md */ -export default ({ children, ...rest }) =>
    {children}
    ; +export default ({ children, ...rest }) => ( +
    + {children} +
    +); -export { default as HeaderBrand } from './brand'; export { default as HeaderItem } from './item'; -export { default as HeaderNav } from './nav'; -export { default as HeaderWrapper } from './header-wrapper'; +export { default as HeaderBrand } from './brand'; +export { default as HeaderNav, Anchor as HeaderNavAnchor } from './nav'; diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js index dcff658b..2768adaa 100644 --- a/packages/ui-toolkit/src/header/item.js +++ b/packages/ui-toolkit/src/header/item.js @@ -28,7 +28,7 @@ const Box = styled.section` } &:not(:last-of-type) { - border-right: 1px solid rgba(255, 255, 255, 0.15); + border-right: ${remcalc(1)} solid rgba(255, 255, 255, 0.15); } &:first-of-type { diff --git a/packages/ui-toolkit/src/header/nav.js b/packages/ui-toolkit/src/header/nav.js index 7b81c2f7..c017b100 100644 --- a/packages/ui-toolkit/src/header/nav.js +++ b/packages/ui-toolkit/src/header/nav.js @@ -1,32 +1,53 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; +import { Link as BaseLink } from 'react-router-dom'; +import { A } from 'normalized-styled-components'; import remcalc from 'remcalc'; -const UL = styled.ul` +const Ul = styled.ul` padding: 0; margin: 0; display: flex; list-style: none; +`; - a { - padding: ${remcalc(15)}; - line-height: ${remcalc(24)}; - font-size: ${remcalc(15)}; - color: ${props => props.theme.white}; - text-decoration: none; - display: flex; - align-items: center; - justify-content: center; - transition: all 200ms ease; - max-height: ${remcalc(53)}; - min-height: ${remcalc(53)}; - box-sizing: border-box; +const style = css` + padding: ${remcalc(15)}; + line-height: ${remcalc(24)}; + font-size: ${remcalc(15)}; + color: ${props => props.theme.white}; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + transition: all 200ms ease; + max-height: ${remcalc(53)}; + min-height: ${remcalc(53)}; + box-sizing: border-box; - &:hover, - &.active { - background: rgba(255, 255, 255, 0.15); - } + &:hover, + &.active { + background: rgba(255, 255, 255, 0.15); } `; -export default ({ children, ...rest }) => ; +const StyledAnchor = A.extend` + /* trick prettier */ + ${style}; +`; + +const StyledLink = styled(BaseLink)` + /* trick prettier */ + ${style}; +`; + +export const Anchor = ({ children, ...rest }) => { + const { to = '' } = rest; + + const Views = [() => (to ? StyledLink : null), () => StyledAnchor]; + const View = Views.reduce((sel, view) => (sel ? sel : view()), null); + + return {children}; +}; + +export default ({ children, ...rest }) => ; diff --git a/packages/ui-toolkit/src/header/usage.md b/packages/ui-toolkit/src/header/usage.md index e36dc07e..8a0230d8 100644 --- a/packages/ui-toolkit/src/header/usage.md +++ b/packages/ui-toolkit/src/header/usage.md @@ -2,17 +2,16 @@ const React = require('react'); const { default: HeaderBrand } = require('./brand.js'); const { default: HeaderItem } = require('./item.js'); +const { default: HeaderNav, HeaderNavAnchor } = require('./nav.js');
    - - - -
  • Compute
    • -
  • Network
    • -     - Return to existing portal - eu-east-1 - Nicola -     + + +
  • Compute
    • +
  • Network
    • +     + Return to existing portal + eu-east-1 + Nicola
    ``` diff --git a/packages/ui-toolkit/src/icons/triton-beta.js b/packages/ui-toolkit/src/icons/triton-beta.js index 8a6098dc..c56c8c1c 100644 --- a/packages/ui-toolkit/src/icons/triton-beta.js +++ b/packages/ui-toolkit/src/icons/triton-beta.js @@ -1,3 +1,6 @@ +// eslint-disable-next-line no-unused-vars +import React from 'react'; + import TritonBetaIcon from './svg/triton_beta.svg'; export default TritonBetaIcon; diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js index ed6ed07c..aa92d513 100644 --- a/packages/ui-toolkit/src/index.js +++ b/packages/ui-toolkit/src/index.js @@ -83,7 +83,7 @@ export { HeaderBrand, HeaderItem, HeaderNav, - HeaderWrapper + HeaderNavAnchor } from './header'; export { diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx index ec8c6f7d..58cba1dc 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/label.jsx @@ -9,7 +9,7 @@ const Span = styled.span` font-size: ${remcalc(13)}; position: absolute; top: ${remcalc(14)}; - right: ${props => (props.type === 'max' ? '1px' : 'auto')}; + right: ${props => (props.type === 'max' ? remcalc(1) : 'auto')}; color: ${props => (props.greyed ? theme.grey : theme.secondary)}; `; diff --git a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx index 511306d1..c8eef3af 100755 --- a/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx +++ b/packages/ui-toolkit/src/slider/react-input-range/input-range/slider.jsx @@ -9,7 +9,7 @@ import theme from '../../../theme'; export const SliderStyled = styled.div` appearance: none; background: ${theme.white}; - border: 2px solid ${theme.grey}; + border: ${remcalc(2)} solid ${theme.grey}; border-radius: 50%; cursor: pointer; display: block; @@ -26,7 +26,7 @@ export const SliderStyled = styled.div` } &::focus { - box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2); + box-shadow: 0 0 0 ${remcalc(5)} rgba(63, 81, 181, 0.2); } `; diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js index 2e590ad2..a547792e 100644 --- a/packages/ui-toolkit/src/theme/colors.js +++ b/packages/ui-toolkit/src/theme/colors.js @@ -12,7 +12,7 @@ const Box = styled.div` const Data = styled.td` padding: ${remcalc(18)} 0; - border-bottom: 1px solid ${theme.grey}; + border-bottom: ${remcalc(1)} solid ${theme.grey}; max-width: ${remcalc(250)}; `; @@ -23,8 +23,8 @@ const Table = styled.table` const InnerBox = styled.div` margin-top: ${remcalc(6)}; - line-height: 24px; - font-size: 16px; + line-height: ${remcalc(24)}; + font-size: ${remcalc(16)}; color: ${theme.text}; `; @@ -33,8 +33,8 @@ const Preview = styled.div` background: ${props => props.hex}; width: ${remcalc(96)}; height: ${remcalc(96)}; - border: 1px solid ${theme.grey}; - box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05); + border: ${remcalc(1)} solid ${theme.grey}; + box-shadow: 0 ${remcalc(2)} ${remcalc(1)} rgba(0, 0, 0, 0.05); `; const Paragraph = P.extend`