Skip to content

Commit 0329608

Browse files
garronejgarronej
authored
Merge pull request #411 from codegouvfr/erase_gov
Erase gov
2 parents 4357a80 + bfa560e commit 0329608

File tree

11 files changed

+210
-82
lines changed

11 files changed

+210
-82
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@codegouvfr/react-dsfr",
3-
"version": "1.23.5",
3+
"version": "1.23.6-rc.1",
44
"description": "French State Design System React integration library",
55
"repository": {
66
"type": "git",

‎src/Display/Artwork/Artwork.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use client";
2+
3+
import React, { Suspense, lazy } from "react";
4+
import { ArtworkGov } from "./ArtworkGov";
5+
import { useIsGov } from "../../mui/useIsGov";
6+
const ArtworkWhiteLabel = lazy(() => import("./ArtworkWhiteLabel"));
7+
8+
export function Artwork(props: { theme: "light" | "dark" | "system"; className?: string }) {
9+
const { theme, className } = props;
10+
11+
const { isGov } = useIsGov();
12+
13+
if (!isGov) {
14+
return (
15+
<Suspense>
16+
<ArtworkWhiteLabel theme={theme} sizePx={80} />
17+
</Suspense>
18+
);
19+
}
20+
21+
return <ArtworkGov theme={theme} className={className} />;
22+
}

‎src/Display/Artwork/ArtworkGov.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from "react";
2+
import { fr } from "../../fr";
3+
import ArtworkLightSvg from "../../dsfr/artwork/light.svg";
4+
import ArtworkDarkSvg from "../../dsfr/artwork/dark.svg";
5+
import ArtworkSystemSvg from "../../dsfr/artwork/system.svg";
6+
import { getAssetUrl } from "../../tools/getAssetUrl";
7+
8+
export function ArtworkGov(props: { theme: "light" | "dark" | "system"; className?: string }) {
9+
const { theme, className } = props;
10+
11+
return (
12+
<svg
13+
className={className}
14+
aria-hidden="true"
15+
xmlns="http://www.w3.org/2000/svg"
16+
//className={fr.cx("fr-artwork")}
17+
width="80px"
18+
height="80px"
19+
viewBox="0 0 80 80"
20+
>
21+
{(["artwork-decorative", "artwork-minor", "artwork-major"] as const).map(label => (
22+
<use
23+
key={label}
24+
className={fr.cx(`fr-${label}`)}
25+
xlinkHref={`${getAssetUrl(
26+
(() => {
27+
switch (theme) {
28+
case "dark":
29+
return ArtworkDarkSvg;
30+
case "light":
31+
return ArtworkLightSvg;
32+
case "system":
33+
return ArtworkSystemSvg;
34+
}
35+
})()
36+
)}#${label}`}
37+
/>
38+
))}
39+
</svg>
40+
);
41+
}

‎src/Display/Artwork/ArtworkWhiteLabel.tsx

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
"use client";
2+
3+
import React from "react";
4+
import { useTheme } from "@mui/material/styles";
5+
import { assert, type Equals } from "tsafe/assert";
6+
7+
export default function ArtworkWhiteLabel(props: {
8+
theme: "light" | "dark" | "system";
9+
sizePx: number;
10+
}) {
11+
const { theme: theme_mode, sizePx } = props;
12+
13+
const theme = useTheme();
14+
15+
const fillColor = theme.palette.text.primary;
16+
17+
const style = { height: sizePx, width: sizePx };
18+
19+
switch (theme_mode) {
20+
case "light":
21+
return (
22+
<svg
23+
style={style}
24+
xmlns="http://www.w3.org/2000/svg"
25+
height="24"
26+
viewBox="0 0 24 24"
27+
width="24"
28+
fill={fillColor}
29+
>
30+
<path d="M0 0h24v24H0z" fill="none" />
31+
<path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" />
32+
</svg>
33+
);
34+
case "dark":
35+
return (
36+
<svg
37+
style={style}
38+
xmlns="http://www.w3.org/2000/svg"
39+
enableBackground="new 0 0 24 24"
40+
height="24"
41+
viewBox="0 0 24 24"
42+
width="24"
43+
fill={fillColor}
44+
>
45+
<rect fill="none" />
46+
<path d="M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36c-0.98,1.37-2.58,2.26-4.4,2.26 c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z" />
47+
</svg>
48+
);
49+
case "system":
50+
return (
51+
<svg
52+
style={style}
53+
xmlns="http://www.w3.org/2000/svg"
54+
height="24"
55+
viewBox="0 0 24 24"
56+
width="24"
57+
fill={fillColor}
58+
>
59+
<path d="M0 0h24v24H0z" fill="none" />
60+
<path d="M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z" />
61+
</svg>
62+
);
63+
default:
64+
assert<Equals<typeof theme_mode, never>>(false);
65+
}
66+
}

‎src/Display/Artwork/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Artwork";

‎src/Display/Display.tsx

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import React, { useId } from "react";
22
import { fr } from "../fr";
33
import { symToStr } from "tsafe/symToStr";
44
import { createComponentI18nApi } from "../i18n";
5-
import ArtworkLightSvg from "../dsfr/artwork/light.svg";
6-
import ArtworkDarkSvg from "../dsfr/artwork/dark.svg";
7-
import ArtworkSystemSvg from "../dsfr/artwork/system.svg";
8-
import { getAssetUrl } from "../tools/getAssetUrl";
95
import type { HeaderProps } from "../Header";
106
import type { FooterProps } from "../Footer";
117
import { createModal } from "../Modal";
8+
import { Artwork } from "./Artwork";
129

1310
const modal = createModal({
1411
"isOpenedByDefault": false,
@@ -75,39 +72,7 @@ export function Display() {
7572
)}
7673
</label>
7774
<div className={fr.cx("fr-radio-rich__img")}>
78-
<svg
79-
aria-hidden="true"
80-
xmlns="http://www.w3.org/2000/svg"
81-
//className={fr.cx("fr-artwork")}
82-
width="80px"
83-
height="80px"
84-
viewBox="0 0 80 80"
85-
>
86-
{(
87-
[
88-
"artwork-decorative",
89-
"artwork-minor",
90-
"artwork-major"
91-
] as const
92-
).map(label => (
93-
<use
94-
key={label}
95-
className={fr.cx(`fr-${label}`)}
96-
xlinkHref={`${getAssetUrl(
97-
(() => {
98-
switch (theme) {
99-
case "dark":
100-
return ArtworkDarkSvg;
101-
case "light":
102-
return ArtworkLightSvg;
103-
case "system":
104-
return ArtworkSystemSvg;
105-
}
106-
})()
107-
)}#${label}`}
108-
/>
109-
))}
110-
</svg>
75+
<Artwork theme={theme} />
11176
</div>
11277
</div>
11378
))}

‎src/mui/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./mui";
2+
export { useIsGov } from "./useIsGov";

‎src/mui.tsx renamed to ‎src/mui/mui.tsx

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
"use client";
22

33
/* eslint-disable @typescript-eslint/no-non-null-assertion */
4-
import React, { useMemo, useEffect, createContext, useContext, type ReactNode } from "react";
4+
import React, { useMemo, useEffect, type ReactNode } from "react";
55
import * as mui from "@mui/material/styles";
6-
import type { Shadows } from "@mui/material/styles";
7-
import { fr } from "./fr";
8-
import { useIsDark } from "./useIsDark";
9-
import { typography } from "./fr/generatedFromCss/typography";
10-
import { spacingTokenByValue } from "./fr/generatedFromCss/spacing";
6+
import { fr } from "../fr";
7+
import { useIsDark } from "../useIsDark";
8+
import { typography } from "../fr/generatedFromCss/typography";
9+
import { spacingTokenByValue } from "../fr/generatedFromCss/spacing";
1110
import { assert } from "tsafe/assert";
1211
import { objectKeys } from "tsafe/objectKeys";
1312
import { id } from "tsafe/id";
14-
import { useBreakpointsValuesPx, type BreakpointsValues } from "./useBreakpointsValuesPx";
15-
import { structuredCloneButFunctions } from "./tools/structuredCloneButFunctions";
16-
import { deepAssign } from "./tools/deepAssign";
13+
import { useBreakpointsValuesPx, type BreakpointsValues } from "../useBreakpointsValuesPx";
14+
import { structuredCloneButFunctions } from "../tools/structuredCloneButFunctions";
15+
import { deepAssign } from "../tools/deepAssign";
1716
import { Global, css } from "@emotion/react";
18-
import { getAssetUrl } from "./tools/getAssetUrl";
19-
import marianneFaviconSvgUrl from "./dsfr/favicon/favicon.svg";
20-
import blankFaviconSvgUrl from "./assets/blank-favicon.svg";
17+
import { getAssetUrl } from "../tools/getAssetUrl";
18+
import { IsGovProvider } from "./useIsGov";
19+
import marianneFaviconSvgUrl from "../dsfr/favicon/favicon.svg";
20+
import blankFaviconSvgUrl from "../assets/blank-favicon.svg";
2121

2222
export function getMuiDsfrThemeOptions(params: {
2323
isDark: boolean;
@@ -146,7 +146,7 @@ export function getMuiDsfrThemeOptions(params: {
146146
"shadows": (() => {
147147
const [, , , , , , , , ...rest] = mui.createTheme().shadows;
148148

149-
return id<Shadows>([
149+
return id<mui.Shadows>([
150150
"none",
151151
/** ButtonBar shadow */
152152
"0px 6px 10px 0px rgba(0,0,0,0.07)",
@@ -570,24 +570,29 @@ export function createDsfrCustomBrandingProvider(params: {
570570
},
571571
[`.${fr.cx("fr-footer__bottom-copy")}`]: {
572572
display: "none"
573+
},
574+
[`.${fr.cx("fr-btn")}`]: {
575+
"--hover-tint": theme.palette.primary.dark,
576+
"--active-tint": mui.darken(theme.palette.primary.main, 0.24),
577+
"&:hover, &:active": {
578+
color: theme.palette.primary.contrastText
579+
}
580+
},
581+
[`.${fr.cx("fr-input")}, .${fr.cx("fr-select")}`]: {
582+
"&&&": {
583+
borderTopLeftRadius: `0px`,
584+
borderTopRightRadius: `0px`
585+
}
573586
}
574587
})}
575588
/>
576589
)}
577-
<context_isGov.Provider value={isGov}>
590+
<IsGovProvider isGov={isGov}>
578591
<mui.ThemeProvider theme={theme}>{children}</mui.ThemeProvider>
579-
</context_isGov.Provider>
592+
</IsGovProvider>
580593
</>
581594
);
582595
}
583596

584597
return { DsfrCustomBrandingProvider };
585598
}
586-
587-
const context_isGov = createContext<boolean>(true);
588-
589-
export function useIsGov() {
590-
const isGov = useContext(context_isGov);
591-
592-
return { isGov };
593-
}

‎src/mui/useIsGov.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use client";
2+
3+
import React, { createContext, useContext, type ReactNode } from "react";
4+
5+
const react = createContext<boolean>(true);
6+
7+
export function useIsGov() {
8+
const isGov = useContext(react);
9+
10+
return { isGov };
11+
}
12+
13+
export function IsGovProvider(props: { children: ReactNode; isGov: boolean }) {
14+
const { children, isGov } = props;
15+
16+
return <react.Provider value={isGov}>{children}</react.Provider>;
17+
}

‎test/integration/vite/index.html

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,12 @@
66
<meta http-equiv="Content-Security-Policy"
77
content="require-trusted-types-for 'script'; trusted-types react-dsfr react-dsfr-asap" />
88

9-
<link rel="apple-touch-icon" href="/dsfr/favicon/apple-touch-icon.png?v=1.12.1" />
10-
<link rel="icon" href="/dsfr/favicon/favicon.svg?v=1.12.1" type="image/svg+xml" />
11-
<link rel="shortcut icon" href="/dsfr/favicon/favicon.ico?v=1.12.1" type="image/x-icon" />
12-
<link rel="manifest" href="/dsfr/favicon/manifest.webmanifest?v=1.12.1" crossorigin="use-credentials" />
13-
14-
<!--<link rel="preload" href="/dsfr/fonts/Marianne-Light.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
15-
<!--<link rel="preload" href="/dsfr/fonts/Marianne-Light_Italic.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
16-
<link rel="preload" href="/dsfr/fonts/Marianne-Regular.woff2?v=1.12.1" as="font" crossorigin="anonymous" />
17-
<!--<link rel="preload" href="/dsfr/fonts/Marianne-Regular_Italic.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
18-
<link rel="preload" href="/dsfr/fonts/Marianne-Medium.woff2?v=1.12.1" as="font" crossorigin="anonymous" />
19-
<!--<link rel="preload" href="/dsfr/fonts/Marianne-Medium_Italic.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
20-
<link rel="preload" href="/dsfr/fonts/Marianne-Bold.woff2?v=1.12.1" as="font" crossorigin="anonymous" />
21-
<!--<link rel="preload" href="/dsfr/fonts/Marianne-Bold_Italic.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
22-
<!--<link rel="preload" href="/dsfr/fonts/Spectral-Regular.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
23-
<!--<link rel="preload" href="/dsfr/fonts/Spectral-ExtraBold.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
24-
25-
<link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=e7b25a4c" />
26-
<link rel="stylesheet" href="/dsfr/dsfr.min.css?v=1.12.1" />
9+
<link rel="apple-touch-icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/apple-touch-icon.png" />
10+
<link rel="icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.svg" type="image/svg+xml" />
11+
<link rel="shortcut icon" href="./node_modules/@codegouvfr/react-dsfr/favicon/favicon.ico" type="image/x-icon" />
12+
<link rel="manifest" href="./node_modules/@codegouvfr/react-dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />
13+
14+
<link rel="stylesheet" href="./node_modules/@codegouvfr/react-dsfr/main.css" />
2715

2816
<title>Vite + React + TS</title>
2917
</head>

‎test/integration/vite/src/main.tsx

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { Routes, Route, Link, useLocation } from "react-router-dom";
1010
import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
1111
import { fr } from "@codegouvfr/react-dsfr";
1212
import { ConsentBannerAndConsentManagement, FooterConsentManagementItem, FooterPersonalDataPolicyItem } from "./consentManagement";
13+
//import { createDsfrCustomBrandingProvider } from "@codegouvfr/react-dsfr/mui";
14+
//import { createTheme } from "@mui/material/styles";
1315

1416
startReactDsfr({ "defaultColorScheme": "system", Link });
1517

@@ -19,18 +21,37 @@ declare module "@codegouvfr/react-dsfr/spa" {
1921
}
2022
}
2123

24+
/*
25+
const { DsfrCustomBrandingProvider } = createDsfrCustomBrandingProvider({
26+
createMuiTheme: ({ isDark, theme_gov }) => {
27+
if (import.meta.env.VITE_IS_GOV_INSTANCE === "true") {
28+
return { theme: theme_gov };
29+
}
30+
31+
const theme = createTheme({
32+
palette: {
33+
mode: isDark ? "dark" : "light"
34+
},
35+
typography: {
36+
fontFamily: '"Geist"'
37+
}
38+
});
39+
40+
return { theme };
41+
}
42+
});
43+
*/
2244

2345
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
2446
<React.StrictMode>
2547
<BrowserRouter>
48+
{/*<DsfrCustomBrandingProvider>*/}
2649
<Root />
50+
{/*</DsfrCustomBrandingProvider>*/}
2751
</BrowserRouter>
2852
</React.StrictMode>
2953
);
3054

31-
32-
33-
3455
function Root() {
3556

3657
const location = useLocation();

0 commit comments

Comments
 (0)