@citizenplane/pimp 8.0.0 → 8.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",
@@ -25,32 +25,32 @@
     }
   },
   "dependencies": {
-    "vue": "^3.2.26",
+    "vue": "^3.2.29",
     "animejs": "^3.2.0",
-    "core-js": "^3.20.1",
+    "core-js": "^3.20.3",
     "feather-icons": "^4.28.0",
-    "luxon": "^2.2.0",
+    "luxon": "^2.3.0",
     "maska": "^1.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@vitejs/plugin-vue": "^2.0.1",
+    "@babel/core": "^7.16.12",
+    "@vitejs/plugin-vue": "^2.1.0",
     "@vue/babel-preset-app": "^4.5.15",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/test-utils": "^2.0.0-rc.18",
     "babel-core": "^7.0.0-bridge.0",
-    "eslint": "^8.5.0",
+    "eslint": "^8.7.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.4.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
-    "lint-staged": "^12.1.4",
+    "lint-staged": "^12.3.2",
     "prettier": "^2.5.1",
-    "sass": "~1.45.1",
+    "sass": "~1.49.0",
     "sass-loader": "^12.4.0",
     "stylus": "^0.56.0",
     "stylus-loader": "^3.0.2",
-    "vite": "^2.7.7",
+    "vite": "^2.7.13",
     "vue-jest": "^5.0.0-alpha.10"
   }
 }

package/src/assets/styles/lib/_normalize.scss

@@ -214,30 +214,6 @@ button:-moz-focusring,
   outline: 1px dotted ButtonText;
 }
 
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */

package/src/assets/styles/variables/_colors.scss

@@ -6,7 +6,7 @@ $gray-3: #c6c6ce;
 $gray-4: #d8d8de;
 $gray-5: #ececef;
 
-$red: #fc5959;
+$red: #eb0505;
 $orange: #ffa800;
 $yellow: #ffd00b;
 $green-2: #00c582;

package/src/components/buttons/CpButton.vue

@@ -200,7 +200,7 @@ export default {
   padding: pxToEm(12) pxToEm(16);
   min-width: 10ch;
   height: $component-size-default;
-  font-size: pxToRem(16);
+  font-size: inherit;
   line-height: 1.1;
   text-decoration: none;
   color: $neutral-dark;

package/src/components/core/BaseInputLabel/index.vue

@@ -19,7 +19,6 @@ export default {
 
 <style lang="scss">
 .baseInputLabel {
-  padding: pxToEm(6) 0;
   display: block;
   font-size: pxToEm(14);
   color: $neutral-dark;

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

@@ -5,7 +5,7 @@
         Default date input: {{ cpDate }}
       </cp-heading>
       <div class="sectionDatePickers__datepickers">
-        <cp-date v-model="cpDate" label="Default date input" class="sectionDatePickers__date" />
+        <cp-date v-model="cpDate" label="Default date input" class="sectionDatePickers__date" :is-invalid="false" />
       </div>
     </div>
     <div class="sectionDatePickers__type">
@@ -18,7 +18,7 @@
       </div>
       <div class="sectionDatePickers__datepickers">
         <div class="sectionDatePickers__wrapper">
-          <cp-input input-id="datepicker-trigger" label="CoreDatepicker" placeholder="CoreDatepicker" />
+          <cp-input id="datepicker-trigger" label="CoreDatepicker" placeholder="CoreDatepicker" />
           <cp-core-datepicker
             class="sectionDatePickers__custom"
             mode="range"

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

@@ -70,7 +70,12 @@
     <div class="sectionSimpleInputs__type">
       <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Disabled</cp-heading>
       <div class="sectionSimpleInputs__inputs">
-        <cp-input label="Empty disabled input with icon before" type="text" placeholder="Input placeholder" disabled>
+        <cp-input
+          label="Empty disabled input with icon before"
+          type="text"
+          placeholder="Input placeholder"
+          :disabled="true"
+        >
           <template #input-icon><cp-icon type="map-pin" /></template>
         </cp-input>
         <cp-input

package/src/components/date-pickers/CpCalendar.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="cpCalendar">
     <cp-input
+      :id="triggerElementId"
       type="text"
-      :input-id="triggerElementId"
       :model-value="humanDateFormat(dateOne, dateTwo)"
       placeholder="Select a date"
       :is-invalid="isError"

package/src/components/date-pickers/CpDate.vue

@@ -5,22 +5,26 @@
     </label>
     <div class="cpDate__inputs">
       <input
-        ref="day"
         v-model="day"
+        v-maska="'##'"
         placeholder="DD"
         class="cpDate__day"
-        type="number"
         inputmode="numeric"
-        :min="1"
-        :max="31"
         maxlength="2"
         :required="required"
         :disabled="disabled"
+        :autocomplete="autocompleteFields.day"
       />
       <div class="cpDate__divider" />
       <div class="cpDate__month" :class="selectDynamicClass">
-        <select :id="cpDateId" v-model="month" :required="required" :disabled="disabled">
-          <option value disabled>Month</option>
+        <select
+          :id="cpDateId"
+          v-model="month"
+          :required="required"
+          :disabled="disabled"
+          :autocomplete="autocompleteFields.month"
+        >
+          <option value>Month</option>
           <option v-for="(monthItem, index) in months" :key="index" :value="monthItem.value">
             {{ monthItem.label }}
           </option>
@@ -28,21 +32,19 @@
       </div>
       <div class="cpDate__divider" />
       <input
-        ref="year"
         v-model="year"
+        v-maska="'####'"
         placeholder="YYYY"
         class="cpDate__year"
-        type="number"
         inputmode="numeric"
-        :min="minYear"
-        :max="maxYear"
         maxlength="4"
         :disabled="disabled"
         :required="required"
+        :autocomplete="autocompleteFields.year"
       />
     </div>
     <transition-expand>
-      <div v-if="!isDateValid" class="cpDate__errorMessage">{{ errorMessage }}</div>
+      <div v-if="advancedErrorMessage" class="cpDate__errorMessage">{{ advancedErrorMessage }}</div>
     </transition-expand>
   </div>
 </template>
@@ -80,6 +82,18 @@ export default {
       type: Boolean,
       default: false,
     },
+    isInvalid: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+    autocompleteBirthday: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'on-validation'],
   data() {
@@ -144,13 +158,16 @@ export default {
       return this.day === '' && this.month === '' && this.year === ''
     },
     isDateValid() {
-      if (!this.required && this.areInputsEmpty) return true
+      if (this.areInputsEmpty && !this.errorMessage) return true
 
-      const isValid =
-        this.isDayValid && this.isMonthValid && this.isYearValid && this.isDateBeforeMaxDate && this.isDateAfterMinDate
-      this.$emit('on-validation', isValid)
-
-      return isValid
+      return (
+        !this.isInvalid &&
+        this.isDayValid &&
+        this.isMonthValid &&
+        this.isYearValid &&
+        this.isDateBeforeMaxDate &&
+        this.isDateAfterMinDate
+      )
     },
     isDayValid() {
       return this.day >= 1 && this.day <= this.monthMaxDay
@@ -164,10 +181,10 @@ export default {
     areAllFieldsEmpty() {
       return !this.day && !this.month && !this.year
     },
-    errorMessage() {
-      if (this.areAllFieldsEmpty && this.required) {
-        return `The ${this.label} field is required.`
-      }
+    advancedErrorMessage() {
+      if (this.isDateValid) return ''
+
+      if (this.errorMessage) return this.errorMessage
 
       if (!this.isMonthValid) {
         return 'Month is required.'
@@ -204,6 +221,15 @@ export default {
         'cpDate__month--isEmpty': !this.month,
       }
     },
+    autocompleteFields() {
+      if (!this.autocompleteBirthday) return 'off'
+
+      return {
+        day: 'bday-day',
+        month: 'bday-month',
+        year: 'bday-year',
+      }
+    },
   },
   watch: {
     day() {
@@ -211,7 +237,6 @@ export default {
     },
     month() {
       this.handleUpdate()
-      this.focusOnFirstEmptyInput()
     },
     year() {
       this.handleUpdate()
@@ -224,17 +249,9 @@ export default {
       return DateTime.fromISO(this.modelValue)[token]
     },
     handleUpdate() {
-      const dateValue = this.isDateValid ? this.isoDate : 'Invalid Datetime'
+      this.$emit('update:modelValue', this.isoDate)
 
-      this.$emit('update:modelValue', dateValue)
-    },
-    focusOnFirstEmptyInput() {
-      if (!this.isDayValid) {
-        this.$refs.day.focus()
-        return
-      }
-
-      if (!this.isYearValid) this.$refs.year.focus()
+      this.$emit('on-validation', this.isDateValid)
     },
   },
 }
@@ -273,14 +290,14 @@ export default {
 .cpDate {
   input::placeholder,
   &__month--isEmpty {
-    color: $neutral-dark-1;
+    color: $neutral-dark;
   }
 
   &__label {
     display: flex;
     align-items: center;
-    margin: pxToRem(6) 0;
-    font-size: pxToRem(14);
+    margin-bottom: pxToEm(6);
+    font-size: pxToEm(14);
 
     svg {
       margin-left: $space-sm;
@@ -331,8 +348,8 @@ export default {
       position: absolute;
       top: 50%;
       right: pxToEm(12);
-      width: pxToRem(20);
-      height: pxToRem(20);
+      width: pxToEm(20);
+      height: pxToEm(20);
       background-image: url('@/assets/images/icons/chevron-down-icon.svg');
       background-size: cover;
       transform: translateY(-50%);
@@ -343,9 +360,14 @@ export default {
     select {
       @extend %u-text-ellipsis;
       width: 100%;
-      padding: pxToRem(12) pxToRem(40) pxToRem(12) pxToRem(12);
+      padding: pxToEm(12) pxToEm(40) pxToEm(12) pxToEm(12);
       color: inherit;
       cursor: pointer;
+
+      &:focus-visible {
+        text-decoration: underline;
+        font-weight: 500;
+      }
     }
 
     select > option:not(:disabled) {
@@ -395,7 +417,7 @@ export default {
     margin-top: pxToRem(6);
     color: $error-color;
     font-weight: 500;
-    font-size: pxToRem(14);
+    font-size: pxToEm(14);
   }
 }
 </style>

package/src/components/date-pickers/CpDatepicker.vue

@@ -2,9 +2,9 @@
   <div class="cpDatepicker">
     <cp-input
       v-show="!isInline"
+      :id="datePickerReferenceId"
       :model-value="inputComputedValue"
       type="text"
-      :input-id="datePickerReferenceId"
       :placeholder="placeholder"
       :is-invalid="isError"
       :error-message="errorMessage"

package/src/components/feedback-indicators/CpAlert.vue

@@ -19,6 +19,7 @@ export default {
     intent: {
       type: String,
       required: true,
+      default: Intent.INFO.value,
       validator(value) {
         const intentValues = Object.values(Intent).map((item) => item.value)
         return intentValues.includes(value)
@@ -78,7 +79,7 @@ export default {
   display: flex;
   align-items: flex-start;
   padding: pxToRem(10);
-  font-size: pxToRem(14);
+  font-size: pxToEm(14);
   border-radius: pxToRem(4);
   overflow: hidden;
 

package/src/components/inputs/CpInput.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="cpInput" :class="dynamicClasses" :aria-disabled="disabled" @click="focusOnInput">
-    <base-input-label v-if="label" :for="inputReferenceId"> {{ inputLabelTitle }}</base-input-label>
+  <div class="cpInput" :class="dynamicClasses" :aria-disabled="isDisabled" @click="focusOnInput">
+    <base-input-label v-if="label" :for="inputIdentifier" class="cpInput__label">
+      {{ inputLabelTitle }}
+    </base-input-label>
     <div
       ref="cpInputContainer"
       :class="{ 'cpInput__container--hasBeforeIcon': hasBeforeIcon }"
@@ -19,23 +21,21 @@
         <slot name="input-icon-after" />
       </div>
       <input
-        :id="inputReferenceId"
+        :id="inputIdentifier"
         v-maska="mask"
-        :disabled="disabled"
-        :name="name"
-        :placeholder="placeholder"
-        :readonly="readonly"
-        :required="required"
-        :autocomplete="autocomplete"
-        :inputmode="inputMode"
-        :type="type"
         :value="modelValue"
+        v-bind="restAttributes"
         class="cpInput__inner"
         @input="handleChange"
       />
     </div>
     <transition-expand>
-      <base-input-label v-if="isInputInvalid && errorMessage" :is-invalid="isInvalid" :for="inputReferenceId">
+      <base-input-label
+        v-if="isInputInvalid && errorMessage"
+        :is-invalid="isInvalid"
+        :for="inputIdentifier"
+        class="cpInput__label cpInput__label--isAfter"
+      >
         {{ errorMessage }}
       </base-input-label>
     </transition-expand>
@@ -43,27 +43,14 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
 import { randomString } from '@/helpers'
 
 import BaseInputLabel from '@/components/core/BaseInputLabel/index.vue'
 import CpIcon from '@/components/visual/CpIcon.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
-const inputTypesList = [
-  'text',
-  'date',
-  'datetime-local',
-  'email',
-  'month',
-  'number',
-  'password',
-  'search',
-  'tel',
-  'time',
-  'url',
-  'week',
-]
-
 export default {
   name: 'CpInput',
   components: {
@@ -71,6 +58,7 @@ export default {
     BaseInputLabel,
     TransitionExpand,
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number, Boolean],
@@ -80,46 +68,10 @@ export default {
       type: String,
       default: '',
     },
-    placeholder: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
     inputId: {
       type: String,
-      default: '',
-    },
-    type: {
-      type: String,
-      default: inputTypesList[0],
-      validator: (value) => {
-        return inputTypesList.includes(value)
-      },
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
       default: null,
     },
-    autocomplete: {
-      type: String,
-      default: 'on',
-    },
-    inputMode: {
-      type: String,
-      default: 'text',
-    },
     isInvalid: {
       type: Boolean,
       default: false,
@@ -146,18 +98,38 @@ export default {
     },
   },
   emits: ['update:modelValue'],
+  setup(props, { attrs }) {
+    // class is a reserved work, we can't remove 'class' property from attrs
+    // eslint-disable-next-line no-unused-vars
+    const { ['class']: value, id, ...restAttributes } = attrs
+    const inputIdentifier = id === undefined ? ref(randomString()) : id
+
+    return {
+      inputIdentifier,
+      restAttributes,
+    }
+  },
   data() {
     return {
-      inputReferenceId: this.inputId,
       isDOMElementValid: true,
     }
   },
   computed: {
+    isDisabled() {
+      return this.checkAttribute('disabled')
+    },
+    isRequired() {
+      return this.checkAttribute('required')
+    },
+    isReadonly() {
+      return this.checkAttribute('readonly')
+    },
     dynamicClasses() {
       return [
+        this.$attrs.class,
         {
           'cpInput--isInvalid': this.isInputInvalid,
-          'cpInput--isDisabled': this.disabled,
+          'cpInput--isDisabled': this.isDisabled,
           'cpInput--hasNoBorder': this.removeBorder,
           'cpInput--isLarge': this.isLarge,
         },
@@ -171,12 +143,14 @@ export default {
       }
     },
     inputLabelTitle() {
-      const requiredLabel = this.required && this.label ? '*' : ''
+      if (this.label === '') return ''
+
+      const requiredMark = this.isRequired ? '*' : ''
 
-      return `${this.label} ${requiredLabel}`
+      return `${this.label} ${requiredMark}`
     },
     isValid() {
-      return this.modelValue && !this.readonly && !this.isInvalid && this.isDOMElementValid
+      return this.modelValue && !this.isReadonly && !this.isInvalid && this.isDOMElementValid
     },
     isInputInvalid() {
       return this.isInvalid || !this.isDOMElementValid
@@ -188,15 +162,11 @@ export default {
       return !!this.$slots['input-icon-after']
     },
     DOMElement() {
-      return this.$refs.cpInputContainer.children.namedItem(this.inputReferenceId)
+      return this.$refs.cpInputContainer.children.namedItem(this.inputIdentifier)
     },
   },
   mounted() {
-    if (!this.inputReferenceId) this.inputReferenceId = randomString()
-
-    this.$nextTick(() => {
-      this.checkInputValidity()
-    })
+    this.$nextTick(() => this.checkInputValidity())
   },
   methods: {
     handleChange(e) {
@@ -214,6 +184,9 @@ export default {
         (this.DOMElement.validity && this.DOMElement.validity.valid) ||
         (this.DOMElement.validity && this.DOMElement.validity.valueMissing)
     },
+    checkAttribute(attribute) {
+      return this.$attrs[attribute] === '' || this.$attrs[attribute] === true
+    },
   },
 }
 </script>
@@ -229,7 +202,6 @@ export default {
   position: relative;
   display: flex;
   flex-direction: column;
-  font-size: pxToRem(16);
 
   &__container {
     z-index: 1;
@@ -310,6 +282,18 @@ export default {
     box-shadow: none;
   }
 
+  &__label {
+    display: block;
+
+    &:not(#{&}--isAfter) {
+      margin-bottom: pxToEm(6);
+    }
+
+    &--isAfter {
+      margin-top: pxToEm(6);
+    }
+  }
+
   $cp-input-icon-size: pxToEm(20);
 
   &__icon {

package/src/components/inputs/CpTextarea.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="cpTextarea">
-    <base-input-label v-if="label" :for="inputReferenceId">
+    <base-input-label v-if="label" :for="inputReferenceId" class="cpTextarea__label">
       {{ inputLabelTitle }}
     </base-input-label>
     <textarea
@@ -15,7 +15,12 @@
       @input="handleChange"
     />
     <transition-expand>
-      <base-input-label v-if="isInvalid" :for="inputReferenceId" is-invalid>
+      <base-input-label
+        v-if="isInvalid"
+        :for="inputReferenceId"
+        is-invalid
+        class="cpTextarea__label cpTextarea__label--isAfter"
+      >
         {{ errorMessage }}
       </base-input-label>
     </transition-expand>
@@ -153,5 +158,17 @@ export default {
       }
     }
   }
+
+  &__label {
+    display: block;
+
+    &:not(#{&}--isAfter) {
+      margin-bottom: pxToEm(6);
+    }
+
+    &--isAfter {
+      margin-top: pxToEm(6);
+    }
+  }
 }
 </style>