From 8fdf7b60ce546f45b641591092d80181f6dee4b0 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Mon, 22 Oct 2018 17:14:59 +1100 Subject: [PATCH 1/5] feat(docs): Improve theming docs --- packages/theming/README.md | 29 ++++++++++++++ utils/scripts/generate-markdown-table.js | 49 ++++++++++++++++++++++++ utils/scripts/markdown-table.sh | 13 +++++++ utils/styleguide/styles.css | 15 ++++++++ 4 files changed, 106 insertions(+) create mode 100755 utils/scripts/generate-markdown-table.js create mode 100755 utils/scripts/markdown-table.sh diff --git a/packages/theming/README.md b/packages/theming/README.md index 4aaab5bd7bd..81bdbcb6e41 100644 --- a/packages/theming/README.md +++ b/packages/theming/README.md @@ -80,6 +80,35 @@ const LocalizedComponent = withTheme(StyledDiv); ; ``` +### Theme ids + +Each component has a `COMPONENT_ID` applied to that you can target in your own theme +file to override the default look and feel. This table contains all the ids and which +package they apply to. + +| Component | COMPONENT_IDs | +|-----------|---------------| +| avatars | avatars.avatar | +| buttons | buttons.anchor, buttons.button, buttons.button‌_group_view, buttons.icon, buttons.icon_button | +| checkboxes | checkboxes.checkbox‌_view, checkboxes.hint, checkboxes.input, checkboxes.label, checkboxes.message | +| chrome | chrome.body, chrome.chrome, chrome.content, chrome.header, chrome.header‌_item, chrome.header_item_icon, chrome.header_item_text, chrome.header_item_wrapper, chrome.main, chrome.nav, chrome.nav_item, chrome.nav_item_icon, chrome.nav_item_text, chrome.sidebar, chrome.subnav, chrome.subnav_item, chrome.subnav_item_text | +| grid | grid.col, grid.grid, grid.row | +| loaders | loaders.dots, loaders.spinner | +| menus | menus.add‌_item, menus.header_icon, menus.header_item, menus.item, menus.item_meta, menus.media_body, menus.media_figure, menus.media_item, menus.menu_view, menus.next_item, menus.previous_item, menus.separator | +| modals | modals.backdrop, modals.body, modals.close, modals.footer, modals.footer‌_item, modals.header, modals.modal_view | +| notifications | notifications.alert, notifications.close, notifications.notification, notifications.paragraph, notifications.title, notifications.well | +| pagination | pagination.gap, pagination.next‌_page, pagination.page, pagination.pagination_view, pagination.previous_page | +| radios | radios.hint, radios.input, radios.label, radios.message, radios.radio‌_view | +| ranges | ranges.hint, ranges.label, ranges.message, ranges.range‌_group, ranges.single_thumb_view | +| select | select.add‌_item, select.dropdown, select.header_item, select.hint, select.item, select.item_meta, select.label, select.media_body, select.media_item, select.message, select.next_item, select.previous_item, select.select_group, select.select_view, select.separator | +| tables | tables.body, tables.caption, tables.cell, tables.group‌_row, tables.head, tables.header_cell, tables.header_row, tables.overflow_button, tables.row, tables.sortable, tables.table | +| tabs | tabs.tab, tabs.tablist, tabs.tabpanel, tabs.tabs‌_view | +| tags | tags.avatar, tags.close, tags.tag‌_view | +| textfields | textfields.hint, textfields.input, textfields.label, textfields.media‌_figure, textfields.message, textfields.text_group, textfields.textarea | +| toggles | toggles.hint, toggles.input, toggles.label, toggles.message, toggles.toggle‌_view | +| tooltip | tooltip.light‌_tooltip, tooltip.paragraph, tooltip.title, tooltip.tooltip | +| typography | typography.lg, typography.md, typography.sm, typography.xl, typography.xxl, typography.xxxl | + ### WARNING Theming is meant to be used for small, global changes to a component diff --git a/utils/scripts/generate-markdown-table.js b/utils/scripts/generate-markdown-table.js new file mode 100755 index 00000000000..9ae0925fc74 --- /dev/null +++ b/utils/scripts/generate-markdown-table.js @@ -0,0 +1,49 @@ +#!/usr/bin/env node + +/** + * 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. + */ + +/* eslint-disable no-console */ + +const stdin = process.openStdin(); + +let data = ''; + +stdin.on('data', chunk => { + data += chunk; +}); + +stdin.on('end', () => { + const cids = JSON.parse(data); + + const groups = cids.reduce((acc, item) => { + const [group] = item.split('.'); + + if (acc[group]) { + acc[group].push(item); + } else { + acc[group] = [item]; + } + + return acc; + }, {}); + + const table = Object.entries(groups).reduce( + (mdTable, group) => { + const [component, componentIds] = group; + + // eslint-disable-next-line no-param-reassign + mdTable += `| ${component} | ${componentIds.join(', ').replace('_', '‌_')} |\n`; + + return mdTable; + }, + `| Component | COMPONENT_IDs | +|-----------|---------------|\n` + ); + + console.log(table); +}); diff --git a/utils/scripts/markdown-table.sh b/utils/scripts/markdown-table.sh new file mode 100755 index 00000000000..4579ed52f48 --- /dev/null +++ b/utils/scripts/markdown-table.sh @@ -0,0 +1,13 @@ +#!/bin/bash +grep \ + --exclude-dir=.template \ + --exclude-dir=node_modules \ + --include=\*.js \ + --exclude=\*.spec.js \ + -rnw 'packages' \ + -e 'const COMPONENT_ID = ' \ + | rev | cut -d: -f1 | rev \ + | sed 's/const COMPONENT_ID = //g' | sed 's/;/,/g' | sort | tr -d '\n' \ + | rev | cut -c 2- | rev \ + | awk ' BEGIN {print "["}{print} END {print"]"}' | sed "s/'/\"/g" \ + | node ./utils/scripts/generate-markdown-table.js diff --git a/utils/styleguide/styles.css b/utils/styleguide/styles.css index 8a6466b7357..0ca234ba79d 100644 --- a/utils/styleguide/styles.css +++ b/utils/styleguide/styles.css @@ -5,3 +5,18 @@ html { font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif; } + +table tbody tr { + border-bottom: 1px solid #e9ebed; +} +table tbody tr:hover { + background-color: #edf7ff; +} + +table th:first-child { + width: 20%; +} + +table th, table td { + padding-left: 10px !important; +} From d9baaee6706f2a832764ecc575c391dbafb8afae Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Wed, 24 Oct 2018 14:33:15 +1100 Subject: [PATCH 2/5] Do it all in AWK so it's easier to follow --- packages/theming/README.md | 46 ++++++++++++++++----------------- utils/scripts/markdown-table.sh | 22 +++++++++++++--- 2 files changed, 41 insertions(+), 27 deletions(-) diff --git a/packages/theming/README.md b/packages/theming/README.md index 81bdbcb6e41..b5454badc77 100644 --- a/packages/theming/README.md +++ b/packages/theming/README.md @@ -82,32 +82,32 @@ const LocalizedComponent = withTheme(StyledDiv); ### Theme ids -Each component has a `COMPONENT_ID` applied to that you can target in your own theme +Each component has a `COMPONENT_ID` applied so you can target it in your own theme file to override the default look and feel. This table contains all the ids and which package they apply to. -| Component | COMPONENT_IDs | -|-----------|---------------| -| avatars | avatars.avatar | -| buttons | buttons.anchor, buttons.button, buttons.button‌_group_view, buttons.icon, buttons.icon_button | -| checkboxes | checkboxes.checkbox‌_view, checkboxes.hint, checkboxes.input, checkboxes.label, checkboxes.message | -| chrome | chrome.body, chrome.chrome, chrome.content, chrome.header, chrome.header‌_item, chrome.header_item_icon, chrome.header_item_text, chrome.header_item_wrapper, chrome.main, chrome.nav, chrome.nav_item, chrome.nav_item_icon, chrome.nav_item_text, chrome.sidebar, chrome.subnav, chrome.subnav_item, chrome.subnav_item_text | -| grid | grid.col, grid.grid, grid.row | -| loaders | loaders.dots, loaders.spinner | -| menus | menus.add‌_item, menus.header_icon, menus.header_item, menus.item, menus.item_meta, menus.media_body, menus.media_figure, menus.media_item, menus.menu_view, menus.next_item, menus.previous_item, menus.separator | -| modals | modals.backdrop, modals.body, modals.close, modals.footer, modals.footer‌_item, modals.header, modals.modal_view | -| notifications | notifications.alert, notifications.close, notifications.notification, notifications.paragraph, notifications.title, notifications.well | -| pagination | pagination.gap, pagination.next‌_page, pagination.page, pagination.pagination_view, pagination.previous_page | -| radios | radios.hint, radios.input, radios.label, radios.message, radios.radio‌_view | -| ranges | ranges.hint, ranges.label, ranges.message, ranges.range‌_group, ranges.single_thumb_view | -| select | select.add‌_item, select.dropdown, select.header_item, select.hint, select.item, select.item_meta, select.label, select.media_body, select.media_item, select.message, select.next_item, select.previous_item, select.select_group, select.select_view, select.separator | -| tables | tables.body, tables.caption, tables.cell, tables.group‌_row, tables.head, tables.header_cell, tables.header_row, tables.overflow_button, tables.row, tables.sortable, tables.table | -| tabs | tabs.tab, tabs.tablist, tabs.tabpanel, tabs.tabs‌_view | -| tags | tags.avatar, tags.close, tags.tag‌_view | -| textfields | textfields.hint, textfields.input, textfields.label, textfields.media‌_figure, textfields.message, textfields.text_group, textfields.textarea | -| toggles | toggles.hint, toggles.input, toggles.label, toggles.message, toggles.toggle‌_view | -| tooltip | tooltip.light‌_tooltip, tooltip.paragraph, tooltip.title, tooltip.tooltip | -| typography | typography.lg, typography.md, typography.sm, typography.xl, typography.xxl, typography.xxxl | +| Component | COMPONENT_IDs | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| avatars | avatars.avatar | +| buttons | buttons.anchor, buttons.button, buttons.button‌\_group_view, buttons.icon, buttons.icon_button | +| checkboxes | checkboxes.checkbox‌\_view, checkboxes.hint, checkboxes.input, checkboxes.label, checkboxes.message | +| chrome | chrome.body, chrome.chrome, chrome.content, chrome.header, chrome.header‌\_item, chrome.header_item_icon, chrome.header_item_text, chrome.header_item_wrapper, chrome.main, chrome.nav, chrome.nav_item, chrome.nav_item_icon, chrome.nav_item_text, chrome.sidebar, chrome.subnav, chrome.subnav_item, chrome.subnav_item_text | +| grid | grid.col, grid.grid, grid.row | +| loaders | loaders.dots, loaders.spinner | +| menus | menus.add‌\_item, menus.header_icon, menus.header_item, menus.item, menus.item_meta, menus.media_body, menus.media_figure, menus.media_item, menus.menu_view, menus.next_item, menus.previous_item, menus.separator | +| modals | modals.backdrop, modals.body, modals.close, modals.footer, modals.footer‌\_item, modals.header, modals.modal_view | +| notifications | notifications.alert, notifications.close, notifications.notification, notifications.paragraph, notifications.title, notifications.well | +| pagination | pagination.gap, pagination.next‌\_page, pagination.page, pagination.pagination_view, pagination.previous_page | +| radios | radios.hint, radios.input, radios.label, radios.message, radios.radio‌\_view | +| ranges | ranges.hint, ranges.label, ranges.message, ranges.range‌\_group, ranges.single_thumb_view | +| select | select.add‌\_item, select.dropdown, select.header_item, select.hint, select.item, select.item_meta, select.label, select.media_body, select.media_item, select.message, select.next_item, select.previous_item, select.select_group, select.select_view, select.separator | +| tables | tables.body, tables.caption, tables.cell, tables.group‌\_row, tables.head, tables.header_cell, tables.header_row, tables.overflow_button, tables.row, tables.sortable, tables.table | +| tabs | tabs.tab, tabs.tablist, tabs.tabpanel, tabs.tabs‌\_view | +| tags | tags.avatar, tags.close, tags.tag‌\_view | +| textfields | textfields.hint, textfields.input, textfields.label, textfields.media‌\_figure, textfields.message, textfields.text_group, textfields.textarea | +| toggles | toggles.hint, toggles.input, toggles.label, toggles.message, toggles.toggle‌\_view | +| tooltip | tooltip.light‌\_tooltip, tooltip.paragraph, tooltip.title, tooltip.tooltip | +| typography | typography.lg, typography.md, typography.sm, typography.xl, typography.xxl, typography.xxxl | ### WARNING diff --git a/utils/scripts/markdown-table.sh b/utils/scripts/markdown-table.sh index 4579ed52f48..4b5ac996022 100755 --- a/utils/scripts/markdown-table.sh +++ b/utils/scripts/markdown-table.sh @@ -1,4 +1,20 @@ #!/bin/bash + +AWKCMD=' + BEGIN { FS = "="; print "[" } + { gsub(/;/, "") } + { + if ( NR == 1) { + gsub(/\047/, "\"") + } else { + gsub(/\047/, "\""); + sub(/\"/, ",\""); + } + } + { print $2 } + END { print "]" } +' + grep \ --exclude-dir=.template \ --exclude-dir=node_modules \ @@ -6,8 +22,6 @@ grep \ --exclude=\*.spec.js \ -rnw 'packages' \ -e 'const COMPONENT_ID = ' \ - | rev | cut -d: -f1 | rev \ - | sed 's/const COMPONENT_ID = //g' | sed 's/;/,/g' | sort | tr -d '\n' \ - | rev | cut -c 2- | rev \ - | awk ' BEGIN {print "["}{print} END {print"]"}' | sed "s/'/\"/g" \ + | sort \ + | awk "$AWKCMD" \ | node ./utils/scripts/generate-markdown-table.js From bc3e42fd9127dbc4bf7cf8724bf69daa10b96665 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Thu, 25 Oct 2018 14:45:37 +1100 Subject: [PATCH 3/5] Add advanced usage to show how you can compose from common overrides and use props with css helper --- packages/theming/README.md | 41 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/packages/theming/README.md b/packages/theming/README.md index b5454badc77..ae2c26cfbd7 100644 --- a/packages/theming/README.md +++ b/packages/theming/README.md @@ -80,6 +80,47 @@ const LocalizedComponent = withTheme(StyledDiv); ; ``` +### Advanced usage + +If you need to compose from other theme overrides e.g. you find yourself overriding +the same properties in serveral components or you're using props to alter your +overrides then please see the below code example. + +```jsx static +import { ThemeProvider } from '@zendeskgarden/react-theming'; +import { Notification, Title, Paragraph } from '@zendeskgarden/react-notifications'; +import { css } from 'styled-components'; + +const commonOverrides = ` + &&:hover { + color: blue; + } +`; +const theme = { + 'notifications.title': css` + ${commonOverrides} + && { + color: red; + } + `, + 'notifications.paragraph': css` + ${commonOverrides} + ${props => (props.purple ? 'color: purple' : '')} + ` +}; + + + + Themed Title (hover as well) + Custom theme triggered by prop + +; +``` + +The main difference here is the usage of the [`css` helper](https://www.styled-components.com/docs/api#css) +from styled-components. This will correctly pass down the props from the component so you can conditionally +apply styles based on props or compose from other template literals. + ### Theme ids Each component has a `COMPONENT_ID` applied so you can target it in your own theme From 4220291774e35b4a54a2328964c1a3576575df8a Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Fri, 26 Oct 2018 11:51:21 +1100 Subject: [PATCH 4/5] Inject component_ids as a global in webpack config and create a react component that renders this in docs --- .eslintrc.json | 3 +- packages/theming/README.md | 25 ++--------- utils/scripts/generate-markdown-table.js | 49 --------------------- utils/scripts/markdown-table.sh | 26 ++++++----- utils/styleguide/CIDTable/index.js | 50 ++++++++++++++++++++++ utils/styleguide/setup.js | 2 + utils/styleguide/styleguide.base.config.js | 12 +++++- utils/styleguide/styles.css | 15 ------- 8 files changed, 84 insertions(+), 98 deletions(-) delete mode 100755 utils/scripts/generate-markdown-table.js create mode 100644 utils/styleguide/CIDTable/index.js diff --git a/.eslintrc.json b/.eslintrc.json index 07ca3b9503b..04d26133ed7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -15,7 +15,8 @@ "globals": { "jest": true, "BASE_PATH_NAME": true, - "PACKAGE_VERSION": true + "PACKAGE_VERSION": true, + "COMPONENT_IDS": true }, "plugins": ["prettier", "react", "jest", "jsx-a11y"], "env": { diff --git a/packages/theming/README.md b/packages/theming/README.md index ae2c26cfbd7..20c6006b47b 100644 --- a/packages/theming/README.md +++ b/packages/theming/README.md @@ -127,28 +127,9 @@ Each component has a `COMPONENT_ID` applied so you can target it in your own the file to override the default look and feel. This table contains all the ids and which package they apply to. -| Component | COMPONENT_IDs | -| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| avatars | avatars.avatar | -| buttons | buttons.anchor, buttons.button, buttons.button‌\_group_view, buttons.icon, buttons.icon_button | -| checkboxes | checkboxes.checkbox‌\_view, checkboxes.hint, checkboxes.input, checkboxes.label, checkboxes.message | -| chrome | chrome.body, chrome.chrome, chrome.content, chrome.header, chrome.header‌\_item, chrome.header_item_icon, chrome.header_item_text, chrome.header_item_wrapper, chrome.main, chrome.nav, chrome.nav_item, chrome.nav_item_icon, chrome.nav_item_text, chrome.sidebar, chrome.subnav, chrome.subnav_item, chrome.subnav_item_text | -| grid | grid.col, grid.grid, grid.row | -| loaders | loaders.dots, loaders.spinner | -| menus | menus.add‌\_item, menus.header_icon, menus.header_item, menus.item, menus.item_meta, menus.media_body, menus.media_figure, menus.media_item, menus.menu_view, menus.next_item, menus.previous_item, menus.separator | -| modals | modals.backdrop, modals.body, modals.close, modals.footer, modals.footer‌\_item, modals.header, modals.modal_view | -| notifications | notifications.alert, notifications.close, notifications.notification, notifications.paragraph, notifications.title, notifications.well | -| pagination | pagination.gap, pagination.next‌\_page, pagination.page, pagination.pagination_view, pagination.previous_page | -| radios | radios.hint, radios.input, radios.label, radios.message, radios.radio‌\_view | -| ranges | ranges.hint, ranges.label, ranges.message, ranges.range‌\_group, ranges.single_thumb_view | -| select | select.add‌\_item, select.dropdown, select.header_item, select.hint, select.item, select.item_meta, select.label, select.media_body, select.media_item, select.message, select.next_item, select.previous_item, select.select_group, select.select_view, select.separator | -| tables | tables.body, tables.caption, tables.cell, tables.group‌\_row, tables.head, tables.header_cell, tables.header_row, tables.overflow_button, tables.row, tables.sortable, tables.table | -| tabs | tabs.tab, tabs.tablist, tabs.tabpanel, tabs.tabs‌\_view | -| tags | tags.avatar, tags.close, tags.tag‌\_view | -| textfields | textfields.hint, textfields.input, textfields.label, textfields.media‌\_figure, textfields.message, textfields.text_group, textfields.textarea | -| toggles | toggles.hint, toggles.input, toggles.label, toggles.message, toggles.toggle‌\_view | -| tooltip | tooltip.light‌\_tooltip, tooltip.paragraph, tooltip.title, tooltip.tooltip | -| typography | typography.lg, typography.md, typography.sm, typography.xl, typography.xxl, typography.xxxl | +```jsx + +``` ### WARNING diff --git a/utils/scripts/generate-markdown-table.js b/utils/scripts/generate-markdown-table.js deleted file mode 100755 index 9ae0925fc74..00000000000 --- a/utils/scripts/generate-markdown-table.js +++ /dev/null @@ -1,49 +0,0 @@ -#!/usr/bin/env node - -/** - * 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. - */ - -/* eslint-disable no-console */ - -const stdin = process.openStdin(); - -let data = ''; - -stdin.on('data', chunk => { - data += chunk; -}); - -stdin.on('end', () => { - const cids = JSON.parse(data); - - const groups = cids.reduce((acc, item) => { - const [group] = item.split('.'); - - if (acc[group]) { - acc[group].push(item); - } else { - acc[group] = [item]; - } - - return acc; - }, {}); - - const table = Object.entries(groups).reduce( - (mdTable, group) => { - const [component, componentIds] = group; - - // eslint-disable-next-line no-param-reassign - mdTable += `| ${component} | ${componentIds.join(', ').replace('_', '‌_')} |\n`; - - return mdTable; - }, - `| Component | COMPONENT_IDs | -|-----------|---------------|\n` - ); - - console.log(table); -}); diff --git a/utils/scripts/markdown-table.sh b/utils/scripts/markdown-table.sh index 4b5ac996022..bb797c42e40 100755 --- a/utils/scripts/markdown-table.sh +++ b/utils/scripts/markdown-table.sh @@ -1,18 +1,24 @@ #!/bin/bash AWKCMD=' - BEGIN { FS = "="; print "[" } + # Split record by (=) + BEGIN { FS = "="; } + # Remove all semicolons { gsub(/;/, "") } { + # On first record if ( NR == 1) { - gsub(/\047/, "\"") + # Remove single quotes + gsub(/\047/, ""); } else { - gsub(/\047/, "\""); - sub(/\"/, ",\""); + # Replace first single quote with (,) + sub(/\047/, ","); + # Remove single quotes + gsub(/\047/, ""); } } + # Print second column only which contains component_id { print $2 } - END { print "]" } ' grep \ @@ -20,8 +26,8 @@ grep \ --exclude-dir=node_modules \ --include=\*.js \ --exclude=\*.spec.js \ - -rnw 'packages' \ - -e 'const COMPONENT_ID = ' \ - | sort \ - | awk "$AWKCMD" \ - | node ./utils/scripts/generate-markdown-table.js + -rnw '../../packages' \ + -e 'const COMPONENT_ID = ' | # Find all COMPONENT_IDs + sort | # Sort alphabetically + awk "$AWKCMD" | # Run the above awk program + tr '\n' ' ' # Collapse result to single line diff --git a/utils/styleguide/CIDTable/index.js b/utils/styleguide/CIDTable/index.js new file mode 100644 index 00000000000..dfc31c93552 --- /dev/null +++ b/utils/styleguide/CIDTable/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, { Component } from 'react'; +import { Table, Head, Row, HeaderRow, HeaderCell, Body, Cell } from '../../../packages/tables/src'; + +export default class CIDTable extends Component { + groupIds = data => { + const cids = data.split(','); + + return cids.reduce((acc, item) => { + const [group] = item.split('.'); + + if (acc[group]) { + acc[group].push(item); + } else { + acc[group] = [item]; + } + + return acc; + }, {}); + }; + + render() { + const groups = this.groupIds(COMPONENT_IDS); + + return ( + + + + Component + COMPONENT_IDs + + + + {Object.entries(groups).map(([componentName, ids]) => ( + + {componentName.trim()} + {ids.map(s => s.trim()).join(', ')} + + ))} + +
+ ); + } +} diff --git a/utils/styleguide/setup.js b/utils/styleguide/setup.js index eb5e40dc69f..eeb872830dc 100644 --- a/utils/styleguide/setup.js +++ b/utils/styleguide/setup.js @@ -16,9 +16,11 @@ global.styled = styled; // Styleguide components import State from './State'; +import CIDTable from './CIDTable'; import { Grid, Row, Col } from '../../packages/grid/src'; global.State = State; +global.CIDTable = CIDTable; global.Grid = Grid; global.Row = styled(Row).attrs({ alignItems: 'center' diff --git a/utils/styleguide/styleguide.base.config.js b/utils/styleguide/styleguide.base.config.js index 19bdc656c24..b5548796f50 100644 --- a/utils/styleguide/styleguide.base.config.js +++ b/utils/styleguide/styleguide.base.config.js @@ -15,6 +15,15 @@ const { } = require('@zendeskgarden/css-variables'); const packageManifest = require(path.resolve('package.json')); const customStyleguideConfig = require(path.resolve('styleguide.config.js')); +const exec = require('child_process').execSync; + +const COMPONENT_IDS = exec('"../../utils/scripts/markdown-table.sh"', (error, stdout) => { + if (error !== null) { + throw new Error(`exec error: ${error}`); + } + + return stdout; +}); const basePathName = path.basename(path.resolve('./')); const googleTrackingId = 'UA-970836-25'; const capitalizePackageName = basePathName.charAt(0).toUpperCase() + basePathName.slice(1); @@ -169,7 +178,8 @@ const defaultStyleguideConfig = { plugins: [ new webpack.DefinePlugin({ BASE_PATH_NAME: JSON.stringify(basePathName), - PACKAGE_VERSION: JSON.stringify(packageManifest.version) + PACKAGE_VERSION: JSON.stringify(packageManifest.version), + COMPONENT_IDS: JSON.stringify(COMPONENT_IDS.toString('utf8')) }) ], resolve: { diff --git a/utils/styleguide/styles.css b/utils/styleguide/styles.css index 0ca234ba79d..8a6466b7357 100644 --- a/utils/styleguide/styles.css +++ b/utils/styleguide/styles.css @@ -5,18 +5,3 @@ html { font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif; } - -table tbody tr { - border-bottom: 1px solid #e9ebed; -} -table tbody tr:hover { - background-color: #edf7ff; -} - -table th:first-child { - width: 20%; -} - -table th, table td { - padding-left: 10px !important; -} From 70be94c0e33812a2c28c4fc58d4ef58847403dbe Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Mon, 29 Oct 2018 11:12:28 +1100 Subject: [PATCH 5/5] jz feedback --- packages/theming/README.md | 6 +++--- utils/scripts/{markdown-table.sh => get-cids.sh} | 0 utils/styleguide/styleguide.base.config.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) rename utils/scripts/{markdown-table.sh => get-cids.sh} (100%) diff --git a/packages/theming/README.md b/packages/theming/README.md index 20c6006b47b..e0e77e36cca 100644 --- a/packages/theming/README.md +++ b/packages/theming/README.md @@ -83,8 +83,8 @@ const LocalizedComponent = withTheme(StyledDiv); ### Advanced usage If you need to compose from other theme overrides e.g. you find yourself overriding -the same properties in serveral components or you're using props to alter your -overrides then please see the below code example. +the same properties in several components or you're using props to alter your +overrides then please see the following code example. ```jsx static import { ThemeProvider } from '@zendeskgarden/react-theming'; @@ -127,7 +127,7 @@ Each component has a `COMPONENT_ID` applied so you can target it in your own the file to override the default look and feel. This table contains all the ids and which package they apply to. -```jsx +```jsx noeditor ``` diff --git a/utils/scripts/markdown-table.sh b/utils/scripts/get-cids.sh similarity index 100% rename from utils/scripts/markdown-table.sh rename to utils/scripts/get-cids.sh diff --git a/utils/styleguide/styleguide.base.config.js b/utils/styleguide/styleguide.base.config.js index b5548796f50..30846ef96df 100644 --- a/utils/styleguide/styleguide.base.config.js +++ b/utils/styleguide/styleguide.base.config.js @@ -17,7 +17,7 @@ const packageManifest = require(path.resolve('package.json')); const customStyleguideConfig = require(path.resolve('styleguide.config.js')); const exec = require('child_process').execSync; -const COMPONENT_IDS = exec('"../../utils/scripts/markdown-table.sh"', (error, stdout) => { +const COMPONENT_IDS = exec('"../../utils/scripts/get-cids.sh"', (error, stdout) => { if (error !== null) { throw new Error(`exec error: ${error}`); }