Skip to content

Commit bfa560e

Browse files
garronejgarronej
committed
Improve gov erasure
1 parent b2b7f1e commit bfa560e

File tree

7 files changed

+100
-95
lines changed

7 files changed

+100
-95
lines changed

‎src/Display/Artwork/Artwork.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { ArtworkGov } from "./ArtworkGov";
55
import { useIsGov } from "../../mui/useIsGov";
66
const ArtworkWhiteLabel = lazy(() => import("./ArtworkWhiteLabel"));
77

8-
export function Artwork(props: { theme: "light" | "dark" | "system" }) {
9-
const { theme } = props;
8+
export function Artwork(props: { theme: "light" | "dark" | "system"; className?: string }) {
9+
const { theme, className } = props;
1010

1111
const { isGov } = useIsGov();
1212

@@ -18,5 +18,5 @@ export function Artwork(props: { theme: "light" | "dark" | "system" }) {
1818
);
1919
}
2020

21-
return <ArtworkGov theme={theme} />;
21+
return <ArtworkGov theme={theme} className={className} />;
2222
}

‎src/Display/Artwork/ArtworkGov.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import ArtworkDarkSvg from "../../dsfr/artwork/dark.svg";
55
import ArtworkSystemSvg from "../../dsfr/artwork/system.svg";
66
import { getAssetUrl } from "../../tools/getAssetUrl";
77

8-
export function ArtworkGov(props: { theme: "light" | "dark" | "system" }) {
9-
const { theme } = props;
8+
export function ArtworkGov(props: { theme: "light" | "dark" | "system"; className?: string }) {
9+
const { theme, className } = props;
1010

1111
return (
1212
<svg
13+
className={className}
1314
aria-hidden="true"
1415
xmlns="http://www.w3.org/2000/svg"
1516
//className={fr.cx("fr-artwork")}

‎src/Display/Artwork/ArtworkWhiteLabel.tsx‎

Lines changed: 50 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -6,76 +6,61 @@ import { assert, type Equals } from "tsafe/assert";
66

77
export default function ArtworkWhiteLabel(props: {
88
theme: "light" | "dark" | "system";
9-
sizePx?: number;
9+
sizePx: number;
1010
}) {
11-
const { theme, sizePx = 24 } = props;
11+
const { theme: theme_mode, sizePx } = props;
1212

13-
switch (theme) {
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) {
1420
case "light":
15-
return <LightMode sizePx={sizePx} />;
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+
);
1634
case "dark":
17-
return <DarkMode sizePx={sizePx} />;
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+
);
1849
case "system":
19-
return <AutoMode sizePx={sizePx} />;
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+
);
2063
default:
21-
assert<Equals<typeof theme, never>>(false);
64+
assert<Equals<typeof theme_mode, never>>(false);
2265
}
2366
}
24-
25-
function LightMode(props: { sizePx: number }) {
26-
const { sizePx } = props;
27-
28-
const theme = useTheme();
29-
30-
return (
31-
<svg
32-
xmlns="http://www.w3.org/2000/svg"
33-
height={sizePx}
34-
viewBox={`0 0 24 ${sizePx}`}
35-
width={sizePx}
36-
fill={theme.palette.primary.main}
37-
>
38-
<path d="M0 0h24v24H0z" fill="none" />
39-
<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" />
40-
</svg>
41-
);
42-
}
43-
44-
function AutoMode(props: { sizePx: number }) {
45-
const { sizePx } = props;
46-
47-
const theme = useTheme();
48-
49-
return (
50-
<svg
51-
xmlns="http://www.w3.org/2000/svg"
52-
height={sizePx}
53-
viewBox={`"0 0 ${sizePx} ${sizePx}`}
54-
width={sizePx}
55-
fill={theme.palette.primary.main}
56-
>
57-
<path d="M0 0h24v24H0z" fill="none" />
58-
<path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02zM8 16h2.5l1.5 1.5 1.5-1.5H16v-2.5l1.5-1.5-1.5-1.5V8h-2.5L12 6.5 10.5 8H8v2.5L6.5 12 8 13.5V16zm4-7c1.66 0 3 1.34 3 3s-1.34 3-3 3V9z" />
59-
</svg>
60-
);
61-
}
62-
63-
function DarkMode(props: { sizePx: number }) {
64-
const { sizePx } = props;
65-
66-
const theme = useTheme();
67-
68-
return (
69-
<svg
70-
xmlns="http://www.w3.org/2000/svg"
71-
enable-background={`new 0 0 ${sizePx} ${sizePx}`}
72-
height={sizePx}
73-
viewBox={`0 0 ${sizePx} ${sizePx}`}
74-
width={sizePx}
75-
fill={theme.palette.primary.main}
76-
>
77-
<rect fill="none" height={sizePx} width={sizePx} />
78-
<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" />
79-
</svg>
80-
);
81-
}

‎src/Display/Display.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
"use client";
2-
31
import React, { useId } from "react";
42
import { fr } from "../fr";
53
import { symToStr } from "tsafe/symToStr";

‎src/mui/mui.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
/* eslint-disable @typescript-eslint/no-non-null-assertion */
44
import React, { useMemo, useEffect, type ReactNode } from "react";
55
import * as mui from "@mui/material/styles";
6-
import type { Shadows } from "@mui/material/styles";
76
import { fr } from "../fr";
87
import { useIsDark } from "../useIsDark";
98
import { typography } from "../fr/generatedFromCss/typography";
@@ -147,7 +146,7 @@ export function getMuiDsfrThemeOptions(params: {
147146
"shadows": (() => {
148147
const [, , , , , , , , ...rest] = mui.createTheme().shadows;
149148

150-
return id<Shadows>([
149+
return id<mui.Shadows>([
151150
"none",
152151
/** ButtonBar shadow */
153152
"0px 6px 10px 0px rgba(0,0,0,0.07)",
@@ -571,6 +570,19 @@ export function createDsfrCustomBrandingProvider(params: {
571570
},
572571
[`.${fr.cx("fr-footer__bottom-copy")}`]: {
573572
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+
}
574586
}
575587
})}
576588
/>

‎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)