Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#273 more config on home #274

Open
wants to merge 2 commits into
base: #265-add-tab-for-referencedPublications
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 24 additions & 1 deletion web/src/ui/config-ui.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@
"softwareSelection": {
"enabled": true
},
"theSillInAFewWordsParagraphLinks": [
"https://fr.wikipedia.org/wiki/Logiciel_libre",
"https://www.legifrance.gouv.fr/jorf/article_jo/JORFARTI000033203039",
"https://code.gouv.fr/sill/readme",
"https://code.gouv.fr/fr/doc/licences-libres-dinum"
],
"statistics": {
"catgegories": [
"softwareCount",
Expand All @@ -41,7 +47,24 @@
]
},
"usecases": {
"catgegories": ["declareReferent", "editSoftware", "addSoftwareOrService"]
"declareReferent": {
"enabled": true,
"labelLinks": [],
"buttonEnabled": true,
"buttonLink": ""
},
"editSoftware": {
"enabled": true,
"labelLinks": [],
"buttonEnabled": true,
"buttonLink": ""
},
"addSoftwareOrService": {
"enabled": true,
"labelLinks": [],
"buttonEnabled": true,
"buttonLink": ""
}
}
},
"softwareDetails": {
Expand Down
267 changes: 160 additions & 107 deletions web/src/ui/pages/home/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import humanCooperationSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/pictogra
import documentSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/pictograms/document/document.svg";
import { Trans, useTranslation } from "react-i18next";
import config from "../../../ui/config-ui.json";
import { Grid } from "@mui/material";

type Props = {
className?: string;
Expand All @@ -43,7 +44,25 @@ export default function Home(props: Props) {
const statsCases = config.home.statistics.catgegories as Array<availableStat>;

type availableUseCase = "declareReferent" | "editSoftware" | "addSoftwareOrService";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

majuscule pour les types , c'est les useCase de quoi ? ça mériterait peut-être d'apparaitre dans le nom :

Suggested change
type availableUseCase = "declareReferent" | "editSoftware" | "addSoftwareOrService";
type AvailableUseCase = "declareReferent" | "editSoftware" | "addSoftwareOrService";

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oui, j'ai vu qu'on avait laisser passé ça d'une ancienne PR 😅

const useCases = config.home.usecases.catgegories as Array<availableUseCase>;
type UseCaseConfig = {
enabled: boolean;
labelLinks: any;
buttonEnabled: boolean;
buttonLink: string;
};
type UsesCaseConfig = Record<availableUseCase, UseCaseConfig>;

const configUseCases: UsesCaseConfig = config.home.usecases;
const keys: Array<availableUseCase> = Object.keys(
configUseCases
) as Array<availableUseCase>;
Comment on lines +56 to +58
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const keys: Array<availableUseCase> = Object.keys(
configUseCases
) as Array<availableUseCase>;
const keys = Object.keys(
configUseCases
) as AvailableUseCase[];


const useCases: Array<availableUseCase> = keys.reduce(
(accumulator: Array<availableUseCase>, key: availableUseCase) => {
return configUseCases[key].enabled ? accumulator.concat([key]) : accumulator;
},
[]
);
Comment on lines +60 to +65
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En fait c'est juste un filtre ça :

Suggested change
const useCases: Array<availableUseCase> = keys.reduce(
(accumulator: Array<availableUseCase>, key: availableUseCase) => {
return configUseCases[key].enabled ? accumulator.concat([key]) : accumulator;
},
[]
);
const useCases = keys.filter(useCaseName => configUseCases[useCaseName].enabled)


const softwareSelectionList = [
{
Expand Down Expand Up @@ -129,75 +148,144 @@ export default function Home(props: Props) {
<h1 className={cx(classes.whiteText, classes.SillNumberTitle)}>
{t("home.SILLNumbers")}
</h1>
<div className={classes.sillNumberList}>
<Grid
container
direction="row"
sx={{
justifyContent: "center",
alignItems: "center"
}}
>
{statsCases.map((metricName: availableStat) => (
<div key={metricName}>
<AnimatedMetric
className={cx(
fr.cx("fr-display--sm"),
classes.whiteText,
classes.numberText
)}
metricValue={stats[metricName]}
/>
<h4 className={classes.whiteText}>
{t(`home.${metricName}`)}
</h4>
</div>
<Grid item xs={3}>
<div key={metricName}>
<AnimatedMetric
className={cx(
fr.cx("fr-display--sm"),
classes.whiteText,
classes.numberText
)}
metricValue={stats[metricName]}
/>
<h4 className={classes.whiteText}>
{t(`home.${metricName}`)}
</h4>
</div>
</Grid>
))}
</div>
</Grid>
</div>
</section>
<div className={cx(classes.helpUsBackground, classes.section)}>
<div className={cx(fr.cx("fr-container"))}>
<h2 className={classes.titleSection}>{t("home.helpUs")}</h2>
<div className={classes.helpUsCards}>
<Grid
container
direction="row"
spacing={2}
sx={{
justifyContent: "center",
alignItems: "stretch",
alignContent: "stretch"
}}
>
{useCases.map((cardName: availableUseCase) => {
const link = (() => {
const configLink = configUseCases[cardName].buttonLink;
const renderedConfigLink = {
href: configLink
};
switch (cardName) {
case "addSoftwareOrService":
return routes.addSoftwareLanding().link;
return configLink && configLink !== ""
? renderedConfigLink
: routes.addSoftwareLanding().link;
case "declareReferent":
case "editSoftware":
return routes.softwareCatalog().link;
return configLink && configLink !== ""
? renderedConfigLink
: routes.softwareCatalog().link;
}
})();

return (
<Card
classes={{
"img": css({
"& > img": {
"objectFit": "unset",
"background": "white"
<Grid item xs={4}>
<Card
classes={{
"img": css({
"& > img": {
"objectFit": "unset",
"background": "white"
}
})
}}
key={cardName}
title={t(`home.${cardName}Title`)}
desc={
<Trans
i18nKey={`home.${cardName}Desc`}
components={configUseCases[
cardName
].labelLinks.reduce(
(
map: Record<string, JSX.Element>,
link: string,
index: number
) => {
const key = `a${index + 1}`;
const obj: Record<
string,
JSX.Element
> = {};

obj[key] = (
/* eslint-disable-next-line jsx-a11y/anchor-has-content */
<a
href={link}
style={{
"color":
fr.colors
.decisions
.text.title
.blueFrance
.default
}}
/>
);
return Object.assign(map, obj);
},
{}
)}
></Trans>
}
imageAlt={t("home.illustrationImage")}
linkProps={link}
imageUrl={(() => {
switch (cardName) {
case "declareReferent":
return humanCooperationSvgUrl;
case "editSoftware":
return documentSvgUrl;
case "addSoftwareOrService":
return codingSvgUrl;
}
})
}}
key={cardName}
title={t(`home.${cardName}Title`)}
desc={t(`home.${cardName}Desc`)}
imageAlt={t("home.illustrationImage")}
linkProps={link}
imageUrl={(() => {
switch (cardName) {
case "declareReferent":
return humanCooperationSvgUrl;
case "editSoftware":
return documentSvgUrl;
case "addSoftwareOrService":
return codingSvgUrl;
})()}
footer={
configUseCases[cardName].buttonEnabled && (
<Button
priority="primary"
linkProps={link}
>
{t(`home.${cardName}ButtonLabel`)}
</Button>
)
}
})()}
footer={
<Button priority="primary" linkProps={link}>
{t(`home.${cardName}ButtonLabel`)}
</Button>
}
enlargeLink={false}
/>
enlargeLink={false}
/>
</Grid>
);
})}
</div>
</Grid>
</div>
</div>
</div>
Expand Down Expand Up @@ -233,7 +321,8 @@ const useStyles = tss.withName({ Home }).create({
"marginBottom": fr.spacing("10v"),
[fr.breakpoints.down("md")]: {
"marginBottom": fr.spacing("8v")
}
},
"textAlign": "center"
},
"softwareSelectionBackground": {
"backgroundColor": fr.colors.decisions.background.alt.blueFrance.default
Expand All @@ -253,15 +342,6 @@ const useStyles = tss.withName({ Home }).create({
"sillNumbersContainer": {
"textAlign": "center"
},
"sillNumberList": {
"display": "grid",
"gridTemplateColumns": "repeat(4, 1fr)",
"columnGap": fr.spacing("6v"),
[fr.breakpoints.down("md")]: {
"gridTemplateColumns": `repeat(1, 1fr)`,
"rowGap": fr.spacing("4v")
}
},
"whiteText": {
"color": fr.colors.decisions.text.inverted.grey.default
},
Expand All @@ -273,15 +353,6 @@ const useStyles = tss.withName({ Home }).create({
},
"helpUsBackground": {
"backgroundColor": fr.colors.decisions.background.default.grey.hover
},
"helpUsCards": {
"display": "grid",
"gridTemplateColumns": "repeat(3, 1fr)",
"columnGap": fr.spacing("6v"),
[fr.breakpoints.down("md")]: {
"gridTemplateColumns": `repeat(1, 1fr)`,
"rowGap": fr.spacing("4v")
}
}
});

Expand Down Expand Up @@ -380,45 +451,27 @@ const { WhatIsTheSillSection } = (() => {
components={
{
space: <span> </span>,
a1: (
<a
href="https://fr.wikipedia.org/wiki/Logiciel_libre"
style={{
"color":
fr.colors.decisions.text.title.blueFrance
.default
}}
/>
),
a2: (
<a
href="https://www.legifrance.gouv.fr/jorf/article_jo/JORFARTI000033203039"
style={{
"color":
fr.colors.decisions.text.title.blueFrance
.default
}}
/>
),
a3: (
<a
href="https://code.gouv.fr/sill/readme"
style={{
"color":
fr.colors.decisions.text.title.blueFrance
.default
}}
/>
),
a4: (
<a
href="https://code.gouv.fr/fr/doc/licences-libres-dinum"
style={{
"color":
fr.colors.decisions.text.title.blueFrance
.default
}}
/>
...config.home.theSillInAFewWordsParagraphLinks.reduce(
(
map: Record<string, JSX.Element>,
link: string,
index: number
) => {
const key = `a${index + 1}`;
const obj: Record<string, JSX.Element> = {};
obj[key] = (
<a
href={link}
style={{
"color":
fr.colors.decisions.text.title
.blueFrance.default
}}
/>
);
return Object.assign(map, obj);
},
{}
)
}
/* eslint-enable jsx-a11y/anchor-has-content */
Expand Down