From 495af5702d61da4b262e5e547260cc32178744b0 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 27 Mar 2018 19:12:26 +0100 Subject: [PATCH] feat(ui-toolkit): add header and sidebar --- packages/ui-toolkit/src/styleguide/ghlogo.js | 16 ++ packages/ui-toolkit/src/styleguide/logo.js | 41 +++++ .../ui-toolkit/src/styleguide/renderer.js | 95 +++++++++--- packages/ui-toolkit/src/styleguide/sidebar.js | 35 +++-- yarn.lock | 142 +++++++++--------- 5 files changed, 230 insertions(+), 99 deletions(-) create mode 100644 packages/ui-toolkit/src/styleguide/ghlogo.js create mode 100644 packages/ui-toolkit/src/styleguide/logo.js diff --git a/packages/ui-toolkit/src/styleguide/ghlogo.js b/packages/ui-toolkit/src/styleguide/ghlogo.js new file mode 100644 index 00000000..dfa7f99f --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/ghlogo.js @@ -0,0 +1,16 @@ +import React from 'react'; + +export default () => ( + + + +); diff --git a/packages/ui-toolkit/src/styleguide/logo.js b/packages/ui-toolkit/src/styleguide/logo.js new file mode 100644 index 00000000..1b52b69c --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/logo.js @@ -0,0 +1,41 @@ +import React from 'react'; + +export default () => ( + + Created using Figma + + + + + + + + + + + + + +); diff --git a/packages/ui-toolkit/src/styleguide/renderer.js b/packages/ui-toolkit/src/styleguide/renderer.js index 29772124..ff99254b 100644 --- a/packages/ui-toolkit/src/styleguide/renderer.js +++ b/packages/ui-toolkit/src/styleguide/renderer.js @@ -1,26 +1,58 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { Grid, Row, Col } from 'joyent-react-styled-flexboxgrid'; import styled, { ThemeProvider } from 'styled-components'; import remcalc from 'remcalc'; -import is from 'styled-is'; import theme from '../theme'; +import Logo from './logo'; +import GHLogo from './ghlogo'; const Main = styled(Row)` - padding-top: ${remcalc(40)}; + padding-top: ${remcalc(24)}; `; -const Sticky = styled.div` +const Sidebar = styled.div` position: sticky; top: 0; z-index: 9; + top: ${remcalc(0)}; + margin-top: ${remcalc(-24)}; + padding: ${remcalc(24)} 0; + margin-left: ${remcalc(10)}; + max-height: 100vh; + overflow: auto; + background: white; + width: ${remcalc(234)}; + border-right: ${remcalc(1)} solid ${props => props.theme.grey}; + box-sizing: border-box; +`; - ${is('sidebar')` - top: ${remcalc(100)}; - margin-left: ${remcalc(10)}; - max-height: 85vh; - overflow: auto; - `}; +const Header = styled.header` + background: ${props => props.theme.greyDarker}; + color: ${props => props.theme.white}; + height: ${remcalc(48)}; + padding: 0 ${remcalc(24)}; + display: flex; + align-items: center; + justify-content: space-between; +`; + +const List = styled.ul` + list-style: none; + display: flex; + + li { + a { + color: ${props => props.theme.white}; + text-decoration: none; + } + + &:not(:last-child) { + border-right: ${remcalc(1)} solid ${props => props.theme.text}; + padding-right: ${remcalc(24)}; + margin-right: ${remcalc(24)}; + } + } `; const fullTheme = { @@ -49,18 +81,39 @@ const StyleGuideRenderer = ({ hasSidebar }) => ( - -
- {hasSidebar && ( - - {toc} + +
+ +
  • + Visuals +
    • +
  • Copy Guide
    • +
  • + Downloads +
    • +     + + + + +
    + +
    + {hasSidebar && ( + + {toc} + + )} + + {children} - )} - - {children} - -
    -     +
    +     +     ); diff --git a/packages/ui-toolkit/src/styleguide/sidebar.js b/packages/ui-toolkit/src/styleguide/sidebar.js index 27bc08c7..c8e58978 100644 --- a/packages/ui-toolkit/src/styleguide/sidebar.js +++ b/packages/ui-toolkit/src/styleguide/sidebar.js @@ -1,7 +1,7 @@ import React from 'react'; import remcalc from 'remcalc'; -import { H3 } from '../'; import styled from 'styled-components'; +import is from 'styled-is'; const List = styled.ul` list-style: none; @@ -17,20 +17,35 @@ const List = styled.ul` } `; -const Header = styled(H3)` - color: #979797; - font-size: ${remcalc(18)}; - margin-bottom: ${remcalc(12)}; - margin-top: ${remcalc(12)}; +const Header = styled.p` + line-height: ${remcalc(24)}; + color: ${props => props.theme.text}; + font-size: ${remcalc(15)}; + padding-bottom: ${remcalc(12)}; + padding-top: ${remcalc(12)}; + padding-left: ${remcalc(24)}; + margin: ${remcalc(0)}; + + ${is('active')` + background: ${props => props.theme.background}; + `}; `; const Link = styled.a` - color: #979797; + color: ${props => props.theme.text}; text-decoration: none; + + ${is('active')` + color: ${props => props.theme.primary}; + font-weight: 600; + `}; `; export default ({ children: { props } }) => { const items = props.items.filter(item => item.name); + const link = decodeURIComponent(window.location.href).split('/#!/')[1] || '/'; + const isActive = name => + link === name || (name === 'Color Palette' && link === '/'); if (!items.length) { return null; @@ -40,8 +55,10 @@ export default ({ children: { props } }) => { {items.map(({ heading, name, slug, content }) => (
  • -
    - {name} +
    + + {name} +
    {content}
    • diff --git a/yarn.lock b/yarn.lock index a4fc92ea..a6f759dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -778,8 +778,8 @@ asynckit@^0.4.0: resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" atob@^2.0.0: - version "2.0.3" - resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d" + version "2.1.0" + resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.0.tgz#ab2b150e51d7b122b9efc8d7340c06b6c41076bc" atob@~1.1.0: version "1.1.3" @@ -2272,12 +2272,12 @@ caniuse-api@^1.5.2: lodash.uniq "^4.5.0" caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: - version "1.0.30000820" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000820.tgz#7c20e25cea1768b261b724f82e3a6a253aaa1468" + version "1.0.30000821" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000821.tgz#3fcdc67c446a94a9cdd848248a4e3e54b2da7419" caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792: - version "1.0.30000820" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000820.tgz#6e36ee75187a2c83d26d6504a1af47cc580324d2" + version "1.0.30000821" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000821.tgz#0f3223f1e048ed96451c56ca6cf197058c42cb93" capture-stack-trace@^1.0.0: version "1.0.0" @@ -2788,39 +2788,39 @@ conventional-changelog-angular@^1.3.3, conventional-changelog-angular@^1.6.6: compare-func "^1.3.1" q "^1.5.1" -conventional-changelog-atom@^0.2.6: - version "0.2.6" - resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.2.6.tgz#9672c5e88445b6ad5a7779dc0e859d7e9986487a" +conventional-changelog-atom@^0.2.8: + version "0.2.8" + resolved "https://registry.yarnpkg.com/conventional-changelog-atom/-/conventional-changelog-atom-0.2.8.tgz#8037693455990e3256f297320a45fa47ee553a14" dependencies: q "^1.5.1" conventional-changelog-cli@^1.3.13: - version "1.3.18" - resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.18.tgz#90fbfa20434c6fd71938ddcd6cc6908ee76c9a74" + version "1.3.21" + resolved "https://registry.yarnpkg.com/conventional-changelog-cli/-/conventional-changelog-cli-1.3.21.tgz#f6b063102ba34c0f2bec552249ee233e0762e0a4" dependencies: add-stream "^1.0.0" - conventional-changelog "^1.1.20" + conventional-changelog "^1.1.23" lodash "^4.2.1" meow "^4.0.0" tempfile "^1.1.1" -conventional-changelog-codemirror@^0.3.6: - version "0.3.6" - resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.6.tgz#3e5ed8742bb54c5eb34ec571206046d4697269c7" +conventional-changelog-codemirror@^0.3.8: + version "0.3.8" + resolved "https://registry.yarnpkg.com/conventional-changelog-codemirror/-/conventional-changelog-codemirror-0.3.8.tgz#a1982c8291f4ee4d6f2f62817c6b2ecd2c4b7b47" dependencies: q "^1.5.1" -conventional-changelog-core@^2.0.7: - version "2.0.7" - resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-2.0.7.tgz#f2d3596d56273ad446d069ee78bce2b80bd0ae25" +conventional-changelog-core@^2.0.10: + version "2.0.10" + resolved "https://registry.yarnpkg.com/conventional-changelog-core/-/conventional-changelog-core-2.0.10.tgz#3e47565ef9d148bcdceab6de6b3651a16dd28dc8" dependencies: - conventional-changelog-writer "^3.0.6" - conventional-commits-parser "^2.1.6" + conventional-changelog-writer "^3.0.9" + conventional-commits-parser "^2.1.7" dateformat "^3.0.0" get-pkg-repo "^1.0.0" - git-raw-commits "^1.3.5" + git-raw-commits "^1.3.6" git-remote-origin-url "^2.0.0" - git-semver-tags "^1.3.5" + git-semver-tags "^1.3.6" lodash "^4.2.1" normalize-package-data "^2.3.5" q "^1.5.1" @@ -2828,21 +2828,21 @@ conventional-changelog-core@^2.0.7: read-pkg-up "^1.0.1" through2 "^2.0.0" -conventional-changelog-ember@^0.3.8: - version "0.3.8" - resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.3.8.tgz#f2e6e7094c38ec9e808fb48bcdb27632b6128d41" +conventional-changelog-ember@^0.3.11: + version "0.3.11" + resolved "https://registry.yarnpkg.com/conventional-changelog-ember/-/conventional-changelog-ember-0.3.11.tgz#56ca9b418ee9d7f089bea34307d57497420d72a6" dependencies: q "^1.5.1" -conventional-changelog-eslint@^1.0.7: - version "1.0.7" - resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.7.tgz#5885dbfea9ecc5ba8fcba8e435b5e85fd0281b1b" +conventional-changelog-eslint@^1.0.9: + version "1.0.9" + resolved "https://registry.yarnpkg.com/conventional-changelog-eslint/-/conventional-changelog-eslint-1.0.9.tgz#b13cc7e4b472c819450ede031ff1a75c0e3d07d3" dependencies: q "^1.5.1" -conventional-changelog-express@^0.3.5: - version "0.3.5" - resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.3.5.tgz#b01b9f9a8f2d4e37bbafec7cc7d9c0b0570f6b26" +conventional-changelog-express@^0.3.6: + version "0.3.6" + resolved "https://registry.yarnpkg.com/conventional-changelog-express/-/conventional-changelog-express-0.3.6.tgz#4a6295cb11785059fb09202180d0e59c358b9c2c" dependencies: q "^1.5.1" @@ -2858,20 +2858,20 @@ conventional-changelog-jscs@^0.1.0: dependencies: q "^1.4.1" -conventional-changelog-jshint@^0.3.6: - version "0.3.6" - resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.6.tgz#5b9f5a10e229ee928a255f8d79cef7ad7acc9100" +conventional-changelog-jshint@^0.3.8: + version "0.3.8" + resolved "https://registry.yarnpkg.com/conventional-changelog-jshint/-/conventional-changelog-jshint-0.3.8.tgz#9051c1ac0767abaf62a31f74d2fe8790e8acc6c8" dependencies: compare-func "^1.3.1" q "^1.5.1" -conventional-changelog-preset-loader@^1.1.7: - version "1.1.7" - resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-1.1.7.tgz#58a7ef85f980ca17f1373dc222ff449606222fb6" +conventional-changelog-preset-loader@^1.1.8: + version "1.1.8" + resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-1.1.8.tgz#40bb0f142cd27d16839ec6c74ee8db418099b373" -conventional-changelog-writer@^3.0.6: - version "3.0.6" - resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-3.0.6.tgz#30e78c9e4a25870706e72d764cffd9592081ed76" +conventional-changelog-writer@^3.0.9: + version "3.0.9" + resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-3.0.9.tgz#4aecdfef33ff2a53bb0cf3b8071ce21f0e994634" dependencies: compare-func "^1.3.1" conventional-commits-filter "^1.1.6" @@ -2884,21 +2884,21 @@ conventional-changelog-writer@^3.0.6: split "^1.0.0" through2 "^2.0.0" -conventional-changelog@^1.1.20: - version "1.1.20" - resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.20.tgz#b55e00f7654203a6adc6a491d448779205bb51a8" +conventional-changelog@^1.1.23: + version "1.1.23" + resolved "https://registry.yarnpkg.com/conventional-changelog/-/conventional-changelog-1.1.23.tgz#4ac72af8b9ea9af260e97acf556c19d8b2da970e" dependencies: conventional-changelog-angular "^1.6.6" - conventional-changelog-atom "^0.2.6" - conventional-changelog-codemirror "^0.3.6" - conventional-changelog-core "^2.0.7" - conventional-changelog-ember "^0.3.8" - conventional-changelog-eslint "^1.0.7" - conventional-changelog-express "^0.3.5" + conventional-changelog-atom "^0.2.8" + conventional-changelog-codemirror "^0.3.8" + conventional-changelog-core "^2.0.10" + conventional-changelog-ember "^0.3.11" + conventional-changelog-eslint "^1.0.9" + conventional-changelog-express "^0.3.6" conventional-changelog-jquery "^0.1.0" conventional-changelog-jscs "^0.1.0" - conventional-changelog-jshint "^0.3.6" - conventional-changelog-preset-loader "^1.1.7" + conventional-changelog-jshint "^0.3.8" + conventional-changelog-preset-loader "^1.1.8" conventional-commits-filter@^1.1.1, conventional-commits-filter@^1.1.6: version "1.1.6" @@ -2907,9 +2907,9 @@ conventional-commits-filter@^1.1.1, conventional-commits-filter@^1.1.6: is-subset "^0.1.1" modify-values "^1.0.0" -conventional-commits-parser@^2.1.1, conventional-commits-parser@^2.1.6: - version "2.1.6" - resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.6.tgz#e594bbd8342d3e6758aa0344ca074719d69a7dc0" +conventional-commits-parser@^2.1.1, conventional-commits-parser@^2.1.7: + version "2.1.7" + resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-2.1.7.tgz#eca45ed6140d72ba9722ee4132674d639e644e8e" dependencies: JSONStream "^1.0.4" is-text-path "^1.0.0" @@ -3685,8 +3685,8 @@ ee-first@1.1.1: resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30: - version "1.3.40" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz#1fbd6d97befd72b8a6f921dc38d22413d2f6fddf" + version "1.3.41" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.41.tgz#7e33643e00cd85edfd17e04194f6d00e73737235" elliptic@^6.0.0: version "6.4.0" @@ -3802,8 +3802,8 @@ es-to-primitive@^1.1.1: is-symbol "^1.0.1" es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14: - version "0.10.41" - resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.41.tgz#bab3e982d750f0112f0cb9e6abed72c59eb33eb2" + version "0.10.42" + resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.42.tgz#8c07dd33af04d5dcd1310b5cef13bea63a89ba8d" dependencies: es6-iterator "~2.0.3" es6-symbol "~3.1.1" @@ -4883,9 +4883,9 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" -git-raw-commits@^1.3.0, git-raw-commits@^1.3.5: - version "1.3.5" - resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.5.tgz#0951ae8dc80e5cee8ef54934db4ef65a6d161c60" +git-raw-commits@^1.3.0, git-raw-commits@^1.3.6: + version "1.3.6" + resolved "https://registry.yarnpkg.com/git-raw-commits/-/git-raw-commits-1.3.6.tgz#27c35a32a67777c1ecd412a239a6c19d71b95aff" dependencies: dargs "^4.0.1" lodash.template "^4.0.2" @@ -4900,9 +4900,9 @@ git-remote-origin-url@^2.0.0: gitconfiglocal "^1.0.0" pify "^2.3.0" -git-semver-tags@^1.3.0, git-semver-tags@^1.3.5: - version "1.3.5" - resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.5.tgz#b803e8ee36c09e8cec3e9441f5bac292fd163c18" +git-semver-tags@^1.3.0, git-semver-tags@^1.3.6: + version "1.3.6" + resolved "https://registry.yarnpkg.com/git-semver-tags/-/git-semver-tags-1.3.6.tgz#357ea01f7280794fe0927f2806bee6414d2caba5" dependencies: meow "^4.0.0" semver "^5.5.0" @@ -6876,8 +6876,8 @@ locate-path@^2.0.0: path-exists "^3.0.0" lodash-es@^4.17.4, lodash-es@^4.17.5, lodash-es@^4.2.1: - version "4.17.7" - resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.7.tgz#db240a3252c3dd8360201ac9feef91ac977ea856" + version "4.17.8" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.8.tgz#6fa8c8c5d337481df0bdf1c0d899d42473121e45" lodash-webpack-plugin@^0.11.4: version "0.11.4" @@ -9830,8 +9830,8 @@ semver-diff@^2.0.0: semver "^5.0.3" semver-utils@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/semver-utils/-/semver-utils-1.1.1.tgz#27d92fec34d27cfa42707d3b40d025ae9855f2df" + version "1.1.2" + resolved "https://registry.yarnpkg.com/semver-utils/-/semver-utils-1.1.2.tgz#197d758a0a28c3d3a009338cfbcc1211bccd76d4" "semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0: version "5.5.0" @@ -10253,7 +10253,11 @@ static-extend@^0.1.1: define-property "^0.2.5" object-copy "^0.1.0" -"statuses@>= 1.3.1 < 2", statuses@~1.4.0: +"statuses@>= 1.3.1 < 2": + version "1.5.0" + resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c" + +statuses@~1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"