@seasketch/geoprocessing
Version:
Geoprocessing and reporting framework for SeaSketch 2.0
42 lines • 1.65 kB
JavaScript
import React from "react";
import ReportDecorator from "../storybook/ReportDecorator.js";
import useCheckboxes from "../../hooks/useCheckboxes.js";
import CheckboxGroup from "./CheckboxGroup.js";
import { Card } from "../Card.js";
export default {
component: CheckboxGroup,
title: "Components/CheckboxGroup",
decorators: [ReportDecorator],
};
export const simple = () => {
const options = [
{ name: "one", checked: false },
{ name: "two", checked: false },
{ name: "three", checked: false },
{ name: "four", checked: false },
];
const checkboxState = useCheckboxes(options);
// The whole point of using a hook here is we can easily access the state externally and indepdendently of the checkbox UI component
return (React.createElement(Card, null,
React.createElement(CheckboxGroup, { ...checkboxState }),
React.createElement("div", null,
"Selected:",
" ",
checkboxState.checkboxes
.map((c) => (c.checked ? c.name : ""))
.join(" "))));
};
/** Demonstrate vertical alignment is maintained */
export const smallText = () => {
const options = [
{ name: "one", checked: false },
{ name: "two", checked: false },
{ name: "three", checked: false },
{ name: "four", checked: false },
];
const checkboxState = useCheckboxes(options);
return (React.createElement(Card, null,
React.createElement("div", { style: { fontSize: 10 } },
React.createElement(CheckboxGroup, { ...checkboxState }))));
};
//# sourceMappingURL=CheckboxGroup.stories.js.map