From 4420062f719f48f9111753dd6042d6bacbbe11d1 Mon Sep 17 00:00:00 2001 From: Julien Bouquillon Date: Thu, 22 Dec 2022 18:39:41 +0100 Subject: [PATCH 1/7] feat: add Summary Component --- package.json | 1 + src/Summary.tsx | 92 +++++++++++++++++++++++++++++++++++++ stories/Summary.stories.tsx | 74 +++++++++++++++++++++++++++++ 3 files changed, 167 insertions(+) create mode 100644 src/Summary.tsx create mode 100644 stories/Summary.stories.tsx diff --git a/package.json b/package.json index a1a0648f9..6d8cc90c7 100644 --- a/package.json +++ b/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", diff --git a/src/Summary.tsx b/src/Summary.tsx new file mode 100644 index 000000000..522f11d30 --- /dev/null +++ b/src/Summary.tsx @@ -0,0 +1,92 @@ +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 "./dsfr/component/summary/summary.css"; + +type SummaryLink = { + text: string; + linkProps: RegisteredLinkProps; +}; + +export type SummaryProps = { + className?: string; + links: SummaryLink[]; + title?: string; + as?: "p" | "h2" | "h3" | "h4" | "h5" | "h6"; + classes?: Partial>; +}; + +/** @see */ +export const Summary = memo( + forwardRef((props, ref) => { + const { className, links, as = "p", title, classes = {}, ...rest } = props; + + const { t } = useTranslation(); + + const titleId = useId(); + const summaryTitle = title || t("title"); + + assert>(); + + return ( + + ); + }) +); + +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; diff --git a/stories/Summary.stories.tsx b/stories/Summary.stories.tsx new file mode 100644 index 000000000..0ce74a82a --- /dev/null +++ b/stories/Summary.stories.tsx @@ -0,0 +1,74 @@ +import React, { Children } from "react"; +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" + } + ] +}); From fc5ec8aa5a2c6b2e6d0dd868e84819f117e968db Mon Sep 17 00:00:00 2001 From: Julien Bouquillon Date: Thu, 22 Dec 2022 18:40:02 +0100 Subject: [PATCH 2/7] fix --- COMPONENTS.md | 2 +- stories/Summary.stories.tsx | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/COMPONENTS.md b/COMPONENTS.md index c48c557b6..c803b95f9 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -35,7 +35,7 @@ - [ ] Share - [x] Footer - [ ] Translate -- [ ] Summary +- [x] Summary - [ ] Table - [ ] Tag - [ ] Download diff --git a/stories/Summary.stories.tsx b/stories/Summary.stories.tsx index 0ce74a82a..76ea3ff60 100644 --- a/stories/Summary.stories.tsx +++ b/stories/Summary.stories.tsx @@ -1,4 +1,3 @@ -import React, { Children } from "react"; import { Summary } from "../dist/Summary"; import { sectionName } from "./sectionName"; import { getStoryFactory } from "./getStory"; From eca5bb031c9137b4eccab2f4e9ef0445020306b9 Mon Sep 17 00:00:00 2001 From: Julien Bouquillon Date: Fri, 23 Dec 2022 11:04:05 +0100 Subject: [PATCH 3/7] Update src/Summary.tsx Co-authored-by: Joseph Garrone Signed-off-by: Julien Bouquillon --- src/Summary.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Summary.tsx b/src/Summary.tsx index 522f11d30..3dee4ec50 100644 --- a/src/Summary.tsx +++ b/src/Summary.tsx @@ -18,6 +18,7 @@ export type SummaryProps = { className?: string; links: SummaryLink[]; title?: string; + /** Default: "p" */ as?: "p" | "h2" | "h3" | "h4" | "h5" | "h6"; classes?: Partial>; }; From 8c55c606ca461050780304fca3fb46836f620ccb Mon Sep 17 00:00:00 2001 From: Julien Bouquillon Date: Fri, 23 Dec 2022 11:05:05 +0100 Subject: [PATCH 4/7] Update src/Summary.tsx Co-authored-by: Joseph Garrone Signed-off-by: Julien Bouquillon --- src/Summary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Summary.tsx b/src/Summary.tsx index 3dee4ec50..2a9bb166d 100644 --- a/src/Summary.tsx +++ b/src/Summary.tsx @@ -31,7 +31,7 @@ export const Summary = memo( const { t } = useTranslation(); const titleId = useId(); - const summaryTitle = title || t("title"); + const summaryTitle = title ?? t("title"); assert>(); From 255ed39870404bef4b4a98c7b16fb69fd8dcf9d7 Mon Sep 17 00:00:00 2001 From: Julien Bouquillon Date: Fri, 23 Dec 2022 11:05:17 +0100 Subject: [PATCH 5/7] Update src/Summary.tsx Co-authored-by: Joseph Garrone Signed-off-by: Julien Bouquillon --- src/Summary.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Summary.tsx b/src/Summary.tsx index 2a9bb166d..d2844be90 100644 --- a/src/Summary.tsx +++ b/src/Summary.tsx @@ -54,7 +54,7 @@ export const Summary = memo( {links.map( (link, idx) => link.linkProps.href !== undefined && ( -
  • +
  • Date: Fri, 23 Dec 2022 11:05:47 +0100 Subject: [PATCH 6/7] Update src/Summary.tsx Co-authored-by: Joseph Garrone Signed-off-by: Julien Bouquillon --- src/Summary.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Summary.tsx b/src/Summary.tsx index d2844be90..369483f91 100644 --- a/src/Summary.tsx +++ b/src/Summary.tsx @@ -56,8 +56,9 @@ export const Summary = memo( link.linkProps.href !== undefined && (
  • {link.text} From babbe3bccfdb039566a7760f477b1203afa6e841 Mon Sep 17 00:00:00 2001 From: Julien Bouquillon Date: Fri, 23 Dec 2022 11:11:41 +0100 Subject: [PATCH 7/7] fixes --- src/Summary.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/src/Summary.tsx b/src/Summary.tsx index 369483f91..6917d8971 100644 --- a/src/Summary.tsx +++ b/src/Summary.tsx @@ -2,10 +2,11 @@ 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 { 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"; @@ -33,6 +34,8 @@ export const Summary = memo( const titleId = useId(); const summaryTitle = title ?? t("title"); + const { Link } = getLink(); + assert>(); return ( @@ -55,13 +58,16 @@ export const Summary = memo( (link, idx) => link.linkProps.href !== undefined && (
  • - {link.text} - +
    • ) )}