import { Description, Canvas, Meta, Story } from "@storybook/addon-docs"

import VBrand from "~/components/VBrand/VBrand.vue"

<Meta title="Components/VBrand" component={VBrand} />

export const Template = (args) => ({
  template: `<VBrand v-bind="args"/>`,
  components: { VBrand },
  setup() {
    return { args }
  },
})

# VBrand

<Description of={VBrand} />

<Canvas>
  <Story name="Default">{Template.bind({})}</Story>
</Canvas>

## Resizing

The component always renders at a height of `1em`. This means that it will take
up the text-size as specified by its parent. This can be achieved using `text-*`
utilities, including JIT values like `text-[18px]`.

<Canvas>
  <Story
    name="Resized"
    args={{
      class: "text-6xl",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
