@citizenplane/pimp 7.0.1 → 8.0.1

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "7.0.1",
+  "version": "8.0.1",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "format": "prettier .  --write",
     "test": "jest tests"
   },
-  "main": "dist/pimp.common.js",
   "files": [
     "dist/*",
     "src/*",
@@ -17,33 +16,41 @@
     "*.json",
     "*.js"
   ],
+  "main": "./dist/pimp.umd.js",
+  "module": "./dist/pimp.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/pimp.es.js",
+      "require": "./dist/pimp.umd.js"
+    }
+  },
   "dependencies": {
-    "vue": "^3.1.0",
+    "vue": "^3.2.29",
     "animejs": "^3.2.0",
-    "core-js": "^3.18.1",
+    "core-js": "^3.20.3",
     "feather-icons": "^4.28.0",
-    "luxon": "^2.0.2",
-    "maska": "^1.4.6"
+    "luxon": "^2.3.0",
+    "maska": "^1.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@vitejs/plugin-vue": "^1.9.2",
-    "@vue/babel-preset-app": "^4.5.14",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^2.0.0-rc.16",
+    "@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": "^7.32.0",
+    "eslint": "^8.7.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.18.0",
+    "eslint-plugin-vue": "^8.4.0",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
-    "lint-staged": "^11.2.4",
-    "prettier": "^2.4.1",
-    "sass": "~1.42.1",
-    "sass-loader": "^10.1.1",
-    "stylus": "^0.55.0",
+    "lint-staged": "^12.3.2",
+    "prettier": "^2.5.1",
+    "sass": "~1.49.0",
+    "sass-loader": "^12.4.0",
+    "stylus": "^0.56.0",
     "stylus-loader": "^3.0.2",
-    "vite": "^2.6.0",
+    "vite": "^2.7.13",
     "vue-jest": "^5.0.0-alpha.10"
   }
 }

package/src/App.vue

@@ -38,7 +38,6 @@ import SectionFeedbackIndicators from './components/core/playground-sections/Sec
 import SectionListsAndTables from './components/core/playground-sections/SectionListsAndTables.vue'
 
 export default {
-  name: 'Pimp',
   components: {
     PimpLogo,
     SectionAtomicElements,

package/src/README.md

@@ -1,29 +1,36 @@
 # Developing
+
 You're a maintainer of Pimp, and a member of CitizenPlane engineering team? **Here's how you can help**.
 
 Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
 
 There is 4 different ways you can contribute & improve Pimp components library. These mostly follow [Semantic Versioning](https://docs.npmjs.com/about-semantic-versioning) convention:
+
 - 🌟 Major update: changes that break backward compatibility
 - 💅 Minor update: backward compatible new features
 - 🐛 Patch update: backward compatible bug fixes
 - 📚 Documentation update: make the documentation up-to-date with last releases
 
-These 4 different contributions have their own specific processes that will be described in the following sections. 
+These 4 different contributions have their own specific processes that will be described in the following sections.
 
-> ℹ️ Components library and documentation updates are done independently. You can't include both updates in the same merge request. It should be done one after the other.  
+> ℹ️ Components library and documentation updates are done independently. You can't include both updates in the same merge request. It should be done one after the other.
 
 ## Contribution types
+
 ### 🌟 Major update
+
 Your update is a major one if your changes break the previous version.
 
-> 💡 If your changes need a documentation update (new component, updated props), add a ticket in the [Product Roadmap on Notion](https://www.notion.so/citizenplane/e23d1b492dc04c85be2416102634e3b5?v=c7ff85f676f74b6ebf31989e56614518) that describes what to update. 
+> 💡 If your changes need a documentation update (new component, updated props), add a ticket in the [Product Roadmap on Notion](https://www.notion.so/citizenplane/e23d1b492dc04c85be2416102634e3b5?v=c7ff85f676f74b6ebf31989e56614518) that describes what to update.
 
 See the [release](#release) section for instructions on how to release properly the new package version
+
 ### 💅 Minor update
+
 You're doing a minor update if you want to add a new component to the library or improve an existing one.
 
 If you're adding a new component to the library, here is what you should do:
+
 1. Create the new `.vue` component in corresponding `/src` folder
 2. Add it to the `index.js` file, located in `~/src/components/index.js`
 3. Create a new component that materializes a new section in the playground, put it in `~/src/components/core/playgorund-sections`
@@ -33,16 +40,18 @@ If you're adding a new component to the library, here is what you should do:
 Once you're done with the implementation, see the [release](#release) section for instructions on how to release properly the new package version.
 
 > 💡 If your changes need a documentation update (new component, updated props), add a ticket in the [Product Roadmap on Notion](https://www.notion.so/citizenplane/e23d1b492dc04c85be2416102634e3b5?v=c7ff85f676f74b6ebf31989e56614518) that describes what to update.
- 
+
 See the [release](#release) section for instructions on how to release properly the new package version
 
 ### 🐛 Patch update
+
 Your update is a patch one if your changes concern a bug in the current version that needs to be fixed.
 
 See the [release](#release) section for instructions on how to release properly the new package version
 
 ### 📚 Documentation update
-Documentation update are done so developers who are using the `@citizenplane/pimp` package can use components without any pain. Contrarily to other updates types, this one happens in the `/docs` directory. 
+
+Documentation update are done so developers who are using the `@citizenplane/pimp` package can use components without any pain. Contrarily to other updates types, this one happens in the `/docs` directory.
 
 In order to run the documentation, move into `/docs` folder and run the `npm run dev` command.
 
@@ -57,8 +66,10 @@ Then, you can update the different sections that needs to.
 Once you've finished, create the corresponding MR and see the corresponding [release](#documentation-release) section
 
 ## Release
+
 ### Components release
-Once you've done your changes, you'll want to submit them via a new merge request. All the unit tests should pass and pipelines should be green. 
+
+Once you've done your changes, you'll want to submit them via a new merge request. All the unit tests should pass and pipelines should be green.
 
 When these are approved, you will merge your branch into `master`.
 
@@ -75,11 +86,12 @@ Once it's finished, you'll get the last version of the package.
 You'll be able to use last components updates just by upgrading the package in corresponding projects.
 
 ### Documentation release
-The release process is the classical one; when CI has passed, you can deploy to production the new documentation version.
 
+The release process is the classical one; when CI has passed, you can deploy to production the new documentation version.
 
 ## Visuals 🖼
-![Documentation mode](https://i.imgur.com/d5VbXFm.png) *Documentation mode*
+
+![Documentation mode](https://i.imgur.com/d5VbXFm.png) _Documentation mode_
 
 <details>
 <summary>Playground page, development mode</summary>
@@ -87,12 +99,14 @@ The release process is the classical one; when CI has passed, you can deploy to
 </details>
 
 ## Resources 📖
+
 - Vue.js style guide: [link](https://v3.vuejs.org/style-guide/#tightly-coupled-component-names-strongly-recommended)
 - Vue.js documentation: [link](https://vuejs.org/v2/guide/)
 - Notion epic ticket: [link](https://www.notion.so/citizenplane/Pimp-improvements-4b2b12e49aca466980066f7101db50ff)
-- Figma project: [link]( https://www.figma.com/file/GzZSPWxb0AOM0COc7IYHoXNn/%F0%9F%92%85-Pimp)
+- Figma project: [link](https://www.figma.com/file/GzZSPWxb0AOM0COc7IYHoXNn/%F0%9F%92%85-Pimp)
 - Tech team Notion documentation page: [link](https://www.notion.so/citizenplane/TECH-74cb42d97c254b64a564932c4bf40faa#7ddbdc9962e9473b8f480ccec508da1d)
 
 ## Maintainers 👷
+
 - Lead maintainer: @vincent
 - Other maintainers: @benoit, @alexis

package/src/assets/styles/base/_base.scss

@@ -7,9 +7,8 @@ html {
   /* border-box box model allows us to add padding and border to our elements without increasing their size */
   box-sizing: border-box;
   /* A system font stack so things load nice and quick! */
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol';
   font-size: 100%;
   color: $neutral-dark;
   -webkit-font-smoothing: antialiased;
@@ -36,7 +35,6 @@ body {
 }
 
 // Secondary Elements
-
 button {
   border-style: none;
   padding: 0;
@@ -45,17 +43,6 @@ button {
   &:hover {
     cursor: pointer;
   }
-
-  &:focus-visible {
-    outline: none !important;
-    box-shadow: 0 0 0 pxToEm(3) scale-color($secondary-color, $lightness: 80%);
-  }
-}
-
-a {
-  text-decoration: none;
-  -moz-appearance: none !important;
-  -webkit-appearance: none !important;
 }
 
 ul,

package/src/assets/styles/helpers/_functions.scss

@@ -1,5 +1,5 @@
 // Sass function to convert px into rem
-@use "sass:math";
+@use 'sass:math';
 
 // Defining base font size
 // The default font size for html is 16px

package/src/assets/styles/helpers/_keyframes.scss

@@ -10,6 +10,31 @@
   transform: scale(0.9);
 }
 
+// popover
+@mixin popover-desktop($transitionName) {
+  .#{$transitionName}-enter-active,
+  .#{$transitionName}-leave-active {
+    transition: 200ms cubic-bezier(0.175, 0.885, 0.32, 1.175);
+    transition-property: opacity, transform;
+  }
+
+  .#{$transitionName}-enter-from {
+    transform: scale(0.8);
+  }
+
+  .#{$transitionName}-enter-to {
+    transform: scale(1);
+  }
+
+  .#{$transitionName}-leave-to {
+    opacity: 0;
+  }
+
+  .#{$transitionName}-leave-from {
+    opacity: 1;
+  }
+}
+
 // Components
 // cp-select-menu
 @keyframes cp-select-menu-dropdown-enter {

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

@@ -164,7 +164,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -174,7 +175,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -183,9 +185,9 @@ select { /* 1 */
  */
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button;
 }
 
@@ -194,9 +196,9 @@ button,
  */
 
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
@@ -206,36 +208,12 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-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.
  */
@@ -257,8 +235,8 @@ textarea {
  * 2. Remove the padding in IE 10.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -267,8 +245,8 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -277,7 +255,7 @@ textarea {
  * 2. Correct the outline style in Safari.
  */
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -286,7 +264,7 @@ textarea {
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 

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

@@ -1,21 +1,21 @@
 // CitizenPlane colors
-$astronaut: #3E3E5B;
-$gray-1: #8B8B9D;
-$gray-2: #B2B2BD;
-$gray-3: #C6C6CE;
-$gray-4: #D8D8DE;
-$gray-5: #ECECEF;
+$astronaut: #3e3e5b;
+$gray-1: #8b8b9d;
+$gray-2: #b2b2bd;
+$gray-3: #c6c6ce;
+$gray-4: #d8d8de;
+$gray-5: #ececef;
 
-$red: #FC5959;
-$orange: #FFA800;
-$yellow: #FFD00B;
-$green-2: #00C582;
-$green-1: #00F8A4;
+$red: #eb0505;
+$orange: #ffa800;
+$yellow: #ffd00b;
+$green-2: #00c582;
+$green-1: #00f8a4;
 
-$purple: #5341F9;
-$blue: #144DC2;
-$blue-1: #56C1FE;
-$pink: #FF7DC1;
+$purple: #5341f9;
+$blue: #144dc2;
+$blue-1: #56c1fe;
+$pink: #ff7dc1;
 
 // Main colors
 $primary-color: $purple;
@@ -38,7 +38,7 @@ $neutral-dark-3: $gray-3;
 $neutral-dark-4: $gray-4;
 $neutral-dark-5: $gray-5;
 // White
-$neutral-light: #FFFFFF;
+$neutral-light: #ffffff;
 $neutral-light-1: #f8faff;
 
 // Border colors

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

@@ -1,4 +1,4 @@
-@import "../helpers/functions";
+@import '../helpers/functions';
 
 $component-size-default: pxToEm(44);
 $component-size-large: pxToEm(54);

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

@@ -1,5 +1,5 @@
-@use "sass:math";
-@import "../helpers/functions";
+@use 'sass:math';
+@import '../helpers/functions';
 
 $space: pxToRem(8);
 

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

@@ -1,6 +1,8 @@
 <template>
   <div class="cpBadge" :class="computedClasses">
-    <span class="cpBadge__label">{{ label }}</span>
+    <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>
   </div>
 </template>
 
@@ -13,14 +15,8 @@ export default {
   props: {
     color: {
       type: String,
-      required: true,
-      validator: (value) => {
-        return badgeColors.includes(value)
-      },
-    },
-    label: {
-      type: [String, Number],
-      required: true,
+      default: '',
+      validator: (value) => Object.values(badgeColors).includes(value) || value === '',
     },
     isSolid: {
       type: Boolean,
@@ -32,18 +28,29 @@ export default {
       default: false,
       required: false,
     },
+    icon: {
+      type: String,
+      default: '',
+      required: false,
+    },
   },
   computed: {
     capitalizedColor() {
       return capitalizeFirstLetter(this.color)
     },
     computedClasses() {
+      const hasIcon = this.icon !== '' || this.hasIconSlot
+
       return [
         this.isSolid ? 'cpBadge--isSolid' : '',
         this.isPlain ? 'cpBadge--isPlain' : '',
-        `cpBadge--is${this.capitalizedColor}`,
+        hasIcon ? 'cpBadge--hasIcon' : '',
+        this.capitalizedColor ? `cpBadge--is${this.capitalizedColor}` : '',
       ]
     },
+    hasIconSlot() {
+      return !!this.$slots.icon
+    },
   },
 }
 </script>
@@ -51,36 +58,23 @@ export default {
 <style lang="scss">
 @mixin cp-badge-color-default($color) {
   background-color: rgba($color, 0.14);
+  border-color: transparent;
   color: $color;
-
-  &:before {
-    background-color: $color;
-  }
 }
 
 @mixin cp-badge-color-solid($color) {
   background-color: $color;
-  color: $neutral-light;
-
-  &:before {
-    background-color: $neutral-light;
-  }
+  border-color: transparent;
 }
 
 @mixin cp-badge-style($color, $className) {
-  &--is#{$className} {
+  &--is#{$className}:not(#{&}--isSolid) {
     @include cp-badge-color-default($color);
   }
 
   &--is#{$className}#{&}--isSolid {
     @include cp-badge-color-solid($color);
   }
-
-  &--is#{$className}#{&}--isPlain {
-    &:before {
-      content: none;
-    }
-  }
 }
 
 .cpBadge {
@@ -88,22 +82,40 @@ export default {
   align-items: center;
   padding: pxToRem(4) pxToRem(8);
   font-size: pxToEm(14);
-  text-transform: capitalize;
   font-weight: 500;
   border-radius: pxToRem(1000);
+  border: pxToRem(1) solid $border-color;
 
-  &::before {
+  &:not(#{&}--isPlain):not(#{&}--hasIcon)::before {
     content: '';
     width: pxToRem(6);
     height: pxToRem(6);
     margin-right: pxToRem(6);
     border-radius: 100%;
     flex-shrink: 0;
+    background-color: currentColor;
+  }
+
+  &--isSolid {
+    color: $neutral-light;
   }
 
   &__label {
-    flex: 1;
     @extend %u-text-ellipsis;
+    flex: 1;
+  }
+
+  &__icon {
+    width: pxToRem(16);
+    height: pxToRem(16);
+    margin-right: $space-sm;
+    color: currentColor;
+    stroke: currentColor;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   @include cp-badge-style($neutral-dark, 'Neutral');

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/SectionAtomicElements.vue

@@ -4,12 +4,16 @@
       <h3>Badge</h3>
       <div class="sectionAtomicElements__badges">
         <cp-badge
-          v-for="{ color, label } in badgeList"
-          :key="label"
+          v-for="{ color, label, icon, plain, solid } in badgeList"
+          :key="color"
           :color="color"
-          :label="label"
+          :icon="icon"
+          :is-plain="plain"
+          :is-solid="solid"
           class="sectionAtomicElements__badge"
-        />
+        >
+          {{ label }}
+        </cp-badge>
       </div>
     </div>
   </section-container>
@@ -25,6 +29,15 @@ export default {
   data() {
     return {
       badgeList: [
+        {
+          color: '',
+          label: 'Default plain',
+        },
+        {
+          color: '',
+          label: 'Default plain',
+          icon: 'copy',
+        },
         {
           color: 'neutral',
           label: 'Beta',
@@ -32,6 +45,7 @@ export default {
         {
           color: 'green',
           label: 'Processed',
+          solid: true,
         },
         {
           color: 'red',
@@ -44,6 +58,8 @@ export default {
         {
           color: 'purple',
           label: 'trial',
+          icon: 'copy',
+          solid: true,
         },
       ],
     }