@citizenplane/pimp 12.0.3 → 13.1.0

package/package.json

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

package/src/components/CpAccordion.vue

@@ -0,0 +1,174 @@
+<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>
+    <transition-expand>
+      <div v-if="isToggled" :id="accordionContentId" :aria-labelledby="accordionId" class="cpAccordion__content">
+        <slot />
+      </div>
+    </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 {
+    right: 0;
+    top: 0;
+    height: 100%;
+    background: linear-gradient(270deg, var(--cp-utility-neutral-100) 0%, rgba(242, 246, 250, 0) 100%);
+    padding: 0 var(--cp-spacing-md) 0 15%;
+    transform: translate3d(calc(var(--cp-dimensions-1) * 1.25), 0%, 0);
+    display: flex;
+    align-items: center;
+  }
+
+  &__more {
+    color: var(--cp-foreground-primary);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [cp-item-actions-trigger]:has(.cpItemActions--isDropdownOpen) .cpItemActions,
+  [cp-item-actions-trigger]:is(:focus-within, :focus-visible, :hover) .cpItemActions {
+    transform: translate3d(0, 0, 0);
+  }
+}
+</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

@@ -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

@@ -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/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/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

@@ -42,7 +42,7 @@ import { computed, useId } from 'vue'
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import TransitionExpand from '@/components/TransitionExpand.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

@@ -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/index.ts

@@ -14,6 +14,8 @@ import VueTelInput from 'vue-tel-input'
 
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
+import CpAccordion from './CpAccordion.vue'
+import CpAccordionGroup from './CpAccordionGroup.vue'
 import CpAirlineLogo from './CpAirlineLogo.vue'
 import CpAlert from './CpAlert.vue'
 import CpBadge from './CpBadge.vue'
@@ -58,6 +60,8 @@ import IconTooltip from './icons/IconTooltip.vue'
 import TransitionExpand from './TransitionExpand.vue'
 
 const Components = {
+  CpAccordion,
+  CpAccordionGroup,
   CpToast,
   CpBadge,
   CpTabs,

package/src/constants/Sizes.ts

@@ -1,11 +1 @@
-export enum Sizes {
-  XXS = '2xs',
-  XS = 'xs',
-  SM = 'sm',
-  MD = 'md',
-  LG = 'lg',
-  XL = 'xl',
-  XXL = '2xl',
-  XXXL = '3xl',
-  XXXXL = '4xl',
-}
+export type Sizes = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'

package/src/constants/index.ts

@@ -3,7 +3,7 @@ export { Position } from './Position'
 export type { ToggleColors } from './colors/ToggleColors'
 export { HeadingLevels } from './Heading'
 export { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
-export { Sizes } from './Sizes'
+export type { Sizes } from './Sizes'
 export { PartnerTypes } from './PartnerTypes'
 
 export { CustomCpIcons } from './CpCustomIcons'