feat: add Summary component (#35)

* feat: add Summary Component

* fix

* Update src/Summary.tsx

Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
Signed-off-by: Julien Bouquillon <contact@revolunet.com>

* Update src/Summary.tsx

Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
Signed-off-by: Julien Bouquillon <contact@revolunet.com>

* Update src/Summary.tsx

Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
Signed-off-by: Julien Bouquillon <contact@revolunet.com>

* Update src/Summary.tsx

Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
Signed-off-by: Julien Bouquillon <contact@revolunet.com>

* fixes

Signed-off-by: Julien Bouquillon <contact@revolunet.com>
Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>

Author: Julien Bouquillon

COMPONENTS.md

@@ -35,7 +35,7 @@
 -   [ ] Share
 -   [x] Footer
 -   [ ] Translate
--   [ ] Summary
+-   [x] Summary
 -   [ ] Table
 -   [ ] Tag
 -   [ ] Download

package.json

@@ -124,6 +124,7 @@
         "./mui": "./dist/mui.js",
         "./lib": "./dist/lib/index.js",
         "./Tabs": "./dist/Tabs.js",
+        "./Summary": "./dist/Summary.js",
         "./Stepper": "./dist/Stepper.js",
         "./SkipLinks": "./dist/SkipLinks.js",
         "./Quote": "./dist/Quote.js",

src/Summary.tsx

@@ -0,0 +1,100 @@
+import React, { memo, forwardRef, useId } from "react";
+import { symToStr } from "tsafe/symToStr";
+import { assert } from "tsafe/assert";
+import type { Equals } from "tsafe";
+
+import { createComponentI18nApi } from "./lib/i18n";
+import { cx } from "./lib/tools/cx";
+import { fr, RegisteredLinkProps } from "./lib";
+import { getLink } from "./lib/routing";
+
+import "./dsfr/component/summary/summary.css";
+
+type SummaryLink = {
+    text: string;
+    linkProps: RegisteredLinkProps;
+};
+
+export type SummaryProps = {
+    className?: string;
+    links: SummaryLink[];
+    title?: string;
+    /** Default: "p" */
+    as?: "p" | "h2" | "h3" | "h4" | "h5" | "h6";
+    classes?: Partial<Record<"root" | "title" | "link", string>>;
+};
+
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-summary> */
+export const Summary = memo(
+    forwardRef<HTMLDivElement, SummaryProps>((props, ref) => {
+        const { className, links, as = "p", title, classes = {}, ...rest } = props;
+
+        const { t } = useTranslation();
+
+        const titleId = useId();
+        const summaryTitle = title ?? t("title");
+
+        const { Link } = getLink();
+
+        assert<Equals<keyof typeof rest, never>>();
+
+        return (
+            <nav
+                className={cx(fr.cx("fr-summary"), classes.root, className)}
+                role="navigation"
+                aria-labelledby={titleId}
+                ref={ref}
+            >
+                {React.createElement(
+                    as,
+                    {
+                        className: cx(fr.cx("fr-summary__title"), classes.title),
+                        id: titleId
+                    },
+                    <>{summaryTitle}</>
+                )}
+                <ol>
+                    {links.map(
+                        (link, idx) =>
+                            link.linkProps.href !== undefined && (
+                                <li key={idx}>
+                                    <Link
+                                        {...link.linkProps}
+                                        className={cx(
+                                            fr.cx("fr-summary__link"),
+                                            classes.link,
+                                            link.linkProps.className
+                                        )}
+                                    >
+                                        {link.text}
+                                    </Link>
+                                </li>
+                            )
+                    )}
+                </ol>
+            </nav>
+        );
+    })
+);
+
+Summary.displayName = symToStr({ Summary });
+
+const { useTranslation, addSummaryTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ Summary }),
+    "frMessages": {
+        /* spell-checker: disable */
+        "title": "Sommaire"
+        /* spell-checker: enable */
+    }
+});
+
+addSummaryTranslations({
+    "lang": "en",
+    "messages": {
+        "title": "Summary"
+    }
+});
+
+export { addSummaryTranslations };
+
+export default Summary;

stories/Summary.stories.tsx

@@ -0,0 +1,73 @@
+import { Summary } from "../dist/Summary";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory({
+    sectionName,
+    "wrappedComponent": { Summary },
+    "description": `
+- [See DSFR documentation](//www.systeme-de-design.gouv.fr/elements-d-interface/composants/sommaire)
+- [See source code](//github.com/codegouvfr/react-dsfr/blob/main/src/Summary.tsx)`,
+    "disabledProps": ["lang"]
+});
+
+export default meta;
+
+export const Default = getStory({
+    links: [
+        {
+            linkProps: { href: "#" },
+            text: "Titre de l’ancre"
+        },
+        {
+            linkProps: { href: "#" },
+
+            text: "Titre de l’ancre"
+        },
+        {
+            linkProps: { href: "#" },
+
+            text: "Titre de l’ancre"
+        },
+        {
+            linkProps: { href: "#" },
+
+            text: "Titre de l’ancre"
+        },
+        {
+            linkProps: { href: "#" },
+
+            text: "Titre de l’ancre"
+        }
+    ]
+});
+
+export const SummaryWithCustomTitle = getStory({
+    title: "Sommaire personnalisé",
+    links: [
+        {
+            linkProps: { href: "#" },
+            text: "Titre de l’ancre"
+        },
+        {
+            linkProps: { href: "#" },
+
+            text: "Titre de l’ancre"
+        },
+        {
+            linkProps: { href: "#" },
+
+            text: "Titre de l’ancre"
+        },
+        {
+            linkProps: { href: "#" },
+
+            text: "Titre de l’ancre"
+        },
+        {
+            linkProps: { href: "#" },
+
+            text: "Titre de l’ancre"
+        }
+    ]
+});