How to use the @storybook/design-system.styles.breakpoint function in @storybook/design-system

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 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}

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"
    />
  ));