59 lines
3.1 KiB
JavaScript
59 lines
3.1 KiB
JavaScript
// Rôle : expose le suivi du guide dans chaque checklist compatible et marque les cartes terminées.
|
|
import { Icon } from "../../components/Icon.jsx";
|
|
|
|
export function GuideChecklistToggle({ checklist, panel, label }) {
|
|
if (!panel.list) return null;
|
|
return <button
|
|
className={`module-guide-button nds-icon-button ${panel.open ? "active" : ""}`}
|
|
data-size="md"
|
|
data-linked={checklist.selected?.id === panel.list.id || undefined}
|
|
type="button"
|
|
aria-label={`${checklist.content.label} — ${label}`}
|
|
title={checklist.content.label}
|
|
aria-expanded={panel.open}
|
|
aria-pressed={panel.open}
|
|
aria-controls={panel.id}
|
|
onClick={panel.toggle}
|
|
><Icon name="link" /></button>;
|
|
}
|
|
|
|
export function GuideChecklistControls({ checklist, list, id, open }) {
|
|
if (!list) return null;
|
|
const { content, selected, hideCompleted } = checklist;
|
|
const active = selected?.id === list.id;
|
|
return <div id={id} hidden={!open} className="guide-checklist-controls" data-linked={active || undefined}>
|
|
<div className="guide-checklist-actions">
|
|
<button type="button" className="guide-checklist-link nds-button" data-size="sm" data-variant={active ? "primary" : "secondary"} aria-pressed={active} onClick={() => checklist.associate(active ? "" : list.id)}>{active ? content.unlink : content.associate}</button>
|
|
<button type="button" className="nds-switch" disabled={!active} aria-pressed={active && hideCompleted} onClick={checklist.toggleHidden}><Icon name="hide" /><span>{content.hideCompleted}</span><i aria-hidden="true" /></button>
|
|
</div>
|
|
<p>{list.count ? `${list.count} ${content.matches}` : content.noMatches}</p>
|
|
</div>;
|
|
}
|
|
|
|
export function GuideChecklistPageControls({ checklist }) {
|
|
if (!checklist.selected) return null;
|
|
const { content, hideCompleted } = checklist;
|
|
return (
|
|
<aside className="guide-checklist-page-controls nds-tool-panel" aria-label={content.label}>
|
|
<button className={`nds-switch ${hideCompleted ? "active" : ""}`} data-size="sm" type="button" aria-pressed={hideCompleted} onClick={checklist.toggleHidden}>
|
|
<Icon name="hide" />
|
|
<span>{content.hideCompleted}</span>
|
|
<i aria-hidden="true" />
|
|
</button>
|
|
<button className="nds-button" data-size="xs" data-variant="secondary" type="button" onClick={() => checklist.associate("")}>{content.unlink}</button>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
export function GuideChecklistMark({ completed, label }) {
|
|
return completed ? <span className="guide-checklist-mark nds-badge" data-variant="neutral" role="img" aria-label={label} title={label}>✓</span> : null;
|
|
}
|
|
|
|
export function GuideChecklistCheckbox({ checklist, itemKey }) {
|
|
if (!checklist.canToggle(itemKey)) return null;
|
|
const completed = checklist.isCompleted(itemKey);
|
|
const label = completed ? checklist.content.uncheckCard : checklist.content.checkCard;
|
|
return <label className="guide-checklist-checkbox" title={label} onClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
|
|
<input className="nds-checkbox" data-size="sm" type="checkbox" checked={completed} onChange={() => checklist.toggleCompleted(itemKey)} aria-label={label} />
|
|
</label>;
|
|
}
|