// @flow
import React from 'react';
import { Span } from './span.component';
import { Text } from '../text/text.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import docs from './span.mdx';

export default {
  component: Span,
  title: 'Components/Typography/Span',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const Default = () => (
  <Text>
    Use the span component to{' '}
    <Span bold colorName="success-fg">
      apply inline styles
    </Span>{' '}
    in a block of text.{' '}
    <Span dottedUnderline>For example with an underline.</Span>
  </Text>
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={Span}>Hello</MarginChecker>
    <PaddingChecker Component={Span}>Hello</PaddingChecker>
  </>
);
