@citizenplane/pimp 15.0.0 → 15.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "15.0.0",
+  "version": "15.1.1",
   "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,58 +3,59 @@
     <slot name="leading-icon">
       <cp-icon v-if="leadingIcon" class="cpBadge__icon" :type="leadingIcon" />
     </slot>
-    <span v-if="label" class="cpBadge__label">
+    <span v-if="hasLabel" class="cpBadge__label">
       <slot>{{ label }}</slot>
     </span>
-    <slot v-if="!hasClose" name="trailing-icon">
-      <cp-icon v-if="trailingIcon" class="cpBadge__icon" :type="trailingIcon" />
-    </slot>
-    <button v-if="hasClose" class="cpBadge__clear" :disabled="disabled" type="button" @click="emit('onClear')">
+    <button v-if="isClearable" class="cpBadge__clear" :disabled="disabled" type="button" @click="emit('onClear')">
       <cp-icon class="cpBadge__clearIcon" type="x" />
     </button>
+    <slot v-else name="trailing-icon">
+      <cp-icon v-if="trailingIcon" class="cpBadge__icon" :type="trailingIcon" />
+    </slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 
 import type { Colors, Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
-interface Emits {
-  (e: 'onClear'): void
-}
-
 type BadgeSizes = Extract<Sizes, '2xs' | 'xs' | 'sm' | 'md'>
-type BadgeStyles = 'outline' | 'soft' | 'solid'
+type BadgeVariants = 'outline' | 'soft' | 'solid'
 
 interface Props {
   color?: Colors
   disabled?: boolean
-  hasClose?: boolean
+  isClearable?: boolean
   isSquare?: boolean
   label?: string
   leadingIcon?: string
   size?: BadgeSizes
-  style?: BadgeStyles
   trailingIcon?: string
+  variant?: BadgeVariants
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  isClearable: false,
   color: 'neutral',
   size: 'md',
-  style: 'outline',
+  variant: 'soft',
   label: '',
   leadingIcon: '',
   trailingIcon: '',
 })
 
-const emit = defineEmits<Emits>()
+const emit = defineEmits<{ onClear: [] }>()
+
+const slots = useSlots()
+
+const hasLabel = computed(() => !!props.label || !!slots.default)
 
 const componentDynamicClasses = computed(() => [
   `cpBadge--${props.size}`,
   `cpBadge--is${capitalizeFirstLetter(props.color)}`,
-  `cpBadge--is${capitalizeFirstLetter(props.style)}`,
+  `cpBadge--is${capitalizeFirstLetter(props.variant)}`,
   { 'cpBadge--isSquare': props.isSquare },
   { 'cpBadge--isDisabled': props.disabled },
 ])

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>

package/src/components/CpRadioGroup.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="cpRadioGroup" :class="cpRadioGroupDynamicClasses">
+    <div v-if="hasGroupHeader" class="cpRadioGroup__header">
+      <span v-if="groupLabel" :id="radioGroupLabelId" class="cpRadioGroup__label">
+        {{ groupLabel }}
+        <span v-if="required" class="cpRadioGroup__required">*</span>
+        <span v-else class="cpRadioGroup__optional">(Optional)</span>
+      </span>
+      <span v-if="groupHelperText" :id="radioGroupHelperTextId" class="cpRadioGroup__helperText">{{
+        groupHelperText
+      }}</span>
+    </div>
+    <div class="cpRadioGroup__options">
+      <cp-radio-new v-for="option in options" :key="option.value" :option="option" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, reactive, toRef, useId } from 'vue'
+
+import CpRadioNew, { type RadioOption } from './CpRadioNew.vue'
+import { capitalizeFirstLetter } from '@/helpers'
+
+interface Props {
+  autofocus?: boolean
+  direction?: 'horizontal' | 'vertical'
+  groupHelperText?: string
+  groupLabel?: string
+  groupName?: string
+  modelValue: string
+  options: RadioOption[]
+  required?: boolean
+  size?: 'md' | 'lg'
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  groupName: '',
+  autofocus: false,
+  direction: 'vertical',
+  groupLabel: '',
+  groupHelperText: '',
+  size: 'md',
+})
+
+const emit = defineEmits<Emits>()
+
+const radioGroudId = useId()
+const radioGroupLabelId = useId()
+const radioGroupHelperTextId = useId()
+
+const onChange = (value: string): void => emit('update:modelValue', value)
+
+const cpRadioGroupDynamicClasses = computed(() => [
+  `cpRadioGroup--${props.size}`,
+  `cpRadioGroup--is${capitalizeFirstLetter(props.direction)}`,
+])
+const hasGroupHeader = computed(() => props.groupLabel || props.groupHelperText)
+const hasOptionRequiredVisible = computed(() => props.required && !props.groupLabel)
+const hasOptionNotRequiredVisible = computed(() => !props.required && !props.groupLabel)
+
+provide(
+  'radioGroup',
+  reactive({
+    autofocus: toRef(props, 'autofocus'),
+    groupName: toRef(props, 'groupName'),
+    modelValue: toRef(props, 'modelValue'),
+    onChange,
+    radioGroupHelperTextId,
+    radioGroupLabelId,
+    showOptional: hasOptionNotRequiredVisible,
+    showRequired: hasOptionRequiredVisible,
+    size: toRef(props, 'size'),
+    radioGroudId,
+  }),
+)
+</script>
+
+<style lang="scss">
+.cpRadioGroup {
+  display: flex;
+  gap: var(--cp-spacing-md);
+  flex-direction: column;
+  width: 100%;
+
+  &__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cp-spacing-md);
+  }
+
+  &--isHorizontal .cpRadioGroup__options {
+    flex-direction: row;
+    gap: var(--cp-spacing-2xl);
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    font-family: 'Figtree', sans-serif;
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &--lg .cpRadioGroup__header {
+    font-size: var(--cp-text-size-md);
+    line-height: var(--cp-line-height-md);
+  }
+
+  &__label {
+    font-weight: 500;
+    color: var(--cp-text-primary);
+    display: flex;
+    gap: var(--cp-spacing-sm);
+    align-items: baseline;
+  }
+
+  &__helperText {
+    font-weight: 400;
+    color: var(--cp-text-secondary);
+  }
+
+  &__required {
+    color: var(--cp-text-error-primary);
+    font-weight: 700;
+  }
+
+  &__optional {
+    color: var(--cp-text-secondary);
+    font-weight: 400;
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
+  }
+
+  &--lg &__optional {
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
+}
+</style>