e47ac65e80
- add aria attributes on load with the gaufre api script so that people already using la gaufre don't necessarely *have* to update their code - add the aria patterns in given code examples/react components. In some cases, our small page load JS code isn't enough: for example on SPAs where gaufre buttons might be loaded after page load. thanks @inseo
126 lines
4.9 KiB
Plaintext
126 lines
4.9 KiB
Plaintext
---
|
|
import gaufreCssUrl from "@gouvfr-lasuite/integration/dist/css/gaufre.css?url"
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Exemple intégration bouton La Gaufre - La Suite numérique</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<style is:inline>
|
|
.wrapper {
|
|
margin: 2rem auto;
|
|
font-family: sans-serif;
|
|
width: 100%;
|
|
max-width: 800px;
|
|
}
|
|
.example {
|
|
margin: 2rem auto;
|
|
border: 1px solid #999;
|
|
padding: 2rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
.example > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.example > div > h1 {
|
|
margin-top: 0;
|
|
}
|
|
.example > p {
|
|
margin-top: 0;
|
|
}
|
|
.example > .footer {
|
|
display: flex;
|
|
gap: 1em;
|
|
justify-content: flex-start;
|
|
font-style: italic;
|
|
}
|
|
</style>
|
|
|
|
<!-- code à ajouter pour faire marcher le bouton Gaufre -->
|
|
<!-- ce fichier buildé correspond à @gouvfr-lasuite/integration/dist/css/gaufre.css -->
|
|
<link rel="stylesheet" href={gaufreCssUrl} />
|
|
<script
|
|
is:inline
|
|
id="lasuite-gaufre-script"
|
|
async
|
|
defer
|
|
src={`${import.meta.env.PUBLIC_LASUITE_API_URL}/api/v1/gaufre.js`}></script>
|
|
<!-- fin du code à ajouter -->
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<p><a href="/guides/gaufre">Retour à la documentation</a></p>
|
|
<div class="example">
|
|
<div>
|
|
<h1>Test de la Gaufre</h1>
|
|
|
|
<!-- code à copier pour faire marcher le bouton Gaufre -->
|
|
<button
|
|
type="button"
|
|
class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
|
|
title="Les services de La Suite numérique"
|
|
aria-expanded="false"
|
|
aria-controls="lasuite-gaufre-popup"
|
|
>
|
|
Les services de La Suite numérique
|
|
</button>
|
|
<!-- fin du code à copier -->
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
|
|
title="Les services de La Suite numérique"
|
|
aria-expanded="false"
|
|
aria-controls="lasuite-gaufre-popup"
|
|
>
|
|
Les services de La Suite numérique
|
|
</button>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero posuere
|
|
ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac tempus dui.
|
|
Integer vel enim non purus facilisis mattis et vel dolor. Aliquam lacinia elit et massa
|
|
faucibus, at dictum risus ornare. Vivamus ultricies magna et gravida consequat. Donec ac
|
|
odio finibus, lobortis purus vel, consequat purus. Maecenas convallis vel enim eu
|
|
malesuada. Vestibulum elementum maximus massa, a porta erat congue quis. Nunc neque quam,
|
|
euismod et malesuada in, bibendum ac ex. Phasellus felis elit, egestas a convallis nec,
|
|
malesuada a est. Donec ac urna venenatis lorem aliquet rhoncus in accumsan ipsum.
|
|
</p>
|
|
<p>
|
|
Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed augue elementum,
|
|
tempus diam in, euismod purus. Fusce interdum, leo nec blandit eleifend, sapien ligula
|
|
egestas quam, quis aliquam ex turpis ut augue. Nullam a neque consectetur, feugiat eros a,
|
|
lacinia tortor. Proin imperdiet vehicula justo, eget bibendum tortor gravida a.
|
|
Pellentesque sit amet fermentum urna. Ut rutrum eros a ligula dapibus pharetra. In
|
|
porttitor arcu in euismod dictum. Aenean vestibulum mi et dignissim rutrum. Phasellus
|
|
ultrices ex justo, eu tincidunt metus efficitur non. Curabitur ac lorem ornare, aliquet
|
|
neque et, tristique elit. Donec quis turpis sodales, interdum massa fermentum, dictum
|
|
magna.
|
|
</p>
|
|
<p>
|
|
Mauris elit risus, facilisis at magna quis, interdum tempor nulla. Ut ac erat eget tellus
|
|
ultricies semper. Ut at dictum ante. Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit. Nam placerat lacinia eros ac convallis. Sed ultricies lectus et pharetra aliquet.
|
|
Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus ornare. Donec venenatis,
|
|
lectus id faucibus tempus, sapien urna molestie augue, at egestas enim lectus quis nisi.
|
|
</p>
|
|
|
|
<div class="footer">
|
|
<button
|
|
type="button"
|
|
class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
|
|
title="Les services de La Suite numérique"
|
|
aria-expanded="false"
|
|
aria-controls="lasuite-gaufre-popup"
|
|
>
|
|
Les services de La Suite numérique
|
|
</button>
|
|
<p>la popup s'affiche correctement quelque soit la position du bouton dans la fenêtre</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|