Merge pull request #163 from pprev94/fix-issue-160

feat: Choose Hx level for Card title ref #160

Author: garronej

src/Card.tsx

@@ -15,6 +15,7 @@ export type CardProps = {
     id?: string;
     className?: string;
     title: ReactNode;
+    titleAs?: `h${2 | 3 | 4 | 5 | 6}`;
     desc?: ReactNode;
     imageUrl?: string;
     imageAlt?: string;
@@ -81,6 +82,7 @@ export const Card = memo(
             id: props_id,
             className,
             title,
+            titleAs: HtmlTitleTag = "h3",
             linkProps,
             desc,
             imageUrl,
@@ -146,7 +148,7 @@ export const Card = memo(
             >
                 <div className={cx(fr.cx("fr-card__body"), classes.body)}>
                     <div className={cx(fr.cx("fr-card__content"), classes.content)}>
-                        <h3 className={cx(fr.cx("fr-card__title"), classes.title)}>
+                        <HtmlTitleTag className={cx(fr.cx("fr-card__title"), classes.title)}>
                             {linkProps !== undefined ? (
                                 <Link
                                     {...linkProps}
@@ -157,7 +159,7 @@ export const Card = memo(
                             ) : (
                                 title
                             )}
-                        </h3>
+                        </HtmlTitleTag>
                         {desc !== undefined && (
                             <p className={cx(fr.cx("fr-card__desc"), classes.desc)}>{desc}</p>
                         )}

stories/Card.stories.tsx

@@ -18,6 +18,15 @@ const { meta, getStory } = getStoryFactory({
 - [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Card.tsx)`,
     "argTypes": {
         "title": { "description": `Required.` },
+        titleAs: {
+            "description": `Heading level`,
+            "options": (() => {
+                const headings = ["h2", "h3", "h4", "h5", "h6"] as const;
+                assert<Equals<typeof headings[number] | undefined, CardProps["titleAs"]>>();
+                return headings;
+            })(),
+            "control": { "type": "radio" }
+        },
         "desc": { "description": `` },
         linkProps: {
             "description": `Required only if enlargeLink is true. The Card Link props.`
@@ -30,9 +39,7 @@ const { meta, getStory } = getStoryFactory({
             "description": "Card title text sizing",
             "options": (() => {
                 const sizes = ["small", "medium", "large"] as const;
-
                 assert<Equals<typeof sizes[number] | undefined, CardProps["size"]>>();
-
                 return sizes;
             })(),
             "control": { "type": "radio" }
@@ -49,6 +56,7 @@ export default meta;
 const defaultProps = {
     "enlargeLink": true as const,
     "title": "Intitulé de la carte (sur lequel se trouve le lien)",
+    "titleAs": "h3" as const,
     "linkProps": {
         "href": "#"
     },