@citizenplane/pimp 18.24.0 → 18.25.1

package/src/stories/CpDynamicMenu.stories.ts

@@ -0,0 +1,279 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CpButton from '@/components/CpButton.vue'
+import CpDynamicMenu from '@/components/CpDynamicMenu.vue'
+
+const STORY_TRIGGER_LAYOUT =
+  'display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; width: 100%;'
+
+const MENU_ITEMS = [
+  { label: 'Edit', leadingIcon: 'edit', command: () => alert('Edit clicked') },
+  { label: 'Duplicate', leadingIcon: 'copy', command: () => alert('Duplicate clicked') },
+  { label: 'Move', leadingIcon: 'arrow-right-left', command: () => alert('Move clicked') },
+  { separator: true },
+  { label: 'Delete', leadingIcon: 'trash-2', isCritical: true, command: () => alert('Delete clicked') },
+]
+
+const meta = {
+  title: 'Organisms/CpDynamicMenu',
+  component: CpDynamicMenu,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Responsive menu wrapper that renders `CpMenu` as a popover anchored to the trigger on desktop, and `CpBottomSheet` on mobile viewports. The same `trigger` slot drives both branches, and `items` are rendered through `CpMenuList` in either surface. The component is imperative like `CpMenu` — there is no `v-model`; use the exposed `show(event)` / `hide()` / `toggle(event)` methods, and listen to `show` / `hide`.',
+      },
+    },
+  },
+  argTypes: {
+    breakpoint: {
+      control: 'number',
+      description:
+        'Viewport width (px) below which the menu switches to a bottom sheet. Defaults to Breakpoints.MOBILE (552)',
+    },
+    items: {
+      control: 'object',
+      description: 'The menu items to display. Each item is a PrimeVue `MenuItem`.',
+      table: {
+        type: { summary: 'MenuItem[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    keepOpenOnClick: {
+      control: 'boolean',
+      description: 'Keep the menu or the bottom sheet open when clicking an item.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    placement: {
+      control: 'select',
+      options: ['start', 'end'],
+      description: 'Horizontal alignment of the desktop popover relative to the trigger. Ignored on mobile.',
+      table: { defaultValue: { summary: 'start' } },
+    },
+    sheetTitle: {
+      control: 'text',
+      description:
+        'Rendered in the bottom sheet header on mobile. Overridable with the `sheet-title` slot; with neither, the header collapses.',
+    },
+    preventClose: {
+      control: 'boolean',
+      description: 'Block backdrop, swipe and Escape dismissal of the mobile bottom sheet.',
+    },
+    onShow: { action: 'show' },
+    onHide: { action: 'hide' },
+  },
+} satisfies Meta<typeof CpDynamicMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Resize the viewport to compare both branches: above the breakpoint the items
+ * render in a popover anchored to the trigger, below it in a bottom sheet.
+ */
+export const Default: Story = {
+  args: {
+    items: MENU_ITEMS,
+    sheetTitle: 'Actions',
+  },
+  render: (args) => ({
+    components: { CpButton, CpDynamicMenu },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpDynamicMenu v-bind="args">
+          <template #trigger>
+            <CpButton>Open menu</CpButton>
+          </template>
+        </CpDynamicMenu>
+        <p style="margin-top: 8px; text-align: center;">Resize me</p>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Mobile viewport — the same API renders a bottom sheet with the `sheetTitle` in
+ * its header, closing on item click, backdrop, swipe or Escape.
+ */
+export const Mobile: Story = {
+  args: {
+    items: MENU_ITEMS,
+    sheetTitle: 'Actions',
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: (args) => ({
+    components: { CpButton, CpDynamicMenu },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpDynamicMenu v-bind="args">
+          <template #trigger>
+            <CpButton>Open menu</CpButton>
+          </template>
+        </CpDynamicMenu>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Mobile viewport — the `sheet-title` slot replaces the `sheetTitle` heading
+ * when the header needs more than a string.
+ */
+export const SheetTitleSlot: Story = {
+  args: {
+    items: MENU_ITEMS,
+    sheetTitle: 'Ignored while the slot is provided',
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: (args) => ({
+    components: { CpButton, CpDynamicMenu },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpDynamicMenu v-bind="args">
+          <template #trigger>
+            <CpButton>Open menu</CpButton>
+          </template>
+          <template #sheet-title>
+            <CpHeading heading-level="h4">Custom header</CpHeading>
+          </template>
+        </CpDynamicMenu>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Without `items`, the default slot is rendered instead — inside the popover on
+ * desktop, inside the bottom sheet content on mobile. The `footer` slot is only
+ * rendered by the mobile bottom sheet. This content carries its own heading, so
+ * no `sheetTitle` is passed and the sheet header collapses.
+ */
+export const CustomContent: Story = {
+  render: (args) => ({
+    components: { CpButton, CpDynamicMenu },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpDynamicMenu v-bind="args">
+          <template #trigger>
+            <CpButton>Share</CpButton>
+          </template>
+          <div style="display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 260px;">
+            <strong>Share this document</strong>
+            <input
+              value="https://example.com/doc/abc"
+              readonly
+              style="padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px;"
+            />
+          </div>
+          <template #footer>
+            <CpButton>Copy link</CpButton>
+          </template>
+        </CpDynamicMenu>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Mobile viewport — with neither a `sheetTitle` nor a `sheet-title` slot, the bottom
+ * sheet header keeps its drag handle but drops its bottom padding, so the items
+ * start right under the handle.
+ */
+export const NoTitle: Story = {
+  args: {
+    items: MENU_ITEMS,
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: (args) => ({
+    components: { CpButton, CpDynamicMenu },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpDynamicMenu v-bind="args">
+          <template #trigger>
+            <CpButton>Open menu</CpButton>
+          </template>
+        </CpDynamicMenu>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Use `placement` to align the desktop popover's edge to the matching trigger
+ * edge. The trigger is centered here so the difference is easy to see, and the
+ * prop has no effect once the bottom sheet takes over.
+ */
+export const PlacementEnd: Story = {
+  args: {
+    items: MENU_ITEMS,
+    placement: 'end',
+    sheetTitle: 'Actions',
+  },
+  render: (args) => ({
+    components: { CpButton, CpDynamicMenu },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpDynamicMenu v-bind="args">
+          <template #trigger>
+            <CpButton>Open menu</CpButton>
+          </template>
+        </CpDynamicMenu>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Mobile viewport — with `preventClose`, the bottom sheet ignores backdrop,
+ * swipe and Escape dismissal. Only an item click closes it.
+ */
+export const PreventClose: Story = {
+  args: {
+    items: MENU_ITEMS,
+    preventClose: true,
+    sheetTitle: 'Actions',
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: (args) => ({
+    components: { CpButton, CpDynamicMenu },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpDynamicMenu v-bind="args">
+          <template #trigger>
+            <CpButton>Open menu</CpButton>
+          </template>
+        </CpDynamicMenu>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpLanguageSwitcher.stories.ts

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
+
+import CpButton from '@/components/CpButton.vue'
+import CpLanguageSwitcher from '@/components/CpLanguageSwitcher.vue'
+
+const STORY_TRIGGER_LAYOUT =
+  'display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; width: 100%;'
+
+const STORY_EDGE_TRIGGER_LAYOUT =
+  'display: flex; align-items: center; justify-content: flex-end; min-height: 60vh; width: 100%; padding: 0 16px;'
+
+const LANGS_WITH_FLAGS = [
+  { code: 'fr', name: 'Français', flag: 'fr' },
+  { code: 'en', name: 'English', flag: 'gb' },
+  { code: 'es', name: 'Español', flag: 'es' },
+  { code: 'pt', name: 'Português', flag: 'pt' },
+]
+
+const LANGS_WITHOUT_FLAGS = [
+  { code: 'fr', name: 'Français' },
+  { code: 'en', name: 'English' },
+  { code: 'es', name: 'Español' },
+  { code: 'pt', name: 'Português' },
+]
+
+const findLanguageName = (code: string | undefined) => {
+  const lang = LANGS_WITH_FLAGS.find((entry) => entry.code === code)
+  if (!lang) return ''
+  return lang.name
+}
+
+const meta = {
+  title: 'Organisms/CpLanguageSwitcher',
+  component: CpLanguageSwitcher,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Language picker built on `CpDynamicMenu`: a popover anchored to the trigger on desktop, a titleless bottom sheet on mobile. `v-model` holds the current locale **code**; picking an option sets it and closes the menu. The component never calls an i18n API — the consumer watches the model and runs its own `setLocale` / `switchLocalePath`. Flags are rendered with `flag-icons` classes, which pimp does not ship at runtime: the consumer app loads `flag-icons/css/flag-icons.min.css` itself (Storybook loads it in `preview.ts`).',
+      },
+    },
+  },
+  argTypes: {
+    langs: {
+      control: 'object',
+      description: 'Languages to list, rendered in the order given. The component never sorts them.',
+      table: { type: { summary: 'LanguageOption[]' } },
+    },
+    modelValue: {
+      control: 'text',
+      description: 'The current language code. Selecting an option sets it, then closes the menu.',
+    },
+    breakpoint: {
+      control: 'number',
+      description:
+        'Viewport width (px) below which the picker switches to a bottom sheet. Defaults to Breakpoints.MOBILE (552)',
+    },
+    placement: {
+      control: 'select',
+      options: ['start', 'end'],
+      description: 'Horizontal alignment of the desktop popover relative to the trigger. Ignored on mobile.',
+      table: { defaultValue: { summary: 'start' } },
+    },
+  },
+} satisfies Meta<typeof CpLanguageSwitcher>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * The default trigger is the header button from online-checkin: a tertiary accent
+ * button with a globe icon and the current code uppercased, so it follows the
+ * selection.
+ */
+export const Default: Story = {
+  args: {
+    langs: LANGS_WITH_FLAGS,
+    modelValue: 'fr',
+  },
+  render: (args) => ({
+    components: { CpLanguageSwitcher },
+    setup() {
+      const currentCode = ref(args.modelValue)
+      return { args, currentCode }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpLanguageSwitcher v-bind="args" v-model="currentCode" />
+        <p style="margin-top: 8px; text-align: center;">Current code: {{ currentCode }}</p>
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Without a `flag` on an option, only the name is rendered — no placeholder box.
+ */
+export const WithoutFlags: Story = {
+  args: {
+    langs: LANGS_WITHOUT_FLAGS,
+    modelValue: 'en',
+  },
+  render: (args) => ({
+    components: { CpLanguageSwitcher },
+    setup() {
+      const currentCode = ref(args.modelValue)
+      return { args, currentCode }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpLanguageSwitcher v-bind="args" v-model="currentCode" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * `placement="end"` with the trigger pinned to the right edge of the canvas, the navbar
+ * case: PrimeVue's collision handling already right-aligns the popover there, so the
+ * popover's right edge must sit flush with the trigger's, not shifted left.
+ */
+export const PlacementEndAtViewportEdge: Story = {
+  args: {
+    langs: LANGS_WITH_FLAGS,
+    modelValue: 'fr',
+    placement: 'end',
+  },
+  render: (args) => ({
+    components: { CpLanguageSwitcher },
+    setup() {
+      const currentCode = ref(args.modelValue)
+      return { args, currentCode }
+    },
+    template: `
+      <div style="${STORY_EDGE_TRIGGER_LAYOUT}">
+        <CpLanguageSwitcher v-bind="args" v-model="currentCode" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * Mobile viewport — the list moves into a bottom sheet. No `sheetTitle` is passed,
+ * so the header collapses to its drag handle and the languages start right under it.
+ */
+export const Mobile: Story = {
+  args: {
+    langs: LANGS_WITH_FLAGS,
+    modelValue: 'es',
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: (args) => ({
+    components: { CpLanguageSwitcher },
+    setup() {
+      const currentCode = ref(args.modelValue)
+      return { args, currentCode }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpLanguageSwitcher v-bind="args" v-model="currentCode" />
+      </div>
+    `,
+  }),
+}
+
+/**
+ * The `trigger` slot replaces the default button entirely — here it shows the
+ * current language name instead of its code.
+ */
+export const CustomTrigger: Story = {
+  args: {
+    langs: LANGS_WITH_FLAGS,
+    modelValue: 'pt',
+  },
+  render: (args) => ({
+    components: { CpButton, CpLanguageSwitcher },
+    setup() {
+      const currentCode = ref(args.modelValue)
+      const currentName = computed(() => findLanguageName(currentCode.value))
+      return { args, currentCode, currentName }
+    },
+    template: `
+      <div style="${STORY_TRIGGER_LAYOUT}">
+        <CpLanguageSwitcher v-bind="args" v-model="currentCode">
+          <template #trigger>
+            <CpButton appearance="secondary" color="neutral" size="sm">{{ currentName }}</CpButton>
+          </template>
+        </CpLanguageSwitcher>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpMenu.stories.ts

@@ -5,7 +5,7 @@ import CpButton from '@/components/CpButton.vue'
 import CpMenu from '@/components/CpMenu.vue'
 
 const meta = {
-  title: 'Molecules/CpMenu',
+  title: 'Organisms/CpMenu',
   component: CpMenu,
   parameters: {
     docs: {
@@ -208,6 +208,42 @@ export const Placement: Story = {
   }),
 }
 
+/**
+ * The same `placement="end"` menu with its trigger pinned to the right edge of the
+ * canvas, where PrimeVue's collision handling already right-aligns the popover on the
+ * trigger. The popover's right edge must sit flush with the trigger's, not shifted left.
+ */
+export const PlacementEndAtViewportEdge: Story = {
+  args: {
+    forcePopover: true,
+    placement: 'end',
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+  render: (args) => ({
+    components: { CpButton, CpMenu },
+    setup() {
+      const items = [
+        { label: 'Edit', leadingIcon: 'edit', command: () => alert('Edit clicked') },
+        { label: 'Duplicate', leadingIcon: 'copy', command: () => alert('Duplicate clicked') },
+        { separator: true },
+        { label: 'Delete', leadingIcon: 'trash-2', isCritical: true, command: () => alert('Delete clicked') },
+      ]
+      return { args, items }
+    },
+    template: `
+      <div style="display: flex; align-items: center; justify-content: flex-end; min-height: 320px; width: 100%;">
+        <CpMenu v-bind="args" :items="items">
+          <template #trigger>
+            <CpButton>Open menu</CpButton>
+          </template>
+        </CpMenu>
+      </div>
+    `,
+  }),
+}
+
 /**
  * Use the default slot to render arbitrary content inside the popover —
  * useful for forms, share panels, filters, etc.