joyent-portal/packages/ui-toolkit/styleguide.config.js

161 lines
4.1 KiB
JavaScript
Raw Normal View History

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 = {
highlightTheme: 'base16-light',
require: [path.join(__dirname, 'etc/style.css')],
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/header/index.js',
'src/message/index.js',
'src/section-list/index.js',
'src/breadcrumb/index.js',
'src/progress-bar/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'
2017-11-23 14:18:38 +02:00
},
{
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))
};