Radio and Checkbox form elements

package.json

@@ -132,6 +132,7 @@
         }
     },
     "dependencies": {
+        "@tailwindcss/forms": "^0.5.2",
         "axios": "^0.21.1",
         "bootstrap": "^4.6.0",
         "bootstrap-vue": "^2.21.2",

src/app/renderer/assets/styles/markup.css

@@ -28,7 +28,7 @@
     .markup-label,
     .markup-label-sm,
     .markup-label-lg {
-        @apply font-mono font-light uppercase;
+        @apply font-body font-light;
     }
 
     .markup-label.strong,

src/app/renderer/components/ui/forms/Checkbox.vue

@@ -0,0 +1,13 @@
+<template>
+    <input type="checkbox" value="" name="" class="
+        form-checkbox
+        w-[20px] h-[20px] 
+        bg-gray-300 text-blue-600 
+        border-gray-500 border-2 rounded
+        checked:ring-2 checked:ring-blue-200 checked:shadow-transparent
+        focus-visible:outline-none
+    " 
+
+    :class="[disabled ? 'shadow-transparent pointer-events-none' : 'shadow-checkbox']"
+    />
+</template>

src/app/renderer/components/ui/forms/CheckboxFieldset.vue

@@ -0,0 +1,27 @@
+<template>
+    <x-fieldset legend="Choose your heroes">
+        <label v-for="hero in heroes" :for="hero.value" :key="hero.value" class="flex items-center markup-body-lg space-x-2">
+            <checkbox :id="hero.value" :value="hero.value" name="heroes" />
+            <span>{{hero.label}}</span>
+        </label>
+    </x-fieldset>
+</template>
+
+<script>
+import Fieldset from  './Fieldset.vue'
+import Checkbox from './Checkbox.vue'
+export default {
+    components: {'x-fieldset': Fieldset, 'checkbox': Checkbox},
+    data(){
+        return {
+            legend: 'Choose your heroes',
+            heroes: [
+                {id: 1, value: 'iron-man', label: 'Iron Man'},
+                {id: 2, value: 'captain-america', label: 'Captain America'},
+                {id: 3, value: 'thor', label: 'Thor'},
+                {id: 4, value: 'scarlet-witch', label: 'Scarlet Witch'},
+            ]
+        }
+    }
+}
+</script>

src/app/renderer/components/ui/forms/Fieldset.vue

@@ -0,0 +1,15 @@
+<template>
+    <fieldset>
+        <legend class="markup-label-lg mb-4">{{legend}}</legend>
+
+        <div class="flex flex-col space-y-2">
+            <slot />
+        </div>
+    </fieldset>
+</template>
+
+<script>
+export default {
+    props: ['legend']
+}
+</script>

src/app/renderer/components/ui/forms/Radio.vue

@@ -0,0 +1,13 @@
+<template>
+    <input type="radio" value="" name="" class="
+        form-radio
+        w-[20px] h-[20px] 
+        bg-gray-300 text-blue-600 
+        border-gray-500 border-2 rounded-full
+        checked:ring-2 checked:ring-blue-200 checked:shadow-transparent
+        focus-visible:outline-none
+    " 
+
+    :class="[disabled ? 'shadow-transparent pointer-events-none' : 'shadow-checkbox']"
+    />
+</template>

src/app/renderer/components/ui/nav/DashboardButton.vue

@@ -1,6 +1,6 @@
 <template>
     <router-link to="/" class="text-white bg-blue-900 hover:bg-blue-1000 duration-500 h-[105px] w-full flex flex-col items-center justify-center space-y-2">
         <font-awesome-icon icon="border-all" class=" w-[35px] h-[35px]" />
-        <span class="tracking-widest markup-label">Dashboard</span>
+        <span class="tracking-widest markup-label uppercase">Dashboard</span>
     </router-link>
 </template>

src/stories/form/Checkbox.stories.js

@@ -0,0 +1,23 @@
+import Checkbox from "../../app/renderer/components/ui/forms/Checkbox.vue";
+
+export default {
+  title: "Form/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    text: {
+      control: { type: "text" },
+      defaultValue: "Text",
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Checkbox },
+  template: `<checkbox v-bind="$props"></checkbox>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "Text",
+};

src/stories/form/Fieldset.stories.js

@@ -0,0 +1,59 @@
+import Fieldset from "@/components/ui/forms/Fieldset.vue";
+import Checkbox from "@/components/ui/forms/Checkbox.vue";
+import Radio from "@/components/ui/forms/Radio.vue";
+
+export default {
+  title: "Form/Fieldset",
+  component: Fieldset,
+  subcomponents: { Checkbox, Radio },
+  argTypes: {
+        legend: {
+            type: 'text',
+            defaultValue: 'Legend'
+        },
+        options: {
+            type: 'object',
+            defaultValue: [
+                {id: 1, value: 'iron-man', label: 'Iron Man'},
+                {id: 2, value: 'captain-america', label: 'Captain America'},
+                {id: 3, value: 'thor', label: 'Thor'},
+                {id: 4, value: 'scarlet-witch', label: 'Scarlet Witch'},
+            ]
+        }
+  },
+};
+
+export const CheckboxFieldset = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { 'x-fieldset': Fieldset, 'x-checkbox': Checkbox },
+    template: `
+            <x-fieldset :legend="$props.legend">
+                <template v-slot>
+                    <label v-for="option in $props.options" :for="option.value" :key="option.value" class="flex items-center markup-body-lg space-x-2">
+                        <x-checkbox :id="options.value" :value="options.value" name="$props.options"></x-checkbox>
+                        <span>{{option.label}}</span>
+                    </label>
+                </template>
+            </x-fieldset>
+            `,
+  };
+};
+
+export const RadioFieldset = (args, { argTypes }) => {
+    return {
+      props: Object.keys(argTypes),
+      components: { 'x-fieldset': Fieldset, 'x-radio': Radio },
+      template: `
+            <x-fieldset :legend="$props.legend">
+                <template v-slot>
+                    <label v-for="option in $props.options" :for="option.value" :key="option.value" class="flex items-center markup-body-lg space-x-2">
+                        <x-radio :id="options.value" :value="options.value" name="$props.options"></x-radio>
+                        <span>{{option.label}}</span>
+                    </label>
+                </template>
+            </x-fieldset>
+        `,
+    };
+  };
+

src/stories/form/Radio.stories.js

@@ -0,0 +1,23 @@
+import Radio from "../../app/renderer/components/ui/forms/Radio.vue";
+
+export default {
+  title: "Form/Radio",
+  component: Radio,
+  argTypes: {
+    text: {
+      control: { type: "text" },
+      defaultValue: "Text",
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Radio },
+  template: `<radio v-bind="$props"></radio>`,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "Text",
+};

tailwind.config.js

@@ -75,10 +75,11 @@ module.exports = {
       "2xl": "2.375rem", //38px
       "3xl": "3.625rem", //38px
     },
-    shadow: ({ theme }) => ({
+    boxShadow: ({ theme }) => ({
       DEFAULT: `0 0 5px 0 ${theme.colors.gray["300"]}`,
       lg: `0 0 12px 0 ${theme.colors.gray["400"]}`,
       xl: `0 0 38px 0 ${theme.colors.gray["500"]}`,
+      checkbox: `inset 0 0 0 4px ${theme.colors.white}`,
     }),
     extend: {
       borderWidth: {
@@ -92,5 +93,5 @@ module.exports = {
       "7": "7px",
     },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms')]
 };