@youcan/celeste 0.6.43 → 0.6.45

package/src/components/checkbox/stories/checkbox-card.stories.ts

@@ -0,0 +1,304 @@
+// @unocss-include
+
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import Badge from '@/components/badge/badge.vue';
+import CheckboxCard from '../checkbox-card.vue';
+import Checkbox from '../checkbox.vue';
+
+const meta: Meta<typeof CheckboxCard> = {
+  title: 'Components/Checkbox/CheckboxCard',
+  component: CheckboxCard,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CheckboxCard>;
+
+export const Default: Story = {
+  args: {},
+
+  render: args => ({
+    components: { CheckboxCard, Checkbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <CheckboxCard v-bind="args">
+            <Checkbox />
+
+            <template #label>
+              Basic Label
+            </template>
+          </CheckboxCard>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithIcon: Story = {
+  args: {},
+
+  render: args => ({
+    components: { CheckboxCard, Checkbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <CheckboxCard v-bind="args">
+            <Checkbox />
+
+            <template #icon>
+              <i i-celeste-user-6-line />
+            </template>
+
+            <template #label>
+              Settings
+            </template>
+
+            <template #sublabel>
+              (Configure options)
+            </template>
+
+            <template #description>
+              Customize your application settings and preferences.
+            </template>
+          </CheckboxCard>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithImage: Story = {
+  args: {},
+
+  render: args => ({
+    components: { CheckboxCard, Checkbox },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <CheckboxCard v-bind="args">
+            <Checkbox />
+
+            <template #image>
+              <img src="https://placehold.co/48" alt="Preview" />
+            </template>
+
+            <template #label>
+              Image Option
+            </template>
+
+            <template #description>
+              An option with an image preview.
+            </template>
+          </CheckboxCard>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const WithBadge: Story = {
+  args: {},
+
+  render: args => ({
+    components: { CheckboxCard, Checkbox, Badge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <CheckboxCard v-bind="args">
+            <Checkbox />
+
+            <template #label>
+              Label
+            </template>
+
+            <template #sublabel>
+              (Sublabel)
+            </template>
+
+            <template #badge>
+              <Badge 
+                label="NEW" 
+                state="information" 
+                variant="light" 
+                size="sm" 
+              />
+            </template>
+
+            <template #description>
+              Access premium features with advanced capabilities.
+            </template>
+          </CheckboxCard>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Complete: Story = {
+  args: {},
+
+  render: args => ({
+    components: { CheckboxCard, Checkbox, Badge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <CheckboxCard v-bind="args">
+            <Checkbox />
+
+            <template #icon>
+              <i i-celeste-user-6-line />
+            </template>
+
+            <template #label>
+              Complete
+            </template>
+
+            <template #sublabel>
+              (All features)
+            </template>
+
+            <template #badge>
+              <Badge 
+                label="FEATURED" 
+                state="success" 
+                variant="light" 
+                size="sm" 
+              />
+            </template>
+
+            <template #description>
+              This example showcases all available slots and features of the checkbox card component.
+            </template>
+          </CheckboxCard>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+
+  render: args => ({
+    components: { CheckboxCard, Checkbox, Badge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px;">
+          <CheckboxCard v-bind="args">
+            <Checkbox disabled />
+
+            <template #icon>
+              <i i-celeste-lock-line />
+            </template>
+
+            <template #label>
+              Disabled Option
+            </template>
+
+            <template #description>
+              This option is currently disabled and cannot be selected.
+            </template>
+          </CheckboxCard>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+export const Multiple: Story = {
+  args: {},
+
+  render: args => ({
+    components: { CheckboxCard, Checkbox, Badge },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center;">
+        <div style="max-width: 400px; display: flex; flex-direction: column; gap: 1rem;">
+          <CheckboxCard v-bind="args">
+            <Checkbox />
+
+            <template #icon>
+              <i i-celeste-mail-line />
+            </template>
+
+            <template #label>
+              Email Notifications
+            </template>
+
+            <template #description>
+              Receive updates via email.
+            </template>
+          </CheckboxCard>
+
+          <CheckboxCard v-bind="args">
+            <Checkbox checked />
+
+            <template #icon>
+              <i i-celeste-notification-line />
+            </template>
+
+            <template #label>
+              Push Notifications
+            </template>
+
+            <template #badge>
+              <Badge 
+                label="RECOMMENDED" 
+                state="success" 
+                variant="light" 
+                size="sm" 
+              />
+            </template>
+
+            <template #description>
+              Get instant push notifications on your device.
+            </template>
+          </CheckboxCard>
+
+          <CheckboxCard v-bind="args">
+            <Checkbox />
+
+            <template #icon>
+              <i i-celeste-message-line />
+            </template>
+
+            <template #label>
+              SMS Notifications
+            </template>
+
+            <template #sublabel>
+              (Required)
+            </template>
+
+            <template #description>
+              Receive notifications via SMS text messages.
+            </template>
+          </CheckboxCard>
+        </div>
+      </div>
+    `,
+  }),
+};