@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
319 lines • 10.5 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/FormPatterns.js";
import { IconButton, SvgIcon } from '../../../';
import Library from '../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function FormPatterns() {
return _jsxDEV(Library.Page, {
title: "Forms",
children: [_jsxDEV(Library.Pattern, {
title: "Checkbox",
children: [_jsxDEV("p", {
children: ["A checkbox, styled accessibly with an SVG image. The SVG image is an adjacent sibling to the checkbox ", _jsxDEV("code", {
children: "input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 44
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Checkbox",
children: [_jsxDEV("p", {
children: ["This example shows an ", _jsxDEV("code", {
children: "input type=\"checkbox\""
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 35
}, this), ' ', "element with the ", _jsxDEV("code", {
children: "checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 30
}, this), " pattern applied, both unchecked and checked."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "flex space-x-3",
children: [_jsxDEV("div", {
children: [_jsxDEV("input", {
className: "hyp-checkbox",
type: "checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 17
}, this), _jsxDEV(SvgIcon, {
name: "checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 15
}, this), _jsxDEV("div", {
children: [_jsxDEV("input", {
className: "hyp-checkbox",
type: "checkbox",
checked: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 17
}, this), _jsxDEV(SvgIcon, {
name: "checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Checkbox with label",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("label", {
className: "hyp-label",
children: [_jsxDEV("input", {
className: "hyp-checkbox",
type: "checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 15
}, this), _jsxDEV(SvgIcon, {
name: "checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 15
}, this), _jsxDEV("span", {
children: "Click me, please"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 7,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Text inputs",
children: [_jsxDEV("p", {
children: ["A pattern for ", _jsxDEV("code", {
children: "input type=\"text\""
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 25
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Basic text input",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("input", {
className: "hyp-text-input",
type: "text",
placeholder: "http://www.example.com"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Text input in an error state",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("input", {
className: "hyp-text-input has-error",
type: "text",
placeholder: "http://www.example.com"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Text input with button",
children: [_jsxDEV("p", {
children: "A pattern that pairs a text input field with an icon-only button. Use a dark-variant button to match the standard pattern here."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Text input with a dark-variant IconButton",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: {
width: '300px'
},
children: _jsxDEV("div", {
className: "hyp-text-input-with-button",
children: [_jsxDEV("input", {
type: "text",
placeholder: "http://www.example.com"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 17
}, this), _jsxDEV(IconButton, {
icon: "arrow-right",
title: "go",
variant: "dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Text input and button in an error state",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
style: {
width: '300px'
},
children: _jsxDEV("div", {
className: "hyp-text-input-with-button",
children: [_jsxDEV("input", {
type: "text",
placeholder: "http://www.example.com",
className: "has-error"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 17
}, this), _jsxDEV(IconButton, {
icon: "arrow-right",
title: "go",
variant: "dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=FormPatterns.js.map