@citizenplane/pimp 11.0.1 → 11.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "11.0.1",
+  "version": "11.0.3",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -12,7 +12,6 @@
     "format": "prettier . --write",
     "test": "jest tests",
     "commitlint": "commitlint --edit",
-    "commit": "cz",
     "prepare": "husky"
   },
   "type": "module",
@@ -46,8 +45,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.28.6",
-    "@commitlint/cli": "^20.3.1",
-    "@commitlint/config-conventional": "^20.3.1",
+    "@commitlint/cli": "20.4.2",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
     "@storybook/addon-onboarding": "^9.1.17",
@@ -67,8 +65,7 @@
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
     "babel-core": "^7.0.0-bridge.0",
-    "commitizen": "^4.3.1",
-    "cz-conventional-changelog": "^3.3.0",
+    "commitlint-config-gitmoji": "2.3.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-perfectionist": "^5.4.0",
@@ -79,7 +76,7 @@
     "husky": "^9.1.7",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^30.2.0",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^16.3.1",
     "playwright": "^1.58.0",
     "prettier": "^3.6.2",
     "sass": "~1.97.3",
@@ -95,12 +92,8 @@
       "plugin:storybook/recommended"
     ]
   },
-  "config": {
-    "commitizen": {
-      "path": "cz-conventional-changelog",
-      "disableScopeLowerCase": true,
-      "disableSubjectLowerCase": true,
-      "defaultScope": "pimp"
-    }
+  "engines": {
+    "npm": "11",
+    "node": "24"
   }
 }

package/src/components/CpDialog.vue

@@ -11,8 +11,8 @@
       <div aria-hidden="true" class="cpDialog__overlay" />
       <main ref="dialogContainer" class="cpDialog__container" :style="dynamicStyle" @keydown.tab="trapFocus">
         <header class="cpDialog__header">
-          <div class="cpDialog__left">
-            <div class="cpDialog__title">
+          <div v-if="hasTitleOrSubtitle" class="cpDialog__headerTexts">
+            <div v-if="hasTitle" class="cpDialog__title">
               <slot name="title">
                 <h2 :id="titleId">{{ title }}</h2>
               </slot>
@@ -46,7 +46,7 @@ import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
 interface Props {
   maxWidth?: number
   subtitle?: string
-  title: string
+  title?: string
 }
 
 interface Emits {
@@ -55,6 +55,7 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   maxWidth: 600,
+  title: '',
   subtitle: '',
 })
 
@@ -73,8 +74,12 @@ const dialogContainer = ref<HTMLElement | null>(null)
 
 const dynamicStyle = computed(() => ({ maxWidth: `${props.maxWidth}px` }))
 
+const hasTitleSlot = computed(() => !!slots.title)
+const hasTitle = computed(() => !!props.title || hasTitleSlot.value)
 const hasSubtitleSlot = computed(() => !!slots.subtitle)
 const hasSubtitle = computed(() => !!props.subtitle || hasSubtitleSlot.value)
+const hasTitleOrSubtitle = computed(() => hasTitle.value || hasSubtitle.value)
+
 const hasFooterSlot = computed(() => !!slots.footer)
 
 const handleClose = () => emit('close')
@@ -96,9 +101,7 @@ onMounted(() => {
   nextTick(() => focusOnFirstFocusableElement())
 })
 
-onBeforeUnmount(() => {
-  closeDialog()
-})
+onBeforeUnmount(() => closeDialog())
 </script>
 
 <style lang="scss">
@@ -184,10 +187,17 @@ $dialog-breakpoint: 550px;
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--cp-spacing-md);
-    border-bottom: 1px solid var(--cp-border-soft);
+
+    &:not(:has(.cpDialog__headerTexts)) {
+      padding-bottom: 0;
+    }
+
+    &:has(.cpDialog__headerTexts) {
+      border-bottom: 1px solid var(--cp-border-soft);
+    }
   }
 
-  &__left {
+  &__headerText {
     display: flex;
     flex-direction: column;
     min-width: 0;
@@ -214,6 +224,7 @@ $dialog-breakpoint: 550px;
 
   &__close {
     display: flex;
+    margin-left: auto;
     align-items: center;
     justify-content: center;
     padding: var(--cp-spacing-sm);
@@ -245,6 +256,10 @@ $dialog-breakpoint: 550px;
     align-items: center;
     justify-content: space-between;
 
+    &:empty {
+      display: none;
+    }
+
     &:not(:empty) {
       border-top: 1px solid var(--cp-border-soft);
     }

package/src/stories/CpDialog.stories.ts

@@ -51,6 +51,7 @@ export const TitleSubtitleWithProps: Story = {
   args: {
     maxWidth: 600,
     title: 'Dialog title',
+    subtitle: 'Dialog subtitle',
   },
   render: (args) => ({
     setup() {
@@ -72,11 +73,32 @@ export const TitleSubtitleWithProps: Story = {
   }),
 }
 
+export const ContentOnly: Story = {
+  args: {
+    maxWidth: 600,
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog (content only)</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
+          <p>This is the default slot content with no title or subtitle.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Close</CpButton>
+          </template>
+        </CpDialog>
+      </CpTransitionDialog>
+    `,
+  }),
+}
+
 export const TitleSubtitleWithSlots: Story = {
   args: {
     maxWidth: 560,
-    titleTag: 'div',
-    subtitleTag: 'div',
   },
   render: (args) => ({
     setup() {

package/commitlint.config.js

@@ -1,27 +0,0 @@
-export default {
-  extends: ['@commitlint/config-conventional'],
-  rules: {
-    // Limit subject length to 84 characters as requested
-    'subject-max-length': [1, 'always', 84],
-    // Ensure subject is in lowercase
-    'subject-case': [0, 'always', 'lower-case'],
-    // Allowed types according to conventional commits
-    'type-enum': [
-      2,
-      'always',
-      [
-        'feat', // new feature
-        'fix', // bug fix
-        'docs', // documentation
-        'style', // formatting, missing semicolons, etc.
-        'refactor', // code refactoring
-        'perf', // performance improvements
-        'test', // adding tests
-        'chore', // maintenance tasks
-        'ci', // continuous integration
-        'build', // build system
-        'revert', // revert commit
-      ],
-    ],
-  },
-}