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

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

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

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

# VLicense

<Description of={VLicense} />

<ArgsTable of={VLicense} />

It can display CC licenses.

| License name                            | Abbreviation | Slug       |
| --------------------------------------- | ------------ | ---------- |
| Attribution                             | CC BY        | `by`       |
| Attribution-ShareAlike                  | CC BY-SA     | `by-sa`    |
| Attribution-NoDerivatives               | CC BY-ND     | `by-nd`    |
| Attribution-NonCommercial               | CC BY-NC     | `by-nc`    |
| Attribution-NonCommercial-ShareAlike    | CC BY-NC-SA  | `by-nc-sa` |
| Attribution-NonCommercial-NoDerivatives | CC BY-NC-ND  | `by-nc-nd` |

<Canvas>
  <Story
    name="CC BY"
    args={{
      license: "by",
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="CC BY-SA"
    args={{
      license: "by-sa",
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="CC BY-ND"
    args={{
      license: "by-nd",
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="CC BY-NC"
    args={{
      license: "by-nc",
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="CC BY-NC-SA"
    args={{
      license: "by-nc-sa",
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="CC BY-NC-ND"
    args={{
      license: "by-nc-nd",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

It can also display some public domain licenses.

| License name       | Abbreviation | Slug  |
| ------------------ | ------------ | ----- |
| CC Zero            | CC0          | `cc0` |
| Public Domain Mark | -            | `pdm` |

<Canvas>
  <Story
    name="CC0"
    args={{
      license: "cc0",
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="PDM"
    args={{
      license: "pdm",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

It can also display some deprecated CC licenses.

| License name                | Abbreviation    | Slug           |
| --------------------------- | --------------- | -------------- |
| Sampling Plus               | CC Sampling+    | `sampling+`    |
| NonCommercial Sampling Plus | CC NC-Sampling+ | `nc-sampling+` |

<Canvas>
  <Story
    name="CC Sampling+"
    args={{
      license: "sampling+",
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="CC NC-Sampling+"
    args={{
      license: "nc-sampling+",
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

It can also show only the license icons.

<Canvas>
  <Story
    name="Only icons"
    args={{
      license: "by-nc-sa",
      hideName: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>
