@citizenplane/pimp 6.4.0 → 7.0.4

package/src/components/selects/CpSelectMenu/index.vue

@@ -2,17 +2,21 @@
   <div v-click-outside="closeDropdown" class="cpSelectMenu">
     <button class="cpSelectMenu__button" type="button" @click="toggleDropdown">
       <span class="cpSelectMenu__label">{{ selectedValue.label }}</span>
-      <chevron-down-icon :class="{ 'cpSelectMenu__icon--isOpened': isDropdownOpen }" class="cpSelectMenu__icon" />
+      <cp-icon
+        type="chevron-down"
+        :class="{ 'cpSelectMenu__icon--isOpened': isDropdownOpen }"
+        class="cpSelectMenu__icon"
+      />
     </button>
     <transition @enter="enter">
       <div v-if="isDropdownOpen" ref="dropdownRef" class="cpSelectMenu__dropdown dropdown">
         <p v-if="dropdownTitle" class="dropdown__title">
           {{ dropdownTitle }}
-          <button type="button" @click="closeDropdown"><x-icon /></button>
+          <button type="button" @click="closeDropdown"><cp-icon type="x" /></button>
         </p>
         <div class="dropdown__list">
           <label v-if="hasFilter" class="dropdown__filterBar">
-            <search-icon />
+            <cp-icon type="search" />
             <input
               ref="dropdownFilterRef"
               type="text"
@@ -30,7 +34,7 @@
                   :type="inputType"
                   @change="onChange({ value, label })"
                 />
-                <check-icon v-if="isSelectedValue(value)" class="dropdown__icon" />
+                <cp-icon v-if="isSelectedValue(value)" type="check" class="dropdown__icon" />
                 {{ label }}
               </label>
             </li>
@@ -44,19 +48,8 @@
 
 <script>
 import anime from 'animejs'
-import vClickOutside from 'v-click-outside'
-import { ChevronDownIcon, CheckIcon, XIcon, SearchIcon } from 'vue-feather-icons'
 
 export default {
-  components: {
-    ChevronDownIcon,
-    CheckIcon,
-    XIcon,
-    SearchIcon,
-  },
-  directives: {
-    clickOutside: vClickOutside.directive,
-  },
   props: {
     values: {
       type: Array,
@@ -99,6 +92,7 @@ export default {
       required: false,
     },
   },
+  emits: ['update:selectedValue', 'on-close', 'on-filter-change'],
   data() {
     return {
       isDropdownOpen: false,
@@ -136,7 +130,7 @@ export default {
       this.$emit('on-close')
     },
     onChange(value) {
-      value.value !== this.selectedValue.value && this.$emit('input', value)
+      value.value !== this.selectedValue.value && this.$emit('update:selectedValue', value)
       this.closeOnSelect && this.closeDropdown()
     },
     updateFilterValue(event) {
@@ -226,10 +220,6 @@ export default {
       white-space: normal;
       font-weight: 600;
       color: $neutral-dark;
-
-      svg {
-        stroke: $neutral-dark;
-      }
     }
 
     &__filterBar {
@@ -250,9 +240,9 @@ export default {
         }
       }
 
-      & > svg {
+      i {
         margin-right: pxToEm(8);
-        stroke: $neutral-dark;
+        color: $neutral-dark;
         flex-shrink: 0;
       }
     }
@@ -297,7 +287,7 @@ export default {
       left: pxToEm(8);
       top: 50%;
       transform: translateY(-50%);
-      stroke: $secondary-color;
+      color: $secondary-color;
     }
 
     &__emptyState {

package/src/components/toggles/CpCheckbox/index.scss

@@ -49,7 +49,7 @@ $cp-checkbox-tick-base-width: pxToEm(14);
     cursor: pointer;
     transition: background-color 0.1s ease-out, transform 0.1s linear;
 
-    & + svg {
+    & + i {
       position: absolute;
       z-index: 2;
       top: 50%;
@@ -57,13 +57,16 @@ $cp-checkbox-tick-base-width: pxToEm(14);
       transform: translateY(-50%);
       width: $cp-checkbox-tick-base-width;
       height: $cp-checkbox-tick-base-width;
-      stroke: $neutral-light;
-      stroke-width: 3;
+      color: $neutral-light;
       opacity: 0;
       transition: opacity 0.2s linear 0.1s;
     }
 
-    &:checked + svg {
+    & + i svg {
+      stroke-width: 3;
+    }
+
+    &:checked + i {
       visibility: visible;
       opacity: 1;
     }
@@ -102,7 +105,7 @@ $cp-checkbox-tick-base-width: pxToEm(14);
       grid-row: 1;
     }
 
-    input + svg {
+    input + i {
       left: auto;
       right: calc(#{math.div($cp-checkbox-base-width, 2)} - #{math.div($cp-checkbox-tick-base-width, 2)});
     }

package/src/components/toggles/CpCheckbox/index.vue

@@ -10,7 +10,7 @@
       :autofocus="autofocus"
       @change="onChange(checkboxValue)"
     />
-    <check-icon />
+    <cp-icon type="check" />
     <span class="cpCheckbox__label" :class="{ 'cpCheckbox__label--isCapitalized': capitalizeLabel }">
       {{ checkboxLabel }}
     </span>
@@ -18,15 +18,10 @@
 </template>
 
 <script>
-import { CheckIcon } from 'vue-feather-icons'
-
 import { capitalizeFirstLetter, randomString } from '@/helpers'
 import { ToggleColors } from '@/constants'
 
 export default {
-  components: {
-    CheckIcon,
-  },
   props: {
     value: {
       type: [Array, Boolean],
@@ -73,6 +68,7 @@ export default {
       default: false,
     },
   },
+  emits: ['update:value'],
   data() {
     return {
       checkedProxy: false,
@@ -106,7 +102,7 @@ export default {
   },
   methods: {
     onChange() {
-      this.$emit('input', this.checkedProxy)
+      this.$emit('update:value', this.checkedProxy)
     },
   },
 }

package/src/components/toggles/CpRadio/index.scss

@@ -2,7 +2,6 @@
 @import "src/assets/styles/main";
 
 $cp-radio-base-width: pxToEm(20);
-$cp-radio-tick-base-width: pxToEm(8);
 
 @mixin cp-radio-style($color, $className) {
   &--is#{$className}#{&}--isActive {
@@ -40,16 +39,24 @@ $cp-radio-tick-base-width: pxToEm(8);
   grid-template-columns: min-content 1fr;
   grid-gap: $space-md;
   align-items: center;
-  cursor: pointer;
+
+  &:not(#{&}--isDisabled),
+  &:not(#{&}--isDisabled) * {
+    cursor: pointer;
+  }
 
   @include cp-radio-style($secondary-color, 'Blue');
   @include cp-radio-style($primary-color, 'Purple');
 
   &--isDisabled {
     background-color: $neutral-light-1;
-    cursor: not-allowed;
     color: $neutral-dark-1;
 
+    &,
+    * {
+      cursor: not-allowed;
+    }
+
     &:hover,
     &:focus {
       box-shadow: none;
@@ -72,24 +79,20 @@ $cp-radio-tick-base-width: pxToEm(8);
     appearance: none;
     border: pxToRem(1) solid $neutral-dark-4;
     border-radius: 100%;
+    padding: 25%;
     width: $cp-radio-base-width;
     height: $cp-radio-base-width;
-    flex-shrink: 0;
-    display: grid;
-    place-items: center;
-    cursor: pointer;
     transition: transform 0.1s linear;
 
     &:before {
       content: "";
-      display: block;
-      width: $cp-radio-tick-base-width;
-      height: $cp-radio-tick-base-width;
+      display: flex;
+      width: 100%;
+      height: 100%;
       border-radius: 100%;
       background-color: $neutral-light;
       transition: transform 0.15s linear;
       transform: scale(0);
-      transform-origin: center;
     }
 
     &:active:not(:disabled) {

package/src/components/toggles/CpRadio/index.vue

@@ -1,19 +1,25 @@
 <template>
-  <label :class="computedClasses" class="cpRadio" :for="radioUniqueId">
+  <label
+    v-for="({ label, value, description, additionalData, disabled }, index) in options"
+    :key="getRadioId(index)"
+    :class="computedClasses({ value, disabled })"
+    class="cpRadio"
+    :for="getRadioId(index)"
+  >
     <input
-      :id="radioUniqueId"
-      :checked="isSelected"
-      :value="radioValue"
-      :disabled="isDisabled"
+      :id="getRadioId(index)"
+      :checked="isActive(value)"
+      :value="value"
+      :disabled="disabled"
       type="radio"
       :autofocus="autofocus"
       :name="groupName"
-      @change="onChange(radioValue)"
+      @input="onChange(value)"
     />
     <span class="cpRadio__content">
       <span class="cpRadio__information">
-        <span class="cpRadio__label">{{ radioLabel }}</span>
-        <span v-if="radioDescription" class="cpRadio__description">{{ radioDescription }}</span>
+        <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>
@@ -26,36 +32,15 @@ import { ToggleColors } from '@/constants'
 
 export default {
   props: {
-    radioValue: {
+    modelValue: {
       type: String,
       default: '',
       required: true,
     },
-    radioLabel: {
-      type: String,
-      default: '',
+    options: {
+      type: Array,
       required: true,
     },
-    radioDescription: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    additionalData: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    isSelected: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
     groupName: {
       type: String,
       default: '',
@@ -73,31 +58,33 @@ export default {
       default: false,
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       radioUniqueId: '',
     }
   },
-  computed: {
-    capitalizedColor() {
-      return capitalizeFirstLetter(this.color)
-    },
-    computedClasses() {
-      return [
-        {
-          'cpRadio--isActive': this.isSelected,
-          'cpRadio--isDisabled': this.isDisabled,
-        },
-        `cpRadio--is${this.capitalizedColor}`,
-      ]
-    },
-  },
   mounted() {
     this.radioUniqueId = randomString()
   },
   methods: {
     onChange(value) {
-      this.$emit('input', value)
+      this.$emit('update:modelValue', value)
+    },
+    getRadioId(index) {
+      return `${this.radioUniqueId}${index}`
+    },
+    isActive(value) {
+      return value === this.modelValue
+    },
+    computedClasses({ value, disabled }) {
+      return [
+        {
+          'cpRadio--isActive': this.isActive(value),
+          'cpRadio--isDisabled': disabled,
+        },
+        `cpRadio--is${capitalizeFirstLetter(this.color)}`,
+      ]
     },
   },
 }

package/src/components/toggles/CpSwitch/index.vue

@@ -4,15 +4,15 @@
       <input
         :id="switchUniqueId"
         :disabled="disabled"
-        :checked="value"
-        :value="value"
+        :checked="modelValue"
+        :value="modelValue"
         type="checkbox"
         :name="groupName"
         :autofocus="autofocus"
-        @change="handleClick(value)"
+        @change="handleClick(modelValue)"
       />
       <span class="cpSwitch__icon">
-        <check-icon />
+        <cp-icon type="check" />
       </span>
       <span class="cpSwitch__knobContainer">
         <span class="cpSwitch__knob" />
@@ -23,17 +23,12 @@
 </template>
 
 <script>
-import { CheckIcon } from 'vue-feather-icons'
-
 import { capitalizeFirstLetter, randomString } from '@/helpers'
 import { ToggleColors } from '@/constants'
 
 export default {
-  components: {
-    CheckIcon,
-  },
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       default: null,
     },
@@ -67,6 +62,7 @@ export default {
       default: false,
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       switchUniqueId: '',
@@ -80,7 +76,7 @@ export default {
       return [
         {
           'cpSwitch--hasLabel': this.label,
-          'cpSwitch--isActive': this.value,
+          'cpSwitch--isActive': this.modelValue,
           'cpSwitch--isDisabled': this.disabled,
           'cpSwitch--isReversed': this.reverseLabel,
         },
@@ -93,7 +89,7 @@ export default {
   },
   methods: {
     handleClick(value) {
-      this.$emit('input', !value)
+      this.$emit('update:modelValue', !value)
     },
   },
 }
@@ -170,7 +166,8 @@ export default {
 
   &--isActive .cpSwitch {
     &__icon {
-      transform: translateY(-50%) scale(1);
+      transform: translateY(-50%);
+      opacity: 1;
     }
 
     &__knobContainer {
@@ -210,18 +207,22 @@ export default {
     position: absolute;
     left: 0;
     top: 50%;
-    transform: translateY(-50%) scale(0);
+    transform: translateY(-50%);
+    opacity: 0;
     padding-left: pxToRem(4);
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.175) 0.08s;
+    transition: opacity 0.12s ease-in;
     width: $cp-switch-base-height;
     height: $cp-switch-base-height;
 
-    & > svg {
+    i {
       width: 80%;
-      height: auto;
+    }
+
+    svg {
+      width: 100%;
       stroke-width: 3;
       color: $neutral-light;
     }

package/src/components/typography/CpHeading/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div :is="headingLevel" :class="`cpHeading--${size}`" class="cpHeading">
+  <component :is="$props.headingLevel" v-bind="$attrs" :class="`cpHeading--${size}`" class="cpHeading">
     <slot />
-  </div>
+  </component>
 </template>
 
 <script>

package/src/components/visual/CpIcon.vue

@@ -0,0 +1,156 @@
+<script>
+import { defineComponent, h, watch } from 'vue'
+import * as feather from 'feather-icons'
+
+export default defineComponent({
+  name: 'CpIcon',
+  props: {
+    animation: {
+      type: String,
+      default: undefined,
+    },
+
+    animationSpeed: {
+      type: String,
+      default: undefined,
+    },
+
+    fill: {
+      type: String,
+      default: 'none',
+    },
+
+    size: {
+      type: [Number, String],
+      default: 24,
+    },
+
+    stroke: {
+      type: String,
+      default: 'currentColor',
+    },
+
+    strokeLinecap: {
+      type: String,
+      default: 'round',
+    },
+
+    strokeLinejoin: {
+      type: String,
+      default: 'round',
+    },
+
+    strokeWidth: {
+      type: [Number, String],
+      default: 2,
+    },
+
+    tag: {
+      type: String,
+      default: 'i',
+    },
+
+    type: {
+      type: String,
+      default: 'feather',
+      validator(type) {
+        if (!feather) {
+          throw new Error('The Feather icons is required.')
+        }
+
+        if (!feather.icons[type]) {
+          throw new Error(`"${type}" is not an available icon type.`)
+        }
+
+        return true
+      },
+    },
+  },
+  setup(props, { attrs }) {
+    let icon = feather.icons[props.type]
+
+    watch(
+      () => props.type,
+      () => {
+        icon = feather.icons[props.type]
+      },
+    )
+
+    return () =>
+      h(
+        props.tag,
+
+        {
+          ...attrs,
+          'data-name': props.type,
+          'data-tags': icon.tags,
+          'data-type': props.type,
+          class: {
+            featherIcon: true,
+            [`cpIcon--${props.type}`]: props.type,
+            [`cpIcon--${props.animation}`]: props.animation,
+            [`cpIcon--${props.animationSpeed}`]: props.animationSpeed,
+          },
+        },
+
+        [
+          h(
+            'svg',
+
+            {
+              ...icon.attrs,
+              fill: props.fill,
+              height: props.size,
+              stroke: props.stroke,
+              'stroke-linecap': props.strokeLinecap,
+              'stroke-linejoin': props.strokeLinejoin,
+              'stroke-width': props.strokeWidth,
+              width: props.size,
+              class: [icon.attrs.class, 'cpIcon__content'],
+              innerHTML: icon.contents,
+            },
+          ),
+        ],
+      )
+  },
+})
+</script>
+
+<style lang="scss">
+@keyframes cpIcon--spin {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.cpIcon {
+  display: inline-block;
+  overflow: hidden;
+
+  &--spin {
+    animation: cpIcon--spin 2s linear infinite;
+  }
+
+  &--pulse {
+    animation: cpIcon--spin 2s infinite steps(8);
+  }
+
+  &--slow {
+    animation-duration: 3s;
+  }
+
+  &--fast {
+    animation-duration: 1s;
+  }
+
+  &__content {
+    display: block;
+    height: inherit;
+    width: inherit;
+  }
+}
+</style>

package/src/directives/ClickOutside.js

@@ -0,0 +1,13 @@
+export default {
+  beforeMount(el, binding) {
+    el.clickOutsideEvent = function (event) {
+      if (!(el === event.target || el.contains(event.target))) {
+        binding.value(event, el)
+      }
+    }
+    document.body.addEventListener('click', el.clickOutsideEvent)
+  },
+  unmounted(el) {
+    document.body.removeEventListener('click', el.clickOutsideEvent)
+  },
+}

package/src/directives/ResizeSelect.js

@@ -3,7 +3,7 @@ export default {
   inserted: resizeSelect,
 }
 
-function resizeSelect(el, binding, vnode) {
+function resizeSelect(el) {
   const select = document.createElement('select')
   select.className = el.className
   const option = document.createElement('option')