@citizenplane/pimp 18.13.0 → 18.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.13.0",
+  "version": "18.13.2",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpCheckbox.vue

@@ -1,9 +1,11 @@
 <template>
-  <label class="cpCheckbox" :class="computedClasses" :for="checkboxUniqueId">
+  <label class="cpCheckbox" :class="dynamicCheckboxClasses" :for="checkboxUniqueId">
     <div class="cpCheckbox__wrapper">
       <input
         :id="checkboxUniqueId"
         ref="inputRef"
+        class="cpCheckbox__input"
+        :class="dynamicInputClasses"
         :autofocus="autofocus"
         :checked="isChecked"
         :disabled="isDisabled"
@@ -16,7 +18,7 @@
     </div>
     <div class="cpCheckbox__content">
       <slot>
-        <span v-if="checkboxLabel" class="cpCheckbox__label">
+        <span v-if="checkboxLabel" class="cpCheckbox__label" :class="dynamicLabelClasses">
           {{ checkboxLabel }}
         </span>
       </slot>
@@ -48,6 +50,7 @@ export interface Props {
   isDisabled?: boolean
   modelValue?: boolean | unknown[]
   reverseLabel?: boolean
+  size?: 'md' | 'lg'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,6 +60,7 @@ const props = withDefaults(defineProps<Props>(), {
   groupName: '',
   color: 'accent',
   helper: '',
+  size: 'md',
 })
 
 const emit = defineEmits<EmitType>()
@@ -96,7 +100,7 @@ const hasDefaultSlot = computed(() => !!slots.default)
 
 const isEmpty = computed(() => !hasDefaultSlot.value && !props.checkboxLabel)
 
-const computedClasses = computed(() => {
+const dynamicCheckboxClasses = computed(() => {
   return [
     {
       'cpCheckbox--isEmpty': isEmpty.value,
@@ -105,9 +109,14 @@ const computedClasses = computed(() => {
       'cpCheckbox--isIndeterminate': props.indeterminate,
     },
     `cpCheckbox--is${capitalizedColor.value}`,
+    `cpCheckbox--${props.size}`,
   ]
 })
 
+const dynamicLabelClasses = computed(() => [ `cpCheckbox__label--${props.size}` ])
+
+const dynamicInputClasses = computed(() => [ `cpCheckbox__input--${props.size}` ])
+
 const onChange = () => {
   if (Array.isArray(props.modelValue)) {
     const currentValues = [...props.modelValue]
@@ -172,10 +181,14 @@ const onChange = () => {
     'Purple'
   ); // TODO: Should be replace by ACCENT
 
-  &:not(&--isEmpty) {
+  &--md:not(.cpCheckbox--isEmpty) {
     gap: var(--cp-spacing-md);
   }
 
+  &--lg:not(.cpCheckbox--isEmpty) {
+    gap: var(--cp-spacing-lg);
+  }
+
   &__wrapper {
     display: flex;
     flex-shrink: 0;
@@ -184,9 +197,7 @@ const onChange = () => {
     padding: var(--cp-spacing-sm);
   }
 
-  input {
-    width: var(--cp-dimensions-4);
-    height: var(--cp-dimensions-4);
+  &__input {
     flex-shrink: 0;
     border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     border-radius: var(--cp-radius-sm);
@@ -237,16 +248,43 @@ const onChange = () => {
     &:active:not(:disabled) {
       transform: scale(0.8);
     }
+
+    &--md {
+      width: var(--cp-dimensions-4);
+      height: var(--cp-dimensions-4);
+      border-radius: var(--cp-radius-sm);
+    }
+
+    &--lg {
+      width: var(--cp-dimensions-5);
+      height: var(--cp-dimensions-5);
+      border-radius: var(--cp-radius-sm-md);
+    }
   }
 
   &__label,
   &__helper {
     display: block;
+  }
+
+  &__helper {
     line-height: var(--cp-line-height-md);
   }
 
+
   &__label {
     font-weight: 500;
+    padding-block: var(--cp-spacing-xs);
+
+    &--md {
+      font-size: var(--cp-text-size-sm);
+      line-height: var(--cp-line-height-sm);
+    }
+
+    &--lg {
+      font-size: var(--cp-text-size-md);
+      line-height: var(--cp-line-height-md);
+    }
 
     &::first-letter {
       text-transform: capitalize;

package/src/components/CpMultiselect.vue

@@ -29,6 +29,7 @@
       :pt="passThroughConfig"
       :suggestions="dynamicOptions"
       :typeahead
+      @blur="handleBlur"
       @click="handleClick"
       @complete="handleSearch"
       @hide="handleOverlayHidden"
@@ -196,6 +197,7 @@ type ExtendedAutoComplete = InstanceType<typeof AutoComplete> & {
   overlay: HTMLElement
   overlayVisible: boolean
   show: () => void
+  writeValue: (value: unknown, event?: Event) => void
 }
 
 const multiselect = ref<ExtendedAutoComplete | null>(null)
@@ -245,6 +247,15 @@ const handleClear = () => (selectModel.value = null)
 const handleOverlayShown = () => emit('overlayShown')
 const handleOverlayHidden = () => emit('overlayHidden')
 
+const handleBlur = () => {
+  if (props.multiple) {
+    const inputElement = getInputElement()
+    if (inputElement) inputElement.value = ''
+  } else {
+    multiselect.value?.writeValue(selectModel.value)
+  }
+}
+
 const handleValueChange = (newValue: string | object) => {
   if (typeof newValue !== 'string') return
   searchQuery.value = newValue

package/src/stories/CpCheckbox.stories.ts

@@ -52,6 +52,11 @@ const meta = {
       control: 'boolean',
       description: 'Whether the checkbox is in an indeterminate state',
     },
+    size: {
+      control: 'select',
+      options: ['md', 'lg'],
+      description: 'Size variant of the checkbox',
+    },
   },
 } satisfies Meta<typeof CpCheckbox>
 

package/src/stories/CpMultiselect.stories.ts

@@ -100,7 +100,6 @@ export const Single: Story = {
         <CpMultiselect v-model="selectedSupplier" v-bind="args">
           <template #prefix>
             <div class="baseSelectAirline__prefix">
-              <partner-badge size="sm" type="airline" variant="soft" />
               <cp-airline-logo :iata-code="getOptionIataCode(selectedSupplier)" size="20" />
             </div>
           </template>
@@ -192,12 +191,9 @@ export const Invalid: Story = {
     template: `
       <div style="padding: 20px; max-width: 25rem;">
         <CpMultiselect v-model="selectedSupplier" v-bind="args">
-          <template #prefix>
-            <cp-partner-badge type="supplier" size="sm" />
-          </template>
           <template #option="{ option }">
             <div style="display: flex; align-items: center; gap: 8px;">
-              <cp-partner-badge type="supplier" size="xs" />
+            <cp-icon type="supplier" size="16" />
               {{ option.name }}
             </div>
           </template>