joyent-portal/packages/ui-toolkit/styleguide.config.js
2018-02-26 12:07:30 +00:00

160 lines
4.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

const { NODE_ENV } = process.env;
const env = NODE_ENV === 'production' ? 'prod' : 'dev';
// const resolvePkg = require('resolve-pkg');
const webpackConfig = require(`joyent-react-scripts/config/webpack.config.${env}.js`);
const { defaultHandlers } = require('react-docgen');
const dnHandler = require('react-docgen-displayname-handler');
const path = require('path');
module.exports = {
editorConfig: {
theme: 'base16-light'
},
webpackConfig: Object.assign(webpackConfig, {
resolve: Object.assign(webpackConfig.resolve, {
alias: Object.assign(webpackConfig.resolve.alias, {
'rsg-components/Wrapper': path.join(__dirname, 'src/styleguide/wrapper')
})
})
}),
styleguideComponents: {
StyleGuideRenderer: path.join(__dirname, 'src/styleguide/renderer'),
TableOfContentsRenderer: path.join(__dirname, 'src/styleguide/sidebar'),
ReactComponentRenderer: path.join(__dirname, 'src/styleguide/component'),
PlaygroundRenderer: path.join(__dirname, 'src/styleguide/playground'),
TabButtonRenderer: path.join(__dirname, 'src/styleguide/tabs'),
SectionHeadingRenderer: path.join(
__dirname,
'src/styleguide/sectionHeading'
),
SectionRenderer: path.join(__dirname, 'src/styleguide/section')
},
title: 'Design System',
showCode: true,
sections: [
{
name: 'Base Language',
sections: [
{
name: 'Color Palette',
description:
'Tritons color palette aim to accessible and clear, whilst making distinctions between elements that are alive and elements that are static. Weve split our palette into two sections; Action colors and Greys. ',
content: 'src/theme/colors.md'
},
{
name: 'Typography',
content: 'src/text/Readme.md'
}
]
},
{
name: 'Basic Components',
components: () => [
'src/button/index.js',
'src/form/input.js',
'src/form/radio.js',
'src/form/select.js',
'src/form/checkbox.js',
'src/form/toggle.js',
'src/card/card.js',
'src/tooltip/index.js',
'src/popover/index.js'
]
},
{
name: 'Compound Components',
components: () => [
'src/table/index.js',
'src/message/index.js',
'src/section-list/index.js',
'src/breadcrumb/index.js'
]
},
{
name: 'Assets',
sections: [
{
name: 'Section Iconography',
content: 'src/icons/section.md'
},
{
name: 'Functional Iconography',
content: 'src/icons/functional.md'
}
]
},
{
name: 'Developer',
sections: [
{
name: 'Download',
content: 'src/download.md'
},
{
name: 'Contribute',
content: 'src/contribute.md'
},
{
name: 'FAQ',
content: 'src/faq.md'
}
]
}
],
theme: {
color: {
base: '#494949',
link: '#3B46CC',
linkHover: '#5a62c5',
sidebarBackground: '#1E313B'
},
fontSize: {
base: 15,
text: 15,
small: 13,
h1: 36,
h2: 30,
h3: 26,
h4: 15,
h5: 14,
h6: 12
},
fontFamily: {
base: ['"Libre Franklin", -apple-system, sans-serif'],
monospace: [
'Roboto Mono',
'Consolas',
'"Liberation Mono"',
'Menlo',
'monospace'
]
},
sidebarWidth: 300,
spaceFactor: 6
},
styles: {
Styleguide: {
sidebar: {
color: '#FFFFFF'
}
},
Logo: {
border: 'none',
logo: {
'text-indent': -999,
'background-image': 'url("./etc/joyent-white.png")',
'background-size': 'cover',
width: 180,
'background-position': 0,
height: 39,
padding: 0,
margin: '0 auto'
}
}
},
handlers: componentPath =>
defaultHandlers.concat(dnHandler.createDisplayNameHandler(componentPath))
};