Skip to content

Commit 03cccdb

Browse files
odelcroiodelcroi
authored
add LaSuite header and footer (#23)
* add header and footer components * Remove yarn.lock from repository but keep it locally * update snapshot
1 parent d2557be commit 03cccdb

File tree

12 files changed

+1671
-1117
lines changed

12 files changed

+1671
-1117
lines changed

‎frontend/package-lock.json‎

Lines changed: 1142 additions & 956 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"format": "biome format --write",
1111
"build": "rimraf ./dist/ && vite build",
1212
"build-tchap": "rimraf ./dist/ && vite build -c ./tchap/vite.tchap.config.js ",
13+
"update-snapshot-tchap": "vitest --update",
1314
"preview": "vite preview",
1415
"test": "vitest",
1516
"coverage": "vitest run --coverage",
@@ -21,12 +22,12 @@
2122
"dependencies": {
2223
"@fontsource/inconsolata": "^5.2.6",
2324
"@fontsource/inter": "^5.2.6",
25+
"@gouvfr-lasuite/integration": "^1.0.3",
2426
"@radix-ui/react-collapsible": "^1.1.11",
2527
"@radix-ui/react-dialog": "^1.1.14",
2628
"@tanstack/react-query": "^5.84.1",
2729
"@tanstack/react-router": "^1.130.12",
2830
"@vector-im/compound-design-tokens": "git+https://github.com/tchapgouv/compound-design-tokens.git",
29-
"@gouvfr-lasuite/integration": "^1.0.3",
3031
"@vector-im/compound-web": "^8.2.0",
3132
"@zxcvbn-ts/core": "^3.0.4",
3233
"@zxcvbn-ts/language-common": "^3.0.4",

‎frontend/src/components/Layout/Layout.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
88
import cx from "classnames";
99
import { Suspense } from "react";
10+
//:tchap:
11+
import FooterTchap from "../../../tchap/components/Footer";
12+
import HeaderTchap from "../../../tchap/components/Header";
13+
//:tchap: end
1014
import { graphql } from "../../gql";
1115
import { graphqlRequest } from "../../graphql";
1216
import Footer from "../Footer";
@@ -49,9 +53,15 @@ const Layout: React.FC<{
4953
wide?: boolean;
5054
}> = ({ children, wide }) => (
5155
<div className={cx(styles.layoutContainer, wide && styles.wide)}>
56+
{/* :tchap: */}
57+
<HeaderTchap />
58+
{/* :tchap: end */}
5259
{children}
5360
<Suspense fallback={null}>
54-
<AsyncFooter />
61+
{/* :tchap: */}
62+
{/* <AsyncFooter /> */}
63+
<FooterTchap />
64+
{/* :tchap: end */}
5565
</Suspense>
5666
</div>
5767
);

‎frontend/tchap/components/Footer/Footer.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* This file is kept for potential custom styling */

‎frontend/tchap/components/Footer/Footer.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
//
2+
// MIT License
3+
//
4+
// Copyright (c) 2025, Direction interministérielle du numérique - Gouvernement
5+
// Français
6+
//
7+
// Permission is hereby granted, free of charge, to any person obtaining a copy
8+
// of this software and associated documentation files (the "Software"), to
9+
// deal in the Software without restriction, including without limitation the
10+
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
11+
// sell copies of the Software, and to permit persons to whom the Software is
12+
// furnished to do so, subject to the following conditions:
13+
//
14+
// The above copyright notice and this permission notice shall be included in
15+
// all copies or substantial portions of the Software.
16+
//
17+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18+
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
19+
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
20+
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
21+
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
22+
// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
23+
// USE OR OTHER DEALINGS IN THE SOFTWARE.
24+
//
25+
26+
import React from "react";
27+
import "@gouvfr-lasuite/integration/dist/css/homepage-full.css";
28+
29+
const Footer: React.FC = () => (
30+
<footer className="lasuite fr-footer" role="contentinfo">
31+
<div className="fr-container lasuite-container">
32+
<div className="fr-footer__body">
33+
<div className="fr-footer__brand fr-enlarge-link">
34+
<a
35+
href="/"
36+
title="Retour à l'accueil - Tchap"
37+
>
38+
<p className="fr-logo">République<br />Française</p>
39+
</a>
40+
</div>
41+
</div>
42+
</div>
43+
</footer>
44+
);
45+
46+
export default Footer;

‎frontend/tchap/components/Footer/index.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//
2+
// MIT License
3+
//
4+
// Copyright (c) 2025, Direction interministérielle du numérique - Gouvernement
5+
// Français
6+
//
7+
// Permission is hereby granted, free of charge, to any person obtaining a copy
8+
// of this software and associated documentation files (the "Software"), to
9+
// deal in the Software without restriction, including without limitation the
10+
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
11+
// sell copies of the Software, and to permit persons to whom the Software is
12+
// furnished to do so, subject to the following conditions:
13+
//
14+
// The above copyright notice and this permission notice shall be included in
15+
// all copies or substantial portions of the Software.
16+
//
17+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18+
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
19+
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
20+
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
21+
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
22+
// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
23+
// USE OR OTHER DEALINGS IN THE SOFTWARE.
24+
//
25+
26+
export { default } from "./Footer";

‎frontend/tchap/components/Header/Header.module.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
* MIT License
3+
*
4+
* Copyright (c) 2025, Direction interministérielle du numérique - Gouvernement
5+
* Français
6+
*
7+
* Permission is hereby granted, free of charge, to any person obtaining a copy
8+
* of this software and associated documentation files (the "Software"), to
9+
* deal in the Software without restriction, including without limitation the
10+
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
11+
* sell copies of the Software, and to permit persons to whom the Software is
12+
* furnished to do so, subject to the following conditions:
13+
*
14+
* The above copyright notice and this permission notice shall be included in
15+
* all copies or substantial portions of the Software.
16+
*
17+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18+
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
19+
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
20+
* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
21+
* DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
22+
* OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
23+
* USE OR OTHER DEALINGS IN THE SOFTWARE.
24+
*/
25+
26+
.header-tchap {
27+
display: flex;
28+
align-items: center;
29+
gap: var(--cpd-space-3x);
30+
padding: var(--cpd-space-2x) 0;
31+
}
32+
33+
.logo-container {
34+
display: flex;
35+
align-items: center;
36+
}
37+
38+
.logo {
39+
width: 32px;
40+
width: 32px;
41+
}
42+
43+
.title {
44+
font: var(--cpd-font-heading-md-semibold);
45+
color: var(--cpd-color-text-primary);
46+
}

‎frontend/tchap/components/Header/Header.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
//
2+
// MIT License
3+
//
4+
// Copyright (c) 2025, Direction interministérielle du numérique - Gouvernement
5+
// Français
6+
//
7+
// Permission is hereby granted, free of charge, to any person obtaining a copy
8+
// of this software and associated documentation files (the "Software"), to
9+
// deal in the Software without restriction, including without limitation the
10+
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
11+
// sell copies of the Software, and to permit persons to whom the Software is
12+
// furnished to do so, subject to the following conditions:
13+
//
14+
// The above copyright notice and this permission notice shall be included in
15+
// all copies or substantial portions of the Software.
16+
//
17+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18+
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
19+
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
20+
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
21+
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
22+
// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
23+
// USE OR OTHER DEALINGS IN THE SOFTWARE.
24+
//
25+
26+
import React from "react";
27+
import styles from "./Header.module.css";
28+
29+
const Header: React.FC = () => (
30+
<header className={styles.headerTchap}>
31+
<div className={styles.logoContainer}>
32+
<img
33+
className={styles.logo}
34+
src="https://www.tchap.gouv.fr/themes/tchap/img/logos/tchap-logo.svg"
35+
alt="Logo Tchap"
36+
/>
37+
</div>
38+
<div className={styles.title}>Tchap</div>
39+
</header>
40+
);
41+
42+
export default Header;

‎frontend/tchap/components/Header/index.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
//
2+
// MIT License
3+
//
4+
// Copyright (c) 2025, Direction interministérielle du numérique - Gouvernement
5+
// Français
6+
//
7+
// Permission is hereby granted, free of charge, to any person obtaining a copy
8+
// of this software and associated documentation files (the "Software"), to
9+
// deal in the Software without restriction, including without limitation the
10+
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
11+
// sell copies of the Software, and to permit persons to whom the Software is
12+
// furnished to do so, subject to the following conditions:
13+
//
14+
// The above copyright notice and this permission notice shall be included in
15+
// all copies or substantial portions of the Software.
16+
//
17+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18+
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
19+
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
20+
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
21+
// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
22+
// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
23+
// USE OR OTHER DEALINGS IN THE SOFTWARE.
24+
//
25+
26+
export { default } from "./Header";

‎frontend/tchap/css/tchap.css‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)