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

To help you get started, we’ve selected a few @storybook/design-system examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github chromaui / learnstorybook.com / .storybook / config.js View on Github external
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__ = '';
github chromaui / learnstorybook.com / src / components / basics / BoxLink.js View on Github external
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);
    }
  }
`;
github chromaui / learnstorybook.com / src / components / basics / Stat.stories.js View on Github external
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 => <Wrapper>{story()}</Wrapper>)
  .add('default', () => <Stat value="6" label="Contributors" />);
github chromaui / learnstorybook.com / src / components / basics / BoxLink.js View on Github external
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);
    }
  }
`;
github storybookjs / desktop / src / renderer / Dashboard.js View on Github external
`

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(
github storybookjs / desktop / src / renderer / Dashboard.js View on Github external
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;
`
github chromaui / learnstorybook.com / src / components / composite / CTA.stories.js View on Github external
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 appearance="secondary">Get started</Button>;

storiesOf('Composite|CTA', module)
  .addParameters({ component: CTA })
  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
  .add('all', () => (
    <>
      <CTA text="Get started with our thing today!" action={ctaAction} />

      <CTA
        text="Get started with our really long thing that will potentially break lines today!"
        action={ctaAction}
github chromaui / learnstorybook.com / src / components / composite / ShadowBoxCTA.stories.js View on Github external
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 appearance="secondary">Continue</Button>;

storiesOf('Composite|ShadowBoxCTA', module)
  .addParameters({ component: ShadowBoxCTA })
  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
  .add('default', () => (
    <ShadowBoxCTA
      action={ctaAction}
      headingText="Composite component"
      messageText="Assemble a composite component out of simpler components"
    />
  ));
github storybookjs / frontpage / gatsby-config.js View on Github external
},
    },
    '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,
github chromaui / learnstorybook.com / src / html.js View on Github external
export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        {props.headComponents}
        <link href={global.fontUrl} rel="stylesheet" />
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <noscript key="noscript" id="gatsby-noscript">
          This app works best with JavaScript enabled.
        </noscript>
        <div key="body" id="___gatsby" dangerouslySetInnerHTML={{ __html: props.body }} />
        {props.postBodyComponents}
      </body>
    </html>
  );
}

@storybook/design-system

Storybook design system

MIT
Latest version published 2 days ago

Package Health Score

75 / 100
Full package analysis

Similar packages