@citizenplane/pimp 14.1.5 → 15.1.0

package/package.json

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

package/src/assets/css/colors.css

@@ -1,5 +1,6 @@
 :root {
   --cp-colors-black: #000000;
+  --cp-colors-white: #ffffff;
 
   --cp-colors-blue-50: #f6faff;
   --cp-colors-blue-100: #e5efff;

package/src/assets/css/shadows.css

@@ -68,4 +68,15 @@
   --cp-drop-shadow-side-panel-offset-x: 0;
   --cp-drop-shadow-side-panel-offset-y: 0;
   --cp-drop-shadow-side-panel-spread: 0;
+
+  --cp-shadow-focus-ring-accent-gap-offset-x: 0;
+  --cp-shadow-focus-ring-accent-gap-offset-y: 0;
+  --cp-shadow-focus-ring-accent-gap-blur: 0;
+  --cp-shadow-focus-ring-accent-gap-spread: 2px;
+  --cp-shadow-focus-ring-accent-gap-color: var(--cp-colors-white);
+  --cp-shadow-focus-ring-accent-ring-offset-x: 0;
+  --cp-shadow-focus-ring-accent-ring-offset-y: 0;
+  --cp-shadow-focus-ring-accent-ring-blur: 0;
+  --cp-shadow-focus-ring-accent-ring-spread: 4px;
+  --cp-shadow-focus-ring-accent-ring-color: var(--cp-colors-accent-500);
 }

package/src/assets/css/tokens.css

@@ -392,4 +392,13 @@
       var(--cp-drop-shadow-overlay-4-blur) var(--cp-drop-shadow-overlay-4-spread) var(--cp-drop-shadow-overlay-4-color),
     var(--cp-drop-shadow-overlay-5-offset-x) var(--cp-drop-shadow-overlay-5-offset-y)
       var(--cp-drop-shadow-overlay-5-blur) var(--cp-drop-shadow-overlay-5-spread) var(--cp-drop-shadow-overlay-5-color);
+
+  /* Focus ring tokens */
+  --cp-shadow-focus-ring-accent:
+    var(--cp-shadow-focus-ring-accent-gap-offset-x) var(--cp-shadow-focus-ring-accent-gap-offset-y)
+      var(--cp-shadow-focus-ring-accent-gap-blur) var(--cp-shadow-focus-ring-accent-gap-spread)
+      var(--cp-shadow-focus-ring-accent-gap-color),
+    var(--cp-shadow-focus-ring-accent-ring-offset-x) var(--cp-shadow-focus-ring-accent-ring-offset-y)
+      var(--cp-shadow-focus-ring-accent-ring-blur) var(--cp-shadow-focus-ring-accent-ring-spread)
+      var(--cp-shadow-focus-ring-accent-ring-color);
 }

package/src/components/CpBadge.vue

@@ -3,13 +3,13 @@
     <slot name="leading-icon">
       <cp-icon v-if="leadingIcon" class="cpBadge__icon" :type="leadingIcon" />
     </slot>
-    <span class="cpBadge__label">
+    <span v-if="label" class="cpBadge__label">
       <slot>{{ label }}</slot>
     </span>
-    <slot v-if="!isClearable" name="trailing-icon">
+    <slot v-if="!hasClose" name="trailing-icon">
       <cp-icon v-if="trailingIcon" class="cpBadge__icon" :type="trailingIcon" />
     </slot>
-    <button v-if="isClearable" class="cpBadge__clear" :disabled="isDisabled" type="button" @click="handleClear">
+    <button v-if="hasClose" class="cpBadge__clear" :disabled="disabled" type="button" @click="emit('onClear')">
       <cp-icon class="cpBadge__clearIcon" type="x" />
     </button>
   </div>
@@ -25,23 +25,25 @@ interface Emits {
   (e: 'onClear'): void
 }
 
+type BadgeSizes = Extract<Sizes, '2xs' | 'xs' | 'sm' | 'md'>
+type BadgeStyles = 'outline' | 'soft' | 'solid'
+
 interface Props {
   color?: Colors
-  isClearable?: boolean
-  isDashed?: boolean
-  isDisabled?: boolean
-  isSolid?: boolean
+  disabled?: boolean
+  hasClose?: boolean
   isSquare?: boolean
-  isStroked?: boolean
   label?: string
   leadingIcon?: string
-  size?: Sizes
+  size?: BadgeSizes
+  style?: BadgeStyles
   trailingIcon?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  color: 'gray',
+  color: 'neutral',
   size: 'md',
+  style: 'outline',
   label: '',
   leadingIcon: '',
   trailingIcon: '',
@@ -49,22 +51,52 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const componentDynamicClasses = computed(() => {
-  return [
-    `cpBadge--${props.size}`,
-    `cpBadge--is${capitalizeFirstLetter(props.color)}`,
-    { 'cpBadge--isStroked': props.isStroked },
-    { 'cpBadge--isSquare': props.isSquare },
-    { 'cpBadge--isDashed': props.isDashed },
-    { 'cpBadge--isDisabled': props.isDisabled },
-    { 'cpBadge--isSolid': props.isSolid },
-  ]
-})
-
-const handleClear = () => emit('onClear')
+const componentDynamicClasses = computed(() => [
+  `cpBadge--${props.size}`,
+  `cpBadge--is${capitalizeFirstLetter(props.color)}`,
+  `cpBadge--is${capitalizeFirstLetter(props.style)}`,
+  { 'cpBadge--isSquare': props.isSquare },
+  { 'cpBadge--isDisabled': props.disabled },
+])
 </script>
 
 <style lang="scss">
+@mixin cp-badge-sized(
+  $size,
+  $font-size,
+  $line-height,
+  $padding,
+  $square-radius,
+  $no-label-padding,
+  $icon-width,
+  $clear-icon-width
+) {
+  &--#{$size} {
+    font-size: $font-size;
+    line-height: $line-height;
+    font-weight: 400;
+    padding: $padding;
+
+    &.cpBadge--isSquare {
+      border-radius: $square-radius;
+    }
+
+    &:not(:has(.cpBadge__label)) {
+      padding: $no-label-padding;
+    }
+
+    & .cpBadge__icon {
+      width: $icon-width;
+      aspect-ratio: 1/1;
+    }
+
+    & .cpBadge__clearIcon {
+      width: $clear-icon-width;
+      aspect-ratio: 1/1;
+    }
+  }
+}
+
 @mixin cp-badge-themed($className, $color, $bg-color, $solid-color, $solid-bg-color, $outline-color) {
   &--is#{$className} {
     color: $color;
@@ -76,6 +108,10 @@ const handleClear = () => emit('onClear')
       background-color: $solid-bg-color;
     }
 
+    &.cpBadge--isOutline {
+      box-shadow: 0 0 0 1px $outline-color;
+    }
+
     .cpBadge__clear:not(:disabled):hover,
     .cpBadge__clear:not(:disabled):focus-visible {
       background-color: $color;
@@ -83,97 +119,58 @@ const handleClear = () => emit('onClear')
   }
 }
 
-@mixin cp-badge-dynamic-padding(
-  $horizontal-padding,
-  $vertical-padding,
-  $label-padding,
-  $label-font-size,
-  $label-line-height
-) {
-  &:has(.cpBadge__label:not(:empty)) {
-    padding: $vertical-padding $horizontal-padding;
-
-    .cpBadge__label {
-      line-height: $label-line-height;
-      font-size: $label-font-size;
-      padding: 0 $label-padding;
-    }
-  }
-}
-
 .cpBadge {
   display: inline-flex;
-  padding: var(--cp-spacing-sm-md);
+  text-wrap: wrap;
   align-items: center;
   justify-content: center;
   border-radius: var(--cp-radius-full);
   background-color: var(--cp-background-tertiary);
-  color: var(--cp-text-primary);
-
-  &--isStroked {
-    outline: 1px solid currentColor;
-  }
-
-  &--isDashed {
-    outline-style: dashed;
-  }
-
-  &--isSquare {
-    border-radius: var(--cp-radius-md);
-
-    &.cpBadge--2xs,
-    &.cpBadge--xs {
-      border-radius: var(--cp-radius-sm);
-    }
-
-    &.cpBadge--sm {
-      border-radius: var(--cp-radius-sm-md);
-    }
-  }
+  gap: var(--cp-spacing-sm-md);
 
-  @include cp-badge-dynamic-padding(
-    var(--cp-spacing-md),
-    var(--cp-spacing-sm),
-    var(--cp-spacing-sm),
+  @include cp-badge-sized(
+    'md',
     var(--cp-text-size-sm),
-    var(--cp-line-height-sm)
+    var(--cp-line-height-sm),
+    var(--cp-spacing-sm) var(--cp-spacing-md),
+    var(--cp-radius-md),
+    var(--cp-spacing-sm-md),
+    var(--cp-dimensions-4),
+    var(--cp-dimensions-3_5)
   );
 
-  &--sm {
-    padding: var(--cp-spacing-sm);
-
-    @include cp-badge-dynamic-padding(
-      var(--cp-spacing-md),
-      var(--cp-spacing-sm),
-      var(--cp-spacing-xs),
-      var(--cp-text-size-xs),
-      var(--cp-line-height-xs)
-    );
-  }
-
-  &--xs {
-    padding: var(--cp-spacing-sm);
-
-    @include cp-badge-dynamic-padding(
-      var(--cp-spacing-sm-md),
-      var(--cp-spacing-xs),
-      var(--cp-spacing-xs),
-      var(--cp-text-size-xs),
-      var(--cp-line-height-xs)
-    );
-  }
+  @include cp-badge-sized(
+    'sm',
+    var(--cp-text-size-xs),
+    var(--cp-line-height-xs),
+    var(--cp-spacing-sm) var(--cp-spacing-md),
+    var(--cp-radius-md-lg),
+    var(--cp-spacing-sm),
+    var(--cp-dimensions-4),
+    var(--cp-dimensions-3_5)
+  );
 
-  &--2xs {
-    padding: var(--cp-spacing-xs);
+  @include cp-badge-sized(
+    'xs',
+    var(--cp-text-size-xs),
+    var(--cp-line-height-xs),
+    var(--cp-spacing-xs) var(--cp-spacing-sm-md),
+    var(--cp-radius-sm-md),
+    var(--cp-spacing-sm),
+    var(--cp-dimensions-3),
+    var(--cp-dimensions-2_5)
+  );
 
-    @include cp-badge-dynamic-padding(
-      var(--cp-spacing-sm),
-      var(--cp-spacing-none),
-      var(--cp-spacing-xs),
-      var(--cp-text-size-xs),
-      var(--cp-line-height-xs)
-    );
-  }
+  @include cp-badge-sized(
+    '2xs',
+    var(--cp-text-size-xs),
+    var(--cp-line-height-xs),
+    var(--cp-spacing-none) var(--cp-spacing-sm),
+    var(--cp-radius-sm),
+    var(--cp-spacing-xs),
+    var(--cp-dimensions-3),
+    var(--cp-dimensions-2_5)
+  );
 
   @include cp-badge-themed(
     'Neutral',
@@ -274,69 +271,9 @@ const handleClear = () => emit('onClear')
     var(--cp-border-disabled)
   );
 
-  @include cp-badge-themed(
-    'Gray',
-    var(--cp-foreground-primary),
-    var(--cp-background-secondary),
-    var(--cp-foreground-primary),
-    var(--cp-background-secondary),
-    var(--cp-border-soft)
-  ); // TODO: Should be replace by NEUTRAL
-
-  @include cp-badge-themed(
-    'Green',
-    var(--cp-foreground-success-primary),
-    var(--cp-background-success-secondary),
-    var(--cp-foreground-success-primary),
-    var(--cp-background-success-secondary),
-    var(--cp-border-success-primary)
-  ); // TODO: Should be replace by SUCCESS
-
-  @include cp-badge-themed(
-    'Orange',
-    var(--cp-foreground-warning-primary),
-    var(--cp-background-warning-secondary),
-    var(--cp-foreground-warning-primary),
-    var(--cp-background-warning-secondary),
-    var(--cp-border-warning-primary)
-  ); // TODO: Should be replace by WARNING
-
-  @include cp-badge-themed(
-    'Purple',
-    var(--cp-foreground-accent-primary),
-    var(--cp-background-accent-secondary),
-    var(--cp-foreground-accent-primary),
-    var(--cp-background-accent-secondary),
-    var(--cp-border-accent-primary)
-  ); // TODO: Should be replace by ACCENT
-
-  @include cp-badge-themed(
-    'Red',
-    var(--cp-foreground-error-primary),
-    var(--cp-background-error-secondary),
-    var(--cp-foreground-error-primary),
-    var(--cp-background-error-secondary),
-    var(--cp-border-error-primary)
-  ); // TODO: Should be replace by ERROR
-
-  &--isDisabled {
-    background-color: var(--cp-background-disabled);
-    color: var(--cp-text-disabled);
-
-    &.cpBadge--isStroked,
-    &.cpBadge--isDashed {
-      outline-color: var(--cp-border-disabled);
-    }
-  }
-
-  &__icon {
-    width: var(--cp-dimensions-4);
-    aspect-ratio: 1/1;
-  }
-
-  &__clearIcon {
-    width: var(--cp-dimensions-3_5);
-    aspect-ratio: 1/1;
+  &--isDisabled,
+  &--isDisabled * {
+    cursor: not-allowed;
   }
 
   &__clear {

package/src/components/CpRadio.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="cpRadio">
     <label
       v-for="({ label, value, description, additionalData, disabled }, index) in options"
       :key="getRadioId(index)"
-      class="cpRadio"
-      :class="computedClasses({ value, disabled })"
+      class="cpRadio__item"
+      :class="computedClasses"
       :for="getRadioId(index)"
     >
       <input
@@ -17,19 +17,15 @@
         :value="value"
         @input="onChange(value)"
       />
-      <span class="cpRadio__content">
-        <span class="cpRadio__information">
-          <span class="cpRadio__label">{{ label }}</span>
-          <span v-if="description" class="cpRadio__description">{{ description }}</span>
-        </span>
-        <span v-if="additionalData" class="cpRadio__additionalData">{{ additionalData }}</span>
-      </span>
+      <span class="cpRadio__label">{{ label }}</span>
+      <span class="cpRadio__description">{{ description }}</span>
+      <span class="cpRadio__additionalData">{{ additionalData }}</span>
     </label>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useId } from 'vue'
+import { computed, useId } from 'vue'
 
 import { ToggleColors } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
@@ -70,20 +66,12 @@ const getRadioId = (index: number): string => `${radioUniqueId}${index}`
 
 const isActive = (value: string): boolean => value === props.modelValue
 
-const computedClasses = ({ value, disabled }: { disabled?: boolean; value: string }) => {
-  return [
-    {
-      'cpRadio--isActive': isActive(value),
-      'cpRadio--isDisabled': disabled,
-    },
-    `cpRadio--is${capitalizeFirstLetter(props.color)}`,
-  ]
-}
+const computedClasses = computed(() => `cpRadio--is${capitalizeFirstLetter(props.color)}`)
 </script>
 
 <style lang="scss">
 @mixin cp-radio-style($color, $className) {
-  &--is#{$className}#{&}--isActive {
+  &--is#{$className}:has(input:checked) {
     border-color: $color;
   }
 
@@ -91,11 +79,9 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
     background-color: $color;
     border-color: $color;
 
-    & ~ span .cpRadio {
-      &__label,
-      &__additionalData {
-        color: $color;
-      }
+    & ~ .cpRadio__label,
+    & ~ .cpRadio__additionalData {
+      color: $color;
     }
   }
 
@@ -112,53 +98,70 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
 .cpRadio {
   $cp-radio-base-width: var(--cp-dimensions-5);
 
-  position: relative;
-  border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
-  border-radius: var(--cp-radius-md-lg);
-  padding: var(--cp-spacing-xl) var(--cp-spacing-lg);
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  grid-gap: var(--cp-spacing-lg);
-  align-items: center;
-  width: 100%;
-
-  &:not(#{&}--isDisabled),
-  &:not(#{&}--isDisabled) * {
-    cursor: pointer;
-  }
+  display: flex;
+  flex-direction: column;
+  gap: var(--cp-spacing-lg);
 
-  @include cp-radio-style(var(--cp-foreground-accent-primary), 'Accent');
+  &__item {
+    position: relative;
+    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-md-lg);
+    padding: var(--cp-spacing-xl) var(--cp-spacing-lg);
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: auto auto auto;
+    align-items: center;
+    column-gap: var(--cp-spacing-lg);
+    row-gap: 0;
+    width: 100%;
 
-  @include cp-radio-style(var(--cp-foreground-blue-primary), 'Blue');
+    &:not(:has(input:disabled)),
+    &:not(:has(input:disabled)) * {
+      cursor: pointer;
+    }
 
-  @include cp-radio-style(var(--cp-foreground-accent-primary), 'Purple'); // TODO: Sould be replace by ACCENT
+    &:has(input:disabled) {
+      background-color: var(--cp-background-disabled);
+      color: var(--cp-foreground-disabled);
+      border-color: var(--cp-border-disabled);
 
-  &--isDisabled {
-    background-color: var(--cp-background-disabled);
-    color: var(--cp-foreground-disabled);
-    border-color: var(--cp-border-disabled);
+      &,
+      * {
+        cursor: not-allowed;
+      }
 
-    &,
-    * {
-      cursor: not-allowed;
+      &:hover,
+      &:focus,
+      &:has(input:checked) {
+        box-shadow: none;
+        border-color: var(--cp-border-disabled);
+      }
     }
+  }
 
-    &:hover,
-    &:focus {
-      box-shadow: none;
-      border-color: var(--cp-border-disabled);
-    }
+  .cpRadio__label {
+    grid-column: 2;
+    grid-row: 1;
   }
 
-  &--isActive#{&}--isDisabled,
-  &--isActive#{&}--isDisabled:hover {
-    border-color: var(--cp-border-disabled);
+  .cpRadio__description {
+    grid-column: 2;
+    grid-row: 2;
   }
 
-  &:not(:last-of-type) {
-    margin-bottom: var(--cp-spacing-lg);
+  .cpRadio__additionalData {
+    grid-column: 2;
+    grid-row: 3;
+    margin-left: 0;
+    text-align: left;
   }
 
+  @include cp-radio-style(var(--cp-foreground-accent-primary), 'Accent');
+
+  @include cp-radio-style(var(--cp-foreground-blue-primary), 'Blue');
+
+  @include cp-radio-style(var(--cp-foreground-accent-primary), 'Purple'); // TODO: Sould be replace by ACCENT
+
   input {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -169,6 +172,9 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
     width: $cp-radio-base-width;
     height: $cp-radio-base-width;
     transition: transform 0.1s linear;
+    grid-column: 1;
+    grid-row: 1 / -1;
+    align-self: center;
 
     &:before {
       content: '';
@@ -198,34 +204,16 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
       background-color: var(--cp-foreground-disabled);
     }
 
-    &:checked:disabled ~ span .cpRadio {
-      &__label,
-      &__additionalData {
-        color: var(--cp-foreground-disabled);
-      }
+    &:checked:disabled ~ .cpRadio__label,
+    &:checked:disabled ~ .cpRadio__additionalData {
+      color: var(--cp-foreground-disabled);
     }
   }
 
-  &__content {
-    display: flex;
-    align-items: center;
-    line-height: 1.3;
-  }
-
-  &__information {
-    flex-grow: 2;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    text-transform: capitalize;
-    margin: 0 calc(var(--cp-spacing-md) * -1);
-  }
-
   &__label,
   &__description {
-    margin: 0 var(--cp-spacing-md);
-    flex-grow: 1;
+    line-height: 1.3;
+    text-transform: capitalize;
   }
 
   &__label,
@@ -242,9 +230,52 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
     white-space: nowrap;
   }
 
-  &__additionalData {
-    text-align: right;
-    margin-left: var(--cp-spacing-xl);
+  &__description:empty {
+    display: none;
+  }
+
+  &__additionalData:empty {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .cpRadio {
+    display: grid;
+    grid-template-columns: min-content max-content minmax(0, 1fr) auto;
+    column-gap: var(--cp-spacing-lg);
+    row-gap: var(--cp-spacing-lg);
+  }
+
+  .cpRadio__item {
+    grid-template-columns: subgrid;
+    grid-template-rows: auto;
+    grid-column: 1 / -1;
+    row-gap: 0;
+
+    input {
+      grid-column: auto;
+      grid-row: auto;
+      align-self: center;
+    }
+
+    .cpRadio__label {
+      grid-column: auto;
+      grid-row: auto;
+    }
+
+    .cpRadio__description {
+      grid-column: auto;
+      grid-row: auto;
+      min-width: 0;
+    }
+
+    .cpRadio__additionalData {
+      grid-column: auto;
+      grid-row: auto;
+      text-align: right;
+      margin-left: var(--cp-spacing-xl);
+    }
   }
 }
 </style>