@citizenplane/pimp 8.11.3 → 8.13.0

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "8.11.3",
+  "version": "8.13.0",
   "scripts": {
-    "dev": "vite --host",
-    "build": "vite build",
-    "preview": "vite preview",
+    "dev": "storybook dev -p 8080",
+    "build": "storybook build --output-dir ./dist",
     "lint": "eslint --fix src",
     "format": "prettier .  --write",
     "test": "jest tests"
@@ -37,9 +36,20 @@
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
+    "@chromatic-com/storybook": "^3.2.6",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.26.0",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-onboarding": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/experimental-addon-test": "^8.6.14",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/test": "^8.6.14",
+    "@storybook/vue3": "^8.6.14",
+    "@storybook/vue3-vite": "^8.6.14",
     "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-v8": "^3.1.4",
     "@vue/babel-preset-app": "^5.0.8",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/test-utils": "^2.4.6",
@@ -47,15 +57,24 @@
     "babel-core": "^7.0.0-bridge.0",
     "eslint": "^9.26.0",
     "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-vue": "^10.1.0",
     "globals": "^16.1.0",
     "husky": "^9.1.7",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^16.0.0",
+    "playwright": "^1.52.0",
     "prettier": "^3.5.3",
     "sass": "~1.88.0",
     "sass-loader": "^16.0.5",
-    "vite": "^6.3.5"
+    "storybook": "^8.6.14",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }

package/src/README.md

@@ -9,7 +9,6 @@ There is 4 different ways you can contribute & improve Pimp components library.
 - 🌟 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.
 
@@ -21,8 +20,6 @@ These 4 different contributions have their own specific processes that will be d
 
 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.
-
 See the [release](#release) section for instructions on how to release properly the new package version
 
 ### 💅 Minor update
@@ -39,8 +36,6 @@ 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
@@ -49,22 +44,6 @@ Your update is a patch one if your changes concern a bug in the current version
 
 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.
-
-In order to run the documentation, move into `/docs` folder and run the `npm run dev` command.
-
-> Project is running on http://localhost:8080
-
-Every time you update the documentation, the first thing you should do is to ensure you update the corresponding version in the docs `package.json`.
-
-Then, you can update the different sections that needs to.
-
-> If you've never used Vuepress before, check out their [docs](https://vuepress.vuejs.org/guide/).
-
-Once you've finished, create the corresponding MR and see the corresponding [release](#documentation-release) section
-
 ## Release
 
 ### Components release
@@ -85,10 +64,6 @@ 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.
-
 ## Visuals 🖼
 
 ![Documentation mode](https://i.imgur.com/d5VbXFm.png) _Documentation mode_

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

@@ -63,8 +63,4 @@ svg {
 input {
   font-size: inherit;
   border: none;
-}
-
-sup {
-  top: fn.px-to-rem(-2);
-}
+}

package/src/assets/styles/utilities/_index.scss

@@ -1,6 +1,25 @@
+@use '../variables/colors' as colors;
+@use '../helpers/functions' as fn;
+
 .u-text-ellipsis,
 %u-text-ellipsis {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
+
+.u-asterisk {
+  position: relative;
+  top: fn.px-to-rem(-3);
+  font-size: fn.px-to-em(12);
+  line-height: normal;
+
+  &::after {
+    content: ' ';
+  }
+}
+
+legend .u-asterisk,
+label .u-asterisk {
+  color: colors.$error-color;
+}

package/src/components/core/BaseInputLabel.vue

@@ -30,7 +30,6 @@ export default {
   }
 
   &--isInvalid {
-    font-weight: 500;
     color: colors.$error-color;
   }
 }

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

@@ -1,7 +1,8 @@
 <template>
   <div class="cpDate" :class="dynamicClasses">
     <label v-if="label" class="cpDate__label" :for="cpDateId">
-      {{ formattedLabel }} <cp-icon v-if="!isDateValid" type="alert-circle" />
+      {{ capitalizedLabel }} <span v-if="required" class="u-asterisk">*</span>
+      <cp-icon v-if="!isDateValid" type="alert-circle" />
     </label>
     <div class="cpDate__inputs">
       <input
@@ -120,10 +121,8 @@ export default {
     }
   },
   computed: {
-    formattedLabel() {
-      const requiredLabel = this.required && this.label ? '*' : ''
-
-      return `${capitalizeFirstLetter(this.label)} ${requiredLabel}`
+    capitalizedLabel() {
+      return capitalizeFirstLetter(this.label)
     },
     cpDateId() {
       return randomString()
@@ -324,6 +323,10 @@ export default {
     margin-bottom: sp.$space;
     font-size: fn.px-to-em(14);
 
+    > span {
+      margin-left: sp.$space-xs;
+    }
+
     i {
       margin-left: sp.$space-sm;
       width: fn.px-to-rem(16);

package/src/components/inputs/CpInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cpInput" :class="dynamicClasses" :aria-disabled="isDisabled" @click="focusOnInput">
-    <base-input-label v-if="label" v-bind-once="{ for: inputIdentifier }" class="cpInput__label">
-      {{ label }} <sup v-if="isRequired">*</sup>
+    <base-input-label v-if="label" v-bind-once="{ for: inputIdentifier }">
+      {{ capitalizedLabel }} <span v-if="isRequired" class="u-asterisk">*</span>
       <cp-tooltip v-if="tooltip" :content="tooltip">
         <button type="button" class="cpInput__tooltip">
           <icon-tooltip class="cpInput__tooltipIcon" />
@@ -61,7 +61,7 @@ import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'v
 
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 
-import { randomString } from '@/helpers'
+import { randomString, capitalizeFirstLetter } from '@/helpers'
 
 const props = defineProps({
   modelValue: {
@@ -133,6 +133,8 @@ const inputDescribedByAttribute = computed(() => `${helpMessageId} ${errorMessag
 
 const slots = useSlots()
 
+const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
+
 const inputModel = defineModel({
   type: [String, Number, Boolean],
   default: '',
@@ -324,19 +326,6 @@ onMounted(async () => {
     box-shadow: none;
   }
 
-  &__label {
-    display: flex;
-    align-items: center;
-    font-size: fn.px-to-em(14);
-    line-height: fn.px-to-rem(24);
-    margin-bottom: sp.$space;
-    gap: sp.$space-sm;
-
-    sup {
-      color: colors.$error-color;
-    }
-  }
-
   &__tooltip {
     display: flex;
     padding: sp.$space-sm;

package/src/components/inputs/CpTextarea.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="cpTextarea">
     <base-input-label v-if="label" v-bind-once="{ for: inputIdentifier }" class="cpTextarea__label">
-      {{ inputLabelTitle }}
+      {{ capitalizedLabel }}
+      <span v-if="required" class="u-asterisk">*</span>
     </base-input-label>
     <textarea
       v-model="textareaModel"
@@ -32,7 +33,7 @@ import { ref, computed } from 'vue'
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
-import { randomString } from '@/helpers'
+import { randomString, capitalizeFirstLetter } from '@/helpers'
 
 const props = defineProps({
   modelValue: {
@@ -96,10 +97,7 @@ const textareaModel = defineModel({
 
 const inputIdentifier = ref(props.inputId || randomString())
 
-const inputLabelTitle = computed(() => {
-  const requiredLabel = props.required && props.label ? '*' : ''
-  return `${props.label} ${requiredLabel}`
-})
+const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
 
 const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage.length)
 

package/src/components/selects/CpSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cpSelect" :class="dynamicClasses">
     <base-input-label v-if="label" :for="selectReferenceId" class="cpSelect__label">
-      {{ selectLabelTitle }}
+      {{ capitalizedLabel }} <span v-if="required" class="u-asterisk">*</span>
     </base-input-label>
     <div class="cpSelect__container">
       <select
@@ -38,6 +38,8 @@ import { randomString } from '@/helpers'
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
+import { capitalizeFirstLetter } from '@/helpers'
+
 export default {
   name: 'CpSelect',
   components: {
@@ -101,10 +103,8 @@ export default {
     }
   },
   computed: {
-    selectLabelTitle() {
-      const requiredLabel = this.required && this.label ? '*' : ''
-
-      return `${this.label} ${requiredLabel}`
+    capitalizedLabel() {
+      return capitalizeFirstLetter(this.label)
     },
     dynamicClasses() {
       return {

package/src/stories/BaseInputLabel.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
+
+const meta = {
+  title: 'BaseInputLabel',
+  component: BaseInputLabel,
+  argTypes: {
+    isInvalid: {
+      control: 'boolean',
+      description: 'Whether the label should show an invalid state',
+    },
+  },
+} satisfies Meta<typeof BaseInputLabel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    isInvalid: false,
+  },
+  render: (args) => ({
+    components: { BaseInputLabel },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="baseInputLabel-story">
+        <BaseInputLabel v-bind="args">
+          Default Label
+        </BaseInputLabel>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpAlert.stories.ts

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CpAlert from '@/components/feedback-indicators/CpAlert.vue'
+
+const meta = {
+  title: 'CpAlert',
+  component: CpAlert,
+  argTypes: {
+    intent: {
+      control: 'select',
+      options: ['info', 'success', 'warning', 'critical'],
+      description: 'The type of alert',
+    },
+    title: {
+      control: 'text',
+      description: 'The title of the alert',
+    },
+    isClosable: {
+      control: 'boolean',
+      description: 'Whether the alert can be closed',
+    },
+    onClose: { action: 'closed' },
+  },
+} satisfies Meta<typeof CpAlert>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = `
+<CpAlert v-bind="args">
+  Default slot content
+</CpAlert>
+`
+
+export const Default: Story = {
+  args: {
+    title: 'Alert title',
+    intent: 'info',
+    isClosable: true,
+  },
+  render: (args) => ({
+    components: { CpAlert },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate,
+  }),
+}
+
+export const Success: Story = {
+  args: {
+    ...Default.args,
+    intent: 'success',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+export const Warning: Story = {
+  args: {
+    ...Default.args,
+    intent: 'warning',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    intent: 'critical',
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}
+
+export const NotClosable: Story = {
+  args: {
+    ...Default.args,
+    isClosable: false,
+  },
+  render: (args) => ({
+    ...Default.render(args),
+    template: defaultTemplate,
+  }),
+}

package/src/stories/CpBadge.stories.ts

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpBadge from '@/components/atomic-elements/CpBadge.vue'
+
+const meta = {
+  title: 'CpBadge',
+  component: CpBadge,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['neutral', 'blue', 'green', 'red', 'orange', 'purple', 'teal', 'pink', 'yellow'],
+      description: 'The color variant of the badge',
+    },
+    isSolid: {
+      control: 'boolean',
+      description: 'Whether the badge has a solid background',
+    },
+    isPlain: {
+      control: 'boolean',
+      description: 'Whether the badge has a plain style (no dot)',
+    },
+    isClearable: {
+      control: 'boolean',
+      description: 'Whether the badge can be cleared',
+    },
+    icon: {
+      control: 'select',
+      options: ['arrow-left', 'arrow-right', 'arrow-up', 'arrow-down', 'check'],
+      description: 'The icon to display in the badge',
+    },
+    onClear: { action: 'cleared' },
+  },
+} satisfies Meta<typeof CpBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    color: 'neutral',
+    isSolid: false,
+    isPlain: false,
+    isClearable: false,
+    icon: '',
+  },
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadge v-bind="args">Badge</CpBadge>',
+  }),
+}
+
+export const WithColors: Story = {
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadge color="neutral">Neutral</CpBadge>
+        <CpBadge color="blue">Blue</CpBadge>
+        <CpBadge color="green">Green</CpBadge>
+        <CpBadge color="red">Red</CpBadge>
+        <CpBadge color="orange">Orange</CpBadge>
+        <CpBadge color="purple">Purple</CpBadge>
+        <CpBadge color="teal">Teal</CpBadge>
+        <CpBadge color="pink">Pink</CpBadge>
+        <CpBadge color="yellow">Yellow</CpBadge>
+      </div>
+    `,
+  }),
+}
+
+export const Solid: Story = {
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadge color="neutral" is-solid>Neutral</CpBadge>
+        <CpBadge color="blue" is-solid>Blue</CpBadge>
+        <CpBadge color="green" is-solid>Green</CpBadge>
+        <CpBadge color="red" is-solid>Red</CpBadge>
+        <CpBadge color="orange" is-solid>Orange</CpBadge>
+        <CpBadge color="purple" is-solid>Purple</CpBadge>
+        <CpBadge color="teal" is-solid>Teal</CpBadge>
+        <CpBadge color="pink" is-solid>Pink</CpBadge>
+        <CpBadge color="yellow" is-solid>Yellow</CpBadge>
+      </div>
+    `,
+  }),
+}
+
+export const WithIcon: Story = {
+  args: {
+    color: 'blue',
+    icon: 'check',
+  },
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadge v-bind="args">With Icon</CpBadge>',
+  }),
+}
+
+export const Clearable: Story = {
+  args: {
+    color: 'blue',
+    isClearable: true,
+  },
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadge v-bind="args">Clearable Badge</CpBadge>',
+  }),
+}
+
+export const Plain: Story = {
+  args: {
+    color: 'green',
+    isPlain: true,
+  },
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: '<CpBadge v-bind="args">Plain Badge</CpBadge>',
+  }),
+}
+
+export const AllVariants: Story = {
+  render: (args) => ({
+    components: { CpBadge },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+        <CpBadge color="blue">Default</CpBadge>
+        <CpBadge color="blue" is-solid>Solid</CpBadge>
+        <CpBadge color="blue" is-plain>Plain</CpBadge>
+        <CpBadge color="blue" is-clearable>Clearable</CpBadge>
+        <CpBadge color="blue" icon="check">With Icon</CpBadge>
+        <CpBadge color="blue" is-solid is-clearable>Solid Clearable</CpBadge>
+      </div>
+    `,
+  }),
+}