@citizenplane/pimp 10.9.3 → 11.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.9.3",
+  "version": "11.0.1",
   "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/components/icons/IconFlight.vue

@@ -1,16 +1,7 @@
 <template>
-  <svg
-    width="24"
-    height="25"
-    viewBox="0 0 24 25"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    stroke-width="2"
-    stroke="currentColor"
-  >
+  <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M9.87956 9.20777V4.02868C9.87956 2.85757 10.8289 1.9082 12 1.9082C13.1711 1.9082 14.1205 2.85757 14.1205 4.02868V9.20777L21.08 14.0468V17.6897L14.1205 15.1886V19.0489L15.9148 20.4626V23.8695L12 22.4419L8.08531 23.8695V20.4626L9.87956 19.0489V15.1886L2.92004 17.6897V14.0468L9.87956 9.20777Z"
-      stroke-linejoin="round"
+      d="M13.1035 4.13806C13.1033 3.52857 12.6096 3.03455 12 3.03455C11.3904 3.03455 10.8958 3.52857 10.8955 4.13806V8.7865L4.5 13.6049V14.7113L11 12.5072V18.1371L10.5615 18.434L9.39746 19.224V20.7494L12 19.8002L14.6016 20.7484V19.2152L13.4277 18.3939L13 18.0961V12.4691L19.5 14.7045V13.6049L13.1035 8.7865V4.13806ZM15.1035 7.78748L20.7031 12.0082C21.2046 12.386 21.4999 12.977 21.5 13.6049V15.4056C21.5 16.4355 20.4856 17.1596 19.5117 16.8246L15 15.2719V17.0531L15.7471 17.5756C16.2826 17.9497 16.6016 18.5619 16.6016 19.2152V21.4642C16.6013 22.5056 15.5663 23.2303 14.5879 22.8734L11.999 21.9291L9.41113 22.8734C8.43271 23.2302 7.39763 22.5056 7.39746 21.4642V19.224C7.39746 18.561 7.72572 17.9409 8.27441 17.5687L9 17.0756V15.2972L4.48145 16.8295C3.56963 17.1385 2.62619 16.5225 2.51172 15.598L2.5 15.4095V13.6049C2.5001 12.977 2.79542 12.386 3.29688 12.0082L8.89551 7.78845V4.13806C8.89577 2.424 10.2859 1.03455 12 1.03455C13.7141 1.03455 15.1033 2.424 15.1035 4.13806V7.78748Z"
     />
   </svg>
 </template>

package/src/components/icons/IconFlightFilled.vue

@@ -1,7 +1,7 @@
 <template>
   <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M20.1018 12.8071C20.3525 12.9961 20.5 13.2918 20.5 13.6058V15.4064C20.5 15.7497 20.162 15.9909 19.8374 15.8792L14 13.8711V17.575L15.1747 18.3956C15.4425 18.5827 15.602 18.8888 15.602 19.2154V21.4645C15.602 21.8117 15.2568 22.0532 14.9306 21.9342L12 20.8651L9.0683 21.9343C8.74213 22.0533 8.39699 21.8118 8.39699 21.4646V19.2243C8.39699 18.8927 8.56134 18.5827 8.83577 18.3966L10 17.6072V13.9033L4.16055 15.8832C3.83632 15.9931 3.5 15.7521 3.5 15.4097V13.6058C3.5 13.2918 3.64747 12.9961 3.89824 12.8071L9.89599 8.28815V4.13915C9.89599 2.97716 10.838 2.03516 12 2.03516C13.162 2.03516 14.104 2.97716 14.104 4.13915V8.28815L20.1018 12.8071Z"
+      d="M20.1018 12.807C20.3525 12.9959 20.5 13.2917 20.5 13.6057V15.4063C20.5 15.7496 20.162 15.9908 19.8374 15.8791L14 13.871V17.5749L15.1747 18.3955C15.4425 18.5826 15.602 18.8886 15.602 19.2153V21.4644C15.602 21.8116 15.2568 22.0531 14.9306 21.9341L12 20.865L9.0683 21.9342C8.74213 22.0531 8.39699 21.8116 8.39699 21.4645V19.2242C8.39699 18.8926 8.56134 18.5826 8.83577 18.3965L10 17.6071V13.9032L4.16055 15.8831C3.83632 15.993 3.5 15.7519 3.5 15.4096V13.6057C3.5 13.2917 3.64747 12.9959 3.89824 12.807L9.89599 8.28803V4.13903C9.89599 2.97703 10.838 2.03503 12 2.03503C13.162 2.03503 14.104 2.97703 14.104 4.13903V8.28803L20.1018 12.807Z"
     />
   </svg>
 </template>

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>
     `,