From a761b7da315cce573dae63e07503060a2606bc04 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Wed, 11 Oct 2017 12:01:26 +0100 Subject: [PATCH] feat(ui-toolkit): add syntax highlighting to styleguide fixes #745 --- packages/ui-toolkit/etc/style.css | 9 ++++++- packages/ui-toolkit/src/button/usage.md | 8 +++---- packages/ui-toolkit/src/form/radio.js | 7 ++++++ packages/ui-toolkit/src/form/usage-radio.md | 24 ------------------- packages/ui-toolkit/src/form/usage-toggle.md | 4 ++-- packages/ui-toolkit/src/message/Readme.md | 12 +++++----- packages/ui-toolkit/src/message/index.js | 2 +- packages/ui-toolkit/src/styleguide/wrapper.js | 1 + packages/ui-toolkit/styleguide.config.js | 1 + 9 files changed, 30 insertions(+), 38 deletions(-) diff --git a/packages/ui-toolkit/etc/style.css b/packages/ui-toolkit/etc/style.css index ff37e037..2c94f1fc 100644 --- a/packages/ui-toolkit/etc/style.css +++ b/packages/ui-toolkit/etc/style.css @@ -86,4 +86,11 @@ p.rsg--p-32 { .rsg--sidebar-4 :-moz-placeholder { /* Firefox 18- */ color: #494949; opacity: 0.5; -} \ No newline at end of file +} +body .cm-s-base16-light.CodeMirror { + background: #fafafa; + color: #494949; + border-color: #d8d8d8; + padding: 9px 18px; + line-height: 16px; +} diff --git a/packages/ui-toolkit/src/button/usage.md b/packages/ui-toolkit/src/button/usage.md index 02044f53..bfc82955 100644 --- a/packages/ui-toolkit/src/button/usage.md +++ b/packages/ui-toolkit/src/button/usage.md @@ -1,6 +1,6 @@ ### with text -``` +```jsx @@ -10,7 +10,7 @@ ### secondary -``` +```jsx @@ -20,7 +20,7 @@ ### tertiary -``` +```jsx @@ -32,7 +32,7 @@ ### disabled -``` +```jsx diff --git a/packages/ui-toolkit/src/form/radio.js b/packages/ui-toolkit/src/form/radio.js index 3c7c2ad0..9e55c788 100644 --- a/packages/ui-toolkit/src/form/radio.js +++ b/packages/ui-toolkit/src/form/radio.js @@ -1,5 +1,6 @@ import styled from 'styled-components'; import React from 'react'; +import remcalc from 'remcalc'; import BaseToggle from './base/toggle'; import Baseline from '../baseline'; @@ -20,6 +21,12 @@ const Li = styled.li` const Ul = styled.ul` margin: 0; padding: 0; + margin-bottom: ${remcalc(8)}; + + + label { + margin-left: ${remcalc(26)}; + font-size: ${remcalc(13)}; + } `; const RadioItem = BaseInput(({ children, id, ...rest }) => ( diff --git a/packages/ui-toolkit/src/form/usage-radio.md b/packages/ui-toolkit/src/form/usage-radio.md index 835485b1..4eee5f82 100644 --- a/packages/ui-toolkit/src/form/usage-radio.md +++ b/packages/ui-toolkit/src/form/usage-radio.md @@ -63,29 +63,5 @@ const Label = require('./label').default; You need to select one - You can also have validation in each radio button - - Who killed the radio star? - - - - - - You are the best ! - - - - - - Are you sure ? - - - - - - No, sorry - - - ``` \ No newline at end of file diff --git a/packages/ui-toolkit/src/form/usage-toggle.md b/packages/ui-toolkit/src/form/usage-toggle.md index 608b3e57..0b7fbd16 100644 --- a/packages/ui-toolkit/src/form/usage-toggle.md +++ b/packages/ui-toolkit/src/form/usage-toggle.md @@ -1,4 +1,4 @@ -``` +```jsx const { ToggleList } = require('./toggle'); const FormGroup = require('./group').default; const Legend = require('./legend').default; @@ -14,7 +14,7 @@ const Legend = require('./legend').default; #### Toggle > Disabled -``` +```jsx const { ToggleList } = require('./toggle'); const FormGroup = require('./group').default; const Legend = require('./legend').default; diff --git a/packages/ui-toolkit/src/message/Readme.md b/packages/ui-toolkit/src/message/Readme.md index b0728c0f..4faa7072 100644 --- a/packages/ui-toolkit/src/message/Readme.md +++ b/packages/ui-toolkit/src/message/Readme.md @@ -1,7 +1,7 @@ #### Success/Educational -``` -const { Title, Description } = require('.'); +```jsx +const { Message, Title, Description } = require('.'); Choosing deployment data center @@ -11,8 +11,8 @@ const { Title, Description } = require('.'); #### Error -``` -const { Title, Description } = require('.'); +```jsx +const { Message, Title, Description } = require('.'); Choosing deployment data center @@ -22,8 +22,8 @@ const { Title, Description } = require('.'); #### Warning -``` -const { Title, Description } = require('.'); +```jsx +const { Message, Title, Description } = require('.'); Choosing deployment data center diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js index 241d49ef..16822297 100644 --- a/packages/ui-toolkit/src/message/index.js +++ b/packages/ui-toolkit/src/message/index.js @@ -46,7 +46,7 @@ const Close = styled(CloseButton)` top: ${unitcalc(0.5)}; `; -const Message = ({ onCloseClick, children, ...type }) => ( +export const Message = ({ onCloseClick, children, ...type }) => ( {children} diff --git a/packages/ui-toolkit/src/styleguide/wrapper.js b/packages/ui-toolkit/src/styleguide/wrapper.js index 1b670704..f31e5643 100644 --- a/packages/ui-toolkit/src/styleguide/wrapper.js +++ b/packages/ui-toolkit/src/styleguide/wrapper.js @@ -3,6 +3,7 @@ import { ThemeProvider, injectGlobal } from 'styled-components'; import theme from '../theme'; import Base from '../base'; import { loadedFontFamily } from '../typography'; +import 'react-codemirror2/node_modules/codemirror/mode/jsx/jsx'; const StyledBase = Base.extend` /* trick prettier */ diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js index e1afef63..259dee81 100644 --- a/packages/ui-toolkit/styleguide.config.js +++ b/packages/ui-toolkit/styleguide.config.js @@ -5,6 +5,7 @@ const snapguidist = require('snapguidist'); const path = require('path'); module.exports = { + highlightTheme: 'base16-light', require: [path.join(__dirname, 'etc/style.css')], webpackConfig: Object.assign(webpackConfig, { resolve: Object.assign(webpackConfig.resolve, {