From e45069b0e376d4b083d183f8d63320271ba657e1 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 13 Mar 2025 13:24:40 +0800
Subject: [PATCH] feat(stage-ui): RadioCard stories

---
 .../Form/Radio/RadioCardDetail.story.vue      | 155 ++++++++++++++++++
 .../components/Form/Radio/RadioCardDetail.vue |   3 +-
 .../Form/Radio/RadioCardSimple.story.vue      |  57 +++++++
 .../components/Form/Radio/RadioCardSimple.vue |   3 +-
 4 files changed, 216 insertions(+), 2 deletions(-)
 create mode 100644 packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
 create mode 100644 packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue

diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
new file mode 100644
index 000000000..2d3928f3d
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import RadioCardDetail from './RadioCardDetail.vue'
+
+const modelValue = ref('test')
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant id="default" title="Default">
+      <RadioCardDetail
+        id="test"
+        value="non-selected"
+        title="Test"
+        description="Test description"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start"
+      />
+    </Variant>
+
+    <Variant id="hover" title="Hover">
+      <RadioCardDetail
+        id="test"
+        value="non-selected"
+        title="Test"
+        description="Test description"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start _hover"
+      />
+    </Variant>
+
+    <Variant id="default-long-description" title="Long description">
+      <RadioCardDetail
+        id="test"
+        value="non-selected"
+        title="Test"
+        :description="'Test description'.repeat(10)"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start"
+      />
+    </Variant>
+
+    <Variant id="hover-long-description" title="Hover Long description">
+      <RadioCardDetail
+        id="test"
+        value="non-selected"
+        title="Test"
+        :description="'Test description'.repeat(10)"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start _hover"
+      />
+    </Variant>
+
+    <Variant id="default-selected" title="Default Selected">
+      <RadioCardDetail
+        id="test"
+        value="test"
+        title="Test"
+        description="Test description"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start"
+      />
+    </Variant>
+
+    <Variant id="hover-selected" title="Hover Selected">
+      <RadioCardDetail
+        id="test"
+        value="test"
+        title="Test"
+        description="Test description"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start _hover"
+      />
+    </Variant>
+
+    <Variant id="default-selected-long-description" title="Long description Selected">
+      <RadioCardDetail
+        id="test"
+        value="test"
+        title="Test"
+        :description="'Test description'.repeat(10)"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start"
+      />
+    </Variant>
+
+    <Variant id="hover-selected-long-description" title="Hover Long description Selected">
+      <RadioCardDetail
+        id="test"
+        value="test"
+        title="Test"
+        :description="'Test description'.repeat(10)"
+        :deprecated="false"
+        :show-expand-collapse="true"
+        :expand-collapse-threshold="100"
+        :show-custom-input="true"
+        custom-input-value="Test input value"
+        custom-input-placeholder="Test input placeholder"
+        :model-value="modelValue"
+        name="radio-card-detail-many-select"
+        class="scroll-snap-align-start _hover"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
index 7840d7519..2158ab6c7 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.vue
@@ -184,7 +184,8 @@ function updateCustomInput(event: Event) {
   opacity: 0;
 }
 
-.form_radio-card-detail:hover::before {
+.form_radio-card-detail:hover::before,
+.form_radio-card-detail._hover::before {
   --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
   width: 85%;
   opacity: 1;
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
new file mode 100644
index 000000000..73de6b392
--- /dev/null
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import RadioCardSimple from './RadioCardSimple.vue'
+
+const modelValue = ref('test')
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant id="default" title="Default">
+      <RadioCardSimple
+        id="test"
+        name="radio-card-simple"
+        value="non-selected"
+        title="Test"
+        description="Test description"
+        :model-value="modelValue"
+      />
+    </Variant>
+
+    <Variant id="hover" title="Hover">
+      <RadioCardSimple
+        id="test"
+        name="radio-card-simple"
+        value="non-selected"
+        title="Test"
+        description="Test description"
+        :model-value="modelValue"
+        class="_hover"
+      />
+    </Variant>
+
+    <Variant id="default-selected" title="Default Selected">
+      <RadioCardSimple
+        id="test"
+        name="radio-card-simple"
+        value="test"
+        title="Test"
+        description="Test description"
+        :model-value="modelValue"
+      />
+    </Variant>
+
+    <Variant id="hover-selected" title="Hover Selected">
+      <RadioCardSimple
+        id="test"
+        name="radio-card-simple"
+        value="test"
+        title="Test"
+        description="Test description"
+        :model-value="modelValue"
+        class="_hover"
+      />
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
index 09ea351f5..c6305040b 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.vue
@@ -102,7 +102,8 @@ defineEmits<{
   opacity: 0;
 }
 
-.form_radio-card-simple:hover::before {
+.form_radio-card-simple:hover::before,
+.form_radio-card-simple._hover::before {
   --at-apply: 'bg-gradient-to-r from-primary-500/20 via-primary-500/10 to-transparent dark:from-primary-400/20 dark:via-primary-400/10 dark:to-transparent';
   width: 85%;
   opacity: 1;