@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
618 lines • 21.1 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/RadioGroupPage.tsx";
import { Link } from '../../../../components/navigation';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function RadioGroupPage() {
return _jsxDEV(Library.Page, {
title: "Radio group",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this), " is a component implementing the", ' ', _jsxDEV(Link, {
href: "https://www.w3.org/WAI/ARIA/apg/patterns/radio/",
target: "_blank",
children: "Radio Group Pattern"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 11
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic RadioGroup",
withSource: true,
exampleFile: "radio-group-horizontal"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with RadioGroups",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this), " can render a list of radios arranged horizontally or vertically. Each radio can optionally render a subtitle, and be individually disabled."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 9
}, this), _jsxDEV("p", {
children: "Radios can be focused via arrow keys. Right/Down to move focus to the next radio, and Up/Left for the previous one."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "RadioGroup direction",
children: _jsxDEV(Library.Demo, {
title: "Vertical RadioGroup",
withSource: true,
exampleFile: "radio-group-vertical"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "RadioGroup with complex layout",
children: [_jsxDEV("p", {
children: ["If the ", _jsxDEV("code", {
children: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 20
}, this), " ", _jsxDEV("code", {
children: "direction"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 44
}, this), " does not fit your needs, you can provide a more complex container around radios, like a responsive set of columns or a grid layout."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "RadioGroup grid layout",
withSource: true,
exampleFile: "radio-group-grid-layout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "Labelling RadioGroups",
children: [_jsxDEV("p", {
children: ["There are two ways to label a ", _jsxDEV("code", {
children: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 43
}, this), ". Make sure to use at least one of them."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Via aria-label",
withSource: true,
exampleFile: "radio-group-aria-label"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Via aria-labelledby",
withSource: true,
exampleFile: "radio-group-aria-labelledby"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 7
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV(Library.SectionL3, {
title: "aria-label",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Sets the ", _jsxDEV("code", {
children: "aria-label"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 24
}, this), " attribute in the", ' ', _jsxDEV("code", {
children: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 15
}, this), ". Make sure either this or", ' ', _jsxDEV("code", {
children: "aria-labelledby"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 15
}, this), " is used."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string | undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "aria-labelledby",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Sets the ", _jsxDEV("code", {
children: "aria-labelledby"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 24
}, this), " attribute in the", ' ', _jsxDEV("code", {
children: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 15
}, this), ". Make sure either this or", ' ', _jsxDEV("code", {
children: "aria-label"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 15
}, this), " is used."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string | undefined"
}, 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: "children",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["The content to render inside the ", _jsxDEV("code", {
children: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 48
}, this), ", typically a list of ", _jsxDEV("code", {
children: "RadioGroup.Radio"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 35
}, this), " components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "ComponentChildren"
}, 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: "undefined"
}, 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)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "direction",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Whether the radios should be stacked horizontally or vertically."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: ["'", "vertical", "'", " | ", "'", "horizontal", "'"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: ["'", "horizontal", "'"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "disabled",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["If true, it will disable all radios, regardless of the value of their own ", _jsxDEV("code", {
children: "disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 25
}, this), " prop.", _jsxDEV("br", {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 15
}, this), "Disabled radios are never marked as selected."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Disabled RadioGroup",
withSource: true,
exampleFile: "radio-group-disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "name",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["When provided, a hidden ", _jsxDEV("code", {
children: "input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 39
}, this), " will be included, with this name and selected value, allowing ", _jsxDEV("code", {
children: "RadioGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 54
}, this), " to be used as a regular form control."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string | undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Named RadioGroup in form",
withSource: true,
exampleFile: "radio-group-in-form"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "onChange",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "A callback invoked when selected radio changes."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: ["(newValue: T) ", '=>', " void"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 193,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 187,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL3, {
title: "selected",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "The value for currently selected radio."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "T | undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "undefined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=RadioGroupPage.js.map