import Text from '../../elements/Text'
import { Color } from './Color'
import { Story } from 'story'
import React from 'react'

const code = `
import { Color } from 'components/markdown/Color/Color'
import Text from 'components/elements/Text'

export default () => (
  <Text>
      The color <Color>red</Color> is my favorite
  </Text>
  <Text>
    The color <Color>#f0f</Color> is my favorite
  </Text>
  <Text>
    The color <Color>rgba(136, 153, 166, 0.5)</Color> is my favorite
  </Text>
  <Text>
    The color <Color>rgb(21, 20, 26)</Color> is my favorite
  </Text>
)
`

export default { title: 'Elements/Color' }

export const Default = () => (
  <Story name='Color' code={code}>
    <Text>
      The color <Color>red</Color> is my favorite
    </Text>
    <Text>
      The color <Color>#f0f</Color> is my favorite
    </Text>
    <Text>
      The color <Color>rgba(136, 153, 166, 0.5)</Color> is my favorite
    </Text>
    <Text>
      The color <Color>rgb(21, 20, 26)</Color> is my favorite
    </Text>
  </Story>
)
