From 8fe69972b47525828156bcabb4e4499cef6a830a Mon Sep 17 00:00:00 2001 From: Austin Green Date: Tue, 7 Aug 2018 13:53:00 -0700 Subject: [PATCH] fix(docs): update styleguidist internal components to pass WCAG 2.0 compliance --- utils/styleguide/ArgumentsRenderer/index.js | 50 +++++++ utils/styleguide/LogoRenderer/index.js | 12 +- .../TableOfContentsRenderer/index.js | 141 ++++++++++-------- utils/styleguide/TableRenderer/index.js | 60 ++++++++ utils/styleguide/github-hljs-theme.css | 90 +++++++++++ utils/styleguide/styleguide.base.config.js | 21 ++- 6 files changed, 304 insertions(+), 70 deletions(-) create mode 100644 utils/styleguide/ArgumentsRenderer/index.js create mode 100644 utils/styleguide/TableRenderer/index.js create mode 100644 utils/styleguide/github-hljs-theme.css diff --git a/utils/styleguide/ArgumentsRenderer/index.js b/utils/styleguide/ArgumentsRenderer/index.js new file mode 100644 index 00000000000..5b26618e6a6 --- /dev/null +++ b/utils/styleguide/ArgumentsRenderer/index.js @@ -0,0 +1,50 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import Argument from 'react-styleguidist/lib/rsg-components/Argument/ArgumentRenderer'; +import { + zdFontSizeEpsilon, + zdFontWeightSemibold, + zdSpacingXs, + zdSpacingXxs +} from '@zendeskgarden/css-variables'; + +const ArgumentsContainer = styled.div` + margin-bottom: ${zdSpacingXs}; + font-size: inherit; +`; + +const Heading = styled.div` + margin-bottom: ${zdSpacingXxs}; + font-size: ${zdFontSizeEpsilon}; + font-weight: ${zdFontWeightSemibold}; +`; + +const ArgumentsRenderer = ({ args, heading }) => ( + + {heading && Arguments} + {args.map(arg => ( + + ))} + +); + +ArgumentsRenderer.propTypes = { + args: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string.isRequired, + type: PropTypes.object, + description: PropTypes.string + }) + ).isRequired, + heading: PropTypes.bool +}; + +export default ArgumentsRenderer; diff --git a/utils/styleguide/LogoRenderer/index.js b/utils/styleguide/LogoRenderer/index.js index eba6be95825..8cd855bbed1 100644 --- a/utils/styleguide/LogoRenderer/index.js +++ b/utils/styleguide/LogoRenderer/index.js @@ -16,11 +16,13 @@ const LogoWrapper = styled.div` `; const LogoRenderer = () => ( - - - - - +
+ + + + + +
); export default LogoRenderer; diff --git a/utils/styleguide/TableOfContentsRenderer/index.js b/utils/styleguide/TableOfContentsRenderer/index.js index abec2154b5c..6dd54b67e49 100644 --- a/utils/styleguide/TableOfContentsRenderer/index.js +++ b/utils/styleguide/TableOfContentsRenderer/index.js @@ -19,6 +19,17 @@ import Spacer from './Spacer'; import PACKAGE_JSON from 'package.json'; import CHANGELOG from 'CHANGELOG.md'; +const TableOfContentsChildrenWrapper = styled.div` + a:hover { + text-decoration: underline; + } + + a:focus { + outline: none; + text-decoration: underline; + } +`; + const RTLContainer = styled.div` margin-top: 16px; padding-right: 16px; @@ -57,70 +68,72 @@ class TableOfContents extends Component { const { isChangelogModalOpen } = this.state; return ( - - {children} - - - this.setState({ isChangelogModalOpen: true })} - > - View Changelog - - {isChangelogModalOpen && ( - this.setState({ isChangelogModalOpen: false })} - name={PACKAGE_JSON.name} - htmlContent={CHANGELOG} - /> - )} - - - View package on GitHub - - - - - { - if (isRtl) { - location.search = ''; - } else { - location.search = '?isRtl'; - } - }} - > - - - - } - > - RTL in Garden -

- All Garden components are RTL locale aware when used with the {''}{' '} - component. -

-

- View Garden Theming Package -

- - - - +
+ + {children} + + + this.setState({ isChangelogModalOpen: true })} + > + View Changelog + + {isChangelogModalOpen && ( + this.setState({ isChangelogModalOpen: false })} + name={PACKAGE_JSON.name} + htmlContent={CHANGELOG} + /> + )} + + + View package on GitHub + + + + + { + if (isRtl) { + location.search = ''; + } else { + location.search = '?isRtl'; + } + }} + > + + +
+ } + > + RTL in Garden +

+ All Garden components are RTL locale aware when used with the{' '} + {''} component. +

+

+ View Garden Theming Package +

+ + + + + ); } } diff --git a/utils/styleguide/TableRenderer/index.js b/utils/styleguide/TableRenderer/index.js new file mode 100644 index 00000000000..92eeb787fef --- /dev/null +++ b/utils/styleguide/TableRenderer/index.js @@ -0,0 +1,60 @@ +/** + * Copyright Zendesk, Inc. + * + * Use of this source code is governed under the Apache License, Version 2.0 + * found at http://www.apache.org/licenses/LICENSE-2.0. + */ + +/** + * Original implementation is based off of the logic shown in + * https://github.com/styleguidist/react-styleguidist/blob/46156bb932121df5a176852d0fcdfd43cad83ef3/src/rsg-components/Table/TableRenderer.js + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { Table, Head, Row, HeaderCell, Body, Cell } from '../../../packages/tables/src'; + +const AutoTable = styled(Table)` + && { + table-layout: auto; + } +`; + +const TableRenderer = ({ columns, rows, getRowKey }) => { + return ( + + + + {columns.map(({ caption }) => ( + + {caption} + + ))} + + + + {rows.map(row => ( + + {columns.map(({ render }, index) => ( + {render(row) || -} + ))} + + ))} + + + ); +}; + +TableRenderer.propTypes = { + columns: PropTypes.arrayOf( + PropTypes.shape({ + caption: PropTypes.string.isRequired, + render: PropTypes.func.isRequired + }) + ).isRequired, + rows: PropTypes.arrayOf(PropTypes.object).isRequired, + getRowKey: PropTypes.func.isRequired +}; + +export default TableRenderer; diff --git a/utils/styleguide/github-hljs-theme.css b/utils/styleguide/github-hljs-theme.css new file mode 100644 index 00000000000..0c165590245 --- /dev/null +++ b/utils/styleguide/github-hljs-theme.css @@ -0,0 +1,90 @@ +.hljs { + color: #2F3941 !important; /* GREY-800 */ + background: #F8F9F9 !important; /* GREY-100 */ +} + +.hljs-comment, +.hljs-quote { + color: #68737D !important; /* GREY-600 */ + font-style: italic !important; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-subst { + color: #2F3941 !important; /* GREY-800 */ + font-weight: bold !important; +} + +.hljs-number, +.hljs-literal, +.hljs-variable, +.hljs-template-variable, +.hljs-tag .hljs-attr { + color: #335D63 !important; /* KALE-500 */ +} + +.hljs-string, +.hljs-doctag { + color: #d14 !important; /* GREY-100 */ +} + +.hljs-title, +.hljs-section, +.hljs-selector-id { + color: #8C232C !important; /* RED-700 */ + font-weight: bold !important; +} + +.hljs-subst { + font-weight: normal !important; +} + +.hljs-type, +.hljs-class .hljs-title { + color: #56777A !important; /* KALE-400 */ + font-weight: bold !important; +} + +.hljs-tag, +.hljs-name, +.hljs-attribute { + color: #1F73B7 !important; /* BLUE-600 */ + font-weight: normal !important; +} + +.hljs-regexp, +.hljs-link { + color: #038153 !important; /* GREEN-100 */ +} + +.hljs-symbol, +.hljs-bullet { + color: #990073 !important; +} + +.hljs-built_in, +.hljs-builtin-name { + color: #5293C7 !important; /* BLUE-400 */ +} + +.hljs-meta { + color: #999 !important; + font-weight: bold !important; +} + +.hljs-deletion { + background: #F5B5BA !important; /* RED-300 */ +} + +.hljs-addition { + background: #AECFC2 !important; /* GREEN-300 */ +} + +.hljs-emphasis { + font-style: italic !important; +} + +.hljs-strong { + font-weight: bold !important; +} diff --git a/utils/styleguide/styleguide.base.config.js b/utils/styleguide/styleguide.base.config.js index 906002e9598..b13220b235a 100644 --- a/utils/styleguide/styleguide.base.config.js +++ b/utils/styleguide/styleguide.base.config.js @@ -7,6 +7,12 @@ const path = require('path'); const webpack = require('webpack'); +const { + zdColorBlue600, + zdColorGrey100, + zdColorKale400, + zdColorRed600 +} = require('@zendeskgarden/css-variables'); const packageManifest = require(path.resolve('package.json')); const customStyleguideConfig = require(path.resolve('styleguide.config.js')); const basePathName = path.basename(path.resolve('./')); @@ -20,7 +26,18 @@ const defaultStyleguideConfig = { serverPort: 5000, styleguideDir: `../../demo/${basePathName}`, usageMode: 'expand', + theme: { + color: { + link: zdColorBlue600, + linkHover: zdColorBlue600, + codeBackground: zdColorGrey100, + sidebarBackground: zdColorGrey100, + name: zdColorKale400, + type: zdColorRed600 + } + }, template: { + lang: 'en', head: { meta: [ { @@ -106,7 +123,9 @@ const defaultStyleguideConfig = { styleguideComponents: { Wrapper: path.resolve(__dirname, 'Wrapper'), TableOfContentsRenderer: path.resolve(__dirname, 'TableOfContentsRenderer'), - LogoRenderer: path.resolve(__dirname, 'LogoRenderer') + LogoRenderer: path.resolve(__dirname, 'LogoRenderer'), + TableRenderer: path.resolve(__dirname, 'TableRenderer'), + ArgumentsRenderer: path.resolve(__dirname, 'ArgumentsRenderer') }, webpackConfig: { devtool: 'eval-source-map',