import React from 'react'
import {ComponentStory, ComponentMeta} from '@storybook/react'
import {ChakraProvider, Heading} from '@chakra-ui/react'
import {vantagePlusTheme} from '../styles/theme'
import '../styles/fonts.css'

const Template: ComponentStory<typeof Heading> = args => (
  <ChakraProvider theme={vantagePlusTheme}>
    <Heading {...args}>Heading</Heading>
  </ChakraProvider>
)
export default {
  title: 'VantagePlus/Heading',
  component: Heading
} as ComponentMeta<typeof Heading>

export const Heading18 = Template.bind({})
// More on args: https://storybook.js.org/docs/react/writing-stories/arg
Heading18.args = {
  variant:'size18'
}

export const Heading16 = Template.bind({})
Heading16.args = {
  variant:'size16'
}

export const Heading12 = Template.bind({})
Heading12.args = {
  variant:'size12'
}