@citizenplane/pimp 13.0.0 → 13.1.0

package/src/stories/CpAccordion.stories.ts

@@ -0,0 +1,282 @@
+import { computed } from 'vue'
+
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { MenuItem } from 'primevue/menuitem'
+
+import type { CpAccordionBaseProps } from '@/components/CpAccordion.vue'
+import CpAccordion from '@/components/CpAccordion.vue'
+
+import {
+  docCellStyle,
+  docLabelStyle,
+  docPageStyle,
+  docRowColumnStyle,
+  docSectionStyle,
+  docTitleStyle,
+} from '@/stories/documentationStyles'
+
+/** Storybook controls: component props remain a discriminated union in `CpAccordion.vue`. */
+type CpAccordionStoryArgs = CpAccordionBaseProps & {
+  actions?: MenuItem[]
+  hideActionTrigger?: boolean
+  iconPosition?: 'leading' | 'trailing'
+}
+
+const defaultStoryActions: MenuItem[] = [
+  {
+    icon: 'copy',
+    label: 'Duplicate',
+    command: () => {},
+  },
+  {
+    icon: 'trash-2',
+    label: 'Delete',
+    command: () => {},
+    isCritical: true,
+  },
+]
+
+const meta = {
+  title: 'CpAccordion',
+  component: CpAccordion,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Accordion header title',
+    },
+    defaultOpenState: {
+      control: 'boolean',
+      description: 'Initial open state when the accordion is rendered',
+    },
+    hideActionTrigger: {
+      control: 'boolean',
+      description: 'Whether to hide the action trigger',
+    },
+    iconPosition: {
+      control: 'select',
+      options: ['leading', 'trailing'],
+      description: 'Chevron icon position',
+    },
+    quickOptionsLimit: {
+      control: 'number',
+      description: 'Number of quick options to display',
+    },
+    actions: {
+      control: 'object',
+      description:
+        'MenuItem[] (leading only). Editing as JSON drops `command` functions; use Reset to restore working actions.',
+    },
+  },
+} as Meta<CpAccordionStoryArgs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const sampleContentStyle =
+  'padding: 16px; font-size: 13px; color: #374151; background: repeating-linear-gradient(45deg, #fff9c4, #fff9c4 4px, #fffde7 4px, #fffde7 8px);'
+const highlightedSlotStyle = 'background: #fff9c4;'
+
+const defaultRender = (args: Args) => ({
+  components: { CpAccordion },
+  setup() {
+    const accordionArgs = computed(() => {
+      if (args.iconPosition === 'trailing') {
+        const a = args as CpAccordionStoryArgs & Args
+        return {
+          defaultOpenState: a.defaultOpenState,
+          iconPosition: 'trailing' as const,
+          quickOptionsLimit: a.quickOptionsLimit,
+          title: a.title,
+        }
+      }
+
+      return args
+    })
+
+    return { accordionArgs, sampleContentStyle }
+  },
+  template: `
+    <div style="box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; width: 500px;">
+      <CpAccordion v-bind="accordionArgs">
+        <div :style="sampleContentStyle" />
+      </CpAccordion>
+    </div>
+  `,
+})
+
+export const Documentation: Story = {
+  args: {
+    title: 'I have title.',
+  },
+  render: () => ({
+    components: { CpAccordion },
+    setup: () => ({
+      docPageStyle,
+      docSectionStyle,
+      docTitleStyle,
+      docRowColumnStyle,
+      docCellStyle,
+      docLabelStyle,
+      sampleContentStyle,
+      highlightedSlotStyle,
+      actions: defaultStoryActions,
+    }),
+    template: `
+      <div :style="docPageStyle">
+        <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700; color: #111827;">CpAccordion</h1>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Is Open</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">false</span>
+              <CpAccordion title="I have title." :default-open-state="false" icon-position="trailing">
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">true</span>
+              <CpAccordion title="I have title." :default-open-state="true" icon-position="trailing">
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+
+        <h2 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600; color: #111827;">
+          Unpublished Base: <span style="font-weight: 700;">Accordion Header</span>
+        </h2>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Style</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Leading Chevron</span>
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="leading">
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Trailing Chevron</span>
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="trailing">
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Actions</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Default</span>
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="leading" :actions="actions" :quick-options-limit="3">
+                <template #trailing-slot>
+                  This is a trailing slot
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Hover</span>
+              <CpAccordion
+                title="DIDA TRAVEL"
+                :default-open-state="false"
+                icon-position="leading"
+                style="background: var(--cp-background-primary-hover);"
+                :actions="actions"
+                :quick-options-limit="3"
+              >
+                <template #trailing-slot>
+                  This is a trailing slot
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Hide Action Trigger</span>
+              <CpAccordion
+                title="DIDA TRAVEL"
+                :default-open-state="false"
+                icon-position="leading"
+                style="background: var(--cp-background-primary-hover);"
+                :actions="actions"
+                :quick-options-limit="3"
+                hide-action-trigger
+              >
+                <template #trailing-slot>
+                  This is a trailing slot
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Has Leading Slot</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="leading" :actions="actions" :quick-options-limit="3">
+                <template #leading-slot>
+                  <span :style="highlightedSlotStyle">I have text.</span>
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+            <div :style="docCellStyle">
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="trailing">
+                <template #leading-slot>
+                  <span :style="highlightedSlotStyle">I have text.</span>
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Has Trailing Slot</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="leading">
+                <template #trailing-slot>
+                  <span :style="highlightedSlotStyle">I have text.</span>
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+             <div :style="docCellStyle">
+              <CpAccordion title="DIDA TRAVEL" :default-open-state="false" icon-position="trailing">
+                <template #trailing-slot>
+                  <span :style="highlightedSlotStyle">I have text.</span>
+                </template>
+                <div :style="sampleContentStyle" />
+              </CpAccordion>
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
+}
+
+export const Default: Story = {
+  args: {
+    title: 'I have title.',
+    defaultOpenState: true,
+    iconPosition: 'leading',
+    quickOptionsLimit: 2,
+    hideActionTrigger: false,
+    actions: defaultStoryActions,
+  },
+  render: defaultRender,
+}

package/src/stories/CpAccordionGroup.stories.ts

@@ -0,0 +1,223 @@
+import { computed } from 'vue'
+
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { MenuItem } from 'primevue/menuitem'
+
+import CpAccordion from '@/components/CpAccordion.vue'
+import CpAccordionGroup from '@/components/CpAccordionGroup.vue'
+
+import {
+  docCellStyle,
+  docLabelStyle,
+  docPageStyle,
+  docRowColumnStyle,
+  docSectionStyle,
+  docTitleStyle,
+} from '@/stories/documentationStyles'
+
+const sampleContentStyle =
+  'padding: 16px; font-size: 13px; color: #374151; background: repeating-linear-gradient(45deg, #fff9c4, #fff9c4 4px, #fffde7 4px, #fffde7 8px);'
+
+type CpAccordionGroupStoryArgs = {
+  itemActions: MenuItem[]
+  itemDefaultOpenState: boolean
+  itemHideActionTrigger: boolean
+  itemIconPosition: 'leading' | 'trailing'
+  itemQuickOptionsLimit: number
+  itemTitle: string
+  variant: 'default' | 'minimal' | 'primary'
+}
+
+const defaultItemActions: MenuItem[] = [
+  {
+    icon: 'copy',
+    label: 'Duplicate',
+    command: () => {},
+  },
+  {
+    icon: 'trash-2',
+    label: 'Delete',
+    command: () => {},
+    isCritical: true,
+  },
+]
+
+const meta = {
+  title: 'CpAccordionGroup',
+  component: CpAccordionGroup,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['minimal', 'default', 'primary'],
+      description: 'Visual style variant for the accordion group container',
+      table: { category: 'CpAccordionGroup' },
+    },
+    itemTitle: {
+      control: 'text',
+      description: 'Title prefix for each item (suffix 1, 2, 3)',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemDefaultOpenState: {
+      control: 'boolean',
+      description: 'Initial open state for each accordion',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemIconPosition: {
+      control: 'select',
+      options: ['leading', 'trailing'],
+      description: 'Chevron position on each accordion',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemQuickOptionsLimit: {
+      control: 'number',
+      description: 'Quick options limit (leading + actions)',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemHideActionTrigger: {
+      control: 'boolean',
+      description: 'Hide action trigger when leading + actions',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemActions: {
+      control: 'object',
+      description: 'MenuItem[] for each item (leading only). JSON edit drops `command`; use Reset to restore.',
+      table: { category: 'CpAccordion (items)' },
+    },
+  },
+} as Meta<CpAccordionGroupStoryArgs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultRender = (args: Args) => ({
+  components: { CpAccordion, CpAccordionGroup },
+  setup() {
+    const accordionBind = computed(() => {
+      if (args.itemIconPosition === 'trailing') {
+        return {
+          defaultOpenState: args.itemDefaultOpenState,
+          iconPosition: args.itemIconPosition,
+          quickOptionsLimit: args.itemQuickOptionsLimit,
+        }
+      }
+
+      return {
+        actions: args.itemActions,
+        defaultOpenState: args.itemDefaultOpenState,
+        hideActionTrigger: args.itemHideActionTrigger,
+        iconPosition: args.itemIconPosition,
+        quickOptionsLimit: args.itemQuickOptionsLimit,
+      }
+    })
+
+    return { accordionBind, args, sampleContentStyle }
+  },
+  template: `
+    <div style="box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; width: 500px;">
+      <CpAccordionGroup :variant="args.variant">
+        <CpAccordion
+          v-for="i in 3"
+          :key="'default-' + i"
+          v-bind="accordionBind"
+          :title="args.itemTitle + ' ' + i"
+        >
+          <div :style="sampleContentStyle" />
+        </CpAccordion>
+      </CpAccordionGroup>
+    </div>
+  `,
+})
+
+export const Documentation: Story = {
+  args: {
+    variant: 'default',
+  },
+  render: () => ({
+    components: { CpAccordion, CpAccordionGroup },
+    setup: () => ({
+      docPageStyle,
+      docSectionStyle,
+      docTitleStyle,
+      docRowColumnStyle,
+      docCellStyle,
+      docLabelStyle,
+      sampleContentStyle,
+    }),
+    template: `
+      <div :style="docPageStyle">
+        <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700; color: #111827;">CpAccordionGroup</h1>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Style</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Minimal</span>
+              <CpAccordionGroup variant="minimal">
+                <CpAccordion key="doc-default-1" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-default-2" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-default-3" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+              </CpAccordionGroup>
+            </div>
+
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Default</span>
+              <CpAccordionGroup variant="default">
+                <CpAccordion key="doc-bb-1" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-bb-2" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-bb-3" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+              </CpAccordionGroup>
+            </div>
+
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Primary</span>
+              <CpAccordionGroup variant="primary">
+                <CpAccordion key="doc-gb-1" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-gb-2" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-gb-3" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+              </CpAccordionGroup>
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
+}
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    itemTitle: 'DIDA TRAVEL',
+    itemDefaultOpenState: false,
+    itemIconPosition: 'leading',
+    itemQuickOptionsLimit: 2,
+    itemHideActionTrigger: false,
+    itemActions: defaultItemActions,
+  },
+  render: defaultRender,
+}

package/src/stories/CpBadge.stories.ts

@@ -2,8 +2,6 @@ import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpBadge from '@/components/CpBadge.vue'
 
-import { Sizes } from '@/constants'
-
 const meta = {
   title: 'CpBadge',
   component: CpBadge,
@@ -63,7 +61,7 @@ const defaultRender = (args: Args) => ({
 export const Default: Story = {
   args: {
     color: 'neutral',
-    size: Sizes.MD,
+    size: 'md',
     isStroked: false,
     isSquare: false,
     isClearable: false,