Merge branch 'main' of https://github.com/codegouvfr/react-dsfr

Author: garronej

CONTRIBUTING.md

@@ -5,7 +5,7 @@ Thank you so much to anyone that would!
 
 To get you started you can check out [the `<Alert />` component](https://react-dsfr-components.etalab.studio/?path=/docs/components-alert--default).
 
--   Here is it's definition from the SIG: [systeme-de-design.gouv.fr/elements-d-interface/composants/alerte](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte)
+-   Here is it's definition from the SIG: [systeme-de-design.gouv.fr/elements-d-interface/composants/alerte](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte) (Pro tip: the real source of tuth for DSFR component is [here](https://main--ds-gouv.netlify.app/example/component/))  
 -   Here is its implementation [src/Alert.tsx](https://github.com/codegouvfr/react-dsfr/blob/main/src/Alert.tsx)
 -   Here is the file that generates its documentation: [stories/Alert.stories.tsx](https://github.com/codegouvfr/react-dsfr/blob/main/stories/Alert.stories.tsx)
 

README.md

@@ -24,8 +24,7 @@
   <a href="https://stackblitz.com/edit/nextjs-j2wba3?file=pages/index.tsx">Playground</a>
 </p>
 
-> 🗣️ Le **9 décembre (ce vendredi)** de **11h à 12h30**, venez assister à la présentation de la librairie et poser vos questions!  
-> 👉[Lien du salon ateliers BlueHats](https://webinaire.numerique.gouv.fr//meeting/signin/362/creator/369/hash/84c9902a44b481830388d5d69c808eb669da0a5b)👈
+> 🗣️ Replay de l'atelier de présentation de la librairie [ici](https://bbb-dinum-scalelite.visio.education.fr/playback/presentation/2.3/22298bc9d93b53540248207bc3f9e31260f3b4f1-1670578779094).
 
 This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), the vanilla JS/CSS implementation of the DSFR.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "0.0.94",
+    "version": "0.0.95",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",
@@ -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
+    }
+});