Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox #8

Open
wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

Checkbox #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
320 changes: 135 additions & 185 deletions example-ts/src/pages/components/Checkboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,140 +1,39 @@
import { Checkbox, Fieldset, Container, Title, Text, Row, Col, Breadcrumb, Link } from '@dataesr/dsfr-plus';
import {
Checkbox,
Fieldset,
Container,
Title,
Text,
Row,
Col,
Breadcrumb,
Link,
} from "@dataesr/dsfr-plus";
import Playground from "../../components/Playground";
import { useState } from "react";

import Playground from '../../components/Playground';
const checkboxData = [
{ value: "1", label: "Checkbox 1", hint: "Je suis la valeur numéro 1" },
{ value: "2", label: "Checkbox 2", hint: "Je suis la valeur numéro 2" },
{ value: "3", label: "Checkbox 3", hint: "Je suis la valeur numéro 3" },
];

const checkboxSimple = `
<Checkbox value="1" name="checker" label="Checkbox 1" />
`;
const checkboxDefaultSimple = `
<Checkbox defaultChecked value="1" name="checker" label="Checkbox 1" />
`;

const state = `
<Fieldset
hint="Moi je suis en succès"
messageType="valid"
message="Bien joué !"
legend="Un groupe de boutons Checkbox"
>
<Checkbox defaultChecked value="1" name="checker" label="Checkbox 1" />
<Checkbox value="2" name="checker" label="Checkbox 2" />
<Checkbox value="3" name="checker" label="Checkbox 3" />
</Fieldset>
`;

const disabled = `
<Fieldset
disabled
hint="Je ne suis pas cliquable"
legend="Un groupe de boutons Checkbox"
>
<Checkbox value="1" name="checker" label="Checkbox 1" />
<Checkbox value="2" name="checker" label="Checkbox 2" />
<Checkbox value="3" name="checker" label="Checkbox 3" />
</Fieldset>
`;

const hint = `
<Fieldset
hint="Texte d'explication pour tout le champ"
legend="Un groupe de boutons Checkbox"
>
<Checkbox
hint="Je suis la valeur numéro 1"
value="1"
name="checker"
label="Checkbox 1" />
<Checkbox
hint="Je suis la valeur numéro 2"
value="2"
name="checker"
label="Checkbox 2" />
<Checkbox
hint="Je suis la valeur numéro 3"
value="3"
name="checker"
label="Checkbox 3" />
</Fieldset>
`;

const inline = `
<Fieldset isInline hint="Je suis en ligne" legend="Un groupe de boutons Checkbox">
<Checkbox
hint="Je suis la valeur numéro 1"
value="1"
name="checker"
label="Checkbox 1"
/>
<Checkbox
hint="Je suis la valeur numéro 2"
value="2"
name="checker"
label="Checkbox 2"
/>
<Checkbox
hint="Je suis la valeur numéro 3"
value="3"
name="checker"
label="Checkbox 3"
/>
</Fieldset>
`;
const checkboxGroup = `
<Fieldset legend="Un groupe de boutons Checkbox">
<Checkbox
value="1"
name="checker"
label="Checkbox 1"
/>
<Checkbox
value="2"
name="checker"
label="Checkbox 2"
/>
<Checkbox
value="3"
name="checker"
label="Checkbox 3"
/>
</Fieldset>
`;
const checkboxGroupSM = `
<Fieldset isInline legend="Un groupe de boutons Checkbox">
<Checkbox
size="sm"
value="1"
name="checker"
label="Checkbox 1"
/>
<Checkbox
size="sm"
value="2"
name="checker"
label="Checkbox 2"
/>
<Checkbox
size="sm"
value="3"
name="checker"
label="Checkbox 3"
/>
</Fieldset>
`;
const useCheckboxState = (initialState: boolean) => {
const [isChecked, setIsChecked] = useState(initialState);
const handleChange = (event: { target: { checked: boolean } }) => {
setIsChecked(event.target.checked);
};
return { isChecked, handleChange };
};

export function Checkboxes() {
const checkboxStates = checkboxData.map((_, index) =>
useCheckboxState(index === 0 || index === 2)
);

return (
<Container fluid className="fr-mb-5w">
<Row>
<Fieldset
hint="Moi je suis en succès"
messageType="valid"
message="Bien joué !"
legend="Un groupe de boutons Checkbox"
>
<Checkbox value="1" name="checker" label="Checkbox 1" defaultChecked />
<Checkbox value="2" name="checker" label="Checkbox 2" />
<Checkbox value="3" name="checker" label="Checkbox 3" />
</Fieldset>
<Breadcrumb>
<Link href="/">Accueil</Link>
<Link href="/composants">Composants</Link>
Expand All @@ -145,69 +44,120 @@ export function Checkboxes() {
<Col xs={12}>
<Title as="h1">Case à cocher - Checkbox</Title>
<Text>
Les cases à cocher permettent à l’utilisateur de sélectionner une ou plusieurs options dans une liste.
Elles sont utilisées pour effectuer des sélections multiples (de 0 à N éléments) ou bien pour permettre
un choix binaire, lorsque l’utilisateur peut sélectionner ou désélectionner une seule option.
</Text>
<Text>
La case à cocher peut être utilisée seule ou en liste.
Évitez les listes de plus de 5 éléments et lorsque vous souhaitez contraindre
le choix à un seul élément - utilisez les boutons radio.
</Text>
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Bouton Checkbox simple</Title>
<Playground code={checkboxSimple} scope={{ Checkbox }} defaultShowCode />
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Checkbox - État cochée par défaut</Title>
<Playground code={checkboxDefaultSimple} scope={{ Checkbox }} defaultShowCode />
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Groupe de boutons Checkbox</Title>
<Text>
Comme pour le composant Checkbox, plusieurs boutons Checkbox sont
regroupés sous un composant `Fieldset`, qui permet de gérer la
légende ainsi que l'erreur sur le champ.
</Text>
<Playground code={checkboxGroup} scope={{ Checkbox, Fieldset }} />
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Gestion de l'état</Title>
<Text>
Vous devez gérer l'état du champ directement dans le composant `Fieldset` :
Les cases à cocher permettent à l’utilisateur de sélectionner une ou
plusieurs options dans une liste.
</Text>
<Playground code={state} scope={{ Checkbox, Fieldset }} />
</Col>
<Col xs={12}>
<Title as="h2" look="h4">Avec des textes d'explication</Title>
<Text>
Vous pouvez ajouter des textes explicatifs dans chaque bouton Checkbox et dans le Fieldset :
</Text>
<Playground code={hint} scope={{ Checkbox, Fieldset }} />
</Col>

{/* Groupe de boutons Checkbox */}
<Col xs={12}>
<Title as="h2" look="h4">Désactivé</Title>
<Text>
Appliquez simplement l'attribut `disabled` sur le Fieldset :
</Text>
<Playground code={disabled} scope={{ Checkbox, Fieldset }} />
<Title as="h2" look="h4">
Groupe de boutons Checkbox
</Title>

<Playground
code={`
<Fieldset
hint="Moi je suis en succès"
messageType="valid"
message="Bien joué !"
legend="Un groupe de boutons Checkbox"
>
${checkboxData
.map(
(checkbox, index) => `<Checkbox
value="${checkbox.value}"
label="${checkbox.label}"
checked={${checkboxStates[index].isChecked}}
onChange={handleCheckboxChange${checkbox.value}}
/>`
)
.join("\n")}
</Fieldset>
`}
scope={{
Checkbox,
Fieldset,
checkboxData,
handleCheckboxChange1: checkboxStates[0].handleChange,
handleCheckboxChange2: checkboxStates[1].handleChange,
handleCheckboxChange3: checkboxStates[2].handleChange,
}}
/>
</Col>

{/* Checkbox avec Hint */}
<Col xs={12}>
<Title as="h2" look="h4">En ligne</Title>
<Text>
Vous pouvez ajouter la propriété `isInline` pour afficher les boutons Checkbox sur une ligne.
</Text>
<Playground code={inline} scope={{ Checkbox, Fieldset }} />
<Title as="h2" look="h4">
Checkbox avec Hint
</Title>

<Playground
code={`
<Fieldset
hint="Texte d'explication pour tout le champ"
legend="Un groupe de boutons Checkbox avec des hints"
>
${checkboxData
.map(
(checkbox, index) => `<Checkbox
value="${checkbox.value}"
label="${checkbox.label}"
checked={${checkboxStates[index].isChecked}}
onChange={handleCheckboxChange${checkbox.value}}
hint="${checkbox.hint}"
/>`
)
.join("\n")}
</Fieldset>
`}
scope={{
Checkbox,
Fieldset,
checkboxData,
handleCheckboxChange1: checkboxStates[0].handleChange,
handleCheckboxChange2: checkboxStates[1].handleChange,
handleCheckboxChange3: checkboxStates[2].handleChange,
}}
/>
</Col>

{/* Checkbox avec Size */}
<Col xs={12}>
<Title as="h2" look="h4">En taille "sm"</Title>
<Text>
Vous pouvez réduire la taille des checkboxes avec l'option `size`.
</Text>
<Playground code={checkboxGroupSM} scope={{ Checkbox, Fieldset }} />
<Title as="h2" look="h4">
Checkbox avec Taille
</Title>

<Playground
code={`
<Fieldset
hint="Les boutons Checkbox avec une taille spécifique"
legend="Un groupe de boutons Checkbox avec petite taille"
>
${checkboxData
.map(
(checkbox, index) => `<Checkbox
value="${checkbox.value}"
label="${checkbox.label}"
checked={${checkboxStates[index].isChecked}}
onChange={handleCheckboxChange${checkbox.value}}
size="sm"
/>`
)
.join("\n")}
</Fieldset>
`}
scope={{
Checkbox,
Fieldset,
checkboxData,
handleCheckboxChange1: checkboxStates[0].handleChange,
handleCheckboxChange2: checkboxStates[1].handleChange,
handleCheckboxChange3: checkboxStates[2].handleChange,
}}
/>
</Col>
</Row>
</Container>
);
}
}
Loading