From 0d0bfe9b82b0d71faf48d3a585a8cf57b7c91070 Mon Sep 17 00:00:00 2001
From: toshusai <35446607+toshusai@users.noreply.github.com>
Date: Wed, 11 Sep 2024 23:11:44 +0900
Subject: [PATCH] test: update radio story

---
 .../CRadioGroup/CRadioGroup.stories.ts        | 25 +++++++++++++++
 .../stories/StoryCRadioGroupBasic.vue         |  8 ++++-
 .../stories/StoryCRadioGroupUnControlled.vue  | 32 +++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupUnControlled.vue

diff --git a/packages/vue/src/components/CRadioGroup/CRadioGroup.stories.ts b/packages/vue/src/components/CRadioGroup/CRadioGroup.stories.ts
index 2e57863..acb2190 100644
--- a/packages/vue/src/components/CRadioGroup/CRadioGroup.stories.ts
+++ b/packages/vue/src/components/CRadioGroup/CRadioGroup.stories.ts
@@ -3,10 +3,14 @@ import { h } from "vue";
 import CRadioGroup from "./CRadioGroup.vue";
 
 import StoryCRadioGroupBasic from "./stories/StoryCRadioGroupBasic.vue";
+import StoryCRadioGroupUnControlled from "./stories/StoryCRadioGroupUnControlled.vue";
 import { IconBuildingBank, IconCash, IconCreditCard } from "@tabler/icons-vue";
 
 const meta = {
   title: "inputs/CRadioGroup",
+  args: {
+    options: [],
+  },
   component: CRadioGroup,
 } satisfies Meta<typeof CRadioGroup>;
 
@@ -54,6 +58,27 @@ export const Disabled: Story = {
     }),
 };
 
+export const Uncontrolled: Story = {
+  render: () =>
+    h(StoryCRadioGroupUnControlled, {
+      options: [
+        {
+          label: "Daily",
+          value: "daily",
+        },
+        {
+          label: "Weekly",
+          value: "weekly",
+        },
+        {
+          label: "Monthly",
+          value: "monthly",
+        },
+      ],
+      uncontrolled: true,
+    }),
+};
+
 export const CustomOptions: Story = {
   render: () => {
     const spanStyle = {
diff --git a/packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupBasic.vue b/packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupBasic.vue
index 06135ca..436c860 100644
--- a/packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupBasic.vue
+++ b/packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupBasic.vue
@@ -5,6 +5,7 @@ import CRadioGroup, { RadioInputOption } from "../CRadioGroup.vue";
 const picked = ref("");
 const props = defineProps<{
   options: RadioInputOption[];
+  size?: "M" | "L";
 }>();
 </script>
 
@@ -19,6 +20,11 @@ const props = defineProps<{
     "
   >
     <div>Picked: {{ picked }}</div>
-    <CRadioGroup v-model="picked" name="radio" :options="props.options" />
+    <CRadioGroup
+      v-model="picked"
+      name="radio"
+      :options="props.options"
+      :size="size"
+    />
   </div>
 </template>
diff --git a/packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupUnControlled.vue b/packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupUnControlled.vue
new file mode 100644
index 0000000..33a7797
--- /dev/null
+++ b/packages/vue/src/components/CRadioGroup/stories/StoryCRadioGroupUnControlled.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import CRadioGroup, { RadioInputOption } from "../CRadioGroup.vue";
+import CButton from "../../CButton/CButton.vue";
+
+const props = defineProps<{
+  options: RadioInputOption[];
+}>();
+
+const handleSubmit = (e: Event) => {
+  e.preventDefault();
+  var formData = new FormData(e.target as HTMLFormElement);
+  const selected = formData.get("radio");
+  alert(`Selected: ${selected}`);
+};
+</script>
+
+<template>
+  <form @submit="handleSubmit">
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+      "
+    >
+      <CRadioGroup name="radio" :options="props.options" />
+      <CButton type="submit" size="S">Submit</CButton>
+    </div>
+  </form>
+</template>