@citizenplane/pimp 17.0.9 → 17.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "17.0.9",
+  "version": "17.0.10",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpAccordion.vue

@@ -1,42 +1,37 @@
 <template>
   <div class="cpAccordion">
-    <button
-      :id="accordionId"
-      :aria-controls="accordionContentId"
-      :aria-expanded="isToggled"
-      class="cpAccordion__header"
-      :class="dynamicClasses"
-      cp-item-actions-trigger
-      type="button"
-      @click="handleClick"
-    >
-      <div class="cpAccordion__headerContent">
-        <cp-item-actions
-          v-if="hasActions"
-          :actions="resolvedActions"
-          class="cpAccordion__actions"
-          :class="actionsDynamicClasses"
-          :quick-options-limit="resolvedQuickOptionsLimit"
-        />
-        <div class="cpAccordion__title">
-          <cp-icon v-if="displayLeadingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
-          <div class="cpAccordion__leading">
-            <span class="cpAccordion__titleText">{{ title }}</span>
-            <slot name="leading-slot" />
-          </div>
-        </div>
-        <div v-if="displayTrailingSection" class="cpAccordion__trailing">
-          <span v-if="hasTrailingSlot" class="cpAccordion__desktopTrailingSlot">
-            <slot name="trailing-slot" />
-          </span>
-          <cp-icon v-if="displayActionTrigger" class="cpAccordion__more" size="16" type="more-horizontal" />
-          <cp-icon v-if="displayTrailingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
+    <div class="cpAccordion__header" :class="dynamicClasses" cp-item-actions-trigger>
+      <button
+        :id="accordionId"
+        :aria-controls="accordionContentId"
+        :aria-expanded="isToggled"
+        :aria-labelledby="accordionTitleId"
+        class="cpAccordion__trigger"
+        type="button"
+        @click="handleClick"
+      />
+
+      <div v-if="hasActions" class="cpAccordion__actions" :class="actionsDynamicClasses">
+        <cp-item-actions :actions="resolvedActions" :quick-options-limit="resolvedQuickOptionsLimit" />
+      </div>
+
+      <div class="cpAccordion__title">
+        <cp-icon v-if="displayLeadingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
+        <div class="cpAccordion__leading">
+          <span :id="accordionTitleId" class="cpAccordion__titleText">{{ title }}</span>
+          <slot name="leading-slot" />
         </div>
       </div>
-      <span v-if="hasTrailingSlot" class="cpAccordion__mobileTrailingSlot">
+
+      <span v-if="hasTrailingSlot" class="cpAccordion__trailingSlot">
         <slot name="trailing-slot" />
       </span>
-    </button>
+
+      <div v-if="displayTrailingIcons" class="cpAccordion__trailingIcons">
+        <cp-icon v-if="displayActionTrigger" class="cpAccordion__more" size="16" type="more-horizontal" />
+        <cp-icon v-if="displayTrailingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
+      </div>
+    </div>
     <cp-transition-expand>
       <div v-if="isToggled" :id="accordionContentId" :aria-labelledby="accordionId" class="cpAccordion__content">
         <slot />
@@ -80,6 +75,8 @@ const accordionId = useId()
 
 const accordionContentId = computed(() => `${accordionId}-content`)
 
+const accordionTitleId = computed(() => `${accordionId}-title`)
+
 const resolvedIconPosition = computed(() => props.iconPosition || 'leading')
 
 const resolvedQuickOptionsLimit = computed(() => props.quickOptionsLimit || 0)
@@ -103,9 +100,7 @@ const displayActionTrigger = computed(() => !resolvedHideActionTrigger.value &&
 const displayLeadingIcon = computed(() => hasLeadingIcon.value || hasActions.value)
 const displayTrailingIcon = computed(() => hasTrailingIcon.value && !hasActions.value)
 
-const displayTrailingSection = computed(() => {
-  return hasTrailingSlot.value || displayActionTrigger.value || displayTrailingIcon.value
-})
+const displayTrailingIcons = computed(() => displayActionTrigger.value || displayTrailingIcon.value)
 
 const dynamicIcon = computed(() => (isToggled.value ? 'chevron-up' : 'chevron-down'))
 
@@ -123,36 +118,43 @@ const handleClick = () => (isToggled.value = !isToggled.value)
   background-color: var(--cp-background-primary);
   width: 100%;
 
-  &__headerContent {
-    display: flex;
-    flex-shrink: 0;
-    width: 100%;
-    justify-content: space-between;
-    gap: var(--cp-spacing-lg);
-  }
-
   &__header {
-    @extend %u-focus-outline;
-
+    position: relative;
     border-radius: var(--cp-radius-none);
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: space-between;
     padding: var(--cp-spacing-lg);
     gap: var(--cp-spacing-lg);
-    cursor: pointer;
 
-    &:hover {
+    &:hover,
+    &:has(.cpAccordion__trigger:focus-visible) {
       background-color: var(--cp-background-primary-hover);
     }
 
-    &:focus-visible {
-      outline-offset: calc(var(--cp-spacing-sm) * -1);
+    &:has(.cpAccordion__trigger:focus-visible) {
+      box-shadow: var(--cp-shadow-focus-ring-accent);
       border-radius: var(--cp-radius-md);
+      z-index: 1;
     }
   }
 
+  &__trigger {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    outline: none;
+  }
+
   &__title {
+    flex: 1 1 auto;
+    min-width: 0;
     display: flex;
     align-items: center;
     gap: var(--cp-spacing-lg);
@@ -160,12 +162,14 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);
     overflow: hidden;
+    order: 1;
   }
 
   &__icon {
     color: var(--cp-foreground-secondary);
     flex-shrink: 0;
     padding: var(--cp-spacing-xs);
+    pointer-events: none;
   }
 
   &__leading {
@@ -179,60 +183,67 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     @extend %u-text-ellipsis;
   }
 
-  &__trailing {
+  &__trailingSlot {
     display: flex;
     align-items: center;
-    gap: var(--cp-spacing-lg);
-    position: relative;
+    order: 2;
+    pointer-events: auto;
   }
 
-  &__desktopTrailingSlot {
+  &__trailingIcons {
     display: flex;
-  }
-
-  &__mobileTrailingSlot {
-    display: none;
-    text-align: left;
-    padding-left: var(--cp-spacing-3xl);
+    align-items: center;
+    gap: var(--cp-spacing-lg);
+    order: 3;
+    pointer-events: none;
   }
 
   &__actions {
+    position: absolute;
     right: 0;
     top: 0;
     height: 100%;
-    background: linear-gradient(270deg, var(--cp-utility-neutral-100) 0%, rgba(242, 246, 250, 0) 100%);
     padding: 0 var(--cp-spacing-md) 0 15%;
-    transform: translate3d(calc(var(--cp-dimensions-1) * 1.25), 0%, 0);
     display: flex;
     align-items: center;
     z-index: 1;
+    pointer-events: none;
+
+    & > .cpItemActions {
+      transform: translate3d(calc(var(--cp-dimensions-1) * 1.25 + #{fn.px-to-rem(-8)}), -50%, 0);
+    }
   }
 
   &__more {
     color: var(--cp-foreground-primary);
+    pointer-events: none;
   }
 }
 
 @media (hover: hover) and (pointer: fine) {
-  [cp-item-actions-trigger]:has(.cpItemActions--isDropdownOpen) .cpItemActions,
-  [cp-item-actions-trigger]:is(:focus-within, :focus-visible, :hover) .cpItemActions {
-    transform: translate3d(0, 0, 0);
+  [cp-item-actions-trigger]:has(.cpItemActions--isDropdownOpen),
+  [cp-item-actions-trigger]:is(:focus-within, :focus-visible, :hover) {
+    .cpItemActions {
+      transform: translate3d(#{fn.px-to-rem(-8)}, -50%, 0);
+    }
+
+    .cpAccordion__actions {
+      background: linear-gradient(270deg, var(--cp-utility-neutral-100) 0%, rgba(242, 246, 250, 0) 100%);
+    }
   }
 }
 
 // var(--cp-breakpoint-sm) = 40rem = 400px
 @include mx.media-query-max(40rem) {
   .cpAccordion {
-    &__header {
-      flex-wrap: wrap;
-    }
-
-    &__desktopTrailingSlot {
-      display: none;
+    &__trailingIcons {
+      order: 2;
     }
 
-    &__mobileTrailingSlot {
-      display: flex;
+    &__trailingSlot {
+      order: 3;
+      flex-basis: 100%;
+      padding-left: var(--cp-spacing-3xl);
     }
 
     &__actions {

package/src/stories/CpAccordion.stories.ts

@@ -5,6 +5,7 @@ import type { MenuItem } from 'primevue/menuitem'
 
 import type { CpAccordionBaseProps } from '@/components/CpAccordion.vue'
 import CpAccordion from '@/components/CpAccordion.vue'
+import CpButton from '@/components/CpButton.vue'
 
 /** Storybook controls: component props remain a discriminated union in `CpAccordion.vue`. */
 type CpAccordionStoryArgs = CpAccordionBaseProps & {
@@ -279,13 +280,13 @@ export const WithTrailingSlot: Story = {
   render: (args: Args) => ({
     components: { CpAccordion },
     setup() {
-      return { args, sampleContentStyle, wrapperStyle }
+      return { args, sampleContentStyle, wrapperStyle, CpButton }
     },
     template: `
       <div :style="wrapperStyle">
         <CpAccordion v-bind="args">
           <template #trailing-slot>
-            <span style="font-size: 12px; color: #6b7280;">Last edit · 2 min ago</span>
+            <CpButton size="xs">Custom action</CpButton>
           </template>
           <div :style="sampleContentStyle" />
         </CpAccordion>