@ouestfrance/sipa-bms-ui 8.22.2 → 8.22.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.22.2",
+  "version": "8.22.3",
   "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",
     "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/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',
+};

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

@@ -6,14 +6,14 @@ import { ref } from 'vue';
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputCheckboxCaptionGroup',
+  component: BmsInputCheckboxCaptionGroup,
   parameters: {
     docs: {
       page: template,
     },
   },
   tags: ['with_useable_code'],
-  title: 'Composants/form/InputCheckboxCaptionGroup',
-  component: BmsInputCheckboxCaptionGroup,
 };
 
 const Template = (args) => ({
@@ -171,3 +171,158 @@ Errors.args = {
   label: 'This is a field label',
   errors: ['Error 1', 'Error 2'],
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || []);
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputCheckboxCaptionGroup,
+  },
+  template: `
+  <BmsInputCheckboxCaptionGroup v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundCheckboxCaptionGroup = SimpleTemplate.bind({});
+PlaygroundCheckboxCaptionGroup.parameters = { chromatic: { disable: true } };
+PlaygroundCheckboxCaptionGroup.args = {
+  label: 'Select features',
+  modelValue: [],
+  options: [
+    {
+      value: 'feature1',
+      label: 'Feature 1',
+      captions: ['Basic feature included'],
+    },
+    { value: 'feature2', label: 'Feature 2', captions: ['Advanced feature'] },
+    { value: 'feature3', label: 'Feature 3', captions: ['Premium feature'] },
+  ],
+};
+
+// Do: Checkbox caption group with clear labels
+export const DoWithClearLabels = SimpleTemplate.bind({});
+DoWithClearLabels.parameters = { chromatic: { disable: true } };
+DoWithClearLabels.args = {
+  label: 'Notification preferences',
+  modelValue: [],
+  options: [
+    {
+      value: 'email',
+      label: 'Email notifications',
+      captions: ['Receive updates via email'],
+    },
+    {
+      value: 'sms',
+      label: 'SMS notifications',
+      captions: ['Receive updates via SMS'],
+    },
+    {
+      value: 'push',
+      label: 'Push notifications',
+      captions: ['Receive browser notifications'],
+    },
+  ],
+};
+
+// Do: Checkbox caption group with helpful captions
+export const DoWithHelpfulCaptions = SimpleTemplate.bind({});
+DoWithHelpfulCaptions.parameters = { chromatic: { disable: true } };
+DoWithHelpfulCaptions.args = {
+  label: 'Subscription add-ons',
+  modelValue: [],
+  options: [
+    {
+      value: 'storage',
+      label: 'Extra Storage',
+      captions: ['+100GB storage space'],
+    },
+    {
+      value: 'support',
+      label: 'Priority Support',
+      captions: ['24/7 priority support'],
+    },
+    {
+      value: 'analytics',
+      label: 'Advanced Analytics',
+      captions: ['Detailed usage analytics'],
+    },
+  ],
+};
+
+// Do: Checkbox caption group in column layout
+export const DoWithColumnLayout = SimpleTemplate.bind({});
+DoWithColumnLayout.parameters = { chromatic: { disable: true } };
+DoWithColumnLayout.args = {
+  label: 'Select services',
+  modelValue: [],
+  align: 'column',
+  options: [
+    {
+      value: 'service1',
+      label: 'Service 1',
+      captions: ['Description of service 1 with more details'],
+    },
+    {
+      value: 'service2',
+      label: 'Service 2',
+      captions: ['Description of service 2 with more details'],
+    },
+    {
+      value: 'service3',
+      label: 'Service 3',
+      captions: ['Description of service 3 with more details'],
+    },
+  ],
+};
+
+// Do: Checkbox caption group with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Select features',
+  modelValue: [],
+  errors: ['Please select at least one feature'],
+  options: [
+    { value: 'feature1', label: 'Feature 1', captions: ['Basic feature'] },
+    { value: 'feature2', label: 'Feature 2', captions: ['Advanced feature'] },
+  ],
+};
+
+// Don't: Missing labels
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  modelValue: [],
+  options: [
+    { value: 'option1', label: 'Option 1', captions: ['Description'] },
+    { value: 'option2', label: 'Option 2', captions: ['Description'] },
+  ],
+};
+
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Choose options',
+  modelValue: [],
+  options: [
+    { value: 'option1', label: 'Option 1', captions: ['Description'] },
+    { value: 'option2', label: 'Option 2', captions: ['Description'] },
+  ],
+};
+
+// Don't: No captions when needed
+export const DontNoCaptions = SimpleTemplate.bind({});
+DontNoCaptions.parameters = { chromatic: { disable: true } };
+DontNoCaptions.args = {
+  label: 'Subscription add-ons',
+  modelValue: [],
+  options: [
+    { value: 'storage', label: 'Extra Storage' },
+    { value: 'support', label: 'Priority Support' },
+    { value: 'analytics', label: 'Advanced Analytics' },
+  ],
+};

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

@@ -6,13 +6,13 @@ import { ref } from 'vue';
 import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  title: 'Composants/form/InputCheckboxGroup',
+  component: BmsInputCheckboxGroup,
   parameters: {
     docs: {
       page: template,
     },
   },
-  title: 'Composants/form/InputCheckboxGroup',
-  component: BmsInputCheckboxGroup,
 };
 
 const Template = (args) => ({
@@ -92,3 +92,120 @@ Errors.args = {
   label: 'This is a field label',
   errors: ['Error 1', 'Error 2'],
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  setup() {
+    const modelValue = ref(args.modelValue || []);
+    return { args, modelValue };
+  },
+  components: {
+    BmsInputCheckboxGroup,
+  },
+  template: `
+  <BmsInputCheckboxGroup v-bind="args" v-model="modelValue" />
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundCheckboxGroup = SimpleTemplate.bind({});
+PlaygroundCheckboxGroup.parameters = { chromatic: { disable: true } };
+PlaygroundCheckboxGroup.args = {
+  label: 'Select interests',
+  modelValue: [],
+  values: [
+    { value: 'sports', label: 'Sports' },
+    { value: 'music', label: 'Music' },
+    { value: 'travel', label: 'Travel' },
+  ],
+};
+
+// Do: Checkbox group with clear labels
+export const DoWithClearLabels = SimpleTemplate.bind({});
+DoWithClearLabels.parameters = { chromatic: { disable: true } };
+DoWithClearLabels.args = {
+  label: 'Communication preferences',
+  modelValue: [],
+  values: [
+    { value: 'email', label: 'Email' },
+    { value: 'sms', label: 'SMS' },
+    { value: 'phone', label: 'Phone' },
+  ],
+};
+
+// Do: Checkbox group with caption
+export const DoWithCaption = SimpleTemplate.bind({});
+DoWithCaption.parameters = { chromatic: { disable: true } };
+DoWithCaption.args = {
+  label: 'Select categories',
+  modelValue: [],
+  captions: ['You can select multiple categories'],
+  values: [
+    { value: 'tech', label: 'Technology' },
+    { value: 'design', label: 'Design' },
+    { value: 'business', label: 'Business' },
+  ],
+};
+
+// Do: Checkbox group in column layout
+export const DoWithColumnLayout = SimpleTemplate.bind({});
+DoWithColumnLayout.parameters = { chromatic: { disable: true } };
+DoWithColumnLayout.args = {
+  label: 'Select permissions',
+  modelValue: [],
+  align: 'column',
+  captions: ['Select all permissions you want to grant'],
+  values: [
+    { value: 'read', label: 'Read access' },
+    { value: 'write', label: 'Write access' },
+    { value: 'delete', label: 'Delete access' },
+    { value: 'admin', label: 'Admin access' },
+  ],
+};
+
+// Do: Checkbox group with error feedback
+export const DoWithErrorFeedback = SimpleTemplate.bind({});
+DoWithErrorFeedback.parameters = { chromatic: { disable: true } };
+DoWithErrorFeedback.args = {
+  label: 'Select interests',
+  modelValue: [],
+  errors: ['Please select at least one interest'],
+  values: [
+    { value: 'sports', label: 'Sports' },
+    { value: 'music', label: 'Music' },
+  ],
+};
+
+// Don't: Missing labels
+export const DontNoLabel = SimpleTemplate.bind({});
+DontNoLabel.parameters = { chromatic: { disable: true } };
+DontNoLabel.args = {
+  modelValue: [],
+  values: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+  ],
+};
+
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  label: 'Choose options',
+  modelValue: [],
+  values: [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+  ],
+};
+
+// Don't: No error feedback
+export const DontNoErrorFeedback = SimpleTemplate.bind({});
+DontNoErrorFeedback.parameters = { chromatic: { disable: true } };
+DontNoErrorFeedback.args = {
+  label: 'Select interests',
+  modelValue: [],
+  values: [
+    { value: 'sports', label: 'Sports' },
+    { value: 'music', label: 'Music' },
+  ],
+};