@citizenplane/pimp 7.0.4 → 8.0.0

package/README.md

@@ -14,6 +14,7 @@
 <br />
 
 ---
+
 ## Pimp mission
 
 Pimp aims to bring order and consistency to all of our products and processes. We elevate user experience and increase the speed and efficiency of how we design and build products.
@@ -33,8 +34,11 @@ yarn add @citizenplane/pimp
 ```
 
 ## Usage
+
 ### In a nuxt project
-1. Add this line to your `nuxt-config.js`: 
+
+1. Add this line to your `nuxt-config.js`:
+
 ```javascript
 // nuxt-config.js
 ...
@@ -48,20 +52,20 @@ css: [
 
 ```vue
 <template>
-  <cp-button appearance='primary' color='purple' />
+  <cp-button appearance="primary" color="purple" />
 </template>
 <script>
 import CpButton from '@citizenplane/pimp'
 
 export default {
   components: {
-    CpButton
+    CpButton,
   },
 }
 </script>
 ```
 
-If you want to use any component without having to import them manually, you can create a plugin:  
+If you want to use any component without having to import them manually, you can create a plugin:
 
 1. Create a plugin called `citizenplane-pimp.js`:
 
@@ -73,6 +77,7 @@ import Pimp from '@citizenplane/pimp'
 
 Vue.use(Pimp)
 ```
+
 2. Add this line to your `nuxt-config.js`:
 
 ```javascript
@@ -83,19 +88,23 @@ plugins: [
 ]
 ...
 ```
+
 3. Use components directly in your project without having to import nor declaring them:
+
 ```vue
 <template>
-  <cp-button appearance='primary' color='purple' />
+  <cp-button appearance="primary" color="purple" />
 </template>
 ```
 
 ## Components
+
 Now that you're all set up, you can retrieve components documentation on [pimp.citizenplane.com](https://pimp.citizenplane.com).
 
 ![CitizenPlane's design system hero banner](https://i.imgur.com/WFPUfiW.png)
 
 ## 🧑‍💻 Contributing to Pimp
+
 We are working on making this project a fully open source. We appreciate any contributions you might make.
 
 ### 🍴 Step 1. Fork this repository
@@ -123,7 +132,7 @@ Now go to `http://localhost:8080` in your browser.
 
 ### 🛠 Step 3. Make your changes
 
-Now you can start developing! 
+Now you can start developing!
 
 All the components are under the `src/components/` directory and associated code changes will automatically be reflected in the playground.
 
@@ -148,9 +157,11 @@ To be done
 Congrats, you're officially a Pimp contributor!
 
 ## Feedback
+
 We want to provide only components of the highest quality. We can’t do that without your feedback. If you have any suggestions about what we can do to improve components, please report it directly as an issue or drop us a line at <a href="mailto:tech@citizenplane.com">tech@citizenplane.com</a>.
 
 ## 👏 Respect earns Respect
+
 Please respect our Code of Conduct, in short:
 
 - Using welcoming and inclusive language
@@ -160,6 +171,7 @@ Please respect our Code of Conduct, in short:
 - Showing empathy towards other community members
 
 ## License
+
 Pimp is released under the MIT license.
 
 Copyright © 2021 CitizenPlane, Inc.

package/dist/pimp.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, resolveComponent, createVNode, createCommentVNode, createTextVNode, withDirectives, vModelText, Fragment, renderList, vModelSelect, defineComponent, watch, h as h$1, resolveDirective, Transition, normalizeStyle, withKeys, TransitionGroup, vShow, withModifiers, vModelCheckbox } from "vue";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode, createElementVNode, resolveDynamicComponent, mergeProps, withCtx, createVNode, createTextVNode, toDisplayString, withDirectives, vModelText, Fragment, renderList, vModelSelect, defineComponent, watch, h as h$1, resolveDirective, Transition, normalizeStyle, withKeys, TransitionGroup, vShow, withModifiers, vModelCheckbox } from "vue";
 function _mergeNamespaces(n2, m) {
   m.forEach(function(e2) {
     e2 && typeof e2 !== "string" && !Array.isArray(e2) && Object.keys(e2).forEach(function(k2) {
@@ -4012,14 +4012,8 @@ const _sfc_main$k = {
   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,
@@ -4030,6 +4024,11 @@ const _sfc_main$k = {
       type: Boolean,
       default: false,
       required: false
+    },
+    icon: {
+      type: String,
+      default: "",
+      required: false
     }
   },
   computed: {
@@ -4037,20 +4036,39 @@ const _sfc_main$k = {
       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;
     }
   }
 };
-const _hoisted_1$g = { class: "cpBadge__label" };
+const _hoisted_1$g = {
+  key: 0,
+  class: "cpBadge__icon"
+};
+const _hoisted_2$f = { class: "cpBadge__label" };
 function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_cp_icon = resolveComponent("cp-icon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["cpBadge", $options.computedClasses])
   }, [
-    createElementVNode("span", _hoisted_1$g, toDisplayString($props.label), 1)
+    $options.hasIconSlot ? (openBlock(), createElementBlock("span", _hoisted_1$g, [
+      renderSlot(_ctx.$slots, "icon")
+    ])) : $props.icon ? (openBlock(), createBlock(_component_cp_icon, {
+      key: 1,
+      type: $props.icon,
+      class: "cpBadge__icon"
+    }, null, 8, ["type"])) : createCommentVNode("", true),
+    createElementVNode("span", _hoisted_2$f, [
+      renderSlot(_ctx.$slots, "default")
+    ])
   ], 2);
 }
 var CpBadge = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$j]]);