@ouestfrance/sipa-bms-ui 8.22.2 → 8.22.3

package/src/documentation/tag.mdx

@@ -1,28 +1,108 @@
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 import {
-  Canvas,
-  Meta,
-  Story,
-  Stories,
-  Controls,
-} from '@storybook/addon-docs/blocks';
-import { Default as TagDefault } from '../components/form/BmsTag.stories.js';
+  PlaygroundTag,
+  DoWithClearContent,
+  DoWithDismissible,
+  DoWithActiveState,
+  DoWithDisabledState,
+  DoWithShortContent,
+  DontLongContent,
+  DontEmptyContent,
+  DoClearContent,
+  DontCantDismissWhenNeeded,
+  DoCanDismiss,
+} from '../components/form/BmsTag.stories.js';
 
 <Meta title="Documentation/Tag" />
 
 # <img src="./BmsIcon.png" /> Tag
 
-Tags are components that allow users to add differents options to forms or interfaces. A tag can be active or desactive by the user and closable (its the principal difference with Chips).
+Tags are interactive components that allow users to add, select, and remove options in forms or interfaces. Tags can be clicked to toggle their active state and can be dismissed (closed) by users. They are commonly used for filters, selections, categories, and removable items. Tags provide a way for users to interact with and manage multiple options in a compact, visual format.
 
 ![Tag representation](./tag/CoverTag.png)
 
 ## Anatomy
 
+Tags consist of a container with a border, text content, and an optional dismiss button. They can be in an active or inactive state, and can be disabled. Tags are designed to be interactive elements that users can click to toggle or dismiss.
+
 ![Tag representation](./tag/TagRepresentation.png)
 
 ## Component
 
-<Canvas of={TagDefault} args={{ label: 'toto' }} />
+Use the controls below to interact with the component and see how it behaves with different configurations.
+
+<Canvas of={PlaygroundTag} />
+
+### Props
+
+<Controls of={PlaygroundTag} />
+
+## Usage Examples
+
+### ✅ Do: Tag with clear content
+
+Always provide clear, concise content that is easy to understand at a glance.
+
+<Canvas of={DoWithClearContent} />
+
+### ✅ Do: Tag with dismissible option
+
+Use dismissible tags when users need to remove items, such as filters or selected options.
+
+<Canvas of={DoWithDismissible} />
+
+### ✅ Do: Tag with active state
+
+Use the active state to indicate that a tag is currently selected or applied. Active tags have a filled background.
+
+<Canvas of={DoWithActiveState} />
+
+### ✅ Do: Tag with disabled state
+
+Use the disabled state when a tag should be visible but not interactive. This is useful for showing locked or unavailable options.
+
+<Canvas of={DoWithDisabledState} />
+
+### ✅ Do: Tag with short content
+
+Keep tag content short and concise. Tags are meant to display brief information that users can quickly scan and interact with.
+
+<Canvas of={DoWithShortContent} />
+
+## Rules
+
+### ⛔ Don't: Long content
+
+Avoid overly long content in tags. Long text makes tags difficult to read, breaks the layout, and defeats the purpose of compact, scannable elements.
+
+**❌ Don't:**
+
+<Canvas of={DontLongContent} />
+
+**✅ Do:**
+
+<Canvas of={DoWithShortContent} />
+
+### ⛔ Don't: Empty or unclear content
+
+Always provide meaningful content in tags. Empty tags or unclear labels don't provide value to users and make the interface confusing.
+
+**❌ Don't:**
+
+<Canvas of={DontEmptyContent} />
+
+**✅ Do:**
+
+<Canvas of={DoClearContent} />
+
+### ⛔ Don't: Tag that cannot be dismissed when it should
+
+If a tag represents something that users should be able to remove (like a filter or a selected option), make sure it can be dismissed. Non-dismissible tags should only be used for permanent or required items.
+
+**❌ Don't:**
+
+<Canvas of={DontCantDismissWhenNeeded} />
 
-### Table of props
+**✅ Do:**
 
-<Controls of={TagDefault} />
+<Canvas of={DoCanDismiss} />

package/src/documentation/textArea.mdx

@@ -1,27 +1,140 @@
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
 import {
-  Canvas,
-  Meta,
-  Story,
-  Stories,
-  Controls,
-} from '@storybook/addon-docs/blocks';
-import { Default as TextAreaDefault } from '../components/form/BmsTextArea.stories.js';
+  PlaygroundTextArea,
+  DoWithLabel,
+  DoWithPlaceholder,
+  DoWithCaption,
+  DoDisabled,
+  DoLoading,
+  DontLongLabel,
+  DoShortLabel,
+  DontNoLabel,
+  DontGenericPlaceholder,
+  DoSpecificPlaceholder,
+  DontNoErrorFeedback,
+  DoWithErrorFeedback,
+  DontNoCaption,
+  DoWithHelpfulCaption,
+} from '../components/form/BmsTextArea.stories.js';
 
 <Meta title="Documentation/Fields/Text Area" />
 
 # <img src="./BmsIcon.png" /> Text Area
 
-Text area allows users to input and edit multiple lines of text such as paragraphs, comments, or descriptions.
-![InputFile representation](./fields/CoverTextArea.png)
+Text area allows users to input and edit multiple lines of text such as paragraphs, comments, or descriptions. They are essential components for forms that require longer text entries, providing a way for users to enter detailed information, feedback, or multi-line content. Various options can be shown with the field to communicate input requirements and provide feedback.
 
 ## Anatomy
 
-![InputFile representation](./fields/InputTextAreaRepresentation.png)
+Text areas consist of several key elements: a label that describes what information is needed, a textarea field where users type multiple lines of text, placeholder text for guidance, captions for additional information, and error messages for validation feedback.
+
+![](./fields/InputTextAreaRepresentation.png)
 
 ## Component
 
-<Canvas of={TextAreaDefault} args={{ label: 'toto' }} />
+Use the controls below to interact with the component and see how it behaves with different configurations.
+
+<Canvas of={PlaygroundTextArea} />
+
+### Props
+
+<Controls of={PlaygroundTextArea} />
+
+## Usage Examples
+
+### ✅ Do: Simple textarea with label
+
+Always provide a clear, descriptive label that explains what information is expected.
+
+<Canvas of={DoWithLabel} />
+
+### ✅ Do: Textarea with placeholder
+
+Use placeholders to provide examples or format hints. Placeholders disappear when the user starts typing.
+
+<Canvas of={DoWithPlaceholder} />
+
+### ✅ Do: Textarea with caption
+
+Use captions to provide additional context, help text, or format requirements such as character limits.
+
+<Canvas of={DoWithCaption} />
+
+### ✅ Do: Disabled state
+
+Use the disabled state when the textarea should not be editable, but the value should still be visible.
+
+<Canvas of={DoDisabled} />
+
+### ✅ Do: Loading state
+
+Use the loading state to indicate that the textarea is processing data or waiting for a response.
+
+<Canvas of={DoLoading} />
+
+### ✅ Do: Textarea with error feedback
+
+Always provide clear error messages when validation fails. Help users understand what went wrong and how to fix it.
+
+<Canvas of={DoWithErrorFeedback} />
+
+## Rules
+
+### ⛔ Don't: Long labels
+
+Avoid overly long labels that make the form difficult to scan. Keep labels concise and clear.
+
+**❌ Don't:**
+
+<Canvas of={DontLongLabel} />
+
+**✅ Do:**
+
+<Canvas of={DoShortLabel} />
+
+### ⛔ Don't: Missing labels
+
+Always provide a label for accessibility and clarity. Labels help screen readers and provide context.
+
+**❌ Don't:**
+
+<Canvas of={DontNoLabel} />
+
+**✅ Do:**
+
+<Canvas of={DoWithLabel} />
+
+### ⛔ Don't: Generic placeholders
+
+Avoid generic placeholders like "Enter text" or "Type here". Use specific examples that guide the user.
+
+**❌ Don't:**
+
+<Canvas of={DontGenericPlaceholder} />
+
+**✅ Do:**
+
+<Canvas of={DoSpecificPlaceholder} />
+
+### ⛔ Don't: No error feedback
+
+Always provide clear error messages when validation fails. Help users understand what went wrong and how to fix it.
+
+**❌ Don't:**
+
+<Canvas of={DontNoErrorFeedback} />
+
+**✅ Do:**
+
+<Canvas of={DoWithErrorFeedback} />
+
+### ⛔ Don't: Missing helpful captions
+
+When textarea requirements are complex, provide captions to help users understand what's expected.
+
+**❌ Don't:**
+
+<Canvas of={DontNoCaption} />
 
-### Table of props
+**✅ Do:**
 
-<Controls of={TextAreaDefault} />
+<Canvas of={DoWithHelpfulCaption} />

package/src/documentation/fields_text.mdx

@@ -1,31 +0,0 @@
-import {
-  Canvas,
-  Meta,
-  Story,
-  Stories,
-  Controls,
-} from '@storybook/addon-docs/blocks';
-import { Default as FieldDefault } from '../plugins/field/FieldComponent.stories.js';
-import { Default as TextDefault } from '../components/form/BmsInputText.stories.js';
-import BmsInputText from '../components/form/BmsInputText.vue';
-import { Default as SelectDefault } from '../components/form/BmsSelect.stories.js';
-
-<Meta title="Documentation/Fields/Input Text" />
-
-# <img src="./BmsIcon.png" /> Input Text
-
-Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements.
-
-![](./fields/CoverInputText.png)
-
-## Anatomy
-
-![](./fields/InputRepresentation.png)
-
-## Component
-
-<Canvas of={TextDefault} args={{ label: 'toto' }} />
-
-### Table of props
-
-<Controls of={TextDefault} />