From 3e650addcbf9251bde8ddd9fbbf10c8f73984b5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Thu, 16 Nov 2017 11:48:20 +0000 Subject: [PATCH] feat(ui-toolkit): fluid Header --- .../__snapshots__/header.spec.js.snap | 395 ++++++++++++++++++ .../navigation/__tests__/header.spec.js | 21 + .../src/components/navigation/header.js | 2 +- packages/ui-toolkit/src/header/brand.js | 8 +- packages/ui-toolkit/src/header/index.js | 4 +- packages/ui-toolkit/src/header/item.js | 10 +- .../ui-toolkit/src/layout/view-container.js | 58 ++- 7 files changed, 480 insertions(+), 18 deletions(-) create mode 100644 packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap create mode 100644 packages/my-joy-beta/src/components/navigation/__tests__/header.spec.js diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap new file mode 100644 index 00000000..f336feca --- /dev/null +++ b/packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/header.spec.js.snap @@ -0,0 +1,395 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders
without throwing 1`] = ` +.c5 { + padding-top: 0.6875rem; +} + +.c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + background-color: rgb(30,49,59); + max-height: 3.3125rem; + min-height: 3.3125rem; + line-height: 1.5625rem; +} + +.c1 { + margin-right: auto; + margin-left: auto; + padding-right: 2rem; + padding-left: 2rem; + width: 100%; + padding-left: 0; + padding-right: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + max-height: 3.3125rem; + min-height: 3.3125rem; +} + +.c2 { + -webkit-align-self: stretch; + -ms-flex-item-align: stretch; + align-self: stretch; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + width: 9.375rem; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c2:hover, +.c2.active { + background: rgba(255,255,255,0.15); +} + +.c3 { + margin: 0; + font-weight: 400; + line-height: 1.875rem; + font-size: 1.5rem; + text-transform: uppercase; + color: rgb(255,255,255); + font-size: 1.8125rem; + margin: 0; +} + +.c3 + p, +.c3 + small, +.c3 + h1, +.c3 + h2, +.c3 + label, +.c3 + h3, +.c3 + h4, +.c3 + h5, +.c3 + div, +.c3 + span { + margin-top: 1.5rem; +} + +.c4 { + padding: 0.9375rem; + line-height: 1.5rem; + font-size: 0.9375rem; + color: rgb(255,255,255); + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: all 200ms ease; + transition: all 200ms ease; + max-height: 3.3125rem; + min-height: 3.3125rem; + box-sizing: border-box; +} + +.c6 { + padding: 0; + margin: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + list-style: none; +} + +.c6 a { + padding: 0.9375rem; + line-height: 1.5rem; + font-size: 0.9375rem; + color: rgb(255,255,255); + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: all 200ms ease; + transition: all 200ms ease; + max-height: 3.3125rem; + min-height: 3.3125rem; + box-sizing: border-box; +} + +.c6 a:hover, +.c6 a.active { + background: rgba(255,255,255,0.15); +} + +.c7 { + -webkit-flex: 0 1 auto; + -ms-flex: 0 1 auto; + flex: 0 1 auto; + -webkit-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 1.125rem; +} + +.c7 svg { + margin-right: 0.375rem; +} + +.c7:not(:last-of-type) { + border-right: 0.0625rem solid rgba(255,255,255,0.15); +} + +.c7:first-of-type { + margin-left: auto; +} + +.c7:hover, +.c7.active { + background: rgba(255,255,255,0.15); +} + +.c8 { + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; + margin: 0; + text-align: center; + color: rgb(255,255,255); + margin: 0; +} + +.c8 + p, +.c8 + small, +.c8 + h1, +.c8 + h2, +.c8 + label, +.c8 + h3, +.c8 + h4, +.c8 + h5, +.c8 + div, +.c8 + span { + padding-bottom: 2.25rem; +} + +.c9 { + background-color: transparent; + text-decoration-skip: objects; + padding: 0.9375rem; + line-height: 1.5rem; + font-size: 0.9375rem; + color: rgb(255,255,255); + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: all 200ms ease; + transition: all 200ms ease; + max-height: 3.3125rem; + min-height: 3.3125rem; + box-sizing: border-box; +} + +
+
+
+

+ + + + Group + + + Created using Figma + + + + + + + + + +

+
+ +
+

+ + Return to existing portal + +

+
+
+

+ + + + icon: data center + + + + eu-east-1 + +

+
+
+

+ + + + Shape + + + + Nicola + +

+
+
+
+`; diff --git a/packages/my-joy-beta/src/components/navigation/__tests__/header.spec.js b/packages/my-joy-beta/src/components/navigation/__tests__/header.spec.js new file mode 100644 index 00000000..4b28e59a --- /dev/null +++ b/packages/my-joy-beta/src/components/navigation/__tests__/header.spec.js @@ -0,0 +1,21 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import Theme from '@mocks/theme'; +import Router from '@mocks/router'; +import 'jest-styled-components'; + +import Header from '../header'; + +it('renders
without throwing', () => { + const tree = renderer + .create( + + +
+ + + ) + .toJSON(); + + expect(tree).toMatchSnapshot(); +}); diff --git a/packages/my-joy-beta/src/components/navigation/header.js b/packages/my-joy-beta/src/components/navigation/header.js index 3d224860..ea83a8af 100644 --- a/packages/my-joy-beta/src/components/navigation/header.js +++ b/packages/my-joy-beta/src/components/navigation/header.js @@ -18,7 +18,7 @@ const Logo = styled(TritonBetaIcon)` `; export default () => ( -
+
diff --git a/packages/ui-toolkit/src/header/brand.js b/packages/ui-toolkit/src/header/brand.js index 997ebda1..4cd2e83c 100644 --- a/packages/ui-toolkit/src/header/brand.js +++ b/packages/ui-toolkit/src/header/brand.js @@ -18,10 +18,10 @@ const Box = styled.div` width: ${remcalc(150)}; display: flex; - ${is('beta')` - align-items: center; - margin-top: ${remcalc(6)} - `} + &:hover, + &.active { + background: rgba(255, 255, 255, 0.15); + } `; export default ({ children, ...rest }) => ( diff --git a/packages/ui-toolkit/src/header/index.js b/packages/ui-toolkit/src/header/index.js index d6f554e5..d25e419a 100644 --- a/packages/ui-toolkit/src/header/index.js +++ b/packages/ui-toolkit/src/header/index.js @@ -28,9 +28,9 @@ const Header = styled.div` /** * @example ./usage.md */ -export default ({ children, ...rest }) => ( +export default ({ children, fluid, ...rest }) => (
- {children} + {children}
); diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js index 5333bdc1..c9e7bf7b 100644 --- a/packages/ui-toolkit/src/header/item.js +++ b/packages/ui-toolkit/src/header/item.js @@ -19,11 +19,6 @@ const style = css` max-height: ${remcalc(53)}; min-height: ${remcalc(53)}; box-sizing: border-box; - - &:hover, - &.active { - background: rgba(255, 255, 255, 0.15); - } `; const Text = P.extend` @@ -51,6 +46,11 @@ const Box = styled.section` &:first-of-type { margin-left: auto; } + + &:hover, + &.active { + background: rgba(255, 255, 255, 0.15); + } `; const StyledAnchor = A.extend` diff --git a/packages/ui-toolkit/src/layout/view-container.js b/packages/ui-toolkit/src/layout/view-container.js index e2d467af..7373baa9 100644 --- a/packages/ui-toolkit/src/layout/view-container.js +++ b/packages/ui-toolkit/src/layout/view-container.js @@ -1,15 +1,27 @@ -import is from 'styled-is'; +import styled, { css } from 'styled-components'; import { Grid } from 'react-styled-flexboxgrid'; import remcalc from 'remcalc'; +import is, { isNot } from 'styled-is'; import { styled as breakpoints } from '../breakpoints'; -export default Grid.extend` - max-width: ${remcalc(1000)}; +const Base = css` + margin-right: auto; + margin-left: auto; - ${breakpoints.smallOnly` - padding-left: ${remcalc(6)}; - padding-right: ${remcalc(6)}; + ${is('fluid')` + width: 100%; + padding-left: 0; + padding-right: 0; + `}; + + ${isNot('fluid')` + max-width: ${remcalc(1000)}; + + ${breakpoints.smallOnly` + padding-left: ${remcalc(6)}; + padding-right: ${remcalc(6)}; + `}; `}; ${is('main')` @@ -25,3 +37,37 @@ export default Grid.extend` align-items: center; `}; `; + +export default Grid.extend` + ${is('fluid')` + width: 100%; + padding-left: 0; + padding-right: 0; + `}; + + ${isNot('fluid')` + max-width: ${remcalc(1000)}; + + ${breakpoints.smallOnly` + padding-left: ${remcalc(6)}; + padding-right: ${remcalc(6)}; + `}; + `}; + + ${is('main')` + padding-bottom: ${remcalc(18)}; + `}; + + ${is('center')` + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-content: center; + align-items: center; + `}; +`; +// +// +// const View +//