Skip to content
This repository has been archived by the owner on Oct 26, 2023. It is now read-only.

Jb/update storybook theme #246

Merged
merged 9 commits into from
Mar 23, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions .storybook/config.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
import { configure, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import theme from './theme';

const WELCOME_PAGE_KIND = 'Welcome';

addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
prepareForInline: storyFn => storyFn(),
},
options: {
theme,
storySort: (a, b) => {
if (a[1].kind === WELCOME_PAGE_KIND) {
return 0;
Expand All @@ -23,6 +20,11 @@ addParameters({
: a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
},
},
docs: {
container: DocsContainer,
page: DocsPage,
prepareForInline: storyFn => storyFn(),
},
});

// Gatsby's Link overrides:
Expand Down
8 changes: 8 additions & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<style>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What area of the storybook do these styles apply to?

.sbdocs-p code,
.sbdocs-li code {
color: #f9fbfa !important;
background-color: #5D6C74 !important;
border: none !important;
}
</style>
31 changes: 31 additions & 0 deletions .storybook/theme.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { create } from '@storybook/theming/create';
import { colorMap, FORM_ELEMENT_BORDER } from '../src/components/dev-hub/theme';

export default create({
base: 'dark',

// UI
appBg: colorMap.pageBackground,
appContentBg: colorMap.devBlack,
appBorderColor: colorMap.greyLightOne,
appBorderRadius: 4,

// Typography
fontBase: `"Fira Mono", monospace`,

// Text colors
textColor: colorMap.devWhite,

// Toolbar default and active colors
barTextColor: colorMap.devWhite,
barSelectedColor: colorMap.teal,
barBg: colorMap.greyDarkThree,

// Form colors
inputBg: colorMap.greyDarkTwo,
inputBorder: `${FORM_ELEMENT_BORDER} solid transparent`,
inputTextColor: colorMap.devWhite,
inputBorderRadius: 4,

brandTitle: 'MongDB Dev-Hub',
});
1 change: 0 additions & 1 deletion .storybook/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ module.exports = ({ config }) => {
use: [
{
loader: 'babel-loader',
// may or may not need this line depending on your app's setup
options: {
plugins: ['@babel/plugin-transform-react-jsx'],
},
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
"format:fix": "npm run prettier -- --write",
"lint": "eslint --ignore-path .gitignore --ignore-pattern 'preview/*' --ext .js,.jsx .",
"lint:fix": "npm run lint -- --fix",
"prettier": "prettier \"**/*.{js,jsx,json,md}\"",
"prettier": "prettier \"**/*.{js,jsx,json,md,mdx}\"",
"preview": "webpack-dev-server --open --config ./webpack.config.js --env.PREVIEW_MODE='cli'",
"serve": "gatsby serve --prefix-paths",
"storybook": "start-storybook",
"storybook": "start-storybook -p 9002 -c .storybook",
"test": "jest",
"test:regression": "jest regression",
"test:unit": "jest unit"
Expand Down
10 changes: 6 additions & 4 deletions src/components/dev-hub/stories/theme.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ import { colorMap, gradientMap, size, fontSize } from '../theme';
<Story name="colors">
{() => {
const Color = styled('div')`
color: #fff;
display: inline-block;
fontfamily: 'Fira Mono', monospace;
fontsize: ${fontSize.xsmall};
font-family: 'Fira Mono', monospace;
font-size: ${fontSize.xsmall};
margin: ${size.medium};
width: 80px;
`;
Expand Down Expand Up @@ -42,8 +43,9 @@ import { colorMap, gradientMap, size, fontSize } from '../theme';
<Story name="gradients">
{() => {
const Wrapper = styled('div')`
fontfamily: 'Fira Mono', monospace;
fontsize: ${fontSize.xsmall};
color: #fff;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comments as above, but I'm curious why we need to define these styles in multiple places. Shouldn't the theme be global for storybook?

font-family: 'Fira Mono', monospace;
font-size: ${fontSize.xsmall};
margin: ${size.medium};
`;
const GradientLine = styled('div')`
Expand Down