@citizenplane/pimp 13.0.0 → 14.0.0

package/package.json

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

package/src/components/CpAccordion.vue

@@ -0,0 +1,163 @@
+<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__title">
+        <cp-icon v-if="displayLeadingIcon" class="cpAccordion__icon" size="16" :type="dynamicIcon" />
+        <div class="cpAccordion__leading">
+          <span>{{ title }}</span>
+          <slot name="leading-slot" />
+        </div>
+      </div>
+      <div class="cpAccordion__trailing">
+        <slot name="trailing-slot" />
+        <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>
+      <cp-item-actions
+        v-if="hasActions"
+        :actions="resolvedActions"
+        class="cpAccordion__actions"
+        :quick-options-limit="resolvedQuickOptionsLimit"
+      />
+    </button>
+    <cp-transition-expand>
+      <div v-if="isToggled" :id="accordionContentId" :aria-labelledby="accordionId" class="cpAccordion__content">
+        <slot />
+      </div>
+    </cp-transition-expand>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+
+import type { MenuItem } from 'primevue/menuitem'
+
+export interface CpAccordionBaseProps {
+  defaultOpenState?: boolean
+  quickOptionsLimit?: number
+  title: string
+}
+
+/**
+ * Leading (default): optional `actions` (`MenuItem[]`).
+ * Trailing: `actions` must not be passed (use `iconPosition: 'trailing'` only).
+ */
+export type CpAccordionProps =
+  | (CpAccordionBaseProps & {
+      actions?: MenuItem[]
+      hideActionTrigger?: boolean
+      iconPosition?: 'leading'
+    })
+  | (CpAccordionBaseProps & {
+      iconPosition: 'trailing'
+    })
+
+const props = defineProps<CpAccordionProps>()
+
+const isToggled = ref(props.defaultOpenState)
+
+const accordionId = useId()
+
+const accordionContentId = computed(() => `${accordionId}-content`)
+
+const resolvedIconPosition = computed(() => props.iconPosition || 'leading')
+
+const resolvedQuickOptionsLimit = computed(() => props.quickOptionsLimit || 0)
+
+const resolvedActions = computed<MenuItem[]>(() => {
+  if (props.iconPosition === 'trailing') return []
+  return props.actions || []
+})
+
+const resolvedHideActionTrigger = computed(() => {
+  if (props.iconPosition === 'trailing') return true
+  return props.hideActionTrigger
+})
+
+const hasActions = computed(() => resolvedActions.value.length > 0)
+const hasLeadingIcon = computed(() => resolvedIconPosition.value === 'leading')
+const hasTrailingIcon = computed(() => resolvedIconPosition.value === 'trailing')
+
+const displayActionTrigger = computed(() => !resolvedHideActionTrigger.value && hasActions.value)
+const displayLeadingIcon = computed(() => hasLeadingIcon.value || hasActions.value)
+const displayTrailingIcon = computed(() => hasTrailingIcon.value && !hasActions.value)
+
+const dynamicIcon = computed(() => (isToggled.value ? 'chevron-up' : 'chevron-down'))
+
+const dynamicClasses = computed(() => [{ 'cpAccordion--isOpen': isToggled.value }])
+
+const handleClick = () => (isToggled.value = !isToggled.value)
+</script>
+
+<style lang="scss">
+.cpAccordion {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--cp-background-primary);
+  width: 100%;
+
+  &__header {
+    @extend %u-focus-outline;
+
+    border-radius: var(--cp-radius-none);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--cp-spacing-lg);
+    gap: var(--cp-spacing-lg);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--cp-background-primary-hover);
+    }
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-lg);
+    font-weight: 500;
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &__icon {
+    color: var(--cp-foreground-secondary);
+    flex-shrink: 0;
+    padding: var(--cp-spacing-xs);
+  }
+
+  &__leading {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__trailing {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-lg);
+    position: relative;
+  }
+
+  &__actions {
+    background: linear-gradient(270deg, var(--cp-utility-neutral-100) 0%, rgba(242, 246, 250, 0) 100%);
+    padding: 0 var(--cp-spacing-md) 0 15%;
+    display: flex;
+    align-items: center;
+  }
+
+  &__more {
+    color: var(--cp-foreground-primary);
+  }
+}
+</style>

package/src/components/CpAccordionGroup.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="cpAccordionGroup" :class="groupClass">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { capitalizeFirstLetter } from '@/helpers'
+
+interface Props {
+  variant?: 'minimal' | 'default' | 'primary'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'minimal',
+})
+
+const groupClass = computed(() => {
+  return { [`cpAccordionGroup--is${capitalizeFirstLetter(props.variant)}`]: true }
+})
+</script>
+
+<style lang="scss">
+.cpAccordionGroup {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &--isDefault {
+    .cpAccordion {
+      border-bottom: fn.px-to-rem(1) solid var(--cp-border-soft);
+    }
+
+    .cpAccordion:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &--isPrimary {
+    border: fn.px-to-rem(1) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-md);
+    overflow: hidden;
+
+    .cpAccordion:not(:last-child) {
+      border-bottom: fn.px-to-rem(1) solid var(--cp-border-soft);
+    }
+  }
+}
+</style>

package/src/components/CpBadge.vue

@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { Colors, Sizes } from '@/constants'
+import type { Colors, Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -41,7 +41,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   color: 'gray',
-  size: Sizes.MD,
+  size: 'md',
   label: '',
   leadingIcon: '',
   trailingIcon: '',

package/src/components/CpButton.vue

@@ -36,10 +36,11 @@ import { Haptics } from '@/constants/Hapitcs'
 
 import CpLoader from '@/components/CpLoader.vue'
 
-import { Colors, Sizes } from '@/constants'
+import type { Colors, Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 type ButtonColor = Extract<Colors, 'neutral' | 'accent' | 'error' | 'warning' | 'success'>
+type ButtonSizes = Extract<Sizes, '2xs' | 'xs' | 'sm' | 'md' | 'lg'>
 
 interface Props {
   appearance?: ButtonAppearances
@@ -48,7 +49,7 @@ interface Props {
   enableHaptics?: boolean
   isLoading?: boolean
   isSquare?: boolean
-  size?: Exclude<Sizes, Sizes.XXL | Sizes.XXXL | Sizes.XXXXL>
+  size?: ButtonSizes
   tag?: ButtonTags
   type?: ButtonTypes
 }
@@ -58,7 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   color: 'neutral',
   tag: 'button',
   type: 'button',
-  size: Sizes.MD,
+  size: 'md',
 })
 
 const slots = useSlots()

package/src/components/CpButtonGroup.vue

@@ -1,16 +1,44 @@
 <template>
-  <div class="cpButtonGroup">
+  <div class="cpButtonGroup" :class="dynamicClasses">
     <slot />
   </div>
 </template>
 
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+})
+
+const dynamicClasses = computed(() => `cpButtonGroup--${props.size}`)
+</script>
+
 <style lang="scss">
 .cpButtonGroup {
   display: flex;
   align-items: flex-start;
-  border-radius: var(--cp-radius-sm);
+  border-radius: var(--cp-radius-md);
   box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-soft);
 
+  &--2xs {
+    border-radius: var(--cp-radius-sm-md);
+  }
+
+  &--xs,
+  &--sm,
+  &--md {
+    border-radius: var(--cp-radius-md);
+  }
+
+  &--lg {
+    border-radius: var(--cp-radius-md-lg);
+  }
+
   > * {
     position: relative;
 

package/src/components/CpDate.vue

@@ -45,9 +45,9 @@
         :required="required"
       />
     </div>
-    <transition-expand>
+    <cp-transition-expand>
       <div v-if="advancedErrorMessage" class="cpDate__errorMessage">{{ advancedErrorMessage }}</div>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -57,7 +57,8 @@ import { ref, computed, watch, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
-import { HUMAN_MAX_AGE, Sizes } from '@/constants'
+import { HUMAN_MAX_AGE } from '@/constants'
+import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -101,7 +102,7 @@ const props = withDefaults(defineProps<Props>(), {
   autocompleteBirthday: false,
   locale: () => navigator.language,
   inputsOptions: () => ({}),
-  size: Sizes.MD,
+  size: 'md',
 })
 
 const emit = defineEmits<Emits>()

package/src/components/CpInput.vue

@@ -39,14 +39,14 @@
         </transition>
       </div>
     </div>
-    <transition-expand mode="out-in">
+    <cp-transition-expand mode="out-in">
       <p v-if="displayErrorMessage" :id="errorMessageId" class="cpInput__error">
         {{ errorMessage }}
       </p>
       <p v-else-if="displayHelp" :id="helpMessageId" class="cpInput__help">
         {{ help }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -55,7 +55,7 @@ import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'v
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
-import { Sizes } from '@/constants'
+import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -83,7 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
   inputId: null,
   mask: null,
   modelValue: '',
-  size: Sizes.MD,
+  size: 'md',
   tooltip: '',
 })
 

package/src/components/CpItemActions.vue

@@ -12,8 +12,8 @@
     <cp-contextual-menu
       ref="contextualMenu"
       :items="actions"
-      @hide="isDropdownOpen = false"
-      @show="isDropdownOpen = true"
+      @hide="handleDropdownState(false)"
+      @show="handleDropdownState(true)"
     />
   </div>
 </template>
@@ -42,7 +42,7 @@ const isDropdownOpen = ref(false)
 const showContextualMenu = (event: MouseEvent) => contextualMenu.value?.show(event)
 
 const defaultAction = {
-  icon: 'more-vertical',
+  icon: 'more-horizontal',
   command: (event: MouseEvent) => showContextualMenu(event),
 }
 
@@ -58,12 +58,14 @@ const slicedActions = computed(() => {
   const firstActions = actionsCopy.slice(0, props.quickOptionsLimit)
   return [...firstActions, defaultAction]
 })
+
+const handleDropdownState = (state: boolean) => (isDropdownOpen.value = state)
 </script>
 
 <style lang="scss">
 .cpItemActions {
   position: absolute;
-  right: var(--cp-spacing-lg);
+  right: 0;
   top: 50%;
   transform: translate3d(calc(var(--cp-dimensions-1) * 1.25), -50%, 0);
   transition:
@@ -78,18 +80,18 @@ const slicedActions = computed(() => {
     padding: 0;
 
     &:first-child .cpMenuItem__button {
-      border-top-left-radius: var(--cp-radius-sm);
-      border-bottom-left-radius: var(--cp-radius-sm);
+      border-top-left-radius: var(--cp-radius-md);
+      border-bottom-left-radius: var(--cp-radius-md);
     }
     &:last-child .cpMenuItem__button {
-      border-top-right-radius: var(--cp-radius-sm);
-      border-bottom-right-radius: var(--cp-radius-sm);
+      border-top-right-radius: var(--cp-radius-md);
+      border-bottom-right-radius: var(--cp-radius-md);
     }
   }
 
   .cpMenuItem__button {
     border-radius: 0;
-    padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
+    padding: var(--cp-spacing-sm-md);
   }
 }
 

package/src/components/CpMultiselect.vue

@@ -86,11 +86,11 @@
         />
       </template>
     </auto-complete>
-    <transition-expand mode="out-in">
+    <cp-transition-expand mode="out-in">
       <p v-if="isInvalid" class="cpMultiselect__error">
         {{ errorMessage }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -101,7 +101,7 @@ import { ref, computed, onMounted, useSlots, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
-import TransitionExpand from '@/components/TransitionExpand.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
 import { isEmpty } from '@/helpers/object'
 

package/src/components/CpPartnerBadge.vue

@@ -14,7 +14,8 @@ import IconOta from '@/components/icons/IconOta.vue'
 import IconSupplier from '@/components/icons/IconSupplier.vue'
 import IconThirdParty from '@/components/icons/IconThirdParty.vue'
 
-import { PartnerTypes, Sizes } from '@/constants'
+import { PartnerTypes } from '@/constants'
+import type { Sizes } from '@/constants'
 
 interface Props {
   size?: Sizes
@@ -22,7 +23,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  size: Sizes.MD,
+  size: 'md',
   type: PartnerTypes.THIRDPARTY,
 })
 

package/src/components/CpSelect.vue

@@ -25,14 +25,14 @@
         <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
       </select>
     </div>
-    <transition-expand mode="out-in">
+    <cp-transition-expand mode="out-in">
       <p v-if="displayErrorMessage" :id="errorMessageId" class="cpSelect__error">
         {{ errorMessage }}
       </p>
       <p v-else-if="displayHelp" :id="helpMessageId" class="cpSelect__help">
         {{ help }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -40,9 +40,9 @@
 import { computed, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
-import TransitionExpand from '@/components/TransitionExpand.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
-import { Sizes } from '@/constants'
+import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -82,7 +82,7 @@ const props = withDefaults(defineProps<Props>(), {
   autocomplete: 'on',
   isInvalid: false,
   errorMessage: '',
-  size: Sizes.MD,
+  size: 'md',
   help: '',
   tooltip: '',
 })

package/src/components/CpTable.vue

@@ -809,7 +809,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
 
     &--isOptions .cpTable__action {
       display: none;
-      padding: var(--cp-dimensions-1_5) var(--cp-spacing-md);
+      padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
       border: none;
       border-radius: 0;
       color: var(--cp-foreground-primary);
@@ -1021,7 +1021,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       box-shadow: var(--cp-shadows-3xs);
       border-radius: var(--cp-radius-md-lg);
       border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
-      padding: var(--cp-dimensions-1_5) var(--cp-dimensions-2_5);
+      padding: var(--cp-spacing-sm-md) var(--cp-dimensions-2_5);
       transition: background-color 0.15s;
       background-color: var(--cp-background-primary);
 

package/src/components/CpTelInput.vue

@@ -28,14 +28,14 @@
         </template>
       </vue-tel-input>
     </div>
-    <transition-expand mode="out-in">
+    <cp-transition-expand mode="out-in">
       <p v-if="displayErrorMessage" :id="errorMessageId" class="cpTelInput__error">
         {{ errorMessage }}
       </p>
       <p v-else-if="displayHelp" :id="helpMessageId" class="cpTelInput__help">
         {{ help }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -44,7 +44,7 @@ import { useAttrs, ref, useId, computed, nextTick } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
-import { Sizes } from '@/constants'
+import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
   tooltip: '',
   name: '',
   hideSearch: false,
-  size: Sizes.MD,
+  size: 'md',
 })
 
 const emit = defineEmits<Emits>()

package/src/components/CpTextarea.vue

@@ -19,11 +19,11 @@
       :required="required"
       :style="`min-height: ${height}px`"
     />
-    <transition-expand>
+    <cp-transition-expand>
       <p v-if="displayErrorMessage" class="cpTextarea__error">
         {{ errorMessage }}
       </p>
-    </transition-expand>
+    </cp-transition-expand>
   </div>
 </template>
 
@@ -31,7 +31,7 @@
 import { ref, computed, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
-import TransitionExpand from '@/components/TransitionExpand.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
 import { capitalizeFirstLetter } from '@/helpers'
 

package/src/components/CpTransitionCounter.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="cpTransitionCounter">
+    <transition :duration="duration" mode="out-in" :name="formattedTransitionName">
+      <span :key="counterNumber">
+        <slot />
+      </span>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  counterNumber?: number
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  counterNumber: 0,
+  duration: 300,
+})
+
+enum Directions {
+  UP = 'up',
+  DOWN = 'down',
+}
+
+const direction = ref<Directions>(Directions.UP)
+
+const formattedTransitionName = computed(() => `counter-${direction.value}`)
+
+watch(
+  () => props.counterNumber,
+  (newValue: number, oldValue: number) => {
+    direction.value = newValue < oldValue ? Directions.DOWN : Directions.UP
+  },
+)
+</script>
+
+<style lang="scss">
+.cpTransitionCounter {
+  display: inline-flex;
+  overflow: hidden;
+
+  &-up-enter-from {
+    transform: translate3d(0, 100%, 0);
+  }
+
+  &-down-enter-from {
+    transform: translate3d(0, -100%, 0);
+  }
+
+  &-up-leave-to,
+  &-down-leave-to {
+    filter: blur(1px);
+    opacity: 0;
+  }
+
+  &-up-leave-to {
+    transform: translate3d(0, -100%, 0) skewY(-30deg);
+  }
+
+  &-down-leave-to {
+    transform: translate3d(0, 100%, 0) skewY(30deg);
+  }
+
+  &-up-enter-active,
+  &-down-enter-active,
+  &-up-leave-active,
+  &-down-leave-active {
+    transition:
+      transform 200ms ease,
+      opacity 200ms ease;
+  }
+}
+</style>