@citizenplane/pimp 6.5.2 → 6.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "6.5.2",
+  "version": "6.6.0",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "vue-cli-service lint",
@@ -36,14 +36,8 @@
     "babel-jest": "^27.2.5",
     "eslint": "^6.2.1",
     "eslint-config-prettier": "^6.15.0",
-    "eslint-config-standard": ">=16.0.3",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": ">=2.25.2",
     "eslint-plugin-jest": ">=25.0.5",
-    "eslint-plugin-node": ">=9.1.0",
     "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-promise": ">=4.3.1",
-    "eslint-plugin-standard": ">=5.0.0",
     "eslint-plugin-vue": "^7.19.1",
     "portal-vue": "^2.1.7",
     "prettier": "^2.4.1",

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

@@ -1,15 +1,23 @@
 <template>
   <div class="cpBadge" :class="computedClasses">
     <span class="cpBadge__label">{{ label }}</span>
+    <button v-if="isClearable" class="cpBadge__clear" type="button" @click="onClear">
+      <x-icon class="cpBadge__icon" />
+    </button>
   </div>
 </template>
 
 <script>
+import { XIcon } from 'vue-feather-icons'
+
 import { capitalizeFirstLetter } from '@/helpers'
 
 const badgeColors = ['neutral', 'blue', 'green', 'red', 'orange', 'purple', 'teal', 'pink', 'yellow']
 
 export default {
+  components: {
+    XIcon,
+  },
   props: {
     color: {
       type: String,
@@ -25,12 +33,14 @@ export default {
     isSolid: {
       type: Boolean,
       default: false,
-      required: false,
     },
     isPlain: {
       type: Boolean,
       default: false,
-      required: false,
+    },
+    isClearable: {
+      type: Boolean,
+      default: false,
     },
   },
   computed: {
@@ -39,12 +49,20 @@ export default {
     },
     computedClasses() {
       return [
-        this.isSolid ? 'cpBadge--isSolid' : '',
-        this.isPlain ? 'cpBadge--isPlain' : '',
+        {
+          'cpBadge--isSolid': this.isSolid,
+          'cpBadge--isPlain': this.isPlain,
+          'cpBadge--isClearable': this.isClearable,
+        },
         `cpBadge--is${this.capitalizedColor}`,
       ]
     },
   },
+  methods: {
+    onClear() {
+      this.$emit('on-clear')
+    },
+  },
 }
 </script>
 
@@ -60,68 +78,44 @@ export default {
 
 @mixin cp-badge-color-solid($color) {
   background-color: $color;
-  color: $neutral-light;
 
-  &:before {
-    background-color: $neutral-light;
+  .cpBadge__clear:hover,
+  .cpBadge__clear:focus-visible {
+    color: $color;
   }
 }
 
 @mixin cp-badge-style($color, $className) {
   &--is#{$className} {
     @include cp-badge-color-default($color);
+
+    &:not(.cpBadge--isSolid) .cpBadge__clear:hover,
+    &:not(.cpBadge--isSolid) .cpBadge__clear:focus-visible {
+      background-color: $color;
+    }
   }
 
   &--is#{$className}#{&}--isSolid {
     @include cp-badge-color-solid($color);
   }
-
-  &--is#{$className}#{&}--isPlain {
-    &:before {
-      content: none;
-    }
-  }
 }
 
 .cpBadge {
   display: inline-flex;
   align-items: center;
-  padding: pxToRem(4) pxToRem(8);
+  padding-block: $space-sm;
   font-size: pxToEm(14);
-  text-transform: capitalize;
   font-weight: 500;
   border-radius: pxToRem(1000);
 
-  &::before {
-    content: '';
-    width: pxToRem(6);
-    height: pxToRem(6);
-    margin-right: pxToRem(6);
-    border-radius: 100%;
-    flex-shrink: 0;
-  }
-
-  &__label {
-    flex: 1;
-    @extend %u-text-ellipsis;
-  }
-
   @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 {
@@ -131,5 +125,56 @@ export default {
       background-color: darken($yellow, 20);
     }
   }
+
+  &--isSolid {
+    color: $neutral-light;
+
+    &:before {
+      background-color: $neutral-light;
+    }
+  }
+
+  &:not(&--isClearable) {
+    padding-inline: $space;
+  }
+
+  &--isClearable {
+    padding-left: $space;
+    padding-right: $space-sm;
+  }
+
+  &:not(&--isPlain)::before {
+    content: '';
+    width: pxToEm(6);
+    height: pxToEm(6);
+    margin-right: pxToRem(6);
+    border-radius: 100%;
+    flex-shrink: 0;
+  }
+
+  &__label {
+    @extend %u-text-ellipsis;
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__clear {
+    margin-left: pxToRem(6);
+    padding: pxToRem(1);
+    border-radius: 100%;
+    color: inherit;
+
+    &:hover,
+    &:focus-visible {
+      background-color: $neutral-light;
+      color: $neutral-light;
+    }
+  }
+
+  &__icon {
+    width: pxToEm(16);
+    height: pxToEm(16);
+    stroke-width: pxToRem(3);
+  }
 }
 </style>

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

@@ -4,11 +4,14 @@
       <h3>Badge</h3>
       <div class="sectionAtomicElements__badges">
         <cp-badge
-          v-for="{ color, label } in badgeList"
+          v-for="{ color, label, clear, plain, solid } in badgeList"
           :key="label"
           :color="color"
           :label="label"
           class="sectionAtomicElements__badge"
+          :is-clearable="clear"
+          :is-plain="plain"
+          :is-solid="solid"
         />
       </div>
     </div>
@@ -31,20 +34,29 @@ export default {
         },
         {
           color: 'green',
-          label: 'Processed',
+          label: 'Green solid clearable',
+          solid: true,
+          clear: true,
         },
         {
           color: 'red',
-          label: 'Aborted',
+          label: 'Red clearable',
+          clear: true,
         },
         {
           color: 'blue',
-          label: 'In Progress',
+          label: 'Blue plain',
+          plain: true,
         },
         {
           color: 'purple',
           label: 'trial',
         },
+        {
+          color: 'yellow',
+          label: 'yellow solid',
+          solid: true,
+        },
       ],
     }
   },