feat(TagsGroup): use group sm and add story

Author: lsagetlethias

src/TagsGroup.tsx

@@ -4,6 +4,7 @@ import { symToStr } from "tsafe/symToStr";
 import Tag, { TagProps } from "./Tag";
 import { useAnalyticsId } from "./tools/useAnalyticsId";
 import { cx } from "./tools/cx";
+import { fr } from "./fr";
 
 export type TagsGroupProps = TagsGroupProps.Common;
 
@@ -30,11 +31,16 @@ export const TagsGroup = memo(
             "explicitlyProvidedId": props_id
         });
 
+        const tagsGroupClassName = cx(
+            fr.cx("fr-tags-group", smallTags && "fr-tags-group--sm"),
+            className
+        );
+
         return (
-            <ul className={cx("fr-tags-group", className)} style={style} id={id} ref={ref}>
+            <ul className={tagsGroupClassName} style={style} id={id} ref={ref}>
                 {tags.map((tagProps, i) => (
                     <li key={i}>
-                        <Tag small={smallTags} {...tagProps} />
+                        <Tag {...tagProps} />
                     </li>
                 ))}
             </ul>

stories/TagsGroup.stories.tsx

@@ -0,0 +1,74 @@
+import { TagsGroup, TagsGroupProps } from "../dist/TagsGroup";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+import { TagProps } from "../dist/Tag";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { TagsGroup },
+    "description": `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/composants-et-modeles/composants/tag)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/TagsGroup.tsx)`,
+    "argTypes": {
+        "smallTags": {
+            "description": ` 
+                Default: false, if true, the tags will be smaller.
+            `,
+            "control": { "type": "boolean" }
+        },
+        "tags": {
+            "description": `An array of TagProps (at least 1, max recommended: 6).`,
+            "control": { "type": null }
+        }
+    },
+    "disabledProps": ["lang"],
+    "defaultContainerWidth": 800
+});
+
+export default meta;
+
+const tagsWithProps = (props?: Omit<TagProps, "children">) =>
+    Array.from(
+        { "length": 6 },
+        (_, i) =>
+            ({
+                ...props,
+                "children": `Libellé tag ${i + 1}`
+            } as TagProps)
+    ) as TagsGroupProps["tags"];
+
+export const Default = getStory({
+    "tags": tagsWithProps()
+});
+
+export const SmallTags = getStory({
+    "tags": tagsWithProps(),
+    "smallTags": true
+});
+
+export const TagsAsAnchor = getStory({
+    "tags": tagsWithProps({ "linkProps": { "href": "#" } })
+});
+
+export const SmallTagsAsAnchor = getStory({
+    "tags": tagsWithProps({ "linkProps": { "href": "#" } }),
+    "smallTags": true
+});
+
+export const TagsPressed = getStory({
+    "tags": tagsWithProps({ "pressed": true })
+});
+
+export const SmallTagsPressed = getStory({
+    "tags": tagsWithProps({ "pressed": true }),
+    "smallTags": true
+});
+
+export const TagsDismissable = getStory({
+    "tags": tagsWithProps({ "dismissible": true })
+});
+
+export const SmallTagsDismissable = getStory({
+    "tags": tagsWithProps({ "dismissible": true }),
+    "smallTags": true
+});