@citizenplane/pimp 8.1.2 → 8.2.1

package/src/components/atomic-elements/CpBadge.vue

@@ -3,55 +3,72 @@
     <span v-if="hasIconSlot" class="cpBadge__icon"> <slot name="icon" /></span>
     <cp-icon v-else-if="icon" :type="icon" class="cpBadge__icon" />
     <span class="cpBadge__label"><slot /></span>
+    <button v-if="isClearable" class="cpBadge__clear" type="button" @click="onClear">
+      <cp-icon class="cpBadge__icon cpBadge__icon--isClear" type="x" />
+    </button>
   </div>
 </template>
 
 <script>
-import { capitalizeFirstLetter } from '@/helpers'
-
+// Need to be declared in module scope, see https://stackoverflow.com/a/70947352
 const badgeColors = ['neutral', 'blue', 'green', 'red', 'orange', 'purple', 'teal', 'pink', 'yellow']
+</script>
 
-export default {
-  props: {
-    color: {
-      type: String,
-      default: '',
-      validator: (value) => Object.values(badgeColors).includes(value) || value === '',
-    },
-    isSolid: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    isPlain: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-      required: false,
-    },
+<script setup>
+import { computed, useSlots } from 'vue'
+
+import { capitalizeFirstLetter } from '@/helpers'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: '',
+    validator: (value) => badgeColors.includes(value) || value === '',
+  },
+  isSolid: {
+    type: Boolean,
+    default: false,
+  },
+  isPlain: {
+    type: Boolean,
+    default: false,
+  },
+  isClearable: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    capitalizedColor() {
-      return capitalizeFirstLetter(this.color)
-    },
-    computedClasses() {
-      const hasIcon = this.icon !== '' || this.hasIconSlot
-
-      return [
-        this.isSolid ? 'cpBadge--isSolid' : '',
-        this.isPlain ? 'cpBadge--isPlain' : '',
-        hasIcon ? 'cpBadge--hasIcon' : '',
-        this.capitalizedColor ? `cpBadge--is${this.capitalizedColor}` : '',
-      ]
-    },
-    hasIconSlot() {
-      return !!this.$slots.icon
-    },
+  icon: {
+    type: String,
+    default: '',
   },
+})
+
+const emits = defineEmits(['on-clear'])
+
+const slots = useSlots()
+
+const capitalizedColor = computed(() => {
+  return capitalizeFirstLetter(props.color)
+})
+
+const hasIconSlot = computed(() => {
+  return !!slots.icon
+})
+
+const computedClasses = computed(() => {
+  const hasIcon = props.icon !== '' || hasIconSlot.value
+
+  return {
+    'cpBadge--isSolid': props.isSolid,
+    'cpBadge--isPlain': props.isPlain,
+    'cpBadge--hasIcon': hasIcon,
+    'cpBadge--isClearable': props.isClearable,
+    [`cpBadge--is${capitalizedColor.value}`]: capitalizedColor.value,
+  }
+})
+
+const onClear = () => {
+  emits('on-clear')
 }
 </script>
 
@@ -60,11 +77,23 @@ export default {
   background-color: rgba($color, 0.14);
   border-color: transparent;
   color: $color;
+
+  .cpBadge__clear:hover,
+  .cpBadge__clear:focus-visible {
+    background-color: $color;
+  }
 }
 
 @mixin cp-badge-color-solid($color) {
+  color: $neutral-light;
   background-color: $color;
   border-color: transparent;
+
+  .cpBadge__clear:hover,
+  .cpBadge__clear:focus-visible {
+    color: $color;
+    background-color: $neutral-light;
+  }
 }
 
 @mixin cp-badge-style($color, $className) {
@@ -80,11 +109,29 @@ export default {
 .cpBadge {
   display: inline-flex;
   align-items: center;
-  padding: pxToRem(4) pxToRem(8);
+  padding-block: $space-sm;
   font-size: pxToEm(14);
   font-weight: 500;
   border-radius: pxToRem(1000);
-  border: pxToRem(1) solid $border-color;
+  border: 1px solid $border-color;
+
+  @include cp-badge-style($neutral-dark, 'Neutral');
+  @include cp-badge-style($secondary-color, 'Blue');
+  @include cp-badge-style($green-2, 'Green');
+  @include cp-badge-style($red, 'Red');
+  @include cp-badge-style($orange, 'Orange');
+  @include cp-badge-style($purple, 'Purple');
+  @include cp-badge-style($blue-1, 'Teal');
+  @include cp-badge-style($pink, 'Pink');
+  @include cp-badge-style($yellow, 'Yellow');
+
+  &--isYellow#{&}--isSolid {
+    color: darken($yellow, 20);
+
+    &:before {
+      background-color: darken($yellow, 20);
+    }
+  }
 
   &:not(#{&}--isPlain):not(#{&}--hasIcon)::before {
     content: '';
@@ -96,51 +143,52 @@ export default {
     background-color: currentColor;
   }
 
-  &--isSolid {
-    color: $neutral-light;
+  &:not(&--isClearable) {
+    padding-inline: $space;
+  }
+
+  &--isClearable {
+    padding-left: $space;
+    padding-right: $space-sm;
   }
 
   &__label {
     @extend %u-text-ellipsis;
     flex: 1;
+    min-width: 0;
   }
 
   &__icon {
+    color: currentColor;
     width: pxToRem(16);
     height: pxToRem(16);
-    margin-right: $space-sm;
-    color: currentColor;
-    stroke: currentColor;
 
-    svg {
-      width: 100%;
-      height: 100%;
+    &:not(&--isClear) {
+      margin-right: $space-sm;
     }
-  }
-
-  @include cp-badge-style($neutral-dark, 'Neutral');
-
-  @include cp-badge-style($secondary-color, 'Blue');
-
-  @include cp-badge-style($green-2, 'Green');
-
-  @include cp-badge-style($red, 'Red');
-
-  @include cp-badge-style($orange, 'Orange');
-
-  @include cp-badge-style($purple, 'Purple');
 
-  @include cp-badge-style($blue-1, 'Teal');
-
-  @include cp-badge-style($pink, 'Pink');
+    &--isClear svg {
+      stroke-width: pxToRem(2);
+    }
+  }
 
-  @include cp-badge-style($yellow, 'Yellow');
+  &__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: pxToRem(6);
+    padding: pxToRem(1);
+    border-radius: 100%;
+    color: inherit;
 
-  &--isYellow#{&}--isSolid {
-    color: darken($yellow, 20);
+    &:hover,
+    &:focus-visible {
+      color: $neutral-light;
+      background-color: $neutral-dark;
+    }
 
-    &:before {
-      background-color: darken($yellow, 20);
+    &:focus {
+      outline: none !important;
     }
   }
 }

package/src/components/core/playground-sections/SectionAtomicElements.vue

@@ -1,15 +1,16 @@
 <template>
-  <section-container section-title="Toggles" class="sectionAtomicElements">
+  <section-container section-title="Atomic elements" class="sectionAtomicElements">
     <div class="item">
       <h3>Badge</h3>
       <div class="sectionAtomicElements__badges">
         <cp-badge
-          v-for="{ color, label, icon, plain, solid } in badgeList"
+          v-for="{ color, label, icon, plain, solid, clear } in badgeList"
           :key="color"
           :color="color"
           :icon="icon"
           :is-plain="plain"
           :is-solid="solid"
+          :is-clearable="clear"
           class="sectionAtomicElements__badge"
         >
           {{ label }}
@@ -31,11 +32,12 @@ export default {
       badgeList: [
         {
           color: '',
-          label: 'Default plain',
+          label: 'Default plain clearable',
+          clear: true,
         },
         {
           color: '',
-          label: 'Default plain',
+          label: 'Default plain w/ icon',
           icon: 'copy',
         },
         {
@@ -44,27 +46,29 @@ export default {
         },
         {
           color: 'green',
-          label: 'Processed',
+          label: 'Solid green clearable',
           solid: true,
+          clear: true,
         },
         {
           color: 'red',
-          label: 'Aborted',
+          label: 'Default red',
+          icon: 'copy',
         },
         {
           color: 'blue',
-          label: 'In Progress',
+          label: 'Default blue clearable',
+          clear: true,
         },
         {
           color: 'purple',
-          label: 'trial',
+          label: 'Solid purple w/ icon',
           icon: 'copy',
           solid: true,
         },
       ],
     }
   },
-  methods: {},
 }
 </script>
 
@@ -72,11 +76,8 @@ export default {
 .sectionAtomicElements {
   &__badges {
     display: flex;
-    margin: pxToRem(-4);
-  }
-
-  &__badge {
-    margin: pxToRem(4);
+    flex-wrap: wrap;
+    gap: $space;
   }
 }
 </style>

package/src/components/core/playground-sections/SectionContainer.vue

@@ -33,7 +33,6 @@ export default {
 
   .item {
     width: 100%;
-    max-width: 600px;
     margin-bottom: 20px;
     display: flex;
     flex-direction: column;