From b3451dd3f9dba853a8854fc7af73880dc3f4ec84 Mon Sep 17 00:00:00 2001 From: fractaltheory Date: Mon, 29 Aug 2016 17:40:37 -0700 Subject: [PATCH 01/67] Port changes from SDK repo --- src/rsg-components/Components/Components.js | 166 +++++++++++++++--- src/rsg-components/Downloads/Downloads.js | 9 + src/rsg-components/Downloads/index.js | 1 + src/rsg-components/Layout/Layout.js | 3 +- src/rsg-components/Layout/Renderer.js | 36 ++-- src/rsg-components/ReactComponent/Renderer.js | 78 ++++++-- src/rsg-components/StyleGuide/StyleGuide.js | 51 +++++- 7 files changed, 286 insertions(+), 58 deletions(-) create mode 100644 src/rsg-components/Downloads/Downloads.js create mode 100644 src/rsg-components/Downloads/index.js diff --git a/src/rsg-components/Components/Components.js b/src/rsg-components/Components/Components.js index 35fe8f6fa..26e4ba455 100644 --- a/src/rsg-components/Components/Components.js +++ b/src/rsg-components/Components/Components.js @@ -2,48 +2,166 @@ import React, { Component, PropTypes } from 'react'; import ReactComponent from 'rsg-components/ReactComponent'; import Renderer from 'rsg-components/ReactComponent/Renderer'; import Sections from 'rsg-components/Sections'; +import merge from 'lodash/merge'; +import flatMapDeep from 'lodash/flatMapDeep'; + +const componentFileNameRegEx = /([\w-]+)\/[\w-]+\.jsx?$/i; +const tagParseRegEx = /@tags(\{.*\})/; + +const checkTags = (tagList, regExp) => { + for (let i = 0; i < tagList.length; i++) { + if (tagList[i].match(regExp)) { + return true; + } + } + + return false; +}; export default class Components extends Component { - static propTypes = { - highlightTheme: PropTypes.string.isRequired, - components: PropTypes.array.isRequired, - sections: PropTypes.array.isRequired, - sidebar: PropTypes.bool, - }; - - renderComponents() { - const { highlightTheme, components, sidebar } = this.props; + constructor(props) { + super(props); + + this.onFocus = this.onFocus.bind(this); + this.onBlur = this.onBlur.bind(this); + this.onTagClicked = this.onTagClicked.bind(this); + + let allTags = {}; + let componentParents = []; + + props.components.forEach(component => { + const folderName = component.pathLine.match(componentFileNameRegEx)[1]; + const designContent = require('examples!sdk-components/' + folderName + '/README_DES.md')[0]; + const match = designContent.content.match(tagParseRegEx); + let tags = {}; + + if (match) { + const decoded = match[1].replace(/"/g, '"'); + tags = JSON.parse(decoded); + merge(allTags, tags); + } + + componentParents.push({ + designContent, + component, + tags: flatMapDeep(tags) + }); + }); + + const selectedTags = {}; + const tagTypes = Object.keys(allTags); + + tagTypes.forEach(type => { + selectedTags[type] = ''; + }); + + this.state = { + searchTerm: '', + searchFocused: false, + tags: allTags, + selectedTags, + componentParents + }; + } + + renderComponents(searchTerm) { + const { highlightTheme, sidebar } = this.props; const ComponentRenderer = ReactComponent(Renderer); + let filteredComponents = this.state.componentParents; + + if (searchTerm !== '') { + let regExp = new RegExp(searchTerm.split('').join('.*'), 'gi'); + filteredComponents = filteredComponents.filter(componentParent => { + return componentParent.component.name.match(regExp) || + checkTags(componentParent.tags, regExp); + }); + }; + + return filteredComponents.map((componentParent) => { + const newSidebar = { + isIsolated: sidebar, + designContent: componentParent.designContent.content, + tags: componentParent.tags + }; - return components.map((component) => { return ( ); }); } - renderSections() { - const { highlightTheme, sections, sidebar } = this.props; + onFocus() { + this.setState({ + searchFocused: true + }); + } - return ( - - ); + onBlur() { + // this.setState({ + // searchFocused: false + // }) + } + + onTagClicked(isTag, name, type) { + if (!isTag) { + type = name; + } + + var obj = { + [type]: isTag ? name : true + }; + + this.setState({ + selectedTags: merge(this.state.selectedTags, obj) + }); } render() { + const { searchTerm } = this.state; + const tagTypes = Object.keys(this.state.tags); + + const tagHTML = tagTypes.map(type => { + const tags = this.state.tags[type]; + + return ( +
+
{ this.onTagClicked(false, type) }}>{type}
+ {tags.map(tag =>
{ this.onTagClicked(true, tag, type) }}>{tag}
)} +
+ ); + }); + + let selectedSearchTags = []; + for (let tagType in this.state.selectedTags) { + if (!!this.state.selectedTags[tagType]) { + selectedSearchTags.push(({tagType}: {this.state.selectedTags[tagType]})); + } + } + return (
- {this.renderComponents()} - {this.renderSections()} + {this.props.sidebar && ( +
+
Library
+
+ {selectedSearchTags} +
+ this.setState({ searchTerm: event.target.value })} + value={searchTerm} + /> +
+ )} + {this.state.searchFocused && tagHTML} + {this.renderComponents(searchTerm)}
); } diff --git a/src/rsg-components/Downloads/Downloads.js b/src/rsg-components/Downloads/Downloads.js new file mode 100644 index 000000000..45783cb70 --- /dev/null +++ b/src/rsg-components/Downloads/Downloads.js @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function Downloads(props) { + return ( +
+ This is the downloads page. +
+ ); +}; diff --git a/src/rsg-components/Downloads/index.js b/src/rsg-components/Downloads/index.js new file mode 100644 index 000000000..44f9ce80e --- /dev/null +++ b/src/rsg-components/Downloads/index.js @@ -0,0 +1 @@ +export { default } from './Downloads.js'; diff --git a/src/rsg-components/Layout/Layout.js b/src/rsg-components/Layout/Layout.js index 64f1599b2..b30f50ca1 100644 --- a/src/rsg-components/Layout/Layout.js +++ b/src/rsg-components/Layout/Layout.js @@ -53,7 +53,7 @@ const Layout = (Renderer) => class extends Component { } render() { - let { config, components, sections, sidebar } = this.props; + let { config, components, sections, sidebar, routeName } = this.props; return ( class extends Component { sections={sections} toc={this.renderTableOfContents(components, sections)} sidebar={sidebar} + routeName={routeName} /> ); } diff --git a/src/rsg-components/Layout/Renderer.js b/src/rsg-components/Layout/Renderer.js index 027392a6f..45edd4fb2 100644 --- a/src/rsg-components/Layout/Renderer.js +++ b/src/rsg-components/Layout/Renderer.js @@ -1,22 +1,38 @@ import React, { PropTypes } from 'react'; import classnames from 'classnames'; +import Downloads from 'rsg-components/Downloads'; const s = require('./Layout.css'); -const Renderer = ({ title, components, toc, sidebar }) => ( +const ROUTES = { + DEFAULT: 'Default', + DOWNLOADS: 'Downloads' +}; + +const Renderer = ({ title, components, toc, sidebar, routeName }) => (
-
-
- {components} - -
-
+ {((routeName) => { + switch(routeName) { + case ROUTES.DOWNLOADS: + return + default: + return ( +
+
+ {components} + +
+
+ ) + } + })(routeName)}

{title}

- {toc} + Library + Downloads
diff --git a/src/rsg-components/ReactComponent/Renderer.js b/src/rsg-components/ReactComponent/Renderer.js index 31a6aa134..e26c646db 100644 --- a/src/rsg-components/ReactComponent/Renderer.js +++ b/src/rsg-components/ReactComponent/Renderer.js @@ -1,26 +1,70 @@ import React, { PropTypes } from 'react'; +import Markdown from 'rsg-components/Markdown'; const s = require('./ReactComponent.css'); const Renderer = ({ name, pathLine, description, propList, examples, sidebar }) => { + let designContent = sidebar.designContent; + let tags = sidebar.tags; + + sidebar = sidebar.isIsolated; + + const string = ` + *, *:after, *:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + .grid:after { + content: ""; + display: table; + clear: both; + } + + .col { + float: left; + width: 50%; + padding-right: 20px; + } + + .col:last-of-type { + padding-right: 0; + } + `; + return ( -
-
-

- {name} -

-
{pathLine}
- {sidebar ? ( - Open isolated ⇢ - ) : ( - ← Back - )} -
-
- {description} +
+ {!sidebar && +
+ + +
+ } +
+
+

+ {name} +

+ {sidebar && +
+ {tags && tags.map(tag => {tag})} +
+ } + {sidebar ? ( + Open isolated ⇢ + ) : ( + ← Back + )} +
+ {!sidebar && +
+ {description} + {propList} + {examples} +
+ }
- {propList} - {examples}
); }; @@ -31,7 +75,7 @@ Renderer.propTypes = { description: PropTypes.object, propList: PropTypes.object, examples: PropTypes.array, - sidebar: PropTypes.bool, + sidebar: PropTypes.object, }; export default Renderer; diff --git a/src/rsg-components/StyleGuide/StyleGuide.js b/src/rsg-components/StyleGuide/StyleGuide.js index 03156968c..af0b77c09 100644 --- a/src/rsg-components/StyleGuide/StyleGuide.js +++ b/src/rsg-components/StyleGuide/StyleGuide.js @@ -1,11 +1,50 @@ -import React from 'react'; +import React, { Component } from 'react'; import Layout from 'rsg-components/Layout'; import Renderer from 'rsg-components/Layout/Renderer'; -export default function StyleGuide(props) { - const LayoutRenderer = Layout(Renderer); +const ROUTES = { + DEFAULT: 'Default', + DOWNLOADS: 'Downloads' +}; - return ( - - ); +export default class StyleGuide extends Component { + constructor(props) { + super(props); + this.handleHashChange = this.handleHashChange.bind(this); + + this.state = { + routeName: ROUTES.DEFAULT + }; + + window.addEventListener('hashchange', this.handleHashChange); + } + + componentDidMount() { + this.handleHashChange(); + } + + handleHashChange() { + let hash = window.location.hash; + + if (hash.length === 0) { + return this.setState({ + routeName: ROUTES.DEFAULT + }); + } + + switch(hash.substr(2)) { + case ROUTES.DOWNLOADS: + return this.setState({ + routeName: ROUTES.DOWNLOADS + }); + }; + } + + render() { + const LayoutRenderer = Layout(Renderer); + + return ( + + ); + } } From f6d9c7cd49dde4f4a5ea09cc0908953bf2992428 Mon Sep 17 00:00:00 2001 From: fractaltheory Date: Mon, 29 Aug 2016 17:40:49 -0700 Subject: [PATCH 02/67] Fix module resolve error with hot reloading --- src/make-webpack-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/make-webpack-config.js b/src/make-webpack-config.js index ec1ffcf7d..c13c7d4e1 100644 --- a/src/make-webpack-config.js +++ b/src/make-webpack-config.js @@ -151,7 +151,7 @@ module.exports = function(env) { else { webpackConfig = merge(webpackConfig, { entry: [ - 'webpack-hot-middleware/client', + require.resolve('webpack-hot-middleware/client'), entryScript, ], debug: true, From b774caa9726a96d5c1cb6be73541dd00295caa75 Mon Sep 17 00:00:00 2001 From: fractaltheory Date: Mon, 29 Aug 2016 17:42:57 -0700 Subject: [PATCH 03/67] Readme update --- Readme.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Readme.md b/Readme.md index dce98ca19..af6570903 100644 --- a/Readme.md +++ b/Readme.md @@ -1,3 +1,10 @@ +# Mobify Fork + +* Clone this repo and check out #pattern-library branch +* Run `npm link` +* Inside SDK repo: `npm link react-styleguidist && npm run styleguide` +* Make any necessary changes to react-styleguidist (you may need to re-run npm run styleguide inside SDK repo) + # React Styleguidist [![Build Status](https://travis-ci.org/sapegin/react-styleguidist.svg)](https://travis-ci.org/sapegin/react-styleguidist) [![Dependency Status](https://david-dm.org/sapegin/react-styleguidist.svg)](https://david-dm.org/sapegin/react-styleguidist) [![npm](https://img.shields.io/npm/v/react-styleguidist.svg)](https://www.npmjs.com/package/react-styleguidist) From ecce993bdb1ee50721b12261717ec6db0b74bd32 Mon Sep 17 00:00:00 2001 From: fractaltheory Date: Mon, 29 Aug 2016 17:49:53 -0700 Subject: [PATCH 04/67] Allow for npm link development MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I think this should work… --- src/utils/config.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/utils/config.js b/src/utils/config.js index 25a9d3887..1640f3a80 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -121,7 +121,6 @@ function readConfig(configFilepath, cliOptions) { function findConfig(argv) { if (argv.config) { // Custom config location - var configFilepath = path.join(process.cwd(), argv.config); if (!fs.existsSync(configFilepath)) { throw Error('Styleguidist config not found: ' + configFilepath + '.'); @@ -131,10 +130,9 @@ function findConfig(argv) { } // Search config file in all parent directories - var configDir; try { - configDir = findup.sync(__dirname, CONFIG_FILENAME); + configDir = findup.sync(process.cwd(), CONFIG_FILENAME); } catch (exception) { throw Error('Styleguidist config not found: ' + CONFIG_FILENAME + '.'); From b9f52714f2ccb7ac8c965b71124f68d71423d08a Mon Sep 17 00:00:00 2001 From: fractaltheory Date: Tue, 30 Aug 2016 11:17:15 -0700 Subject: [PATCH 05/67] Nuke a bunch of styles --- src/index.js | 1 - src/rsg-components/Layout/Layout.css | 58 --------------- src/rsg-components/Layout/Layout.js | 6 +- src/rsg-components/Layout/Renderer.js | 23 ++---- src/rsg-components/Props/Props.css | 71 ------------------- src/rsg-components/Props/Props.js | 51 +++++++------ .../ReactComponent/ReactComponent.css | 43 ----------- src/rsg-components/ReactComponent/Renderer.js | 20 +++--- src/rsg-components/Section/Renderer.js | 10 ++- src/rsg-components/Section/Section.css | 20 ------ .../TableOfContents/TableOfContents.css | 40 ----------- .../TableOfContents/TableOfContents.js | 13 ++-- src/styles.css | 4 -- 13 files changed, 51 insertions(+), 309 deletions(-) delete mode 100644 src/rsg-components/Layout/Layout.css delete mode 100644 src/rsg-components/Props/Props.css delete mode 100644 src/rsg-components/ReactComponent/ReactComponent.css delete mode 100644 src/rsg-components/Section/Section.css delete mode 100644 src/rsg-components/TableOfContents/TableOfContents.css delete mode 100644 src/styles.css diff --git a/src/index.js b/src/index.js index 9aae61099..587a42781 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,6 @@ import { setComponentsNames, globalizeComponents, promoteInlineExamples, flatten import StyleGuide from 'rsg-components/StyleGuide'; import 'highlight.js/styles/tomorrow.css'; -import './styles.css'; // Make libraries available in examples global.React = React; diff --git a/src/rsg-components/Layout/Layout.css b/src/rsg-components/Layout/Layout.css deleted file mode 100644 index 537a59df1..000000000 --- a/src/rsg-components/Layout/Layout.css +++ /dev/null @@ -1,58 +0,0 @@ -.root { - composes: base base-bg from "../../styles/colors.css"; -} - -.wrapper { - padding-left: 200px; -} - -.content { - max-width: 1000px; - padding: 15px 30px; - margin: 0 auto; -} - -.sidebar { - composes: border from "../../styles/colors.css"; - border-width: 0 1px 0 0; - background: #f5f5f5; - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 200px; - overflow: scroll; -} - -.components { - overflow: auto; /* to prevent the pane from growing out of the screen */ -} - -.heading { - composes: reset font from "../../styles/common.css"; - composes: border from "../../styles/colors.css"; - border-width: 0 0 1px 0; - margin: 0; - font-size: 18px; - font-weight: normal; - display: block; - padding: 15px; -} - -.empty { - composes: font from "../../styles/common.css"; - margin: 0 0 30px 0; -} - -.footer { - composes: font from "../../styles/common.css"; - composes: light from "../../styles/colors.css"; - font-size: 12px; -} - -.link { - composes: link from "../../styles/colors.css"; -} - -.withoutSidebar .wrapper { padding-left: 0; } -.withoutSidebar .sidebar { display: none; } diff --git a/src/rsg-components/Layout/Layout.js b/src/rsg-components/Layout/Layout.js index b30f50ca1..d84c20df3 100644 --- a/src/rsg-components/Layout/Layout.js +++ b/src/rsg-components/Layout/Layout.js @@ -2,8 +2,6 @@ import React, { Component, PropTypes } from 'react'; import Components from 'rsg-components/Components'; import TableOfContents from 'rsg-components/TableOfContents'; -import s from './Layout.css'; - import isEmpty from 'lodash/isEmpty'; const Layout = (Renderer) => class extends Component { @@ -41,8 +39,8 @@ const Layout = (Renderer) => class extends Component { } return ( -
- No components found. Check + ); diff --git a/src/rsg-components/Layout/Renderer.js b/src/rsg-components/Layout/Renderer.js index 45edd4fb2..d16c6f4f7 100644 --- a/src/rsg-components/Layout/Renderer.js +++ b/src/rsg-components/Layout/Renderer.js @@ -1,39 +1,31 @@ import React, { PropTypes } from 'react'; -import classnames from 'classnames'; import Downloads from 'rsg-components/Downloads'; -const s = require('./Layout.css'); - const ROUTES = { DEFAULT: 'Default', DOWNLOADS: 'Downloads' }; -const Renderer = ({ title, components, toc, sidebar, routeName }) => ( -
-
+const Renderer = ({ title, components, toc, routeName }) => ( +
+
{((routeName) => { switch(routeName) { case ROUTES.DOWNLOADS: return default: return ( -
-
+
+
{components} -
) } })(routeName)} -
-

{title}

- Library - Downloads -
); @@ -42,7 +34,6 @@ Renderer.propTypes = { title: PropTypes.string.isRequired, components: PropTypes.object.isRequired, toc: PropTypes.node.isRequired, - sidebar: PropTypes.bool, }; export default Renderer; diff --git a/src/rsg-components/Props/Props.css b/src/rsg-components/Props/Props.css deleted file mode 100644 index fdf90c8de..000000000 --- a/src/rsg-components/Props/Props.css +++ /dev/null @@ -1,71 +0,0 @@ -.root { - composes: reset font from "../../styles/common.css"; - margin-bottom: 30px; - font-size: 13px; -} - -.heading { - margin-bottom: 8px; - font-size: 20px; - font-weight: normal; -} - -.inline { - display: inline-block; -} -.inline p:last-child { - margin: 0; -} - -.table { - width: 100%; - border-collapse: collapse; -} -.tableHead { - composes: border from "../../styles/colors.css"; - border-width: 0 0 1px 0; -} -.tableBody { -} -.cell { - padding-right: 15px; - padding-top: 6px; - vertical-align: top; - font-size: 13px; -} -.cellHeading { - padding-right: 15px; - padding-bottom: 6px; - text-align: left; - font-size: 13px; -} -.cellDesc { - width: 99%; - padding-left: 15px; -} - -.required { - composes: light from "../../styles/colors.css"; -} -.name { - composes: name from "../../styles/colors.css"; -} -.type { - composes: type from "../../styles/colors.css"; -} - -.list { - display: inline; - margin: 0; - padding: 0; - list-style-type: none; -} -.listItem { - display: inline; -} -.listItem:after { - content: ", "; -} -.listItem:last-child:after { - content: ""; -} diff --git a/src/rsg-components/Props/Props.js b/src/rsg-components/Props/Props.js index 613a50d4e..a041804b6 100644 --- a/src/rsg-components/Props/Props.js +++ b/src/rsg-components/Props/Props.js @@ -2,13 +2,10 @@ import React, { Component, PropTypes } from 'react'; import trim from 'lodash/trim'; import Markdown from 'rsg-components/Markdown'; -import s from './Props.css'; -import sMarkdown from '../Markdown/Markdown.css'; - /* eslint-disable react/prop-types */ export let Code = ({ className = '', children }) => { - return {children}; + return {children}; }; export function unquote(string) { @@ -26,10 +23,10 @@ export default class Props extends Component { let prop = props[name]; rows.push( - {name} - {this.renderType(getType(prop))} - {this.renderDefault(prop)} - {this.renderDescription(prop)} + {name} + {this.renderType(getType(prop))} + {this.renderDefault(prop)} + {this.renderDescription(prop)} ); } @@ -56,7 +53,7 @@ export default class Props extends Component { renderDefault(prop) { if (prop.required) { return ( - Required + Required ); } else if (prop.defaultValue) { @@ -72,7 +69,7 @@ export default class Props extends Component { let extra = this.renderExtra(prop); return (
- {description && } + {description && } {description && extra && ' '} {extra}
@@ -108,12 +105,12 @@ export default class Props extends Component { return {getType(prop).value}; } let values = getType(prop).value.map(({ value }) => ( -
  • +
  • {unquote(value)}
    • )); return ( - One of:
      {values}
     + One of:
      {values}
     ); } @@ -122,13 +119,13 @@ export default class Props extends Component { return {getType(prop).value}; } let values = getType(prop).value.map((value, index) => ( -
  • - {this.renderType(value)} +
  • + {this.renderType(value)}
    • )); return ( - One of type:
      {values}
     + One of type:
      {values}
     ); } @@ -140,11 +137,11 @@ export default class Props extends Component { let description = prop.description; rows.push(
    - {name}{': '} - {this.renderType(prop)} + {name}{': '} + {this.renderType(prop)} {defaultValue && ' — '}{defaultValue} {description && ' — '} - {description && } + {description && }
    ); } @@ -153,16 +150,16 @@ export default class Props extends Component { renderTable(props) { return ( - - +
    + - - - - + + + + - + {this.renderRows(props)}
    NameTypeDefaultDescriptionNameTypeDefaultDescription
    @@ -171,8 +168,8 @@ export default class Props extends Component { render() { return ( -
    -

    Props

    +
    +

    Props

    {this.renderTable(this.props.props.props)}
    ); diff --git a/src/rsg-components/ReactComponent/ReactComponent.css b/src/rsg-components/ReactComponent/ReactComponent.css deleted file mode 100644 index d3cddf97a..000000000 --- a/src/rsg-components/ReactComponent/ReactComponent.css +++ /dev/null @@ -1,43 +0,0 @@ -.root { - margin-bottom: 50px; - font-size: 16px; -} - -.header { - composes: font from "../../styles/common.css"; - position: relative; - margin-bottom: 20px; - font-weight: normal; -} - -.isolatedLink { - composes: link from "../../styles/colors.css"; - position: absolute; - top: 0; - right: 0; - font-size: 14px; - opacity: 0; - transition: opacity ease-in-out .15s .2s; -} - -.root:hover .isolatedLink { - opacity: 1; -} - -.heading { - position: relative; - margin: 0 0 6px 0; - font-size: 36px; - font-weight: normal; -} - -.pathLine { - composes: monospace from "../../styles/common.css"; - composes: light from "../../styles/colors.css"; - font-size: 14px; -} - -.description { - composes: font from "../../styles/common.css"; - margin-bottom: 15px; -} diff --git a/src/rsg-components/ReactComponent/Renderer.js b/src/rsg-components/ReactComponent/Renderer.js index e26c646db..c939992bd 100644 --- a/src/rsg-components/ReactComponent/Renderer.js +++ b/src/rsg-components/ReactComponent/Renderer.js @@ -1,8 +1,6 @@ import React, { PropTypes } from 'react'; import Markdown from 'rsg-components/Markdown'; -const s = require('./ReactComponent.css'); - const Renderer = ({ name, pathLine, description, propList, examples, sidebar }) => { let designContent = sidebar.designContent; let tags = sidebar.tags; @@ -34,27 +32,27 @@ const Renderer = ({ name, pathLine, description, propList, examples, sidebar }) `; return ( -
    +
    {!sidebar && -
    +
    } -
    -
    -

    +
    +
    +

    {name}

    {sidebar && -
    - {tags && tags.map(tag => {tag})} +
    + {tags && tags.map(tag => {tag})}
    } {sidebar ? ( - Open isolated ⇢ + Open isolated ⇢ ) : ( - ← Back + ← Back )}
    {!sidebar && diff --git a/src/rsg-components/Section/Renderer.js b/src/rsg-components/Section/Renderer.js index d15c1e055..538f2d714 100644 --- a/src/rsg-components/Section/Renderer.js +++ b/src/rsg-components/Section/Renderer.js @@ -1,13 +1,11 @@ import React, { PropTypes } from 'react'; -const s = require('./Section.css'); - const Renderer = ({ name, content, components }) => { return ( -
    -
    -

    - +
    +
    +

    + {name}

    diff --git a/src/rsg-components/Section/Section.css b/src/rsg-components/Section/Section.css deleted file mode 100644 index 1f9134c8a..000000000 --- a/src/rsg-components/Section/Section.css +++ /dev/null @@ -1,20 +0,0 @@ -.root { - margin-bottom: 50px; - font-size: 16px; -} - -.header { - composes: font from "../../styles/common.css"; - margin-bottom: 20px; - font-weight: bold; -} - -.heading { - margin: 0 0 6px 0; - font-size: 38px; - font-weight: bold; -} - -.anchor { - -} diff --git a/src/rsg-components/TableOfContents/TableOfContents.css b/src/rsg-components/TableOfContents/TableOfContents.css deleted file mode 100644 index cdadcbbba..000000000 --- a/src/rsg-components/TableOfContents/TableOfContents.css +++ /dev/null @@ -1,40 +0,0 @@ -.root { - composes: reset font from "../../styles/common.css"; -} - -.list { - margin: 0; - padding: 15px; - list-style-type: none; -} - -.item { - margin: 0 0 7px; - padding: 0; - font-size: 15px; -} - -.link { - composes: link from "../../styles/colors.css"; -} - -.section { - composes: link from "../../styles/colors.css"; - font-weight: bold; -} - -.search { - composes: base base-bg border from "../../styles/colors.css"; - display: block; - box-sizing: border-box; - width: 170px; - margin: 15px 0 0 15px; - padding: 6px 12px; - font-size: 15px; - border-radius: 2px; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -} -.search:focus { - border-color: #1978c8; - outline: 0; -} diff --git a/src/rsg-components/TableOfContents/TableOfContents.js b/src/rsg-components/TableOfContents/TableOfContents.js index 78b33fced..8e97713b0 100644 --- a/src/rsg-components/TableOfContents/TableOfContents.js +++ b/src/rsg-components/TableOfContents/TableOfContents.js @@ -1,7 +1,5 @@ import React, { Component, PropTypes } from 'react'; -import s from './TableOfContents.css'; - class TableOfContents extends Component { constructor(props) { super(props); @@ -18,15 +16,15 @@ class TableOfContents extends Component { } return ( -