@citizenplane/pimp 12.0.2 → 13.0.0

package/package.json

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

package/src/components/CpDialog.vue

@@ -8,7 +8,7 @@
       class="cpDialog__dialog"
       @keydown.esc.stop.prevent="handleClose"
     >
-      <div aria-hidden="true" class="cpDialog__overlay" />
+      <div aria-hidden="true" class="cpDialog__overlay" :class="overlayDynamicClass" @click="handleOverlayClick" />
       <main ref="dialogContainer" class="cpDialog__container" :style="dynamicStyle" @keydown.tab="trapFocus">
         <header class="cpDialog__header">
           <div v-if="hasTitleOrSubtitle" class="cpDialog__headerTexts">
@@ -44,6 +44,7 @@ import { computed, ref, useSlots, onMounted, nextTick, onBeforeUnmount, useId }
 import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
 
 interface Props {
+  isClosableOnClickOutside?: boolean
   maxWidth?: number
   subtitle?: string
   title?: string
@@ -57,6 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: 600,
   title: '',
   subtitle: '',
+  isClosableOnClickOutside: false,
 })
 
 const emit = defineEmits<Emits>()
@@ -74,6 +76,10 @@ const dialogContainer = ref<HTMLElement | null>(null)
 
 const dynamicStyle = computed(() => ({ maxWidth: `${props.maxWidth}px` }))
 
+const overlayDynamicClass = computed(() => ({
+  'cpDialog__overlay--isClosableOnClickOutside': props.isClosableOnClickOutside,
+}))
+
 const hasTitleSlot = computed(() => !!slots.title)
 const hasTitle = computed(() => !!props.title || hasTitleSlot.value)
 const hasSubtitleSlot = computed(() => !!slots.subtitle)
@@ -96,6 +102,11 @@ const focusOnFirstFocusableElement = () => {
   focusableElements[0].focus()
 }
 
+const handleOverlayClick = () => {
+  if (!props.isClosableOnClickOutside) return
+  handleClose()
+}
+
 onMounted(() => {
   openDialog()
   nextTick(() => focusOnFirstFocusableElement())
@@ -146,11 +157,18 @@ $dialog-breakpoint: 550px;
     inset: 0;
     pointer-events: none;
     transition: opacity 250ms ease;
+
+    &--isClosableOnClickOutside {
+      pointer-events: auto;
+      z-index: 0;
+      cursor: pointer;
+    }
   }
 
   &__container {
     position: relative;
     display: flex;
+    z-index: 2;
     overflow: hidden;
     width: 100%;
     max-height: 100%;

package/src/components/CpLoader.vue

@@ -4,10 +4,10 @@
     class="cpLoader"
     :class="dynamicClasses"
     enable-background="new 0 0 40 40"
-    :height="sizeAttrs.height"
+    :height="40"
     version="1.1"
     viewBox="0 0 40 40"
-    :width="sizeAttrs.width"
+    :width="40"
     x="0px"
     xml:space="preserve"
     xmlns="http://www.w3.org/2000/svg"
@@ -25,7 +25,7 @@
       <animateTransform
         attributeName="transform"
         attributeType="xml"
-        dur="0.5s"
+        :dur="formatedDuration"
         from="0 20 20"
         repeatCount="indefinite"
         to="360 20 20"
@@ -41,23 +41,22 @@ import { computed } from 'vue'
 import { Colors } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
+type LoaderColor = Extract<Colors, 'neutral' | 'accent' | 'error' | 'warning' | 'success'>
+type LoaderSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+
 interface Props {
-  color?: Colors
-  size?: number | string
+  color?: LoaderColor
+  duration?: number
+  size?: LoaderSize
 }
 
-const props = withDefaults(defineProps<Props>(), { color: 'accent', size: 24 })
+const props = withDefaults(defineProps<Props>(), { color: 'accent', duration: 700, size: 'sm' })
 
-const capitalizedColor = computed(() => capitalizeFirstLetter(props.color))
+const formatedDuration = computed(() => `${props.duration}ms`)
 
 const dynamicClasses = computed(() => {
-  return [`cpLoader--is${capitalizedColor.value}`, `cpLoader--${props.size}`]
+  return [`cpLoader--is${capitalizeFirstLetter(props.color)}`, `cpLoader--${props.size}`]
 })
-
-const sizeAttrs = computed(() => ({
-  height: props.size,
-  width: props.size,
-}))
 </script>
 
 <style lang="scss">
@@ -74,12 +73,36 @@ const sizeAttrs = computed(() => ({
   @include cp-loader-themed('Warning', var(--cp-foreground-warning-secondary));
   @include cp-loader-themed('Success', var(--cp-foreground-success-secondary));
 
-  @include cp-loader-themed('Blue', var(--cp-foreground-blue-secondary));
-  @include cp-loader-themed('Yellow', var(--cp-utility-yellow-300));
+  &--2xs {
+    @include mx.square-sizing(16);
+  }
+
+  &--xs {
+    @include mx.square-sizing(20);
+  }
+
+  &--sm {
+    @include mx.square-sizing(24);
+  }
+
+  &--md {
+    @include mx.square-sizing(32);
+  }
+
+  &--lg {
+    @include mx.square-sizing(40);
+  }
+
+  &--xl {
+    @include mx.square-sizing(48);
+  }
+
+  &--2xl {
+    @include mx.square-sizing(64);
+  }
 
-  @include cp-loader-themed('Purple', var(--cp-text-accent-primary)); // TODO: Should be replace by ACCENT
-  @include cp-loader-themed('Green', var(--cp-text-success-primary)); // TODO: Should be replace by SUCCESS
-  @include cp-loader-themed('Orange', var(--cp-text-warning-primary)); // TODO: Should be replace by WARNING
-  @include cp-loader-themed('Red', var(--cp-text-error-primary)); // TODO: Should be replace by ERROR
+  &--3xl {
+    @include mx.square-sizing(96);
+  }
 }
 </style>

package/src/stories/CpDialog.stories.ts

@@ -131,3 +131,30 @@ export const TitleSubtitleWithSlots: Story = {
     `,
   }),
 }
+
+export const ClosableOnClickOutside: Story = {
+  args: {
+    maxWidth: 600,
+    isClosableOnClickOutside: true,
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
+          <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>
+    `,
+  }),
+}

package/src/stories/CpLoader.stories.ts

@@ -7,14 +7,19 @@ const meta = {
   component: CpLoader,
   argTypes: {
     size: {
-      control: 'number',
+      control: 'select',
+      options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
       description: 'Size of the loader in pixels',
     },
     color: {
       control: 'select',
-      options: ['neutral', 'accent', 'error', 'warning', 'success', 'blue', 'yellow'],
+      options: ['neutral', 'accent', 'error', 'warning', 'success'],
       description: 'The color variant of the loader',
     },
+    duration: {
+      control: 'number',
+      description: 'The duration of the loader in ms (700ms by default)',
+    },
   },
 } satisfies Meta<typeof CpLoader>