diff --git a/packages/navigation/package.json b/packages/navigation/package.json index 03d23286..31c57fec 100644 --- a/packages/navigation/package.json +++ b/packages/navigation/package.json @@ -25,6 +25,7 @@ "joyent-icons": "^4.0.0", "joyent-ui-toolkit": "^4.5.0", "lodash.chunk": "^4.2.0", + "lodash.keys": "^4.2.0", "outy": "^0.1.2", "param-case": "^2.1.1", "pascal-case": "^2.0.1", diff --git a/packages/navigation/src/components/header.js b/packages/navigation/src/components/header.js index 09bc87dc..4607ae09 100644 --- a/packages/navigation/src/components/header.js +++ b/packages/navigation/src/components/header.js @@ -91,6 +91,10 @@ export const Divider = emotion('div')` height: ${remcalc(36)}; `; +export const Space = emotion('div')` + width: ${remcalc(6)}; +`; + export const Row = emotion('div')` display: flex; align-items: center; diff --git a/packages/navigation/src/components/index.js b/packages/navigation/src/components/index.js index 91202c1e..abf9fdfe 100644 --- a/packages/navigation/src/components/index.js +++ b/packages/navigation/src/components/index.js @@ -14,7 +14,8 @@ export { Icon as HeaderItemIcon, FlexibleSpace as HeaderFlexibleSpaceItem, Divider as HeaderDividerItem, - SubContent as HeaderItemSubContent + SubContent as HeaderItemSubContent, + Space as HeaderSpace } from './header'; export { diff --git a/packages/navigation/src/containers/datacenter.js b/packages/navigation/src/containers/datacenter.js index 6b3fcb40..4fcee5bc 100644 --- a/packages/navigation/src/containers/datacenter.js +++ b/packages/navigation/src/containers/datacenter.js @@ -44,39 +44,40 @@ const getDatacenters = gql` } `; -const Datacenters = ({ regions = [] }) => ( - - {regions.map(({ name, slug, places }) => ( -
- - - - - {name} - - - - - - - +const Datacenters = ({ expanded, regions = [] }) => + expanded ? ( + + {regions.map(({ name, slug, places }) => ( +
+ + - {places.map(({ name, slug, datacenters }) => ( - - {name} - {datacenters.map(({ name, slug }) => ( - {name} - ))} - - ))} + + {name} + - - - -
- ))} - -); + + + + + + + {places.map(({ name, slug, datacenters }) => ( + + {name} + {datacenters.map(({ name, slug }) => ( + {name} + ))} + + ))} + + + + +
+ ))} + + ) : null; export default compose( graphql(getDatacenters, { diff --git a/packages/navigation/src/containers/services.js b/packages/navigation/src/containers/services.js index 3cd511e8..1f5eb057 100644 --- a/packages/navigation/src/containers/services.js +++ b/packages/navigation/src/containers/services.js @@ -20,62 +20,69 @@ const Container = emotion('div')` background-color: #ffffff; `; -const getHeader = gql` +const GetCategories = gql` { categories @client { name slug } - services @client { + } +`; + +const GetProducts = gql` + { + products { name description category - slug + url } } `; -const Services = ({ categories = [] }) => ( - - - - {chunk(categories, 4).map(chunk => ( - - {chunk.map(({ name, services }) => ( - - {name} - {services.map(({ name, description }) => ( - - {name} - {description} - - ))} - - ))} - - ))} - - - -); +const Services = ({ expanded = false, categories = [], products }) => + expanded ? ( + + + + {chunk( + categories.map(({ slug, ...category }) => ({ + ...category, + services: products.filter(({ category }) => category === slug), + slug + })), + 4 + ).map(chunk => ( + + {chunk.map(({ name, services }) => ( + + {name} + {services.map(({ name, description }) => ( + + {name} + {description} + + ))} + + ))} + + ))} + + + + ) : null; export default compose( - graphql(getHeader, { + graphql(GetCategories, { props: ({ data }) => { - const { - categories = [], - services = [], - loading = false, - error = null - } = data; - - const _categories = categories.map(({ slug, ...category }) => ({ - ...category, - services: services.filter(({ category }) => category === slug), - slug - })); - - return { categories: _categories, loading, error }; + const { categories = [] } = data; + return { categories }; + } + }), + graphql(GetProducts, { + props: ({ data }) => { + const { products = [] } = data; + return { products }; } }) )(Services); diff --git a/packages/navigation/src/header.js b/packages/navigation/src/header.js index dae61984..b52364ef 100644 --- a/packages/navigation/src/header.js +++ b/packages/navigation/src/header.js @@ -2,6 +2,7 @@ import React from 'react'; import { graphql, compose } from 'react-apollo'; import gql from 'graphql-tag'; import pascalCase from 'pascal-case'; +import keys from 'lodash.keys'; import { DataCenterIcon, TritonIcon, ServicesIcon } from './components'; import * as Overlays from './containers'; @@ -15,7 +16,8 @@ import { HeaderItemSubContent, HeaderItemIcon, HeaderFlexibleSpaceItem, - HeaderDividerItem + HeaderDividerItem, + HeaderSpace } from './components'; const updateHeaderMutation = gql` @@ -39,20 +41,6 @@ const getAccount = gql` } `; -const Panel = ({ name = '', expanded = false, children, ...rest }) => { - if (!expanded) { - return null; - } - - const overlay = Overlays[pascalCase(name)]; - - if (!overlay) { - return null; - } - - return React.createElement(overlay, rest, children); -}; - const Navigation = ({ login, toggleSectionOpen, isOpen, activePanel }) => (
toggleSectionOpen()}> @@ -64,7 +52,7 @@ const Navigation = ({ login, toggleSectionOpen, isOpen, activePanel }) => ( onClick={() => toggleSectionOpen('services')} active={isOpen && activePanel === 'services'} > - Services + Products & Services @@ -77,7 +65,9 @@ const Navigation = ({ login, toggleSectionOpen, isOpen, activePanel }) => ( active={isOpen && activePanel === 'datacenter'} > - Data Center: us-east-1 + Data Center: + + us-east-1 @@ -87,7 +77,9 @@ const Navigation = ({ login, toggleSectionOpen, isOpen, activePanel }) => ( {login ? ( - Account: {login} + Account: + + {login} @@ -95,7 +87,11 @@ const Navigation = ({ login, toggleSectionOpen, isOpen, activePanel }) => ( ) : null} - + {keys(Overlays).map(panelName => + React.createElement(Overlays[panelName], { + expanded: isOpen && panelName === pascalCase(activePanel) + }) + )}
); diff --git a/packages/navigation/src/state/local.js b/packages/navigation/src/state/local.js index 0772ca7f..53f1cb97 100644 --- a/packages/navigation/src/state/local.js +++ b/packages/navigation/src/state/local.js @@ -117,92 +117,6 @@ export default { name: 'Help & Support', __typename: 'Category' } - ]), - services: dataSlugFromObjects([ - { - name: 'VMs & Containers', - description: 'Run VMs and bare metal containers', - category: 'compute', - __typename: 'Service' - }, - { - name: 'Converged Analytics', - description: 'Map reduce and ETL on your objects', - category: 'compute', - __typename: 'Service' - }, - { - name: 'VLANs', - description: 'Wire your appliction your way', - category: 'network', - __typename: 'Service' - }, - { - name: 'Subnets', - description: 'A network for everything', - category: 'network', - __typename: 'Service' - }, - { - name: 'Firewall Rules', - description: 'Control the bits coming and going', - category: 'network', - __typename: 'Service' - }, - { - name: 'Service Status', - description: 'Write here about Service Status', - category: 'help-support', - __typename: 'Service' - }, - { - name: 'Contact Support', - description: 'Chat to us via phone or email', - category: 'help-support', - __typename: 'Service' - }, - { - name: 'Support Plans', - description: 'Write here about Support Plans', - category: 'help-support', - __typename: 'Service' - }, - { - name: 'Getting Started', - description: 'Write here about Getting Started', - category: 'help-support', - __typename: 'Service' - }, - { - name: 'Triton Object Storage', - description: 'Modern cloud object storage', - category: 'storage', - __typename: 'Service' - }, - { - name: 'S3 Compatibility Bridge', - description: 'Modern storage, legacy compatibility', - category: 'storage', - __typename: 'Service' - }, - { - name: 'Triton Volumes', - description: 'Network filesystems for your apps', - category: 'storage', - __typename: 'Service' - }, - { - name: 'Role Based Access Control', - description: 'Manage users within your account', - category: 'access', - __typename: 'Service' - }, - { - name: 'Firewall Rules', - description: 'Inspect all the bytes', - category: 'access', - __typename: 'Service' - } ]) } };