@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
421 lines • 15 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/OptionButtonPage.tsx";
import { OptionButton } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function OptionButtonPage() {
return _jsxDEV(Library.Page, {
title: "OptionButton",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "OptionButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this), " is a simple component for presenting an option as part of a set of options. It can be used in places where it is impractical or undesirable to use an equivalent", ' ', _jsxDEV("code", {
children: `input type="radio"`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this), " or ", _jsxDEV("code", {
children: "select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 50
}, this), " element.", ' ', _jsxDEV("code", {
children: "OptionButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 11
}, this), " wraps", ' ', _jsxDEV(Library.Link, {
href: "/input-button",
children: _jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 11
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "OptionButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
withSource: true,
title: "Basic OptionButton",
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(OptionButton, {
children: "Option Alpha"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with OptionButton",
children: _jsxDEV(Library.SectionL3, {
title: "Multiple OptionButtons",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "OptionButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 15
}, this), " is designed for use in a set, similar to an ", _jsxDEV("code", {
children: "option"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 18
}, this), " element or a radio button. While not enforced, a maximum of one ", _jsxDEV("code", {
children: "OptionButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 42
}, this), " in a set should be selected. There is also ", _jsxDEV("code", {
children: "disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 49
}, this), "styling."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["To facilitate alignment, ", _jsxDEV("code", {
children: "OptionButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 40
}, this), " stretches to the full width of its container."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-[280px] space-y-2",
children: [_jsxDEV(OptionButton, {
children: "Option Alpha"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 17
}, this), _jsxDEV(OptionButton, {
selected: true,
children: "Option Bravo"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 17
}, this), _jsxDEV(OptionButton, {
children: "Option Charlie-Delta-Echo"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 17
}, this), _jsxDEV(OptionButton, {
disabled: true,
children: "Option Foxtrot"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 17
}, this), _jsxDEV(OptionButton, {
children: "Option Golf"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV(Library.SectionL3, {
title: "details",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Optional content to display at right side of button. Be sure to set a useful ", _jsxDEV("code", {
children: "title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 30
}, this), " (used for generating", ' ', _jsxDEV("code", {
children: "aria-label"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 17
}, this), ") when constructing such buttons."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "preact.ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "OptionButton with details",
withSource: true,
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(OptionButton, {
details: "PDF",
title: "Select a PDF from Google Drive",
children: "Google Drive"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "selected",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["The option represented by the button is selected. A maximum of one ", _jsxDEV("code", {
children: "OptionButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 21
}, this), " in a set should be selected at any time. This is an alias for the ", _jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 48
}, this), ' ', _jsxDEV("code", {
children: "pressed"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 17
}, this), " prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Selected OptionButton",
withSource: true,
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(OptionButton, {
details: "PDF",
title: "Select a PDF from Google Drive",
selected: true,
children: "Google Drive"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...buttonProps",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "OptionButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 17
}, this), " accepts and forwards all", ' ', _jsxDEV(Library.Link, {
href: "/input-button",
children: _jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 17
}, this), ' ', "component API props. Styling API props are not forwarded."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<ButtonProps, 'size' | 'unstyled' | 'classes' | 'variant'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=OptionButtonPage.js.map