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

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 / src / components / composite / MailingListSignup.js View on Github external
</MailingListFormUIWrapper>
);

MailingListFormUI.propTypes = {
  handleBlur: PropTypes.func.isRequired,
  handleChange: PropTypes.func.isRequired,
  isSubmitting: PropTypes.bool.isRequired,
  value: PropTypes.string,
};

MailingListFormUI.defaultProps = {
  value: '',
};

const MailingListConfirm = styled.div`
  font-size: ${styles.typography.size.s2}px;
  background: ${styles.background.positive};
  line-height: 20px;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
`;

const FormWrapper = styled.form`
  max-width: 300px;
`;

const validateForm = values => {
  if (!values.email) {
    return { email: 'Required' };
  }