Ce package fournit une bibliothèque de composants Web (Web Components) réutilisables construits avec Lit. Il inclut les composants suivants :
<ge-header>: En-tête avec gestion de l'utilisateur connecté.<ge-header-public>: En-tête.<ge-footer>: Pied de page avec liens utiles.
Cette procédure décrit comment intégrer directement les Web Components et les feuilles de style hébergés sur les serveurs static de l'État de Genève.
Ajoutez les feuilles de style suivantes dans la balise <head> de votre application :
par défaut
<link rel="stylesheet" href=https://static.app.ge.ch/theme/css/primitives.css />si l'application supporte uniquement le thème clair (forcer le thème clair)
<link rel="stylesheet" href="https://static.app.ge.ch/theme/css/light.css" />si l'application supporte l'affichage system clair et sombre
<link rel="stylesheet" href="https://static.app.ge.ch/theme/css/theme.css" />si l'application propose une option d'affichage clair et sombre
<link rel="stylesheet" href="https://static.app.ge.ch/theme/css/dark.css" />
<link rel="stylesheet" href="https://static.app.ge.ch/theme/css/light.css" />si l'application supporte uniquement le thème sombre (forcer le thème sombre)
<link rel="stylesheet" href="https://static.app.ge.ch/theme/css/dark.css" />Par défaut, les URL de production (sur static.app.ge.ch) sont à utiliser en DEV/REC et PRD Pour tester d'éventuelles montées de version, les URL de DEV ou REC peuvent être utilisées
DEV https://static.dev.etat-ge.ch REC https://static.rec.etat-ge.ch
<script type="module" src="https://static.app.ge.ch/webcomponents/ge-header/latest/ge-header.js"></script>
<script type="module" src="https://static.app.ge.ch/webcomponents/ge-header-public/latest/ge-header-public.js"></script>
<script type="module" src="https://static.app.ge.ch/webcomponents/ge-footer/latest/ge- footer.js"></script>Pour les applications avec contenus pleine largeur (ex: Mon esapce e-démarches)
<ge-header-public/>
<ge-footer/>Pour les applications avec marges sur le contenus (ex: Formulaires e-démarches, ... )
<ge-header-public maxWidth="80%" />
<ge-footer maxWidth="80%" />yarn install yarn startyarn buildDans src/web-components/xxx, créez un répertoire contenant votre composant, où xxx est la catégorie du composant.
- Props disponibles :
userInfo: objet contenantnom,prenom,email,typeCompte(PP,PM,ADM)isMenuOpen: booléen pour afficher/masquer le menu utilisateurmaxWidth: pourcentage ("80%" pour les contenus avec marges)
- Événements personnalisés :
ge-toggle-app-menuge-manage-accountge-logout
- Props disponibles :
maxWidth: pourcentage ("80%" pour les contenus avec marges)
- Affiche automatiquement les liens d'aide, accessibilité, confidentialité et CGU ainsi que le logo de l'État de Genève.
- Props disponibles :
maxWidth: pourcentage ("80%" pour les contenus avec marges)links='[{"title":"Support","href":"https://example.com/support"},{"title":"Mentions légales","href":"https://example.com/legal"}]'
- Valeurs par défaut
maxWidth = "100%"links =[{ title: "Contact", href: this.contactLink },{ title: "Accessibilité", href: this.accessibilityLink },{ title: "Politique de confidentialité", href: this.privacyLink },{ title: "Conditions générales", href: this.termsLink }]@property({ type: String }) contactLink = "https://www.ge.ch/c/footer-edm-aide";@property({ type: String }) accessibilityLink = "https://www.ge.ch/c/footer-edm-accessibilite";@property({ type: String }) privacyLink = "https://www.ge.ch/c/footer-edm-confidentialite";@property({ type: String }) termsLink = "https://www.ge.ch/c/footer-edm-cgu";
⚠️ Important : Les composants Lit ne sont pas automatiquement réactifs aux changements de props dans certains frameworks comme Vue, React ou Angular. Il faut manuellement mettre à jour les propriétés et appelerrequestUpdate()sur les composants concernés.
Dans un composant Vue :
yarn add @opf/ge-theme;
Importez le package dans votre projet :
<template>
<ge-header
:userInfo="userStore.getters.utilisateur()"
:isMenuOpen="isMenuOpen"
ref="headerRef"
@ge-toggle-app-menu="miniVariant = !miniVariant"
></ge-header>
</template>
<script setup>
import { ref, watch } from 'vue';
import { userStore } from '@/stores/user';
import '@opf/ge-theme';
const headerRef = ref(null);
const isMenuOpen = ref(false);
const miniVariant = ref(false);
watch(
() => userStore.getters.utilisateur(),
(newUser) => {
if (headerRef.value) {
headerRef.value.userInfo = newUser;
headerRef.value.requestUpdate(); // 🔁 Forcer la mise à jour
}
},
{ immediate: true, deep: true }
);
</script>Pour utiliser des Web Components dans React :
- Ajoutez
@opf/ge-themedans leindex.jsouApp.js:
import '@opf/ge-theme';- Utilisez-les dans votre JSX :
<ge-header ref={headerRef} isMenuOpen={true}></ge-header>- Mettre à jour les props manuellement :
import { useEffect, useRef } from 'react';
const HeaderWrapper = ({ userInfo }) => {
const headerRef = useRef(null);
useEffect(() => {
if (headerRef.current) {
headerRef.current.userInfo = userInfo;
headerRef.current.requestUpdate(); // 🔁 Forcer la mise à jour
}
}, [userInfo]);
return <ge-header ref={headerRef}></ge-header>;
};- Ajoutez
@opf/ge-themedansangular.json(scripts et styles si besoin). - Activez les Custom Elements dans votre module :
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@NgModule({
declarations: [...],
imports: [...],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}- Utilisation dans un template Angular :
<ge-header [attr.isMenuOpen]="true"></ge-header>- Mise à jour manuelle des propriétés :
@ViewChild('headerRef') headerRef: ElementRef;
ngOnChanges() {
if (this.headerRef?.nativeElement) {
this.headerRef.nativeElement.userInfo = this.user;
this.headerRef.nativeElement.requestUpdate(); // 🔁 Mise à jour forcée
}
}- Ajout de tests unitaires avec Playwright ou Testing Library
- Ajout d'un composant
ge-breadcrumbou lister les composants partagé - Storybook pour documentation interactive
Ce projet est distribué selon les conditions de l'État de Genève. Veuillez contacter le support pour plus d'informations.
Pour toute question ou proposition, contactez l'équipe Cyberadministration à : ocsin.scli.design-system@etat.ge.ch
