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

import VMediaTag from "~/components/VMediaTag/VMediaTag"

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

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

# Media tag

<Description of={VMediaTag} />

<ArgsTable of={VMediaTag} />

By default, the component is a transparent wrapper over `<span>`.

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

The root node of the tag can be overridden to a different HTML tag or a Vue
component, e.g. `VLink`. Any additional classes, such as for hover and focus
states on interactive elements, can be applied to add to the base styles.

<Canvas>
  <Story
    name="Custom node"
    args={{
      tag: "a",
      href: "https://wordpress.org/",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
