@citizenplane/pimp 8.16.1 → 8.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "8.16.1",
+  "version": "8.17.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

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

@@ -1,5 +1,6 @@
 // CitizenPlane colors
 $astronaut: #3e3e5b;
+
 $gray-1: #8b8b9d;
 $gray-2: #b2b2bd;
 $gray-3: #c6c6ce;
@@ -7,15 +8,44 @@ $gray-4: #d8d8de;
 $gray-5: #ececef;
 
 $red: #eb0505;
-$orange: #ffa800;
+$red-100: #ffe5e5;
+$red-200: #ffb3b3;
+$red-500: #fc5959;
+
+$blue: #144dc2;
+$blue-100: #e3f2ff;
+$blue-200: #B3D4FF;
+$blue-500: #144DC2;
+
+$green: #00895c;
+$green-100: #E6FFF4;
+$green-200: #B8FFDF;
+$green-500: #00895C;
+
 $yellow: #ffd00b;
+$yellow-100: #FFF9E3;
+$yellow-200: #FFEA82;
+$yellow-500: #998700;
+
+$orange: #ffa800;
+$orange-100: #FFF4E3;
+$orange-200: #FFE1B3;
+$orange-500: #FFA800;
+
+$purple: #5341f9;
+$purple-100: #E5E3FF;
+$purple-200: #C8C4FF;
+$purple-500: #5341F9;
+
+$pink: #ff7dc1;
+$pink-100: #FFE6F2;
+$pink-200: #FFCCE6;
+$pink-500: #FF7DC1;
+
 $green-2: #00c582;
 $green-1: #00f8a4;
 
-$purple: #5341f9;
-$blue: #144dc2;
 $blue-1: #56c1fe;
-$pink: #ff7dc1;
 
 // Main colors
 $primary-color: $purple;

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="cpBadgeNew" :class="componentDynamicClasses">
+    <slot name="leading-icon">
+      <cp-icon v-if="leadingIcon" :type="leadingIcon" class="cpBadgeNew__icon" />
+    </slot>
+
+    <span class="cpBadgeNew__label">
+      <slot>{{ label }}</slot>
+    </span>
+
+    <slot v-if="!isClearable" name="trailing-icon">
+      <cp-icon v-if="trailingIcon" :type="trailingIcon" class="cpBadgeNew__icon" />
+    </slot>
+
+    <button v-if="isClearable" class="cpBadgeNew__clear" @click="onClear">
+      <cp-icon type="x" class="cpBadgeNew__icon" />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import { Colors } from '@/constants'
+
+import { Sizes } from '@/utils/constants'
+
+import { capitalizeFirstLetter } from '@/helpers'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: Colors.GRAY,
+    validator: (value) => Object.values(Colors).includes(value),
+  },
+  size: {
+    type: String,
+    required: false,
+    default: Sizes.MD,
+    validator(value) {
+      return Object.values(Sizes).includes(value)
+    },
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  leadingIcon: {
+    type: String,
+    default: '',
+  },
+  trailingIcon: {
+    type: String,
+    default: '',
+  },
+  isStroked: {
+    type: Boolean,
+    default: false,
+  },
+  isClearable: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const componentDynamicClasses = computed(() => {
+  return [
+    `cpBadgeNew--${props.size}`,
+    `cpBadgeNew--is${capitalizeFirstLetter(props.color)}`,
+    { 'cpBadgeNew--isStroked': props.isStroked },
+    { 'cpBadgeNew--isClearable': props.isClearable },
+  ]
+})
+</script>
+
+<style lang="scss">
+@mixin cp-badge-new-themed($className, $color, $bg-color, $outline-color) {
+  &--is#{$className} {
+    color: $color;
+    background-color: $bg-color;
+    outline-color: $outline-color;
+
+    .cpBadgeNew__clear:hover,
+    .cpBadgeNew__clear:focus-visible {
+      background-color: $color;
+    }
+  }
+}
+
+.cpBadgeNew {
+  display: inline-flex;
+  padding: sp.$space-sm sp.$space;
+  align-items: center;
+  border-radius: fn.px-to-rem(8);
+  background-color: colors.$neutral-dark-5;
+  font-size: fn.px-to-em(14);
+  color: colors.$neutral-dark;
+  gap: sp.$space-sm;
+
+  &--isStroked {
+    outline: 1px solid currentColor;
+  }
+
+  @include cp-badge-new-themed('Blue', colors.$blue, colors.$blue-100, colors.$blue-200);
+  @include cp-badge-new-themed('Gray', colors.$astronaut, colors.$gray-5, colors.$gray-4);
+  @include cp-badge-new-themed('Green', colors.$green, colors.$green-100, colors.$green-200);
+  @include cp-badge-new-themed('Orange', colors.$orange, colors.$orange-100, colors.$orange-200);
+  @include cp-badge-new-themed('Pink', colors.$pink, colors.$pink-100, colors.$pink-200);
+  @include cp-badge-new-themed('Purple', colors.$purple, colors.$purple-100, colors.$purple-200);
+  @include cp-badge-new-themed('Red', colors.$red, colors.$red-100, colors.$red-200);
+  @include cp-badge-new-themed('Yellow', colors.$yellow-500, colors.$yellow-100, colors.$yellow-200);
+
+  &--sm {
+    font-size: fn.px-to-em(12);
+
+    .cpBadgeNew__label {
+      line-height: fn.px-to-rem(16);
+    }
+  }
+
+  &__icon {
+    width: fn.px-to-rem(16);
+    height: fn.px-to-rem(16);
+    aspect-ratio: 1/1;
+  }
+
+  &__label {
+    line-height: fn.px-to-rem(20);
+  }
+
+  &__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: sp.$space-xs;
+    border-radius: 50%;
+    color: inherit;
+
+    &:hover,
+    &:focus-visible {
+      color: colors.$neutral-light;
+    }
+  }
+}
+</style>

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

@@ -20,7 +20,7 @@ const props = defineProps({
   size: {
     type: String,
     required: false,
-    default: 'md',
+    default: Sizes.MD,
     validator(value) {
       return Object.values(Sizes).includes(value)
     },

package/src/constants/src/colors/Colors.js

@@ -1,7 +1,10 @@
 export default {
   BLUE: 'blue',
-  PURPLE: 'purple',
+  GRAY: 'gray',
   GREEN: 'green',
   ORANGE: 'orange',
+  PINK: 'pink',
+  PURPLE: 'purple',
   RED: 'red',
+  YELLOW: 'yellow',
 }

package/src/stories/CpBadgeNew.stories.ts

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpBadgeNew from '@/components/atomic-elements/CpBadgeNew.vue'
+
+const meta = {
+  title: 'CpBadgeNew',
+  component: CpBadgeNew,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['gray', 'blue', 'green', 'red', 'orange', 'purple', 'pink', 'yellow'],
+      description: 'The color variant of the badge',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+      description: 'The size of the badge',
+    },
+    isStroked: {
+      control: 'boolean',
+      description: 'Whether the badge has a stroked border',
+    },
+    leadingIcon: {
+      control: 'select',
+      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      description: 'Type of leading icon (if any)',
+    },
+    trailingIcon: {
+      control: 'select',
+      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      description: 'Type of trailing icon (if any)',
+    },
+    label: {
+      control: 'text',
+      description: 'The label text',
+    },
+  },
+} satisfies Meta<typeof CpBadgeNew>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    color: 'gray',
+    size: 'md',
+    isStroked: false,
+    leadingIcon: '',
+    trailingIcon: '',
+    label: 'Badge',
+  },
+  render: (args) => ({
+    components: { CpBadgeNew },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadgeNew v-bind="args" />',
+  }),
+}
+
+export const WithColors: Story = {
+  render: () => ({
+    components: { CpBadgeNew },
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadgeNew color="gray" label="Gray" />
+        <CpBadgeNew color="blue" label="Blue" />
+        <CpBadgeNew color="green" label="Green" />
+        <CpBadgeNew color="red" label="Red" />
+        <CpBadgeNew color="orange" label="Orange" />
+        <CpBadgeNew color="purple" label="Purple" />
+        <CpBadgeNew color="pink" label="Pink" />
+        <CpBadgeNew color="yellow" label="Yellow" />
+      </div>
+    `,
+  }),
+}
+
+export const WithSizes: Story = {
+  render: () => ({
+    components: { CpBadgeNew },
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadgeNew size="sm" label="Small" />
+        <CpBadgeNew size="md" label="Medium" />
+      </div>
+    `,
+  }),
+}
+
+export const IsStroked: Story = {
+  render: () => ({
+    components: { CpBadgeNew },
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadgeNew color="blue" isStroked label="Stroked" />
+        <CpBadgeNew color="green" isStroked label="Stroked" />
+        <CpBadgeNew color="red" isStroked label="Stroked" />
+      </div>
+    `,
+  }),
+}
+
+export const WithIcons: Story = {
+  render: () => ({
+    components: { CpBadgeNew },
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadgeNew color="blue" leading-icon="check" label="Leading Icon" />
+        <CpBadgeNew color="green" trailing-icon="arrow-right" label="Trailing Icon" />
+        <CpBadgeNew color="red" leading-icon="check" trailing-icon="arrow-right" label="Both Icons" />
+      </div>
+    `,
+  }),
+}
+
+export const IsClearable: Story = {
+  render: () => ({
+    components: { CpBadgeNew },
+    template: `
+      <div style="display: flex; gap: 8px; align-items: center;">
+        <CpBadgeNew color="blue" isClearable label="Clearable" />
+        <CpBadgeNew color="green" isClearable label="Clearable" />
+        <CpBadgeNew color="red" isClearable label="Clearable" />
+      </div>
+    `,
+  }),
+}
+
+export const WithSlot: Story = {
+  render: () => ({
+    components: { CpBadgeNew },
+    template: `
+      <CpBadgeNew color="purple">
+        <template #leading-icon>
+          <span style="font-size: 16px; margin-right: 4px;">🌟</span>
+        </template>
+        <div>
+          Custom div inside default slot
+        </div>
+        <template #trailing-icon>
+          <span style="font-size: 16px; margin-left: 4px;">🚀</span>
+        </template>
+      </CpBadgeNew>
+    `,
+  }),
+}