Skip to content

Commit c80a15f

Browse files
committed
feat(Tag): add TagsGroup
1 parent 334b804 commit c80a15f

File tree

1 file changed

+47
-0
lines changed

1 file changed

+47
-0
lines changed

src/TagsGroup.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { CSSProperties, forwardRef, memo } from "react";
2+
import { assert, Equals } from "tsafe";
3+
import { symToStr } from "tsafe/symToStr";
4+
import Tag, { TagProps } from "./Tag";
5+
import { useAnalyticsId } from "./tools/useAnalyticsId";
6+
import { cx } from "./tools/cx";
7+
8+
export type TagsGroupProps = TagsGroupProps.Common;
9+
10+
//https://main--ds-gouv.netlify.app/example/component/tag/#:~:text=Groupe%20de%20tags
11+
export namespace TagsGroupProps {
12+
export type Common = {
13+
id?: string;
14+
className?: string;
15+
style?: CSSProperties;
16+
smallTags?: TagProps["small"];
17+
/** 6 tags should be the maximum. */
18+
tags: [TagProps, ...TagProps[]];
19+
};
20+
}
21+
22+
export const TagsGroup = memo(
23+
forwardRef<HTMLUListElement, TagsGroupProps>((props, ref) => {
24+
const { id: props_id, className, tags, smallTags = false, style, ...rest } = props;
25+
26+
assert<Equals<keyof typeof rest, never>>();
27+
28+
const id = useAnalyticsId({
29+
"defaultIdPrefix": "fr-tags-group",
30+
"explicitlyProvidedId": props_id
31+
});
32+
33+
return (
34+
<ul className={cx("fr-tags-group", className)} style={style} id={id} ref={ref}>
35+
{tags.map((tagProps, i) => (
36+
<li key={i}>
37+
<Tag small={smallTags} {...tagProps} />
38+
</li>
39+
))}
40+
</ul>
41+
);
42+
})
43+
);
44+
45+
TagsGroup.displayName = symToStr({ TagsGroup });
46+
47+
export default TagsGroup;

0 commit comments

Comments
 (0)