@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
313 lines • 10.6 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/RadioButtonPage.tsx";
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function RadioButtonPage() {
return _jsxDEV(Library.Page, {
title: "Radio button",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 11
}, this), " is a composite component that includes a radio input and label."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic RadioButton",
withSource: true,
exampleFile: "radio-button-basic"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with RadioButtons",
children: [_jsxDEV(Library.SectionL3, {
title: "Controlled RadioButton",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 13
}, this), "s are always expected to be controlled, because only one in a group should be checked at once."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["Because of this, there should be a parent component handling the state for all of them, as ", _jsxDEV("code", {
children: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 39
}, this), "s do not know about each other."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "Customizing RadioButton icons",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 13
}, this), " uses icons to style the radio, in unchecked and checked states. Custom icons may be provided if desired."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "RadioButton with custom icon and checkedIcon",
exampleFile: "radio-button-custom-icons"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
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: 53,
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: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 31
}, this), " is checked. The presence of this component indicates that the ", _jsxDEV("code", {
children: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 52
}, this), " is being used as a controlled component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `undefined`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
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: 75,
columnNumber: 15
}, this), " to use as the (unchecked) radio icon"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
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: 85,
columnNumber: 15
}, this), " to use as the (checked) radio icon"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "RadioButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this), " accepts HTML attributes for input elements"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.InputHTMLAttributes<HTMLInputElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 5,
columnNumber: 5
}, this);
}
//# sourceMappingURL=RadioButtonPage.js.map