@citizenplane/pimp 18.6.2 → 18.8.0

package/src/components/CpRadioGroup.vue

@@ -19,8 +19,8 @@
 <script setup lang="ts">
 import { computed, provide, reactive, toRef, useId } from 'vue'
 
-import CpRadioNew, { type RadioOption } from './CpRadioNew.vue'
 import { capitalizeFirstLetter } from '@/helpers'
+import CpRadioNew, { type RadioOption } from './CpRadioNew.vue'
 
 interface Props {
   autofocus?: boolean
@@ -83,9 +83,9 @@ provide(
 <style lang="scss">
 .cpRadioGroup {
   display: flex;
-  gap: var(--cp-spacing-md);
-  flex-direction: column;
   width: 100%;
+  flex-direction: column;
+  gap: var(--cp-spacing-md);
 
   &__options {
     display: flex;
@@ -94,16 +94,15 @@ provide(
   }
 
   &--isHorizontal .cpRadioGroup__options {
-    flex-direction: row;
-    gap: var(--cp-spacing-2xl);
-    flex-wrap: wrap;
+    flex-flow: row wrap;
     align-items: flex-start;
+    gap: var(--cp-spacing-2xl);
   }
 
   &__header {
     display: flex;
     flex-direction: column;
-    font-family: 'Figtree', sans-serif;
+    font-family: Figtree, sans-serif;
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);
   }
@@ -114,16 +113,16 @@ provide(
   }
 
   &__label {
-    font-weight: 500;
-    color: var(--cp-text-primary);
     display: flex;
-    gap: var(--cp-spacing-sm);
     align-items: baseline;
+    color: var(--cp-text-primary);
+    font-weight: 500;
+    gap: var(--cp-spacing-sm);
   }
 
   &__helperText {
-    font-weight: 400;
     color: var(--cp-text-secondary);
+    font-weight: 400;
   }
 
   &__required {
@@ -133,8 +132,8 @@ provide(
 
   &__optional {
     color: var(--cp-text-secondary);
-    font-weight: 400;
     font-size: var(--cp-text-size-xs);
+    font-weight: 400;
     line-height: var(--cp-line-height-xs);
   }
 

package/src/components/CpRadioNew.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, computed } from 'vue'
+import { computed, inject } from 'vue'
 
 export interface RadioOption {
   disabled?: boolean
@@ -63,9 +63,41 @@ const radioId = computed(() => getRadioId(props.option.value))
 .cpRadioNew {
   position: relative;
   display: flex;
-  gap: var(--cp-spacing-md);
   align-items: flex-start;
   cursor: pointer;
+  gap: var(--cp-spacing-md);
+
+  &__label {
+    display: flex;
+    align-items: baseline;
+    font-weight: 500;
+    gap: var(--cp-spacing-sm);
+  }
+
+  &__helperText {
+    color: var(--cp-text-secondary);
+    font-weight: 400;
+  }
+
+  &__required {
+    color: var(--cp-text-error-primary);
+    font-family: Figtree, sans-serif;
+    font-size: var(--cp-text-size-sm);
+    font-weight: 700;
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &__optional {
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-xs);
+    font-weight: 400;
+    line-height: var(--cp-line-height-xs);
+  }
+
+  &--lg .cpRadioNew__optional {
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
 
   &:not(:has(.cpRadioNew__helperText)) {
     align-items: center;
@@ -75,7 +107,7 @@ const radioId = computed(() => getRadioId(props.option.value))
   &:has(:disabled) * {
     cursor: not-allowed;
   }
-
+  
   &:has(:disabled) .cpRadioNew__helperText,
   &:has(:disabled) .cpRadioNew__label,
   &:has(:disabled) .cpRadioNew__optional {
@@ -95,76 +127,49 @@ const radioId = computed(() => getRadioId(props.option.value))
     line-height: var(--cp-line-height-md);
   }
 
-  &--lg .cpRadioNew__optional {
-    font-size: var(--cp-text-size-sm);
-    line-height: var(--cp-line-height-sm);
-  }
-
-  &__label {
-    font-weight: 500;
-    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;
-    font-size: var(--cp-text-size-sm);
-    line-height: var(--cp-line-height-sm);
-    font-family: 'Figtree', sans-serif;
-  }
-
-  &__optional {
-    color: var(--cp-text-secondary);
-    font-weight: 400;
-    font-size: var(--cp-text-size-xs);
-    line-height: var(--cp-line-height-xs);
+  &--lg {
+    input {
+      width: var(--cp-dimensions-5);
+      height: var(--cp-dimensions-5);
+    }
   }
 
   input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
-    border-radius: var(--cp-radius-full);
     width: var(--cp-dimensions-4);
     height: var(--cp-dimensions-4);
+    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-full);
+    margin: var(--cp-spacing-sm);
+    appearance: none;
+    background-color: var(--cp-background-primary);
+    box-shadow: var(--cp-shadows-3xs);
     transition:
       transform 0.1s linear,
       box-shadow 0.1s linear,
       background-color 0.1s linear;
-    margin: var(--cp-spacing-sm);
-    box-shadow: var(--cp-shadows-3xs);
-    background-color: var(--cp-background-primary);
+
+    &:focus {
+      box-shadow: var(--cp-shadow-focus-ring-accent);
+    }
 
     &:checked {
-      background-color: var(--cp-foreground-accent-primary);
       border-color: var(--cp-foreground-accent-primary);
+      background-color: var(--cp-foreground-accent-primary);
     }
 
     &:hover:checked {
       background-color: var(--cp-foreground-accent-primary-hover);
     }
 
-    &:focus {
-      box-shadow: var(--cp-shadow-focus-ring-accent);
-    }
-
-    &:before {
-      content: '';
+    &::before {
       display: flex;
       width: 100%;
       height: 100%;
       border-radius: var(--cp-radius-full);
       background-color: var(--cp-background-primary);
-      transition: transform 0.15s linear;
+      content: '';
       transform: scale(0);
+      transition: transform 0.15s linear;
     }
 
     &:hover:not(:checked, :disabled) {
@@ -175,7 +180,7 @@ const radioId = computed(() => getRadioId(props.option.value))
       transform: scale(0.8);
     }
 
-    &:checked:before {
+    &:checked::before {
       transform: scale(0.5);
     }
 
@@ -184,16 +189,9 @@ const radioId = computed(() => getRadioId(props.option.value))
       background-color: var(--cp-background-disabled);
     }
 
-    &:checked:disabled:before {
+    &:checked:disabled::before {
       background-color: var(--cp-foreground-disabled);
     }
   }
-
-  &--lg {
-    input {
-      width: var(--cp-dimensions-5);
-      height: var(--cp-dimensions-5);
-    }
-  }
 }
 </style>

package/src/components/CpSelect.vue

@@ -38,10 +38,11 @@
 <script setup lang="ts">
 import { computed, useId } from 'vue'
 
+import type { Sizes } from '@/constants'
+
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
-import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface SelectOption {
@@ -106,48 +107,47 @@ const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage
 .cpSelect {
   position: relative;
 
-  &:has(.cpSelect__help, .cpSelect__error) .cpSelect__container {
-    margin-bottom: var(--cp-spacing-md);
-  }
-
   &__container {
     position: relative;
 
-    &:after {
-      width: var(--cp-dimensions-4);
-      height: var(--cp-dimensions-4);
-
-      content: '';
+    &::after {
       position: absolute;
-      right: var(--cp-dimensions-3);
       top: 50%;
-      transform: translateY(-50%);
+      right: var(--cp-dimensions-3);
+      width: var(--cp-dimensions-4);
+      height: var(--cp-dimensions-4);
       background-color: var(--cp-foreground-secondary);
+      content: '';
       mask-image: url('@/assets/images/icons/chevron-down-icon.svg');
-      mask-size: cover;
       mask-repeat: no-repeat;
+      mask-size: cover;
       pointer-events: none;
+      transform: translateY(-50%);
     }
   }
 
+  &:has(.cpSelect__help, .cpSelect__error) .cpSelect__container {
+    margin-bottom: var(--cp-spacing-md);
+  }
+
   &__inner {
     @extend %u-text-ellipsis;
 
-    box-shadow:
-      var(--cp-shadows-3xs),
-      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-    appearance: none;
+    width: 100%;
+    padding: var(--cp-spacing-md)
+      calc(var(--cp-spacing-lg) + var(--cp-spacing-sm) + var(--cp-dimensions-4) + var(--cp-spacing-md))
+      var(--cp-spacing-md) var(--cp-spacing-xl);
     border: none;
     border-radius: var(--cp-radius-md);
+    appearance: none;
     background-color: var(--cp-background-primary);
-    width: 100%;
+    box-shadow:
+      var(--cp-shadows-3xs),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     color: var(--cp-foreground-primary);
     cursor: pointer;
-    padding: var(--cp-spacing-md)
-      calc(var(--cp-spacing-lg) + var(--cp-spacing-sm) + var(--cp-dimensions-4) + var(--cp-spacing-md))
-      var(--cp-spacing-md) var(--cp-spacing-xl);
-    line-height: var(--cp-line-height-md);
     font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
 
     &:hover {
       box-shadow:
@@ -156,8 +156,8 @@ const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage
     }
 
     &:focus {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
       background-color: var(--cp-background-primary);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
     }
   }
 
@@ -181,34 +181,22 @@ const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage
 
   &--isDisabled {
     .cpSelect__inner {
-      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
       background: var(--cp-background-disabled);
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
     }
 
     .cpSelect__inner,
-    .cpSelect__container:after {
-      cursor: not-allowed;
+    .cpSelect__container::after {
       color: var(--cp-text-disabled);
+      cursor: not-allowed;
       opacity: 1;
     }
 
-    .cpSelect__container:after {
+    .cpSelect__container::after {
       background-color: var(--cp-foreground-disabled);
     }
   }
 
-  &--isInvalid {
-    .cpSelect__inner,
-    .cpSelect__inner:hover,
-    .cpSelect__inner:focus {
-      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
-    }
-
-    .cpSelect__inner:focus {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
-    }
-  }
-
   &--sm {
     .cpSelect__inner {
       padding: var(--cp-spacing-sm) calc(var(--cp-spacing-2xl) + var(--cp-dimensions-3)) var(--cp-spacing-sm)
@@ -218,16 +206,28 @@ const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage
 
   &--lg {
     .cpSelect__inner {
-      border-radius: var(--cp-radius-md-lg);
-      font-size: var(--cp-text-size-md);
       padding: var(--cp-spacing-lg) calc(var(--cp-spacing-xl) + var(--cp-dimensions-5) + var(--cp-spacing-sm))
         var(--cp-spacing-lg) var(--cp-spacing-xl);
+      border-radius: var(--cp-radius-md-lg);
+      font-size: var(--cp-text-size-md);
     }
 
-    .cpSelect__container:after {
+    .cpSelect__container::after {
       width: var(--cp-dimensions-5);
       height: var(--cp-dimensions-5);
     }
   }
+
+  &--isInvalid {
+    .cpSelect__inner,
+    .cpSelect__inner:hover,
+    .cpSelect__inner:focus {
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
+    }
+
+    .cpSelect__inner:focus {
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
+    }
+  }
 }
 </style>

package/src/components/CpSelectMenu.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 export interface SelectValue {
   label: string
@@ -77,7 +77,6 @@ const props = withDefaults(defineProps<Props>(), {
   dropdownTitle: 'Select value',
   dropdownFilterPlaceholder: 'Filter...',
   dropdownEmptyViewPlaceholder: 'No option found',
-  // eslint-disable-next-line vue/no-boolean-default
   closeOnSelect: true,
 })
 
@@ -142,19 +141,19 @@ const isSelectedValue = (value: string): boolean => {
   font-size: var(--cp-text-size-sm);
 
   &__button {
-    box-shadow: inset 0 var(--cp-dimensions-0_25) var(--cp-dimensions-0_5) rgba(0, 0, 0, 0.12);
-    border: none;
-    outline: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
-    border-radius: var(--cp-radius-md-lg);
-    background: var(--cp-background-white);
-    padding: var(--cp-spacing-md);
-    width: 100%;
     display: flex;
+    width: 100%;
     align-items: center;
     justify-content: space-between;
+    padding: var(--cp-spacing-md);
+    border: none;
+    border-radius: var(--cp-radius-md-lg);
+    background: var(--cp-background-white);
+    box-shadow: inset 0 var(--cp-dimensions-0_25) var(--cp-dimensions-0_5) rgba(0, 0, 0, 12%);
     font-size: inherit;
-    line-height: var(--cp-line-height-md);
     font-weight: normal;
+    line-height: var(--cp-line-height-md);
+    outline: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     text-transform: capitalize;
 
     &:hover,
@@ -164,8 +163,8 @@ const isSelectedValue = (value: string): boolean => {
     }
 
     &:focus {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-background-accent-solid);
       box-shadow: 0 0 0 var(--cp-dimensions-0_5) var(--cp-background-accent-solid);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-background-accent-solid);
     }
   }
 
@@ -174,10 +173,10 @@ const isSelectedValue = (value: string): boolean => {
   }
 
   &__icon {
-    margin-left: var(--cp-dimensions-3);
     width: var(--cp-dimensions-5);
     height: var(--cp-dimensions-5);
     flex-shrink: 0;
+    margin-left: var(--cp-dimensions-3);
     transition: transform 0.2s ease-out;
 
     &--isOpened {
@@ -186,14 +185,14 @@ const isSelectedValue = (value: string): boolean => {
   }
 
   &__dropdown {
-    z-index: 3;
     position: absolute;
+    z-index: 3;
     top: calc(100% + var(--cp-dimensions-1));
     left: 0;
+    width: max(100%, calc(var(--cp-dimensions-1) * 62.5));
     border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     border-radius: var(--cp-radius-md-lg);
     background: var(--cp-background-white);
-    width: max(100%, calc(var(--cp-dimensions-1) * 62.5));
     font-size: inherit;
   }
 
@@ -204,50 +203,51 @@ const isSelectedValue = (value: string): boolean => {
     }
 
     &__title {
-      padding: var(--cp-spacing-lg) var(--cp-spacing-md);
       display: flex;
       align-items: center;
       justify-content: space-between;
-      white-space: normal;
-      font-weight: 600;
+      padding: var(--cp-spacing-lg) var(--cp-spacing-md);
       color: var(--cp-text-primary);
+      font-weight: 600;
+      white-space: normal;
     }
 
     &__filterBar {
+      display: flex;
+      align-items: center;
+      padding: var(--cp-spacing-md);
       border-top: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
       border-bottom: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
       background-color: var(--cp-background-disabled);
-      padding: var(--cp-spacing-md);
-      display: flex;
-      align-items: center;
 
       & > input {
-        background-color: transparent;
         flex: 1;
+        background-color: transparent;
         color: var(--cp-text-primary);
 
+        // stylelint-disable-next-line max-nesting-depth
         &::placeholder {
           color: var(--cp-text-secondary);
         }
       }
 
       i {
+        flex-shrink: 0;
         margin-right: var(--cp-spacing-md);
         color: var(--cp-text-primary);
-        flex-shrink: 0;
       }
     }
 
     &__list {
       display: flex;
-      flex-direction: column;
       min-height: calc(var(--cp-dimensions-1) * 62.5);
+      flex-direction: column;
     }
 
     &__items {
-      margin: var(--cp-spacing-sm) 0;
-      padding: 0;
       max-height: calc(var(--cp-dimensions-1) * 62.5);
+      padding: 0;
+      margin: var(--cp-spacing-sm) 0;
       overflow-y: auto;
 
       li {
@@ -257,11 +257,11 @@ const isSelectedValue = (value: string): boolean => {
 
     &__item {
       position: relative;
-      padding: var(--cp-spacing-md) var(--cp-spacing-xl) var(--cp-spacing-md) calc(var(--cp-dimensions-1) * 9);
-      width: 100%;
       display: flex;
-      text-align: initial;
+      width: 100%;
+      padding: var(--cp-spacing-md) var(--cp-spacing-xl) var(--cp-spacing-md) calc(var(--cp-dimensions-1) * 9);
       cursor: pointer;
+      text-align: initial;
       text-transform: capitalize;
 
       &:hover {
@@ -275,18 +275,18 @@ const isSelectedValue = (value: string): boolean => {
 
     &__icon {
       position: absolute;
-      left: var(--cp-spacing-md);
       top: 50%;
-      transform: translateY(-50%);
+      left: var(--cp-spacing-md);
       color: var(--cp-background-accent-solid);
+      transform: translateY(-50%);
     }
 
     &__emptyState {
-      padding: var(--cp-spacing-xl) var(--cp-spacing-md);
-      flex: 1;
       display: flex;
+      flex: 1;
       align-items: center;
       justify-content: center;
+      padding: var(--cp-spacing-xl) var(--cp-spacing-md);
       color: var(--cp-text-secondary);
     }
   }