diff --git a/packages/my-joy-beta/src/components/navigation/header.js b/packages/my-joy-beta/src/components/navigation/header.js index 4a00634a..f7ecb6b9 100644 --- a/packages/my-joy-beta/src/components/navigation/header.js +++ b/packages/my-joy-beta/src/components/navigation/header.js @@ -4,18 +4,34 @@ import { Link } from 'react-router-dom'; import { Header, HeaderBrand, - ViewContainer, - TritonIcon + HeaderWrapper, + TritonBetaIcon, + DataCenterIconLight, + UserIconLight, + HeaderNav, + HeaderItem } from 'joyent-ui-toolkit'; export default () => (
- - + + - + - + +
  • + Compute +
    • +     + Return to existing portal + + eu-east-1 + + + Nicola + +
    ); diff --git a/packages/ui-toolkit/etc/style.css b/packages/ui-toolkit/etc/style.css index 4c8eebea..9a3496b5 100644 --- a/packages/ui-toolkit/etc/style.css +++ b/packages/ui-toolkit/etc/style.css @@ -30,12 +30,12 @@ p.rsg--p-32 { padding-bottom: 36px; } -.rsg--sidebar-4 a.rsg--link-73 { +.rsg--sidebar-4 a.rsg--link-72 { color: #fff; font-size: 15px; } -.rsg--sidebar-4 a.rsg--heading-72 { +.rsg--sidebar-4 a.rsg--heading-71 { font-size: 17px; margin-bottom: 12px; display: block; @@ -46,15 +46,15 @@ p.rsg--p-32 { padding: 0; } -.rsg--sidebar-4 .rsg--search-67 { +.rsg--sidebar-4 .rsg--search-66 { padding: 30px 0; } -.rsg--sidebar-4 .rsg--isChild-71 { +.rsg--sidebar-4 .rsg--isChild-70 { padding-left: 16px; } -.rsg--sidebar-4 .rsg--input-68 { +.rsg--sidebar-4 .rsg--input-67 { background: #FFFFFF; border: 1px solid #D8D8D8; box-sizing: border-box; @@ -67,7 +67,7 @@ p.rsg--p-32 { height: 48px; } -.rsg--sidebar-4 .rsg--list-69 { +.rsg--sidebar-4 .rsg--list-68 { padding: 0; } diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js index 5698f16e..73b3fb7a 100644 --- a/packages/ui-toolkit/src/header/brand.js +++ b/packages/ui-toolkit/src/header/brand.js @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import is from 'styled-is'; import remcalc from 'remcalc'; import { H2 } from '../text/headings'; @@ -9,18 +10,23 @@ const Brand = H2.extend` color: ${props => props.theme.white}; font-size: ${remcalc(29)}; margin: 0; + + ${is('beta')` + display: inline-block; + margin-top: ${remcalc(6)}; + `}; `; const Box = styled.div` - flex: 1 1 auto; align-self: stretch; order: 0; + width: 150px; padding: ${remcalc(11)} 0; `; export default ({ children, ...rest }) => ( - {children} + {children} ); diff --git a/packages/ui-toolkit/src/header/header-wrapper.js b/packages/ui-toolkit/src/header/header-wrapper.js new file mode 100644 index 00000000..34340c12 --- /dev/null +++ b/packages/ui-toolkit/src/header/header-wrapper.js @@ -0,0 +1,11 @@ +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 8d213bca..c096e1b7 100644 --- a/packages/ui-toolkit/src/header/index.js +++ b/packages/ui-toolkit/src/header/index.js @@ -4,19 +4,15 @@ import remcalc from 'remcalc'; import is from 'styled-is'; const Header = styled.div` - ${is('fluid')` - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-content: stretch; - align-items: stretch; - `}; - + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-content: stretch; + align-items: stretch; background-color: ${props => props.theme.brandBackground}; max-height: ${remcalc(53)}; min-height: ${remcalc(53)}; - padding: 0 ${remcalc(18)}; + padding-left: ${remcalc(18)}; line-height: ${remcalc(25)}; `; @@ -25,5 +21,7 @@ const Header = styled.div` */ export default ({ children, ...rest }) =>
    {children}
    ; -export { default as Brand } from './brand'; -export { default as Item } from './item'; +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'; diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js index 5c25c2b9..cf07eba0 100644 --- a/packages/ui-toolkit/src/header/item.js +++ b/packages/ui-toolkit/src/header/item.js @@ -6,21 +6,35 @@ import P from '../text/p'; import typography from '../typography'; const Text = P.extend` - ${typography.semibold}; - text-align: center; color: ${props => props.theme.white}; margin: 0; + + a { + color: ${props => props.theme.white}; + text-decoration: none; + } `; -const Box = styled.div` +const Box = styled.section` flex: 0 1 auto; align-self: auto; order: 0; + display: flex; + align-items: center; + padding: ${remcalc(15)}; - padding: ${remcalc(15)} 0; - width: ${remcalc(100)}; - max-width: ${remcalc(100)}; + svg { + margin-right: ${remcalc(6)}; + } + + &:not(:last-of-type) { + border-right: 1px solid rgba(255, 255, 255, 0.15); + } + + &:first-of-type { + margin-left: auto; + } `; export default ({ children, ...rest }) => ( diff --git a/packages/ui-toolkit/src/header/nav.js b/packages/ui-toolkit/src/header/nav.js new file mode 100644 index 00000000..81548ee5 --- /dev/null +++ b/packages/ui-toolkit/src/header/nav.js @@ -0,0 +1,36 @@ +import React from 'react'; +import styled from 'styled-components'; +import is from 'styled-components'; +import remcalc from 'remcalc'; + +import P from '../text/p'; +import typography from '../typography'; + +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; + + &:hover, + &.active { + background: rgba(255, 255, 255, 0.15); + } + } +`; + +export default ({ children, ...rest }) => ; diff --git a/packages/ui-toolkit/src/header/usage.md b/packages/ui-toolkit/src/header/usage.md index a1b95ce8..119a0e42 100644 --- a/packages/ui-toolkit/src/header/usage.md +++ b/packages/ui-toolkit/src/header/usage.md @@ -1,10 +1,20 @@ ``` const HeaderBrand = require('./brand.js').default; const HeaderItem = require('./item.js').default; +const HeaderNav = require('./nav.js').default; +const HeaderWrapper = require('./header-wrapper.js').default; +const { UserIconLight, DataCenterIconLight, TritonBetaIcon } = require('../icons');
    - Triton - eu-east-1 - Nicola + + + +
  • Compute
    • +
  • Network
    • +     + Return to existing portal + eu-east-1 + Nicola +
    ``` diff --git a/packages/ui-toolkit/src/icons/icons.js b/packages/ui-toolkit/src/icons/icons.js index f00f424d..4296fae9 100644 --- a/packages/ui-toolkit/src/icons/icons.js +++ b/packages/ui-toolkit/src/icons/icons.js @@ -20,10 +20,12 @@ import { UnhealthyIcon, BinIcon, UserIcon, + UserIconLight, DataCenterIcon, DataCenterIconLight, ChevronIcon, TritonIcon, + TritonBetaIcon, CompletedIcon, PartCompletedIcon, IncompleteIcon, @@ -181,7 +183,13 @@ const Icons = () => ( - + + + + + + + @@ -201,6 +209,12 @@ const Icons = () => ( + + + + + + ); diff --git a/packages/ui-toolkit/src/icons/index.js b/packages/ui-toolkit/src/icons/index.js index 916c3c00..6e82337c 100644 --- a/packages/ui-toolkit/src/icons/index.js +++ b/packages/ui-toolkit/src/icons/index.js @@ -12,10 +12,12 @@ export { default as HealthyIcon } from './healthy'; export { default as UnhealthyIcon } from './unhealthy'; export { default as BinIcon } from './bin'; export { default as UserIcon } from './user'; +export { default as UserIconLight } from './user-light'; export { default as DataCenterIcon } from './data-center'; export { default as DataCenterIconLight } from './data-center-light'; export { default as ChevronIcon } from './chevron'; export { default as TritonIcon } from './triton'; +export { default as TritonBetaIcon } from './triton-beta' export { default as CompletedIcon } from './completed'; export { default as PartCompletedIcon } from './part-complete'; export { default as IncompleteIcon } from './incomplete'; diff --git a/packages/ui-toolkit/src/icons/svg/icon_user_light.svg b/packages/ui-toolkit/src/icons/svg/icon_user_light.svg new file mode 100755 index 00000000..1b7a1d8f --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_user_light.svg @@ -0,0 +1 @@ +Shape \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/triton_beta.svg b/packages/ui-toolkit/src/icons/svg/triton_beta.svg new file mode 100644 index 00000000..b661ee40 --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/triton_beta.svg @@ -0,0 +1,18 @@ + +Group +Created using Figma + + + + + + + + + + + + + diff --git a/packages/ui-toolkit/src/icons/triton-beta.js b/packages/ui-toolkit/src/icons/triton-beta.js new file mode 100644 index 00000000..cb841e0e --- /dev/null +++ b/packages/ui-toolkit/src/icons/triton-beta.js @@ -0,0 +1,5 @@ +import React from 'react'; + +import TritonBetaIcon from './svg/triton_beta.svg'; + +export default TritonBetaIcon; diff --git a/packages/ui-toolkit/src/icons/user-light.js b/packages/ui-toolkit/src/icons/user-light.js new file mode 100644 index 00000000..43cec649 --- /dev/null +++ b/packages/ui-toolkit/src/icons/user-light.js @@ -0,0 +1,6 @@ +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import UserIconLight from './svg/icon_user_light.svg'; + +export default UserIconLight; diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js index b0c0a819..5978cc9a 100644 --- a/packages/ui-toolkit/src/index.js +++ b/packages/ui-toolkit/src/index.js @@ -80,8 +80,10 @@ export { export { default as Header, - Brand as HeaderBrand, - Item as HeaderItem + HeaderBrand, + HeaderItem, + HeaderNav, + HeaderWrapper } from './header'; export { @@ -114,6 +116,8 @@ export { DataCenterIconLight, ChevronIcon, TritonIcon, + UserIconLight, + TritonBetaIcon, CompletedIcon, PartCompletedIcon, IncompleteIcon, diff --git a/packages/ui-toolkit/src/message/Readme.md b/packages/ui-toolkit/src/message/Readme.md index 75bf8f29..5cfd08a9 100644 --- a/packages/ui-toolkit/src/message/Readme.md +++ b/packages/ui-toolkit/src/message/Readme.md @@ -1,7 +1,7 @@ #### Success/Educational ```jsx -const { Message, MessageTitle, MessageDescription } = require('.'); +const { Message, MessageTitle, MessageDescription } = require('./index.js'); Choosing deployment data center @@ -10,27 +10,27 @@ const { Message, MessageTitle, MessageDescription } = require('.'); sure that you choose the data center that suits your requirements. Learn more -; + ``` #### Error ```jsx -const { Message, MessageTitle, MessageDescription } = require('.'); +const { Message, MessageTitle, MessageDescription } = require('./index.js'); Choosing deployment data center Oh no -; + ``` #### Warning ```jsx -const { Message, MessageTitle, MessageDescription } = require('.'); +const { Message, MessageTitle, MessageDescription } = require('./index.js'); Choosing deployment data center There were some issues -; + ``` diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js index b1ca3e2a..c7bd9d6e 100644 --- a/packages/ui-toolkit/src/message/index.js +++ b/packages/ui-toolkit/src/message/index.js @@ -54,9 +54,9 @@ export const Message = ({ onCloseClick, children, ...type }) => ( ); -export const Title = ({ children }) =>

    {children}

    ; +export const MessageTitle = ({ children }) =>

    {children}

    ; -export const Description = ({ children }) =>

    {children}

    ; +export const MessageDescription = ({ children }) =>

    {children}

    ; Message.propTypes = { /** diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js index 4ad7ca59..982a02b4 100644 --- a/packages/ui-toolkit/styleguide.config.js +++ b/packages/ui-toolkit/styleguide.config.js @@ -103,12 +103,12 @@ module.exports = { 'src/form/input.js', 'src/message/index.js', 'src/progress-bar/index.js', + 'src/popover/index.js', 'src/form/radio.js', 'src/section-list/index.js', 'src/form/select.js', 'src/form/toggle.js', - 'src/tooltip/index.js', - 'src/popover/index.js' + 'src/tooltip/index.js' ] } ],