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
33 lines
873 B
TypeScript
33 lines
873 B
TypeScript
import { useTranslate } from "../i18n/useTranslate"
|
|
|
|
export type Props = {
|
|
/**
|
|
* Variantes d'affichage :
|
|
*
|
|
* "responsive": Affiche un bouton plus petit sur écran mobile/tablette, plus grand sur écran plus large.
|
|
* "small": Affiche un bouton plus petit.
|
|
*/
|
|
variant?: "responsive" | "small"
|
|
}
|
|
|
|
const variantClasses = {
|
|
responsive: "lasuite-gaufre-btn--responsive",
|
|
small: "lasuite-gaufre-btn--small",
|
|
}
|
|
|
|
export const Gaufre = ({ variant }: Props) => {
|
|
const { t } = useTranslate()
|
|
const variantClass = !!variant ? variantClasses[variant] : ""
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={`lasuite-gaufre-btn ${variantClass} lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn`}
|
|
title={t("gaufre.label")}
|
|
aria-expanded="false"
|
|
aria-controls="lasuite-gaufre-popup"
|
|
>
|
|
{t("gaufre.label")}
|
|
</button>
|
|
)
|
|
}
|