@citizenplane/pimp 15.1.4 → 16.0.1

package/src/stories/CpAlert.stories.ts

@@ -1,91 +1,256 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpAlert from '@/components/CpAlert.vue'
 
+import {
+  docCellStyle,
+  docLabelStyle,
+  docPageStyle,
+  docRowColumnStyle,
+  docSectionStyle,
+  docTitleStyle,
+} from '@/stories/documentationStyles'
+
 const meta = {
   title: 'Feedback/CpAlert',
   component: CpAlert,
   argTypes: {
-    intent: {
+    color: {
+      control: 'select',
+      options: ['neutral', 'accent', 'success', 'warning', 'error'],
+      description: 'The color variant of the alert',
+    },
+    type: {
       control: 'select',
-      options: ['info', 'success', 'warning', 'critical'],
-      description: 'The type of alert',
+      options: ['expanded', 'inline'],
+      description: 'The type of the alert',
     },
     title: {
       control: 'text',
       description: 'The title of the alert',
     },
+    content: {
+      control: 'text',
+      description: 'The text content of the alert',
+    },
+    icon: {
+      control: 'select',
+      options: ['', 'info', 'check', 'alert-triangle', 'x-octagon', 'bell', 'star'],
+      description: 'Custom icon override',
+    },
     isClosable: {
       control: 'boolean',
       description: 'Whether the alert can be closed',
     },
-    onClose: { action: 'closed' },
+    primaryActionLabel: {
+      control: 'text',
+      description: 'Label for the primary action button',
+    },
+    secondaryActionLabel: {
+      control: 'text',
+      description: 'Label for the secondary action button',
+    },
   },
 } satisfies Meta<typeof CpAlert>
 
 export default meta
-type Story = StoryObj<typeof meta>
 
-const defaultTemplate = `
-<CpAlert v-bind="args">
-  Default slot content
-</CpAlert>
-`
+type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    title: 'Alert title',
-    intent: 'info',
-    isClosable: true,
+const defaultTemplate = '<CpAlert v-bind="args" />'
+const defaultRender = (args: Args) => ({
+  components: { CpAlert },
+  setup() {
+    return { args }
   },
-  render: (args) => ({
+  template: defaultTemplate,
+})
+
+export const Documentation: Story = {
+  args: {},
+  render: () => ({
     components: { CpAlert },
-    setup() {
-      return { args }
-    },
-    template: defaultTemplate,
-  }),
-}
+    setup: () => ({}),
+    template: `
+      <div>
+        <div style="${docPageStyle}">
+          <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">CpAlert</h1>
 
-export const Success: Story = {
-  args: {
-    ...Default.args,
-    intent: 'success',
-  },
-  render: (args) => ({
-    ...Default.render(args),
-    template: defaultTemplate,
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Color</h2>
+            <div style="${docRowColumnStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">neutral</span>
+                <CpAlert color="neutral" title="Neutral alert" content="This is a neutral informational message." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">accent</span>
+                <CpAlert color="accent" title="Accent alert" content="This is an accent informational message." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">success</span>
+                <CpAlert color="success" title="Success alert" content="The operation completed successfully." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">warning</span>
+                <CpAlert color="warning" title="Warning alert" content="Please review before proceeding." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">error</span>
+                <CpAlert color="error" title="Error alert" content="Something went wrong. Please try again." is-closable />
+              </div>
+            </div>
+          </section>
+
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Type</h2>
+            <div style="${docRowColumnStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">Expanded (default)</span>
+                <CpAlert color="neutral" title="Neutral alert" content="This is a neutral informational message." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="accent" title="Accent alert" content="This is an accent informational message." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="success" title="Success alert" content="The operation completed successfully." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="warning" title="Warning alert" content="Please review before proceeding." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="error" title="Error alert" content="Something went wrong. Please try again." is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">inline</span>
+                <CpAlert color="neutral" type="inline" title="Neutral alert" is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="accent" type="inline" title="Accent alert" is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="success" type="inline" title="Success alert" is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="warning" type="inline" title="Warning alert" is-closable />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="error" type="inline" title="Error alert" is-closable />
+              </div>
+            </div>
+          </section>
+
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">is-closable</h2>
+            <div style="${docRowColumnStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">false</span>
+                <CpAlert color="accent" title="Not closable" content="This alert cannot be dismissed." @on-close="console.log('alert closed')" />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">true on expanded</span>
+                <CpAlert color="accent" title="Closable" content="This alert can be dismissed with the close button." :is-closable="true" @on-close="console.log('alert closed')" />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">true on inline</span>
+                <CpAlert color="accent" type="inline" title="Closable" :is-closable="true" @on-close="console.log('alert closed')" />
+              </div>
+            </div>
+          </section>
+
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Actions</h2>
+            <div style="${docRowColumnStyle}">
+            <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">without actions</span>
+                <CpAlert color="accent" title="Without actions" />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">primary only</span>
+                <CpAlert color="accent" title="With primary action" content="This alert has a primary action button." primary-action-label="Confirm" is-closable @primary-action-click="console.log('primary action clicked')" />
+              </div>
+              <div style="${docCellStyle}">
+                <CpAlert color="accent" title="With primary action" type="inline" primary-action-label="Confirm" is-closable @primary-action-click="console.log('primary action clicked')" />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">primary + secondary</span>
+                <CpAlert color="accent" title="With both actions" content="This alert has primary and secondary action buttons." primary-action-label="Confirm" secondary-action-label="Cancel" is-closable @primary-action-click="console.log('primary action clicked')" @secondary-action-click="console.log('secondary action clicked')" />
+              </div>
+            </div>
+          </section>
+
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Custom icon</h2>
+            <div style="${docRowColumnStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">default icon (auto from color)</span>
+                <CpAlert color="success" title="Default icon" content="Icon is derived from the color prop." />
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">custom icon override</span>
+                <CpAlert color="success" icon="star" title="Custom icon" content="Icon is overridden with a star." />
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    `,
   }),
-}
-export const Warning: Story = {
-  args: {
-    ...Default.args,
-    intent: 'warning',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: null,
+      },
+    },
   },
-  render: (args) => ({
-    ...Default.render(args),
-    template: defaultTemplate,
-  }),
 }
 
-export const Error: Story = {
+export const Default: Story = {
   args: {
-    ...Default.args,
-    intent: 'critical',
+    color: 'accent',
+    type: 'expanded',
+    title: 'Alert title',
+    content: 'This is an informational alert message.',
+    isClosable: true,
+    icon: undefined,
+    primaryActionLabel: undefined,
+    secondaryActionLabel: undefined,
   },
-  render: (args) => ({
-    ...Default.render(args),
-    template: defaultTemplate,
-  }),
+  render: defaultRender,
 }
 
-export const NotClosable: Story = {
+export const WithSlots: Story = {
   args: {
-    ...Default.args,
-    isClosable: false,
+    color: 'accent',
+    type: 'expanded',
+    isClosable: true,
   },
-  render: (args) => ({
-    ...Default.render(args),
-    template: defaultTemplate,
+  render: (args: Args) => ({
+    components: { CpAlert },
+    setup() {
+      return { args }
+    },
+    template: `
+      <CpAlert v-bind="args">
+        <template #icon>
+          <span style="font-size: 18px;">🔔</span>
+        </template>
+        <template #title>
+          <strong>Custom title</strong> with <em>HTML formatting</em>
+        </template>
+        <span>Custom default slot with <a href="#" style="color: inherit; font-weight: 600;">a link</a> and <code style="background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 3px;">inline code</code>.</span>
+        <template #primary-action>
+          <button style="padding: 4px 12px; border-radius: 4px; background: currentColor; border: none; cursor: pointer;">
+            <span style="color: white; font-size: 12px;">Custom Primary</span>
+          </button>
+        </template>
+        <template #secondary-action>
+          <button style="padding: 4px 12px; border-radius: 4px; background: transparent; border: 1px solid currentColor; cursor: pointer; color: inherit; font-size: 12px;">
+            Custom Secondary
+          </button>
+        </template>
+      </CpAlert>
+    `,
   }),
 }