How to use @storybook/design-system - 10 common examples

global as designSystemGlobal,
  loadFontsForStorybook,
  styles,
} from '@storybook/design-system';
import 'storybook-chromatic';

const { GlobalStyle } = designSystemGlobal;

addParameters({
  options: { panelPosition: 'bottom' },
  viewport: {
    viewports: [
      {
        name: 'Design system breakpoint',
        styles: {
          width: `${styles.breakpoint - 1}px`,
          height: '768px',
        },
      },
    ],
  },
});

// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
  enqueue: () => {},
  hovering: () => {},
};

// Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
global.__PATH_PREFIX__ = '';

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link, styles } from '@storybook/design-system';
import { rgba } from 'polished';
import GatsbyLink from './GatsbyLink';

const boxLinkStyles = `
  && {
    display: block;
    background: ${styles.color.lightest};
    border: 1px solid ${styles.color.border};
    border-radius: 4px;
    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;

    &:hover {
      border-color: ${rgba(styles.color.secondary, 0.5)};
      transform: translate3d(0, -3px, 0);
      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
    }

    &:active {
      border-color: ${rgba(styles.color.secondary, 1)};
      transform: translate3d(0, 0, 0);
    }
  }
`;

import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { styles } from '@storybook/design-system';
import Stat from './Stat';

const Wrapper = styled.div`
  background: ${styles.color.green};
  padding: 20px;
`;

storiesOf('Basics|Stat', module)
  .addParameters({ component: Stat })
  .addDecorator(story => {story()})
  .add('default', () => );

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link, styles } from '@storybook/design-system';
import { rgba } from 'polished';
import GatsbyLink from './GatsbyLink';

const boxLinkStyles = `
  && {
    display: block;
    background: ${styles.color.lightest};
    border: 1px solid ${styles.color.border};
    border-radius: 4px;
    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;

    &:hover {
      border-color: ${rgba(styles.color.secondary, 0.5)};
      transform: translate3d(0, -3px, 0);
      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
    }

    &:active {
      border-color: ${rgba(styles.color.secondary, 1)};
      transform: translate3d(0, 0, 0);
    }
  }
`;

`

const Controls = styled.div`
  user-select: none;
  grid-area: controls;
  display: flex;
  justify-content: center;
  align-items: center;
`
const Image = styled.img`
  height: 20px;
`
const Project = styled.li`
  position: relative;
  padding: 12px;
  border-bottom: 1px solid ${styles.color.mediumlight};
  cursor: ${props => (props.isDisabled ? "default" : "pointer")};
  word-wrap: break-word;
  transition: all 0.2s;
  &:hover {
    background: ${props => (props.isDisabled ? "transparent" : styles.color.lighter)};
  }
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s;
    background-image: linear-gradient(

display: block;
  height: 16px;
  color: ${styles.color.mediumdark};
`
const Output = styled.small`
  display: block;
  height: 14px;
  color: ${props => (props.error ? styles.color.negative : styles.color.mediumdark)};
  font-family: monospace;
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
`
const Button = styled.button`
  font-size: 0.75em;
  background: ${styles.color.primary};
  color: white;
  border: 0;
  border-radius: 20px;
  padding: 8px 12px;
  font-weight: bold;
  outline: 0;
  cursor: pointer;
`
const Remove = styled.button`
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  background: none;
  outline: 0;
`

import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { Button, styles } from '@storybook/design-system';
import CTA from './CTA';

const Wrapper = styled.div`
  padding: 40px 0;

  @media (min-width: ${styles.breakpoint + 1}px) {
    padding: 40px;
  }
`;

const ctaAction = <button>Get started</button>;

storiesOf('Composite|CTA', module)
  .addParameters({ component: CTA })
  .addDecorator(story =&gt; {story()})
  .add('all', () =&gt; (
    &lt;&gt;

import React from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { Button, styles } from '@storybook/design-system';
import ShadowBoxCTA from './ShadowBoxCTA';

const Wrapper = styled.div`
  padding: 40px 0;

  @media (min-width: ${styles.breakpoint + 1}px) {
    padding: 40px;
  }
`;

const ctaAction = <button>Continue</button>;

storiesOf('Composite|ShadowBoxCTA', module)
  .addParameters({ component: ShadowBoxCTA })
  .addDecorator(story =&gt; {story()})
  .add('default', () =&gt; (
    
  ));

},
    },
    'gatsby-plugin-sharp',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
      },
    },
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        custom: {
          urls: [global.fontUrl],
        },
      },
    },
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-emotion`,
    {
      resolve: 'gatsby-source-github-repo',
      options: {
        repoUrl: 'https://github.com/storybooks/storybook',
      },
    },
    {
      resolve: 'gatsby-plugin-segment-js',
      options: {
        prodKey: 'AvvBObOmHaEMqfub8JJUXq5umjsuaqS8',
        trackPage: true,

export default function HTML(props) {
  return (
    
      
        
        
        
        {props.headComponents}
        
      
      
        {props.preBodyComponents}
        
        <div id="___gatsby">
        {props.postBodyComponents}
      
    
  );
}
</div>