` +
+ `✔` +
+ `` +
+ `` +
+ `
` +
+ `` +
+ `
`;
+
+ // Create shadow DOM widget
+ const shadowContainer = createShadowWidget(widgetName, htmlContent, styles);
+ const shadowRoot = shadowContainer.shadowRoot!;
+ const $ = shadowRoot.querySelector.bind(shadowRoot);
+
+ const wrapper = $` +
+ `` +
+ `` +
+ `
` +
+ `` +
+ `` +
+ `` +
+ `
` +
+ `` +
+ ((args.headerLogo && args.headerUrl) ? (
+ `
`;
+
+ // Create shadow DOM widget
+ const shadowContainer = createShadowWidget(widgetName, htmlContent, styles);
+ const shadowRoot = shadowContainer.shadowRoot!;
+
+ const wrapper = shadowRoot.querySelector` +
+ `` +
+ `
` +
+ `` +
+ `` +
+ `
`
+ ) : "") +
+ `` +
+ `
` +
+ (args.showFooter ? `` : "") +
+ `Loading...
` +
+ `` +
+ `` +
+ `` +
+ `` +
+ `
` +
+ ``;
+
+ const anchor = serviceCard.querySelector✔
'+(e.headerLogo&&e.headerUrl?`
`:"")+''+(e.showFooter?'':"")+"
",d=D(i,s,F),l=d.shadowRoot,r=l.querySelector("#wrapper"),p=l.querySelector("#loading"),u=l.querySelector("#services-grid"),k=l.querySelector("#error"),x=l.querySelector("#close"),q=l.querySelector("#ok-button"),z=l.querySelector("#header-logo"),E=o=>{const a=["top","bottom","left","right"],f=h=>{a.forEach(b=>{r.style[b]=typeof h[b]=="number"?`${h[b]}px`:"unset"})};if(a.every(h=>o[h]===void 0)||f(o),o.position)if(typeof o.position=="function"){const h=o.position();r.style.position=h.position,f(h)}else r.style.position=o.position;o.fontFamily&&(r.style.fontFamily=o.fontFamily),o.background&&(r.style.background=o.background);const g=o.label||"Services",y=o.closeLabel||"Close";p.textContent=o.loadingText||"Loading…",r.setAttribute("aria-label",g),x&&x.setAttribute("aria-label",y),z&&(z.alt=(o.headerLabel||"About LaSuite")+(o.newWindowLabelSuffix||""))};E(e),t.push(m("","resize",window,!1,()=>{E(e)})),r.style.display="none";const L=o=>{p.style.display="none",u.style.display="none",k.style.display="block",k.textContent=o},T=o=>{u.innerHTML="",o.services.forEach(a=>{if(!a.logo)return;a.maturity=="stable"&&delete a.maturity;const f=document.createElement("li");f.className="service-card",f.innerHTML=`Loading...
`;const g=f.querySelector("a"),y=f.querySelector("img"),h=f.querySelector(".service-name");if(a.maturity){const b=document.createElement("div");b.className="maturity-badge",b.textContent=a.maturity,g.insertBefore(b,y.nextSibling)}g.setAttribute("aria-label",a.name+(a.maturity?` (${a.maturity})`:"")+(e.newWindowLabelSuffix||"")),g.href=a.url,y.src=a.logo,h.textContent=a.name,u.appendChild(f)}),p.style.display="none",k.style.display="none",u.style.display="grid"};if(e.data)T(e.data);else try{const a=await(await fetch(e.api,{method:"GET"})).json();a.error?L(`Error: ${JSON.stringify(a.error)}`):a.services&&a.services.length>0?T(a):L("No services found")}catch(o){L(`Failed to load services: ${o instanceof Error?o.message:"Unknown error"}`)}const j=o=>{e.dialogElement||d.contains(o.target)||c(i,"close")};let S=null,_=null;t.push(m(i,"open",null,!1,()=>{r.style.display="block",setTimeout(()=>{n=!0,document.addEventListener("click",j),r.focus()},200),S=K(l,r,"a,button"),e.dialogElement||(_=M(()=>{c(i,"close")})),e.buttonElement&&e.buttonElement.setAttribute("aria-expanded","true"),c(i,"opened")})),t.push(m(i,"close",null,!1,()=>{S&&S(),_&&_(),n&&(r.style.display="none",n=!1,e.buttonElement&&(e.buttonElement.focus(),e.buttonElement.setAttribute("aria-expanded","false")),document.removeEventListener("click",j),c(i,"closed"))})),t.push(m(i,"toggle",null,!1,()=>{n?c(i,"close"):c(i,"open")})),t.push(m(i,"configure",null,!1,E)),q&&q.addEventListener("click",()=>{c(i,"close")}),x&&x.addEventListener("click",()=>{c(i,"close")}),e.buttonElement&&t.push(m("","click",e.buttonElement,!1,()=>{c(i,"toggle")})),e.dialogElement?e.dialogElement.appendChild(d):(r.className="wrapper-dialog",document.body.appendChild(d)),m(i,"destroy",null,!0,()=>{c(i,"close"),w=!1,d.remove(),t.forEach(o=>o())}),w=!0,c(i,"initialized"),e.open&&c(i,"open")}),B(i)})();
diff --git a/website/public/widgets/dist/loader.js b/website/public/widgets/dist/loader.js
new file mode 100644
index 0000000..0eccae1
--- /dev/null
+++ b/website/public/widgets/dist/loader.js
@@ -0,0 +1 @@
+(function(){"use strict";const m='div{position:fixed;bottom:20px;right:20px;z-index:1000}button{width:60px;height:60px;border-radius:50%;background:#000091;border:none;cursor:pointer;box-shadow:0 4px 12px #0000914d;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;display:flex;align-items:center;justify-content:center;padding:0;margin:0}svg{width:35px;height:35px}button:focus-visible{outline:3px solid #0a76f6;outline-offset:2px}button:hover{background:#1212ff;transform:scale(1.1);box-shadow:0 6px 16px #1212ff66}button:active{transform:scale(.95)}button.loading{background:#2323ff}button.loading:after{content:"";width:25px;height:25px;border:3px solid transparent;border-top:3px solid white;border-radius:50%;animation:spin 1s linear infinite}button.loading svg{display:none}button.opened svg{display:none}button.opened:after{content:"+";font-size:50px;color:#fff;height:60px;line-height:60px;font-family:Arial;transform:rotate(45deg)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 420px){button{width:40px;height:40px}svg{width:25px;height:25px}div{right:15px;bottom:15px}button.opened:after{font-size:40px}}';function x(e,t,n){const i=`lasuite-widget-${e}-shadow`,a=document.getElementById(i);a&&a.remove();const o=document.createElement("div");o.id=i;const s=o.attachShadow({mode:"open"}),d=document.createElement("style");d.textContent=n;const u=document.createElement("div");return u.innerHTML=t,s.appendChild(d),s.appendChild(u),o}const v='',f="lasuite-widget",p=(e,t,n,i)=>document.dispatchEvent(new CustomEvent(`${f}-${e}-${t}`,n?{detail:n}:void 0)),r=(e,t,n,i,a)=>{const o=d=>a(d.detail),s=e?`${f}-${e}-${t}`:t;return document.addEventListener(s,o,i?{once:!0}:void 0),()=>document.removeEventListener(s,o,i?{once:!0}:void 0)},C=1,l=2,c=e=>window._lasuite_widget?._loaded?.[e],h=(e,t)=>{window._lasuite_widget?._loaded&&(window._lasuite_widget._loaded[e]=t)},_=e=>{window._lasuite_widget||(window._lasuite_widget=[]);const t=window._lasuite_widget;if(t._loaded||(t._loaded={}),c(e)!==l){t.push=(...n)=>{for(const i of n)c(i[0])===l?p(i[0],i[1],i[2]):t[t.length]=i;return t.length},h(e,l);for(const n of t.splice(0,t.length))t.push(n)}p(e,"loaded")},E=(e,t="")=>{const n=document.createElement("script");n.src=e,n.type=t,n.defer=!0,document.body.appendChild(n)},g="loader";r(g,"init",null,!1,e=>{const t=e.widget||"feedback",n=``,i=x(g,n,m),o=i.shadowRoot.querySelector("button"),s=()=>{o.setAttribute("aria-label",String(e.closeLabel||"Close widget")),o.setAttribute("aria-expanded","true")},d=()=>{o.setAttribute("aria-label",String(e.label||"Load widget")),o.setAttribute("aria-expanded","false")};d(),r(t,"closed",null,!1,()=>{o.classList.remove("opened"),d()}),r(t,"opened",null,!1,()=>{o.classList.add("opened"),s()}),o.addEventListener("click",()=>{if(o.classList.contains("opened")){p(t,"close");return}const u=setTimeout(()=>{o.classList.remove("loading")},1e4);o.classList.add("loading");const w=()=>{clearTimeout(u),o.classList.remove("loading");const b=Object.assign({},e.params);b.bottomOffset=o.offsetHeight+20,window._lasuite_widget.push([t,"init",b])};c(t)===l?w():(r(t,"loaded",null,!0,w),c(t)||(E(e.script,e.scriptType||""),h(t,C)))}),document.body.appendChild(i)}),_(g)})();
diff --git a/website/src/content/docs/guides/feedback.mdx b/website/src/content/docs/guides/feedback.mdx
new file mode 100644
index 0000000..12acfc2
--- /dev/null
+++ b/website/src/content/docs/guides/feedback.mdx
@@ -0,0 +1,64 @@
+---
+title: Retours utilisateurs
+sidebar:
+ order: 50
+---
+
+
+
+
+
+Ce widget permet aux visiteurs de votre service d'envoyer des questions ou des retours à votre équipe.
+
+Ces retours sont ensuite consultables dans une instance de [Messages](https://github.com/suitenumerique/messages),
+qui permet d'y répondre collaborativement par email.
+
+
+## Intégration
+
+Il y a deux façons principales d'intégrer ce widget dans votre service:
+
+### 1. Via le composant React
+
+Ce composant sera bientôt disponible dans le [UI Kit](https://github.com/suitenumerique/ui-kit).
+
+En attendant, vous pouvez :
+* soit [copier ce composant](https://github.com/suitenumerique/messages/blob/main/src/frontend/src/features/ui/components/feedback-widget/index.tsx)
+si vous souhaitez intégrer la pop-in de retour avec son bouton de chargement qui s'affiche en bas à droite des pages,
+* soit [copier ce composant](https://github.com/suitenumerique/messages/blob/main/src/frontend/src/features/ui/components/feedback-button/index.tsx)
+si vous souhaitez juste ouvrir la pop-in de retour dynamiquement, avec un bouton existant de votre application par exemple.
+
+### 2. Via le script JavaScript
+
+Cette option est à privilégier si vous n'utilisez pas React ou si vous ne souhaitez pas intégrer l'UI Kit dans votre application.
+
+Voici comment l'intégrer avec le bouton de chargement :
+
+```html
+
+
+```
+
+D'autres exemples d'intégration sont disponibles ci-dessous.
+
+## Exemples
+
+Nous avons une documentation interactive avec plusieurs exemples de configuration pour :
+ * [version avec bouton de chargement](/widgets-demo/loader).
+ * [version sans bouton de chargement](/widgets-demo/feedback).
+
+Vous pouvez aussi tester La Gaufre v2 en ligne sur ces services :
+
+* [Suite territoriale - site vitrine](https://suiteterritoriale.anct.gouv.fr/)
+* [Suite territoriale - Messages](https://messages.suite.anct.gouv.fr)
diff --git a/website/src/content/docs/guides/feedback.png b/website/src/content/docs/guides/feedback.png
new file mode 100644
index 0000000..3ba0954
Binary files /dev/null and b/website/src/content/docs/guides/feedback.png differ
diff --git a/website/src/content/docs/guides/gaufre-v2-anct.png b/website/src/content/docs/guides/gaufre-v2-anct.png
new file mode 100644
index 0000000..d9e47f9
Binary files /dev/null and b/website/src/content/docs/guides/gaufre-v2-anct.png differ
diff --git a/website/src/content/docs/guides/gaufre-v2-dinum.png b/website/src/content/docs/guides/gaufre-v2-dinum.png
new file mode 100644
index 0000000..e640069
Binary files /dev/null and b/website/src/content/docs/guides/gaufre-v2-dinum.png differ
diff --git a/website/src/content/docs/guides/gaufre-v2.mdx b/website/src/content/docs/guides/gaufre-v2.mdx
new file mode 100644
index 0000000..d7adc9b
--- /dev/null
+++ b/website/src/content/docs/guides/gaufre-v2.mdx
@@ -0,0 +1,87 @@
+---
+title: La Gaufre v2
+sidebar:
+ order: 40
+---
+
+
+
+
+
+
+La Gaufre v2 est une évolution de la [première version](/guides/gaufre) historique, qui ajoute plusieurs fonctionnalités :
+* Un design en accord avec le [UI Kit](https://github.com/suitenumerique/ui-kit) de LaSuite.
+* Un chargement des services à afficher en JSON, qui peut être effectué via une API dynamique ou fichier statique.
+* L'utilisation du "Shadow DOM" qui permet aux styles du widget d'être indépendants de ceux de la page
+
+En configurant la Gaufre v2, il est possible de changer son contenu ou même son apparence.
+
+Voici par exemple une Gaufre pour la Suite territoriale :
+
+
+
+
+
+## Intégration
+
+Il y a deux façons principales d'intégrer La Gaufre v2 dans votre service:
+
+### 1. Via le composant React
+
+Ce composant, qui intègre le bouton "Gaufre" ainsi que la pop-in, sera bientôt disponible dans le [UI Kit](https://github.com/suitenumerique/ui-kit).
+
+En attendant, vous pouvez [copier ce composant](https://github.com/suitenumerique/messages/blob/main/src/frontend/src/features/ui/components/lagaufre/index.tsx).
+
+### 2. Via le script JavaScript
+
+Cette option est à privilégier si vous n'utilisez pas React ou si vous ne souhaitez pas intégrer l'UI Kit dans votre application.
+
+Dans ce cas, vous devez intégrer le bouton "Gaufre". Le script gérera la pop-in et s'occupera de mettre à jour les attributs nécessaires sur le bouton lors des interactions.
+
+Voici un exemple complet d'intégration dans ce cas :
+
+```html
+
+
+
+
+
+```
+
+Vous pouvez tester cet exemple sur cette [page dédiée](/widgets-demo/lagaufre-single).
+
+Nous avons une documentation interactive avec plusieurs [autres exemples de configuration](/widgets-demo/lagaufre).
+
+## Intégrations existantes
+
+Vous pouvez tester La Gaufre v2 en ligne sur ces services :
+
+* [Suite territoriale - Messages](https://messages.suite.anct.gouv.fr)
diff --git a/website/src/pages/widgets-demo/feedback.html b/website/src/pages/widgets-demo/feedback.html
new file mode 100644
index 0000000..812e44c
--- /dev/null
+++ b/website/src/pages/widgets-demo/feedback.html
@@ -0,0 +1,98 @@
+
+
+
+
+
+ Feedback Widget Demo
+ + + + + + + + ++ + + + + +
+ + + + + \ No newline at end of file diff --git a/website/src/pages/widgets-demo/lagaufre-single.html b/website/src/pages/widgets-demo/lagaufre-single.html new file mode 100644 index 0000000..5817348 --- /dev/null +++ b/website/src/pages/widgets-demo/lagaufre-single.html @@ -0,0 +1,89 @@ + + + + + +
+
+
diff --git a/website/src/pages/widgets-demo/lagaufre.html b/website/src/pages/widgets-demo/lagaufre.html
new file mode 100644
index 0000000..53b8887
--- /dev/null
+++ b/website/src/pages/widgets-demo/lagaufre.html
@@ -0,0 +1,297 @@
+
+
+
+
+
+ + Back to index +
+ + + + + + + + + + +La Gaufre - Single Page Demo
++ Try opening the Gaufre by clicking on the button on the top right! You can also use keyboard navigation. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+ + + +
+ Back to index
+
+
+
+
+
+
+
+
diff --git a/website/src/pages/widgets-demo/loader.html b/website/src/pages/widgets-demo/loader.html
new file mode 100644
index 0000000..f974ff6
--- /dev/null
+++ b/website/src/pages/widgets-demo/loader.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+ La Gaufre Widget Demo
+This demo shows how to use the La Gaufre widget to display a list of services with subscription status.
+ +
+
+
+
+ Basic Usage
+Open the widget with default settings:
+ +
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: '/widgets/demo/lagaufre-data.json',
+ open: true
+}]);
+
+
+
+ With ANCT Data
+Open the widget with ANCT services data:
+ +
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: 'https://operateurs.suite.anct.gouv.fr/api/v1.0/lagaufre/services/?operator=9f5624fc-ef99-4d10-ae3f-403a81eb16ef&siret=21870030000013',
+ open: true
+}]);
+
+
+
+ With LaSuite data and style
+Open the widget with gradient background:
+ +
+// With gradient background
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: 'https://lasuite.numerique.gouv.fr/api/services',
+ open: true,
+ background: 'linear-gradient(180deg, #eceffd 0%, #FFFFFF 20%)',
+ headerLogo: 'https://lasuite.numerique.gouv.fr/_next/static/media/suite-numerique.ebdb6ce9.svg',
+ headerUrl: 'https://lasuite.numerique.gouv.fr',
+ showFooter: true
+}]);
+
+
+
+ With Custom Font
+Open the widget with custom font family:
+ +
+// With custom font
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: '/widgets/demo/lagaufre-data.json',
+ open: true,
+ fontFamily: 'Georgia, serif'
+}]);
+
+
+
+
+
+
+
+
+
+
+ Positioning Options
+Control widget position and behavior:
+ + +
+// Top Right positioning
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: '/widgets/demo/lagaufre-data.json',
+ open: true,
+ label: 'La Gaufre - Top Right',
+ position: 'fixed',
+ top: 20,
+ right: 20
+}]);
+// Bottom Left positioning
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: '/widgets/demo/lagaufre-data.json',
+ open: true,
+ label: 'La Gaufre - Bottom Left',
+ position: 'fixed',
+ bottom: 20,
+ left: 20
+}]);
+// Absolute & dynamic positioning, tied to a button
+(button) => {
+ _lasuite_widget.push(['lagaufre', 'init', {
+ api: '/widgets/demo/lagaufre-data.json',
+ open: true,
+ label: 'La Gaufre - Bottom Left',
+ position: () => {
+ return {
+ position: 'absolute',
+ top: button.offsetTop + button.offsetHeight + 10,
+ right: window.innerWidth - button.offsetLeft - button.offsetWidth
+ };
+ },
+ buttonElement: button
+ }]);
+}
+
+
+
+
+
+
+ No dialog
+You can insert the widget into an existing container:
+ + + +
+// No dialog
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: '/widgets/demo/lagaufre-data.json',
+ open: true,
+ dialogElement: document.getElementById('custom-box')
+}]);+_lasuite_widget.push(['lagaufre', 'close']);
+
+
+
+ With hardcoded data
+You can pass static data and avoid any API calls:
+ +
+_lasuite_widget.push(['lagaufre', 'init', {
+ open: true,
+ data: {
+ "services": [
+ {
+ "name": "Authentication Service",
+ "url": "https://example.com/auth",
+ "logo": "/widgets/demo/logos/auth.svg",
+ },
+ {
+ "name": "Document Portal",
+ "url": "https://example.com/docs",
+ "logo": "/widgets/demo/logos/docs.svg",
+ },
+ ]
+ }
+}]);
+
+
+
+
+
+
+
+ Open and close Widget Programmatically
+Close the widget programmatically after 2 seconds:
+ +
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: '/widgets/demo/lagaufre-data.json'
+}]);
+setTimeout(() => {
+ _lasuite_widget.push(['lagaufre', 'open']);
+}, 300);
+setTimeout(() => {
+ _lasuite_widget.push(['lagaufre', 'close']);
+}, 2000);+_lasuite_widget.push(['lagaufre', 'toggle']);
+
+
+
+ Full localization
+You can fully localize the widget:
+ +
+// Full localization
+_lasuite_widget.push(['lagaufre', 'init', {
+ api: '/widgets/demo/lagaufre-data.json',
+ open: true,
+ label: 'La Gaufre',
+ headerLogo: 'https://lasuite.numerique.gouv.fr/_next/static/media/suite-numerique.ebdb6ce9.svg',
+ headerUrl: 'https://lasuite.numerique.gouv.fr',
+ headerLabel: 'A propos de LaSuite',
+ closeLabel: 'Fermer la liste des services',
+ loadingText: 'Chargement des services...',
+ newWindowLabelSuffix: ' (nouvelle fenêtre)'
+}]);
+
+
+ API Response Format
+The widget expects the following API response format:
+
+{
+ "services": [
+ {
+ "name": "Service Name",
+ "url": "https://service-url.com",
+ "maturity": "stable",
+ "logo": "/path/to.svg"
+ }
+ ]
+}