Merge pull request #21 from codegouvfr/feat/add-skiplinks-component

Feat/add skiplinks component

Author: garronej

package.json

@@ -124,6 +124,7 @@
         "./mui": "./dist/mui.js",
         "./lib": "./dist/lib/index.js",
         "./Tabs": "./dist/Tabs.js",
+        "./SkipLinks": "./dist/SkipLinks.js",
         "./Notice": "./dist/Notice.js",
         "./Highlight": "./dist/Highlight.js",
         "./Header": "./dist/Header/index.js",

src/SkipLinks.tsx

@@ -0,0 +1,78 @@
+import React, { forwardRef, memo } from "react";
+import { assert, Equals } from "tsafe";
+import { symToStr } from "tsafe/symToStr";
+import { fr } from "./lib";
+import { createComponentI18nApi } from "./lib/i18n";
+import { cx } from "./lib/tools/cx";
+
+export type SkipLink = {
+    label: string;
+    anchor: `${string}`;
+};
+
+export type SkipLinksProps = {
+    className?: string;
+    links: SkipLink[];
+    classes?: Partial<Record<"root" | "list" | "link", string>>;
+};
+
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-skiplinks> */
+export const SkipLinks = memo(
+    forwardRef<HTMLDivElement, SkipLinksProps>((props, ref) => {
+        const { className, classes = {}, links, ...rest } = props;
+        const { t } = useTranslation();
+        assert<Equals<keyof typeof rest, never>>();
+
+        return (
+            <div className={cx(fr.cx("fr-skiplinks"), classes.root, className)} ref={ref} {...rest}>
+                <nav className={fr.cx("fr-container")} role="navigation" aria-label={t("label")}>
+                    <ul className={cx(fr.cx("fr-skiplinks__list"), classes.list)}>
+                        {links &&
+                            links.map(link => (
+                                <li key={link.anchor}>
+                                    <a
+                                        className={cx(fr.cx("fr-link"), classes.link)}
+                                        href={link.anchor}
+                                    >
+                                        {link.label}
+                                    </a>
+                                </li>
+                            ))}
+                    </ul>
+                </nav>
+            </div>
+        );
+    })
+);
+
+SkipLinks.displayName = symToStr({ SkipLinks });
+
+const { useTranslation, addSkipLinksTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ SkipLinks }),
+    "frMessages": {
+        /* spell-checker: disable */
+        "label": "Accès rapide"
+        /* spell-checker: enable */
+    }
+});
+
+addSkipLinksTranslations({
+    "lang": "en",
+    "messages": {
+        "label": "Quick access"
+    }
+});
+addSkipLinksTranslations({
+    "lang": "es",
+    "messages": {
+        "label": "Acceso rapido"
+    }
+});
+addSkipLinksTranslations({
+    "lang": "de",
+    "messages": {
+        "label": "Schneller Zugang"
+    }
+});
+
+export default SkipLinks;

stories/SkipLinks.stories.tsx

@@ -0,0 +1,38 @@
+import { SkipLinks } from "../dist/SkipLinks";
+import type { SkipLinksProps } from "../src/SkipLinks";
+import { sectionName } from "./sectionName";
+import { getStoryFactory } from "./getStory";
+
+const { meta, getStory } = getStoryFactory<SkipLinksProps>({
+    sectionName,
+    wrappedComponent: { SkipLinks },
+    description: `
+- [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/liens-d-evitement)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/SkipLinks.tsx)`
+});
+
+export default meta;
+
+export const Default = getStory({
+    links: [
+        {
+            label: "Contenu",
+            anchor: "#contenu"
+        },
+        {
+            label: "Menu",
+            anchor: "#header-navigation"
+        },
+        {
+            label: "Recherche",
+            anchor: "#header-search"
+        },
+        {
+            label: "Pied de page",
+            anchor: "#footer"
+        }
+    ],
+    classes: {
+        root: "fr-mt-9v" // Just to fix storybook preview toolbar overlapping
+    }
+});