@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
325 lines • 10.5 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormComponents.js";
import { useState } from 'preact/hooks';
import { IconButton, LabeledCheckbox, TextInput, TextInputWithButton } from '../../..';
import Library from '../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function FormComponents() {
const [wantSandwich, setWantSandwich] = useState(true);
const [wantWatermelon, setWantWatermelon] = useState(false);
const [textInputHasError, setTextInputHasError] = useState(true);
return _jsxDEV(Library.Page, {
title: "Forms",
children: [_jsxDEV(Library.Pattern, {
title: "LabeledCheckbox",
children: [_jsxDEV(Library.Example, {
title: "Unchecked (default)",
children: [_jsxDEV("div", {
style: "font-size: 2em",
children: [wantWatermelon && '🍉', "\xA0"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(LabeledCheckbox, {
checked: wantWatermelon,
name: "test-alternative",
onToggle: isChecked => setWantWatermelon(isChecked),
children: "I want a watermelon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Checked",
children: [_jsxDEV("div", {
style: "font-size: 2em",
children: wantSandwich && '🥪'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
style: {
width: '300px'
},
withSource: true,
children: _jsxDEV(LabeledCheckbox, {
name: "test",
checked: wantSandwich,
onToggle: isChecked => setWantSandwich(isChecked),
children: "I want a sandwich"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "TextInput",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "TextInput"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 15
}, this), " component is a basic wrapper around an", _jsxDEV("code", {
children: "input type=\"text\""
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 11
}, this), " field."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Basic usage",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(TextInput, {
name: "my-input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "As type='url'",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "TextInput"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 13
}, this), " renders an ", _jsxDEV("code", {
children: "input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 47
}, this), " field of", ' ', _jsxDEV("code", {
children: "type=\"text\""
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 13
}, this), " by default, but text-like `type` values are also supported (", _jsxDEV("code", {
children: "email"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 40
}, this), ", ", _jsxDEV("code", {
children: "search"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 60
}, this), ",", ' ', _jsxDEV("code", {
children: "url"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 13
}, this), ")."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(TextInput, {
name: "my-input",
type: "url"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Error state",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(TextInput, {
name: "my-input",
hasError: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "TextInputWithButton",
children: [_jsxDEV("p", {
children: ["This component wraps the ", _jsxDEV("code", {
children: "text-input-with-button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 36
}, this), " pattern: a text input on the left with an associated icon-only button on the right."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 9
}, this), _jsxDEV("p", {
children: ["Current usage favors the ", _jsxDEV("code", {
children: "dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 36
}, this), " variant of", ' ', _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 11
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Basic usage",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(TextInputWithButton, {
children: [_jsxDEV(TextInput, {
name: "my-input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
icon: "arrow-right",
variant: "dark",
title: "go"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Error state",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(TextInputWithButton, {
children: [_jsxDEV(TextInput, {
name: "my-input",
hasError: textInputHasError
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 15
}, this), _jsxDEV(IconButton, {
icon: "arrow-right",
variant: "dark",
title: "go",
onClick: () => setTextInputHasError(!textInputHasError)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 5
}, this);
}
//# sourceMappingURL=FormComponents.js.map