Update VCheckbox component and its story

src/components/VCheckbox/VCheckbox.vue

@@ -7,26 +7,42 @@
       v-bind="inputAttrs"
       @change="onChange"
     />
-    <Checkmark
+    <VIcon
       v-show="localCheckedState"
-      class="checkmark"
-      focusable="false"
-      width="20"
-      height="20"
-      aria-hidden="true"
-    />
-    <!--  @slot The checkbox label  --><slot />
+      class="absolute start-0 text-white"
+      :icon-path="checkmark"
+      view-box="0 0 20 20"
+      :size="5"
+    /><!--  @slot The checkbox label  --><slot />
   </label>
 </template>
 
-<script>
+<script lang="ts">
 import { computed, defineComponent, ref, watch } from '@nuxtjs/composition-api'
 
-import Checkmark from '~/assets/icons/checkmark.svg?inline'
+import { defineEvent } from '~/types/emits'
+
+import VIcon from '~/components/VIcon/VIcon.vue'
+
+import checkmark from '~/assets/icons/checkmark.svg'
+
+type CheckboxAttrs = {
+  name: string
+  value: string
+  disabled?: boolean
+  checked?: boolean
+}
 
-const VCheckbox = defineComponent({
+/**
+ * A checkbox input component that allows selection of multiple options from a list .
+ *
+ * Unlike the native checkbox, this component only has two states: checked / not checked.
+ */
+export default defineComponent({
   name: 'VCheckbox',
-  components: { Checkmark },
+  components: {
+    VIcon,
+  },
   props: {
     /**
      * Checkbox `id` is used for the input id property, connecting the label to
@@ -47,12 +63,14 @@ const VCheckbox = defineComponent({
       default: false,
     },
     /**
-     * The name and value parameters are used when sending the form data to the server
-     * using HTML on form submit: if a checkbox is checked, `name=value` pair in
-     * the POST request body.
-     * In a Vue app, this is used as the name parameter in the emitted event's payload.
-     * It is usually the category that this checkbox belongs to, eg. licenseType for a
-     * 'by-nc-nd' checkbox.
+     * Usually this is the category that this checkbox belongs to, e.g. 'license' for a
+     * 'by-nc-nd' checkbox, or 'licenseType' for 'commercial' checkbox.
+     * This parameter is used in the emitted object.
+     *
+     * If the form submission is done natively, the name and value parameters are used
+     * when sending the form data to the server on form submit: if a checkbox is checked,
+     * `name=value` pair is added to the POST request body.
+     *
      * If not set, the value of `id` prop is used instead.
      */
     name: {
@@ -77,21 +95,24 @@ const VCheckbox = defineComponent({
       default: false,
     },
   },
+  emits: {
+    change: defineEvent<[Omit<CheckboxAttrs, 'disabled'>]>(),
+  },
   setup(props, { emit }) {
     const localCheckedState = ref(props.checked || false)
     const labelClasses = computed(() =>
       props.disabled ? 'text-dark-charcoal-70' : 'text-dark-charcoal'
     )
-    const inputAttrs = computed(() => {
-      const attrs = {
+    const inputAttrs = computed<CheckboxAttrs>(() => {
+      const attrs: CheckboxAttrs = {
         name: props.name || props.id,
         value: props.value || props.id,
       }
       if (props.disabled) {
-        attrs.disabled = 'disabled'
+        attrs.disabled = true
       }
       if (localCheckedState.value) {
-        attrs.checked = 'checked'
+        attrs.checked = true
       }
       return attrs
     })
@@ -114,14 +135,14 @@ const VCheckbox = defineComponent({
       })
     }
     return {
+      checkmark,
       localCheckedState,
       labelClasses,
       inputAttrs,
       onChange,
     }
   },
 })
-export default VCheckbox
 </script>
 <style scoped>
 .checkbox-label {
@@ -134,7 +155,4 @@ export default VCheckbox
   @apply checked:bg-dark-charcoal;
   @apply checked:disabled:bg-dark-charcoal-40;
 }
-.checkmark {
-  @apply absolute start-0 w-5 h-5 text-white;
-}
 </style>

src/components/VCheckbox/meta/VCheckbox.stories.mdx

@@ -0,0 +1,90 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+
+import VCheckbox from '~/components/VCheckbox/VCheckbox.vue'
+import VLicense from '~/components/VLicense/VLicense.vue'
+
+<Meta
+  title="Components/VCheckbox"
+  components={VCheckbox}
+  argTypes={{
+    change: {
+      action: 'change',
+    },
+  }}
+/>
+
+export const checkboxArgTypes = {
+  id: { control: { type: 'text' } },
+  checked: { control: { type: 'boolean' } },
+  name: { control: { type: 'text' } },
+  value: { control: { type: 'text' } },
+  disabled: { control: { type: 'boolean' } },
+}
+
+export const Template = (args) => ({
+  template: `<VCheckbox v-bind="args" v-on="args" class="mb-4">Code is Poetry</VCheckbox>`,
+  components: { VCheckbox },
+  setup() {
+    return { args }
+  },
+})
+
+# VCheckbox
+
+<Description of={VCheckbox} />
+
+## Default checkbox
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      id: 'default',
+      name: 'storybook',
+      value: 'codeIsPoetry',
+    }}
+    argTypes={checkboxArgTypes}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable of={VCheckbox} />
+
+export const LicenseCheckboxTemplate = (args) => ({
+  template: `<fieldset>
+<legend>License</legend>
+<VCheckbox v-bind="args" v-on="args" class="mb-4">
+<VLicense license="by-nc" class="me-4"/>
+</VCheckbox>
+</fieldset>`,
+  components: { VCheckbox, VLicense },
+  setup() {
+    return { args }
+  },
+})
+
+## License Checkbox
+
+The checkbox label can be a string or another component. Here, we use a VLicense component, and set `checked` prop to `true` to set the checkbox as checked on render.
+
+<Canvas>
+  <Story
+    name="License Checkbox"
+    args={{
+      id: 'cc-by',
+      name: 'license',
+      value: 'cc-by',
+      checked: true,
+    }}
+    argTypes={checkboxArgTypes}
+  >
+    {LicenseCheckboxTemplate.bind({})}
+  </Story>
+</Canvas>

test/storybook/visual-regression/v-checkbox.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test.describe('v-checkbox', () => {
   test.describe('default', () => {
     test.beforeEach(async ({ page }) => {
-      await page.goto('/iframe.html?id=components-vcheckbox--default')
+      await page.goto('/iframe.html?id=components-vcheckbox--default-story')
     })
 
     test('default', async ({ page }) => {

tsconfig.json

@@ -51,6 +51,7 @@
     "src/components/VSourcesTable.vue",
     "src/components/TableSortIcon.vue",
     "src/components/VIcon/VIcon.vue",
+    "src/components/VCheckbox/VCheckbox.vue",
     "src/components/VIconButton/VIconButton.vue",
     "src/components/VLicense/VLicense.vue",
     "src/components/VContentReport/VReportDescForm.vue",