import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
import {
  Title,
  LabelVariants,
  HeadingSizes
} from "foundations/components/presentation";

<Meta
  title="Basic Presentation/Title"
  component={Title}
  argTypes={{
    headingProps: { control: { type: "object" } }
  }}
/>

# Title

#### A convenient shortcut that joins Heading and Label components together with some common styling.

<br />
<br />
<br />

## Interactive props

export const Template = args => <Title {...args} />;

<Canvas>
  <Story
    name="Default"
    args={{
      heading: "Interactive title",
      label: "Use controls below to play with it"
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Usage examples

<br />
<br />

### Changing Heading and Label variants/sizes

<Canvas>
  <Story
    name="Variants / Sizes"
    args={{
      heading: "Big Title",
      label: "With active label",
      headingProps: { size: HeadingSizes.BIG },
      labelProps: { variant: LabelVariants.ACTIVE }
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

```jsx
<Title heading="Big Title" label="With active label" headingProps={ size: HeadingSizes.BIG } labelProps={ variant: LabelVariants.ACTIVE } />
```
