VButton.stories.mdx

import { ArgsTable, Canvas, Description, Meta, Story, } from "@storybook/addon-docs" import { buttonForms, buttonSizes as allButtonSizes, buttonVariants as allButtonVariants, } from "/types/button" import VButton from "/components/VButton.vue" import VIcon from "~/components/VIcon/VIcon.vue" import { capital } from "case"

import replayIcon from "/assets/icons/replay.svg" import externalLinkIcon from "/assets/icons/external-link.svg"

export const buttonVariants = allButtonVariants.filter( (variant) => variant.startsWith("filled-") || variant.startsWith("bordered-") || variant.startsWith("transparent-") ) export const buttonSizes = allButtonSizes.filter( (size) => !size.endsWith("-old") )

export const Template = (args) => ({ template: <div id="wrapper" class="w-40 h-16 flex items-center justify-center" :class="args?.variant.startsWith('transparent') ? 'bg-dark-charcoal-06': 'bg-white'"> <VButton v-bind="args" @click="onClick" href="/"> Code is Poetry </VButton> </div>, components: { VButton }, methods: { onClick() { window.alert("hello!") }, }, setup() { return { args } }, })

export const TemplateWithIcons = (args) => ({ template: `

Button Button Button

`, components: { VButton, VIcon }, setup() { return { args, replayIcon, externalLinkIcon } }, })

VButton

{Template.bind({})}

export const VariantsTemplate = (args) => ({ template: `

{{ capitalize(variant) }}

`, components: { VButton }, methods: { capitalize(str) { return capital(str) }, }, setup() { return { args } }, })

Button variants

Filled

These buttons have a solid background color and no border.

variant.startsWith("filled-") ), }} argTypes={{ pressed: { control: "boolean" }, size: { options: buttonSizes, control: { type: "radio" }, defaultValue: "medium", }, disabled: { control: "boolean" }, }} > {VariantsTemplate.bind({})}

Bordered

These buttons have a white background and a border.

variant.startsWith("bordered-") ), }} argTypes={{ pressed: { control: "boolean" }, size: { options: buttonSizes, control: { type: "radio" }, defaultValue: "medium", }, disabled: { control: "boolean" }, }} > {VariantsTemplate.bind({})}

Transparent

These buttons are transparent and don't have a border in resting state.

variant.startsWith("transparent-") ), }} argTypes={{ pressed: { control: "boolean" }, size: { options: buttonSizes, control: { type: "radio" }, defaultValue: "medium", }, disabled: { control: "boolean" }, }} > {VariantsTemplate.bind({})}

Buttons with Icons

{TemplateWithIcons.bind({})}