@ouestfrance/sipa-bms-ui 8.22.2 → 8.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.22.2",
+  "version": "8.23.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -33,15 +33,15 @@
     "@chromatic-com/storybook": "^4.1.3",
     "@codemirror/lang-html": "6.4.11",
     "@codemirror/lang-json": "6.0.2",
-    "@commitlint/cli": "20.1.0",
-    "@commitlint/config-conventional": "20.0.0",
+    "@commitlint/cli": "20.2.0",
+    "@commitlint/config-conventional": "20.2.0",
     "@mdx-js/react": "3.1.1",
-    "@storybook/addon-docs": "10.1.6",
-    "@storybook/addon-links": "10.1.6",
-    "@storybook/vue3-vite": "10.1.6",
+    "@storybook/addon-docs": "10.1.10",
+    "@storybook/addon-links": "10.1.10",
+    "@storybook/vue3-vite": "10.1.10",
     "@types/lodash": "4.17.21",
     "@types/uuid": "11.0.0",
-    "@vitejs/plugin-vue": "6.0.2",
+    "@vitejs/plugin-vue": "6.0.3",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "13.9.0",
     "@vueuse/motion": "^3.0.0",
@@ -52,25 +52,25 @@
     "cors": "^2.8.5",
     "cross-env": "^10.0.0",
     "cy2": "^4.0.0",
-    "cypress": "15.7.0",
+    "cypress": "15.8.1",
     "express": "^5.0.0",
     "husky": "9.1.7",
-    "jsdom": "27.2.0",
+    "jsdom": "27.3.0",
     "keycloak-js": "26.1.2",
     "lint-staged": "16.2.7",
     "lodash": "4.17.21",
-    "lucide-vue-next": "0.554.0",
+    "lucide-vue-next": "0.562.0",
     "msw": "^2.12.4",
-    "msw-storybook-addon": "^2.0.3",
+    "msw-storybook-addon": "^2.0.6",
     "normalize.css": "8.0.1",
     "path": "0.12.7",
-    "prettier": "3.6.2",
+    "prettier": "3.7.4",
     "remark-gfm": "^4.0.1",
-    "sass": "1.94.2",
+    "sass": "1.97.1",
     "semantic-release": "25.0.2",
     "start-server-and-test": "2.1.3",
-    "storybook": "10.1.6",
-    "storybook-addon-pseudo-states": "10.1.6",
+    "storybook": "10.1.10",
+    "storybook-addon-pseudo-states": "10.1.10",
     "storybook-addon-tag-badges": "^3.0.2",
     "storybook-vue3-router": "^7.0.0",
     "typescript": "5.2.2",
@@ -78,14 +78,14 @@
     "vite": "^7.1.12",
     "vite-plugin-dts": "^4.1.0",
     "vite-plugin-mkcert": "1.17.9",
-    "vite-plugin-pages": "0.33.1",
+    "vite-plugin-pages": "0.33.2",
     "vite-svg-loader": "5.1.0",
     "vitest": "3.2.4",
-    "vue": "3.5.24",
+    "vue": "3.5.26",
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",
-    "vue-router": "4.6.3",
-    "vue-tsc": "3.1.5"
+    "vue-router": "4.6.4",
+    "vue-tsc": "3.2.0"
   },
   "files": [
     "dist",

package/src/components/button/BmsButton.stories.js

@@ -17,6 +17,9 @@ export default {
     chromatic: { disable: true },
   },
   argTypes: {
+    defaultSlot: {
+      description: 'Slot VueJS',
+    },
     type: {
       control: { type: 'select' },
       options: ['primary', 'secondary', 'tertiary'],
@@ -41,13 +44,22 @@ const Template = (args) => ({
   },
   template: `
     <BmsButton v-bind="args">
-      Save
+      {{args.defaultSlot ?? 'Save'}}
     </BmsButton>
       `,
 });
 
 export const Playground = Template.bind({});
-Playground.args = {};
+Playground.parameters = { chromatic: { disable: false } };
+Playground.args = {
+  type: 'primary',
+};
+
+export const PlaygroundSecondary = Template.bind({});
+PlaygroundSecondary.args = {
+  type: 'secondary',
+  defaultSlot: 'Cancel',
+};
 
 // Stories for documentation examples (Do/Don't)
 export const DoSimple = Template.bind({});
@@ -124,9 +136,9 @@ export const DoOnePrimary = () => ({
   components: { BmsButton },
   template: `
     <div style="display: flex; gap: 8px;">
-      <BmsButton type="primary">Save</BmsButton>
       <BmsButton type="secondary">Cancel</BmsButton>
       <BmsButton type="secondary">Delete</BmsButton>
+      <BmsButton type="primary">Save</BmsButton>
     </div>
   `,
 });
@@ -194,3 +206,130 @@ export const DoPrimaryForSave = () => ({
     </div>
   `,
 });
+
+// Secondary button stories for documentation
+export const DoSimpleSecondary = Template.bind({});
+DoSimpleSecondary.args = {
+  type: 'secondary',
+  defaultSlot: 'Cancel',
+};
+
+export const DoDangerSecondary = Template.bind({});
+DoDangerSecondary.args = {
+  type: 'secondary',
+  mode: 'danger',
+};
+
+export const DoSmallSecondary = Template.bind({});
+DoSmallSecondary.args = {
+  type: 'secondary',
+  small: true,
+};
+
+// Do: Secondary button with icon at start
+export const DoIconStartSecondary = () => ({
+  components: { BmsButton, ArrowLeft },
+  template: `
+    <BmsButton type="secondary">
+      <template #start><ArrowLeft /></template>
+      Back
+    </BmsButton>
+      `,
+});
+
+// Do: Secondary button with icon at end
+export const DoIconEndSecondary = () => ({
+  components: { BmsButton, ArrowRight },
+  template: `
+    <BmsButton type="secondary">
+      Next
+      <template #end><ArrowRight /></template>
+    </BmsButton>
+  `,
+});
+
+// Do: Secondary submit button
+export const DoSubmitSecondary = () => ({
+  components: { BmsButton },
+  template: `
+    <form>
+      <BmsButton type="secondary" :submit="true">Cancel form</BmsButton>
+    </form>
+  `,
+});
+
+// Don't: Long labels for secondary
+export const DontLongLabelSecondary = () => ({
+  components: { BmsButton },
+  template:
+    '<BmsButton type="secondary">Click here to cancel your changes to the document</BmsButton>',
+});
+
+export const DoShortLabelSecondary = () => ({
+  components: { BmsButton },
+  template: '<BmsButton type="secondary">Cancel changes</BmsButton>',
+});
+
+// Don't: Secondary as primary action
+export const DontSecondaryAsPrimary = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="secondary">Save</BmsButton>
+      <BmsButton type="secondary">Confirm</BmsButton>
+    </div>
+  `,
+});
+
+export const DoSecondaryForCancel = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="primary">Save</BmsButton>
+    </div>
+  `,
+});
+
+// Don't: Too many icons on secondary
+export const DontTooManyIconsSecondary = () => ({
+  components: { BmsButton, Heart, Wand, Check, ArrowLeft },
+  template: `
+    <BmsButton type="secondary">
+      <template #start><Heart /><Wand /></template>
+      Cancel changes
+      <template #end><Check /><ArrowLeft /></template>
+    </BmsButton>
+  `,
+});
+
+export const DoOneIconSecondary = () => ({
+  components: { BmsButton, ArrowLeft },
+  template: `
+    <BmsButton type="secondary">
+      <template #start><ArrowLeft /></template>
+      Back
+    </BmsButton>
+  `,
+});
+
+// Don't: Generic labels for secondary
+export const DontGenericLabelSecondary = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="secondary">Click here</BmsButton>
+      <BmsButton type="secondary">Button</BmsButton>
+    </div>
+  `,
+});
+
+export const DoSpecificLabelSecondary = () => ({
+  components: { BmsButton },
+  template: `
+    <div style="display: flex; gap: 8px;">
+      <BmsButton type="secondary">Cancel order</BmsButton>
+      <BmsButton type="secondary">Go back</BmsButton>
+    </div>
+  `,
+});

package/src/components/button/BmsToggleIcon.stories.js

@@ -0,0 +1,145 @@
+import { Activity } from 'lucide-vue-next';
+import { ref } from 'vue';
+import BmsToggleIcon from './BmsToggleIcon.vue';
+
+const WITH_DEFAULT_SLOT = {
+  default: '<Activity/>',
+};
+
+export default {
+  title: 'Composants/button/ToggleIcon',
+  component: BmsToggleIcon,
+  tags: ['with_useable_code'],
+  argTypes: {
+    modelValue: {
+      control: { type: 'boolean' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    small: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsToggleIcon,
+    Activity,
+  },
+  setup() {
+    const modelValue = ref(args.modelValue ?? false);
+    const modelValueSmall = ref(args.modelValue ?? false);
+    return { args, modelValue, modelValueSmall };
+  },
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 24px; padding: 16px;">
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <b>Normal</b>
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Default (cliquable)</b>
+            <BmsToggleIcon v-model="modelValue"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Disable Default</b>
+            <BmsToggleIcon :model-value="false" :disabled="true"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Hover</b>
+            <BmsToggleIcon :model-value="false" class="_hover"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Actif</b>
+            <BmsToggleIcon :model-value="true"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Disable Actif</b>
+            <BmsToggleIcon :model-value="true" :disabled="true"><Activity/></BmsToggleIcon>
+          </div>
+        </div>
+      </div>
+      <div style="display: flex; flex-direction: column; gap: 8px;">
+        <b>Small</b>
+        <div style="display: flex; gap: 16px; align-items: center;">
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Default (cliquable)</b>
+            <BmsToggleIcon v-model="modelValueSmall" small><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Disable Default</b>
+            <BmsToggleIcon :model-value="false" small :disabled="true"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Hover</b>
+            <BmsToggleIcon :model-value="false" small class="_hover"><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Actif</b>
+            <BmsToggleIcon :model-value="true" small><Activity/></BmsToggleIcon>
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; align-items: center;">
+            <b style="font-size: 12px;">Disable Actif</b>
+            <BmsToggleIcon :model-value="true" small :disabled="true"><Activity/></BmsToggleIcon>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+export const ToggleIcon = Template.bind({});
+ToggleIcon.args = { ...WITH_DEFAULT_SLOT };
+
+export const Default = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon><Activity/></BmsToggleIcon>',
+});
+
+export const DisableDefault = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon :disabled="true"><Activity/></BmsToggleIcon>',
+});
+
+export const Hover = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon class="_hover"><Activity/></BmsToggleIcon>',
+});
+
+export const Actif = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon :model-value="true"><Activity/></BmsToggleIcon>',
+});
+
+export const DisableActif = () => ({
+  components: { BmsToggleIcon, Activity },
+  template:
+    '<BmsToggleIcon :model-value="true" :disabled="true"><Activity/></BmsToggleIcon>',
+});
+
+export const Small = () => ({
+  components: { BmsToggleIcon, Activity },
+  template: '<BmsToggleIcon small><Activity/></BmsToggleIcon>',
+});
+
+export const SmallActive = () => ({
+  components: { BmsToggleIcon, Activity },
+  template:
+    '<BmsToggleIcon small :model-value="true"><Activity/></BmsToggleIcon>',
+});
+
+export const WithVModel = () => ({
+  components: { BmsToggleIcon, Activity },
+  setup() {
+    const isActive = ref(false);
+    return { isActive };
+  },
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
+      <BmsToggleIcon v-model="isActive"><Activity/></BmsToggleIcon>
+      <p>État actif : {{ isActive }}</p>
+      <button @click="isActive = !isActive" style="padding: 8px;">Toggle depuis l'extérieur</button>
+    </div>
+  `,
+});

package/src/components/button/BmsToggleIcon.vue

@@ -0,0 +1,108 @@
+<template>
+  <button
+    class="toggle-icon"
+    :class="{ active: modelValue, disabled, small }"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: boolean;
+  disabled?: boolean;
+  small?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  small: false,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'click', event: MouseEvent): void;
+}>();
+
+const handleClick = (event: MouseEvent) => {
+  if (!props.disabled) {
+    const newValue = !props.modelValue;
+    emit('update:modelValue', newValue);
+    emit('click', event);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.toggle-icon {
+  --icon-color: var(--bms-grey-100);
+  --underline-color: transparent;
+
+  background: none;
+  border: none;
+  padding: 0;
+  padding-bottom: 0.25em;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  :deep(svg) {
+    color: var(--icon-color);
+    transition: color 0.2s;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 0.125em;
+    background-color: var(--underline-color);
+    transition: background-color 0.2s;
+  }
+
+  &:hover:not(.disabled),
+  &._hover:not(.disabled) {
+    --icon-color: var(--bms-grey-140);
+    --underline-color: var(--bms-grey-140);
+  }
+
+  &.active {
+    --icon-color: var(--bms-main-100);
+    --underline-color: var(--bms-main-100);
+  }
+
+  &.active:hover:not(.disabled),
+  &.active._hover:not(.disabled) {
+    --icon-color: var(--bms-main-140);
+    --underline-color: var(--bms-main-140);
+  }
+
+  &.disabled {
+    --icon-color: var(--bms-grey-50);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &.disabled.active {
+    --underline-color: var(--bms-grey-50);
+  }
+
+  &.small {
+    :deep(svg) {
+      width: 1em;
+      height: 1em;
+    }
+
+    &::after {
+      height: 1.5px;
+    }
+  }
+}
+</style>

package/src/components/form/BmsChip.stories.js

@@ -3,13 +3,16 @@ import BmsChip from '@/components/form/BmsChip.vue';
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/Chip',
+  component: BmsChip,
+  argTypes: {
+    color: { options: ['grey', 'blue', 'red', 'green', 'orange'] },
+  },
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/Chip',
-  component: BmsChip,
 };
 
 const Template = (args) => ({
@@ -63,3 +66,102 @@ export const Unknown = Template.bind({});
 Unknown.args = {
   color: 'Unknown',
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsChip,
+  },
+  template: `
+  <BmsChip v-bind="args">{{ args.content || 'Content' }}</BmsChip>
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundChip = SimpleTemplate.bind({});
+PlaygroundChip.parameters = { chromatic: { disable: true } };
+PlaygroundChip.args = {
+  content: 'Status',
+  color: 'grey',
+};
+
+// Do: Chip with clear content
+export const DoWithClearContent = SimpleTemplate.bind({});
+DoWithClearContent.parameters = { chromatic: { disable: true } };
+DoWithClearContent.args = {
+  content: 'Active',
+  color: 'green',
+};
+
+// Do: Chip with appropriate color
+export const DoWithAppropriateColor = SimpleTemplate.bind({});
+DoWithAppropriateColor.parameters = { chromatic: { disable: true } };
+DoWithAppropriateColor.args = {
+  content: 'Error',
+  color: 'red',
+};
+
+// Do: Chip with short content
+export const DoWithShortContent = SimpleTemplate.bind({});
+DoWithShortContent.parameters = { chromatic: { disable: true } };
+DoWithShortContent.args = {
+  content: 'New',
+  color: 'blue',
+};
+
+// Do: Chip with status color
+export const DoWithStatusColor = SimpleTemplate.bind({});
+DoWithStatusColor.parameters = { chromatic: { disable: true } };
+DoWithStatusColor.args = {
+  content: 'Pending',
+  color: 'orange',
+};
+
+// Don't: Chip with too long content
+export const DontLongContent = SimpleTemplate.bind({});
+DontLongContent.parameters = { chromatic: { disable: true } };
+DontLongContent.args = {
+  content:
+    'This is a very long chip content that should not be used because it makes the chip difficult to read and breaks the layout',
+  color: 'grey',
+};
+
+export const DoShortContent = SimpleTemplate.bind({});
+DoShortContent.parameters = { chromatic: { disable: true } };
+DoShortContent.args = {
+  content: 'Status',
+  color: 'grey',
+};
+
+// Don't: Chip with inappropriate color
+export const DontInappropriateColor = SimpleTemplate.bind({});
+DontInappropriateColor.parameters = { chromatic: { disable: true } };
+DontInappropriateColor.args = {
+  content: 'Success',
+  color: 'red',
+};
+
+export const DoAppropriateColor = SimpleTemplate.bind({});
+DoAppropriateColor.parameters = { chromatic: { disable: true } };
+DoAppropriateColor.args = {
+  content: 'Success',
+  color: 'green',
+};
+
+// Don't: Chip with empty or unclear content
+export const DontEmptyContent = SimpleTemplate.bind({});
+DontEmptyContent.parameters = { chromatic: { disable: true } };
+DontEmptyContent.args = {
+  content: '',
+  color: 'grey',
+};
+
+export const DoClearContent = SimpleTemplate.bind({});
+DoClearContent.parameters = { chromatic: { disable: true } };
+DoClearContent.args = {
+  content: 'Active',
+  color: 'green',
+};