// @flow
import React from 'react';
import { Text } from './text.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 './text.mdx';

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

export const Scale = () => (
  <>
    <Text fontSize="f1">f1: The quick red fox jumped over the lazy dogs.</Text>
    <Text fontSize="f2">f2: The quick red fox jumped over the lazy dogs.</Text>
    <Text fontSize="f3">f3: The quick red fox jumped over the lazy dogs.</Text>
    <Text fontSize="f4">f4: The quick red fox jumped over the lazy dogs.</Text>
    <Text fontSize="f5">f5: The quick red fox jumped over the lazy dogs.</Text>
  </>
);

export const Color = () => (
  <>
    <Text colorName="success-fg">Success! Something good happened.</Text>
    <Text colorName="error-fg">Oops! Something went wrong!</Text>
    <Text colorName="info-fg">Something neutral happened.</Text>
  </>
);

export const Formatting = () => (
  <>
    <Text bold>Sphinx of black quartz, judge my vow.</Text>
    <Text underlined>Sphinx of black quartz, judge my vow.</Text>
    <Text dottedUnderline>Sphinx of black quartz, judge my vow.</Text>
    <Text italic>Sphinx of black quartz, judge my vow.</Text>
    <Text casing="uppercase">Sphinx of black quartz, judge my vow.</Text>
  </>
);

export const Numerical = () => <Text>$1,234,567.89</Text>;
export const Tabular = () => <Text tabular>Tabular Data</Text>;

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

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

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