@citizenplane/pimp 10.9.3 → 11.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.9.3",
+  "version": "11.0.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/assets/styles/utilities/_index.scss

@@ -7,6 +7,15 @@
   overflow: hidden;
 }
 
+.u-layout-box-padding,
+%u-layout-box-padding {
+  padding: var(--cp-spacing-2xl);
+
+  @media (max-width: 650px) {
+    padding: var(--cp-spacing-xl);
+  }
+}
+
 .u-asterisk {
   position: relative;
   top: fn.px-to-rem(-3);

package/src/components/CpDialog.vue

@@ -1,19 +1,35 @@
 <template>
   <div class="cpDialog">
-    <dialog ref="dialogElement" class="cpDialog__dialog" @keydown.esc.stop.prevent="handleClose">
-      <div class="cpDialog__overlay" />
+    <dialog
+      ref="dialogElement"
+      :aria-describedby="ariaDescribedby"
+      :aria-labelledby="titleId"
+      aria-modal="true"
+      class="cpDialog__dialog"
+      @keydown.esc.stop.prevent="handleClose"
+    >
+      <div aria-hidden="true" class="cpDialog__overlay" />
       <main ref="dialogContainer" class="cpDialog__container" :style="dynamicStyle" @keydown.tab="trapFocus">
-        <header v-if="hasHeaderSlot" class="cpDialog__header">
-          <slot name="header" />
-          <button class="cpDialog__close" type="button" @click="handleClose">
-            <cp-icon type="x" />
+        <header class="cpDialog__header">
+          <div class="cpDialog__left">
+            <div class="cpDialog__title">
+              <slot name="title">
+                <h2 :id="titleId">{{ title }}</h2>
+              </slot>
+            </div>
+            <div v-if="hasSubtitle" :id="subtitleId" class="cpDialog__subtitle">
+              <slot name="subtitle">
+                <p>{{ subtitle }}</p>
+              </slot>
+            </div>
+          </div>
+          <button aria-label="Close dialog" class="cpDialog__close" type="button" @click="handleClose">
+            <cp-icon aria-hidden="true" type="x" />
           </button>
         </header>
-        <slot>
-          <section class="cpDialog__content">
-            <slot name="content" />
-          </section>
-        </slot>
+        <section class="cpDialog__content">
+          <slot />
+        </section>
         <footer v-if="hasFooterSlot" class="cpDialog__footer">
           <slot name="footer" />
         </footer>
@@ -23,12 +39,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useSlots, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { computed, ref, useSlots, onMounted, nextTick, onBeforeUnmount, useId } from 'vue'
 
 import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
 
 interface Props {
   maxWidth?: number
+  subtitle?: string
+  title: string
 }
 
 interface Emits {
@@ -37,10 +55,17 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   maxWidth: 600,
+  subtitle: '',
 })
 
 const emit = defineEmits<Emits>()
 
+const dialogId = useId()
+const titleId = computed(() => `${dialogId}-title`)
+const subtitleId = computed(() => `${dialogId}-subtitle`)
+
+const ariaDescribedby = computed(() => (hasSubtitle.value ? subtitleId.value : undefined))
+
 const slots = useSlots()
 
 const dialogElement = ref<HTMLDialogElement | null>(null)
@@ -48,8 +73,8 @@ const dialogContainer = ref<HTMLElement | null>(null)
 
 const dynamicStyle = computed(() => ({ maxWidth: `${props.maxWidth}px` }))
 
-const hasHeaderSlot = computed(() => !!slots.header)
-
+const hasSubtitleSlot = computed(() => !!slots.subtitle)
+const hasSubtitle = computed(() => !!props.subtitle || hasSubtitleSlot.value)
 const hasFooterSlot = computed(() => !!slots.footer)
 
 const handleClose = () => emit('close')
@@ -151,64 +176,81 @@ $dialog-breakpoint: 550px;
 
   &__header,
   &__footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    padding: var(--cp-spacing-xl) var(--cp-spacing-2xl);
   }
 
   &__header {
-    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--cp-spacing-md);
     border-bottom: 1px solid var(--cp-border-soft);
   }
 
+  &__left {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &__title > * {
+    @extend %u-text-ellipsis;
+  }
+
+  &__title,
+  &__title > h2 {
+    font-size: var(--cp-text-size-xl);
+    font-weight: 600;
+    line-height: var(--cp-line-height-xl);
+  }
+
+  &__subtitle,
+  &__subtitle > p {
+    font-size: var(--cp-text-size-sm);
+    font-weight: 400;
+    line-height: var(--cp-line-height-md);
+    color: var(--cp-text-secondary);
+  }
+
   &__close {
-    position: absolute;
-    top: var(--cp-spacing-2xl);
-    right: var(--cp-spacing-2xl);
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     padding: var(--cp-spacing-sm);
     border-radius: var(--cp-radius-md);
     color: var(--cp-foreground-secondary);
-    transition: 0.2s ease-in-out;
-    transform: translate(var(--cp-dimensions-1), calc(var(--cp-dimensions-1) * -1));
+    transition: 200ms ease-in-out;
     transition-property: color, background-color;
 
     &:hover {
       color: var(--cp-foreground-primary);
+      background-color: var(--cp-background-secondary);
     }
 
     &:focus-visible {
-      outline: calc(var(--cp-dimensions-0_5) * 1.5) solid var(--cp-focus);
+      outline: fn.px-to-rem(2) solid var(--cp-focus);
     }
   }
 
   &__content {
+    @extend %u-layout-box-padding;
+
     overflow: auto;
     min-height: 0;
     flex: 1;
   }
 
   &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
     &:not(:empty) {
       border-top: 1px solid var(--cp-border-soft);
-      padding: var(--cp-spacing-xl) var(--cp-spacing-2xl);
-    }
-
-    &--noBorder {
-      border-top: none;
     }
   }
 }
 
-@media screen and (max-width: $dialog-breakpoint) {
-  .cpDialog__close {
-    top: var(--cp-spacing-xl);
-    right: var(--cp-spacing-xl);
-  }
-}
-
 @media (max-width: 650px) {
   .cpDialog__footer {
     padding: var(--cp-spacing-xl);

package/src/stories/CpDialog.stories.ts

@@ -14,13 +14,6 @@ const meta = {
     },
     onClose: { action: 'closed' },
   },
-  parameters: {
-    styles: {
-      '.header': {
-        color: 'red',
-      },
-    },
-  },
 } satisfies Meta<typeof CpDialog>
 
 export default meta
@@ -29,6 +22,8 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     maxWidth: 600,
+    title: 'Dialog title',
+    subtitle: 'Dialog subtitle',
   },
   render: (args) => ({
     setup() {
@@ -39,14 +34,76 @@ export const Default: Story = {
       <CpButton @click="isOpen = true">Open Dialog</CpButton>
       <CpTransitionDialog>
         <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
-          <template #header>
-            <h1 style="padding: 16px 24px">Header slot</h1>
-            </template>
-            <p style="padding: 16px 24px">This is the default slot content. You can put any content here.</p>
-            <template #footer>
-              <CpButton @click="isOpen = false">Cancel</CpButton>
-              This is the footer slot
-            </template>
+          <template #title>Header slot</template>
+          <template #subtitle>Subtitle</template>
+          <p>This is the default slot content. You can put any content here.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Cancel</CpButton>
+            This is the footer slot
+          </template>
+        </CpDialog>
+      </CpTransitionDialog>
+    `,
+  }),
+}
+
+export const TitleSubtitleWithProps: Story = {
+  args: {
+    maxWidth: 600,
+    title: 'Dialog title',
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog with string title/subtitle</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
+          <p>This is the default slot content. You can put any content here.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Cancel</CpButton>
+            This is the footer slot
+          </template>
+        </CpDialog>
+      </CpTransitionDialog>
+    `,
+  }),
+}
+
+export const TitleSubtitleWithSlots: Story = {
+  args: {
+    maxWidth: 560,
+    titleTag: 'div',
+    subtitleTag: 'div',
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog (flex title/subtitle)</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false" title-tag="div" subtitle-tag="div">
+          <template #title>
+            <div style="display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;">
+              <cp-icon type="info" style="flex-shrink: 0;" />
+              <span>Dialog with flex layout</span>
+            </div>
+          </template>
+          <template #subtitle>
+            <div style="display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
+              <span>Optional info</span>
+              <span style="color: var(--cp-text-tertiary);">•</span>
+              <span>Last updated today</span>
+            </div>
+          </template>
+          <p>Body content. Title and subtitle above are divs with flex layout.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Close</CpButton>
+          </template>
         </CpDialog>
       </CpTransitionDialog>
     `,