@citizenplane/pimp 18.13.1 → 18.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.13.1",
+  "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/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>