@citizenplane/pimp 16.0.3 → 16.2.0

package/src/stories/Colors.stories.ts

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { docLabelStyle } from '@/stories/documentationStyles'
+import type { Token } from '@/stories/tokenUtils'
+import { copyableClass, copyableCopiedClass, readTokens, useCopier } from '@/stories/tokenUtils'
+
+const meta: Meta = {
+  title: 'Foundations/Colors',
+  tags: ['!dev'],
+  parameters: {
+    layout: 'padded',
+    controls: { disable: true },
+    docs: { source: { code: null } },
+  },
+}
+
+export default meta
+
+type Story = StoryObj
+
+const FAMILIES = ['accent', 'blue', 'error', 'magenta', 'neutral', 'pink', 'success', 'warning', 'yellow'] as const
+
+const FAMILY_ORDER: readonly string[] = [
+  'base',
+  'accent',
+  'error',
+  'warning',
+  'success',
+  'blue',
+  'pink',
+  'magenta',
+  'yellow',
+  'neutral',
+]
+
+const FAMILY_LABEL: Record<string, string> = {
+  base: 'Base',
+  accent: 'Accent',
+  error: 'Error',
+  warning: 'Warning',
+  success: 'Success',
+  blue: 'Blue',
+  pink: 'Pink',
+  magenta: 'Magenta',
+  yellow: 'Yellow',
+  neutral: 'Neutral',
+}
+
+const gridStyle = 'display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;'
+
+const cardStyle =
+  'display: flex; flex-direction: column; border: 1px solid #e9eaf6; border-radius: 8px; overflow: hidden; background: #ffffff;'
+
+const swatchStyle = (tokenName: string) =>
+  `height: 72px; background: var(${tokenName}); border-bottom: 1px solid rgba(0, 0, 0, 0.06);`
+
+const cardBodyStyle = 'display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;'
+
+const cardNameStyle =
+  'font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #111; word-break: break-all;'
+
+const cardValueStyle =
+  'font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #6b7280; word-break: break-all;'
+
+const familyGroupStyle = 'display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;'
+
+type Family = { label: string; tokens: Token[] }
+
+const familyOf = (name: string, prefix: string): string => {
+  const rest = name.startsWith(prefix) ? name.slice(prefix.length) : name
+  const first = rest.split('-')[0]
+  return (FAMILIES as readonly string[]).includes(first) ? first : 'base'
+}
+
+const groupByFamily = (tokens: Token[], prefix: string): Family[] => {
+  const byFamily = new Map<string, Token[]>()
+  for (const token of tokens) {
+    const key = familyOf(token.name, prefix)
+    const bucket = byFamily.get(key) ?? []
+    bucket.push(token)
+    byFamily.set(key, bucket)
+  }
+  return FAMILY_ORDER.filter((key) => byFamily.has(key)).map((key) => ({
+    label: FAMILY_LABEL[key] ?? key,
+    tokens: byFamily.get(key) ?? [],
+  }))
+}
+
+type SectionArgs = { exclude?: (RegExp | string)[]; prefix: string }
+
+const makeSectionStory = (section: SectionArgs): Story => ({
+  render: () => ({
+    setup() {
+      const tokens = readTokens([section.prefix], section.exclude ?? [])
+      const { copiedKey, copy } = useCopier()
+      return {
+        count: tokens.length,
+        families: groupByFamily(tokens, section.prefix),
+        copiedKey,
+        copy,
+        labelStyle: docLabelStyle,
+        groupStyle: familyGroupStyle,
+        grid: gridStyle,
+        card: cardStyle,
+        body: cardBodyStyle,
+        nameText: cardNameStyle,
+        valueText: cardValueStyle,
+        copyClass: copyableClass,
+        copiedClass: copyableCopiedClass,
+        swatch: (tokenName: string) => swatchStyle(tokenName),
+      }
+    },
+    template: `
+      <div v-if="count > 0">
+        <div v-for="family in families" :key="family.label" :style="groupStyle">
+          <span :style="labelStyle">{{ family.label }} ({{ family.tokens.length }})</span>
+          <div :style="grid">
+            <div v-for="token in family.tokens" :key="token.name" :style="card">
+              <div :style="swatch(token.name)"></div>
+              <div :style="body">
+                <span
+                  :style="nameText"
+                  :class="[copyClass, copiedKey === token.name ? copiedClass : '']"
+                  role="button"
+                  tabindex="0"
+                  :title="'Click to copy ' + token.name"
+                  @click="copy(token.name)"
+                  @keydown.enter.prevent="copy(token.name)"
+                  @keydown.space.prevent="copy(token.name)"
+                >{{ copiedKey === token.name ? 'Copied!' : token.name }}</span>
+                <span :style="valueText">{{ token.value }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else style="padding: 12px 0; color: #9ca3af; font-size: 12px;">No tokens</div>
+    `,
+  }),
+})
+
+/**
+ * Surface colors used for page, card and control backgrounds.
+ */
+export const Background: Story = makeSectionStory({ prefix: '--cp-background-' })
+
+/**
+ * Border colors for dividers, card outlines and control edges.
+ */
+export const Border: Story = makeSectionStory({ prefix: '--cp-border-' })
+
+/**
+ * Foreground colors used for icons, illustrations and decorative surfaces
+ * that sit on top of the background.
+ */
+export const Foreground: Story = makeSectionStory({ prefix: '--cp-foreground-' })
+
+/**
+ * Text colors. Typography size, line-height and letter-spacing tokens live
+ * under the Typography section.
+ */
+export const Text: Story = makeSectionStory({
+  prefix: '--cp-text-',
+  exclude: [/-line-height$/, /-letter-spacing$/, /^--cp-text-size-/],
+})
+
+/**
+ * Utility colors for transient UI surfaces such as overlays, shadows or
+ * state indicators.
+ */
+export const Utility: Story = makeSectionStory({ prefix: '--cp-utility-' })
+
+/**
+ * Dedicated colors used by focus rings. See the Focus Rings section for
+ * composite ring tokens.
+ */
+export const Focus: Story = makeSectionStory({ prefix: '--cp-focus' })

package/src/stories/CpAccordion.stories.ts

@@ -1,20 +1,11 @@
 import { computed } from 'vue'
 
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 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[]
@@ -37,7 +28,7 @@ const defaultStoryActions: MenuItem[] = [
 ]
 
 const meta = {
-  title: 'Visual/CpAccordion',
+  title: 'Molecules/CpAccordion',
   component: CpAccordion,
   argTypes: {
     title: {
@@ -50,16 +41,16 @@ const meta = {
     },
     hideActionTrigger: {
       control: 'boolean',
-      description: 'Whether to hide the action trigger',
+      description: 'Whether to hide the inline action trigger (leading icon mode)',
     },
     iconPosition: {
       control: 'select',
       options: ['leading', 'trailing'],
-      description: 'Chevron icon position',
+      description: 'Chevron icon position. `trailing` disables actions.',
     },
     quickOptionsLimit: {
       control: 'number',
-      description: 'Number of quick options to display',
+      description: 'Number of quick-access actions to display inline',
     },
     actions: {
       control: 'object',
@@ -74,7 +65,9 @@ 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 wrapperStyle =
+  'box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; width: 500px;'
 
 const defaultRender = (args: Args) => ({
   components: { CpAccordion },
@@ -93,10 +86,10 @@ const defaultRender = (args: Args) => ({
       return args
     })
 
-    return { accordionArgs, sampleContentStyle }
+    return { accordionArgs, sampleContentStyle, wrapperStyle }
   },
   template: `
-    <div style="box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; width: 500px;">
+    <div :style="wrapperStyle">
       <CpAccordion v-bind="accordionArgs">
         <div :style="sampleContentStyle" />
       </CpAccordion>
@@ -104,163 +97,199 @@ const defaultRender = (args: Args) => ({
   `,
 })
 
-export const Documentation: Story = {
+/**
+ * Default accordion with a leading chevron icon, open by default and two quick actions.
+ */
+export const Default: Story = {
   args: {
-    title: 'I have title.',
+    title: 'I have a title.',
+    defaultOpenState: true,
+    iconPosition: 'leading',
+    quickOptionsLimit: 2,
+    hideActionTrigger: false,
+    actions: defaultStoryActions,
   },
-  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>
+  render: defaultRender,
+}
 
-        <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>
+/* -------------------------------------------------------------------------- */
+/* Icon position                                                              */
+/* -------------------------------------------------------------------------- */
 
-        <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>
+/**
+ * The chevron is rendered at the beginning of the header. This is the default.
+ * Actions can be combined with this layout.
+ */
+export const LeadingIcon: Story = {
+  args: {
+    ...Default.args,
+    iconPosition: 'leading',
+    title: 'Leading chevron',
+  },
+  render: defaultRender,
+}
 
-        <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>
+/**
+ * The chevron is rendered at the end of the header. This variant is
+ * action-less by design (the component enforces it through its prop types).
+ */
+export const TrailingIcon: Story = {
+  args: {
+    title: 'Trailing chevron',
+    defaultOpenState: false,
+    iconPosition: 'trailing',
+    quickOptionsLimit: 0,
+  },
+  render: defaultRender,
+}
 
-        <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">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>
+/* -------------------------------------------------------------------------- */
+/* Open state                                                                 */
+/* -------------------------------------------------------------------------- */
 
-        <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>
+/**
+ * The accordion renders open on first mount.
+ */
+export const OpenByDefault: Story = {
+  args: {
+    ...Default.args,
+    defaultOpenState: true,
+    title: 'Open on mount',
+  },
+  render: defaultRender,
+}
 
-        <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,
-      },
-    },
+/**
+ * The accordion renders closed on first mount.
+ */
+export const ClosedByDefault: Story = {
+  args: {
+    ...Default.args,
+    defaultOpenState: false,
+    title: 'Closed on mount',
   },
+  render: defaultRender,
 }
 
-export const Default: Story = {
+/* -------------------------------------------------------------------------- */
+/* Actions & quick options                                                    */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Pass `actions` (a `MenuItem[]`) to reveal a contextual menu on hover/focus.
+ * Only available in `leading` icon mode.
+ */
+export const WithActions: Story = {
+  args: {
+    ...Default.args,
+    title: 'Accordion with a contextual menu',
+    quickOptionsLimit: 0,
+    actions: defaultStoryActions,
+  },
+  render: defaultRender,
+}
+
+/**
+ * Use `quickOptionsLimit` to display N action triggers inline at the start of
+ * the header in addition to the overflow menu.
+ */
+export const WithQuickOptions: Story = {
+  args: {
+    ...Default.args,
+    title: 'With quick options',
+    quickOptionsLimit: 2,
+    actions: defaultStoryActions,
+  },
+  render: defaultRender,
+}
+
+/**
+ * Same as `WithActions`, but the inline action trigger (the `…` button) is
+ * hidden. Useful when actions are surfaced elsewhere.
+ */
+export const HideActionTrigger: Story = {
   args: {
-    title: 'I have title.',
+    ...Default.args,
+    title: 'Action trigger hidden',
+    hideActionTrigger: true,
+    actions: defaultStoryActions,
+  },
+  render: defaultRender,
+}
+
+/**
+ * An accordion without any inline actions.
+ */
+export const WithoutActions: Story = {
+  args: {
+    title: 'Plain accordion',
     defaultOpenState: true,
     iconPosition: 'leading',
-    quickOptionsLimit: 2,
+    quickOptionsLimit: 0,
     hideActionTrigger: false,
-    actions: defaultStoryActions,
+    actions: [],
   },
   render: defaultRender,
 }
+
+/* -------------------------------------------------------------------------- */
+/* Slots                                                                      */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The `leading-slot` lets you append rich content next to the title
+ * (e.g. meta, badges).
+ */
+export const WithLeadingSlot: Story = {
+  args: {
+    ...Default.args,
+    title: 'Accordion with leading slot',
+    actions: [],
+    quickOptionsLimit: 0,
+  },
+  render: (args: Args) => ({
+    components: { CpAccordion },
+    setup() {
+      return { args, sampleContentStyle, wrapperStyle }
+    },
+    template: `
+      <div :style="wrapperStyle">
+        <CpAccordion v-bind="args">
+          <template #leading-slot>
+            <span style="font-size: 12px; color: #6b7280; margin-top: 4px;">Additional context below the title</span>
+          </template>
+          <div :style="sampleContentStyle" />
+        </CpAccordion>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The `trailing-slot` is shown on the right of the header. It supports any
+ * custom content (e.g. timestamps, counters).
+ */
+export const WithTrailingSlot: Story = {
+  args: {
+    ...Default.args,
+    title: 'Accordion with trailing slot',
+    actions: [],
+    quickOptionsLimit: 0,
+  },
+  render: (args: Args) => ({
+    components: { CpAccordion },
+    setup() {
+      return { args, sampleContentStyle, wrapperStyle }
+    },
+    template: `
+      <div :style="wrapperStyle">
+        <CpAccordion v-bind="args">
+          <template #trailing-slot>
+            <span style="font-size: 12px; color: #6b7280;">Last edit · 2 min ago</span>
+          </template>
+          <div :style="sampleContentStyle" />
+        </CpAccordion>
+      </div>
+    `,
+  }),
+}