// @flow
import React from 'react';
import { InlineStyledText } from './index';
import docs from './inline-styled-text.mdx';

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

const DEFAULT_PROPS = {
  baseSpanProps: { fontSize: 'f5' },
  inlineSpanProps: {
    casing: 'uppercase',
    colorName: 'brand-secondary-fg',
  },
};

export const Default = () => (
  <InlineStyledText {...DEFAULT_PROPS} text="This is the [[styled]] text." />
);

export const Bold = () => (
  <InlineStyledText
    {...DEFAULT_PROPS}
    text="This is the [[styled]] text."
    baseSpanProps={{ fontSize: 'f5', bold: true }}
  />
);

export const NoPrefix = () => (
  <InlineStyledText {...DEFAULT_PROPS} text="[[styled]] text." />
);

export const NoSuffix = () => (
  <InlineStyledText {...DEFAULT_PROPS} text="This is [[styled]]" />
);

export const NoStyledText = () => (
  <InlineStyledText {...DEFAULT_PROPS} text="This is the text." />
);

export const LongWrappingText = () => (
  <InlineStyledText
    {...DEFAULT_PROPS}
    text="This is a longer sentence with [[more styled text]] than ever before while being so long that it wraps!!"
  />
);

export const MultipleStyledSubstrings = () => (
  <InlineStyledText
    {...DEFAULT_PROPS}
    text="This is a sentence with [[styled text]] and [[even more here]]"
  />
);
