@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
478 lines (476 loc) • 15.9 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/CheckboxPage.tsx";
import { useState } from 'preact/hooks';
import { Checkbox, ShowIcon, HideIcon } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function CheckboxPage() {
const [checked, setChecked] = useState(false);
const handleControlledChange = e => {
setChecked(e.target.checked);
};
return _jsxDEV(Library.Page, {
title: "Checkbox",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this), " is a composite component that includes a checkbox input and label."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Checkbox",
withSource: true,
children: _jsxDEV("div", {
className: "flex flex-col",
children: [_jsxDEV(Checkbox, {
children: "Click me"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 15
}, this), _jsxDEV(Checkbox, {
disabled: true,
children: "Disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with Checkboxes",
children: [_jsxDEV(Library.SectionL3, {
title: "Controlled Checkboxes",
children: [_jsxDEV("p", {
children: ["The presence of a ", _jsxDEV("code", {
children: "checked"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 31
}, this), " prop will make the", ' ', _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 13
}, this), " behave as a controlled component. Consuming components should respond to the ", _jsxDEV("code", {
children: "onChange"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 46
}, this), " event."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Controlling a Checkbox with `checked`",
withSource: true,
children: _jsxDEV(Checkbox, {
checked: checked,
onChange: handleControlledChange,
children: "Controlled checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 11
}, this), _jsxDEV(Library.Code, {
content: `const [checked, setChecked] = useState(false);
const handleControlledChange = e => {
setChecked(e.target.checked);
};
<Checkbox
checked={checked}
onChange={handleControlledChange}
>
Controlled checkbox
</Checkbox>
`,
size: "sm",
title: "When the `checked prop` is present, Checkbox will behave as a controlled component"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Don't forget to handle events for controlled Checkboxes",
withSource: true,
children: _jsxDEV(Checkbox, {
checked: false,
children: _jsxDEV("div", {
className: "text-red-error",
children: "This checkbox will not update when clicked"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "Customizing Checkbox icons",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 13
}, this), " uses icons to style the checkbox, in unchecked and checked states. Custom icons may be provided if desired."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "Checkbox with custom icon and checkedIcon",
children: _jsxDEV(Checkbox, {
icon: HideIcon,
checkedIcon: ShowIcon,
defaultChecked: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 9
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 9
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "checked",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set whether the ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 31
}, this), " is checked. The presence of this component indicates that the ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 49
}, this), " is being used as a controlled component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `undefined`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "defaultChecked",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Whether the ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 27
}, this), " is initially checked. For use when ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 20
}, this), " is an uncontrolled component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Uncontrolled Checkbox with defaultChecked",
withSource: true,
children: _jsxDEV(Checkbox, {
defaultChecked: true,
children: "Default checked"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "icon",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 15
}, this), " to use as the (unchecked) checkbox icon"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "checkedIcon",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 15
}, this), " to use as the (checked) checkbox icon"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 15
}, this), " accepts HTML attributes for input elements"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.InputHTMLAttributes<HTMLInputElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 5
}, this);
}
//# sourceMappingURL=CheckboxPage.js.map