// @flow
import React from 'react';
import { PageTitle } from './page-title.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import { SemanticHeaderLevelChecker } from '../../../mixins/semantic-header-level/story-support/semantic-header-level-checker';
import docs from './page-title.mdx';

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

export const Default = () => <PageTitle>Hello</PageTitle>;

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

export const MixinsStackee = () => (
  <StackeeChecker Component={PageTitle}>Hello</StackeeChecker>
);

export const MixinsSemanticHeaderLevel = () => (
  <SemanticHeaderLevelChecker Component={PageTitle} />
);
