@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
349 lines • 12.2 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/InputGroupPage.tsx";
import { InputGroup, Input, IconButton, CopyIcon, ArrowLeftIcon, ArrowRightIcon, Select } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function InputGroupPage() {
return _jsxDEV(Library.Page, {
title: "InputGroup",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 11
}, this), " is a presentational component that provides layout and styling for groups of input components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic InputGroup containing an Input and an IconButton",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(InputGroup, {
children: [_jsxDEV(Input, {
name: "test"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 19
}, this), _jsxDEV(IconButton, {
icon: CopyIcon,
title: "copy",
variant: "dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with InputGroups",
children: [_jsxDEV(Library.SectionL3, {
title: "Composing InputGroups",
children: [_jsxDEV("p", {
children: ["The following input components can be used in an", ' ', _jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 15
}, this), ":"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 13
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: _jsxDEV("code", {
children: "Input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 15
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 15
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 15
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "MultiSelect"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Select and IconButton components in InputGroup",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(InputGroup, {
children: [_jsxDEV(IconButton, {
icon: ArrowLeftIcon,
title: "Previous",
variant: "dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 19
}, this), _jsxDEV(Select, {
value: "1",
buttonContent: "Apple",
onChange: () => {},
children: [_jsxDEV(Select.Option, {
value: "1",
children: "Apple"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 21
}, this), _jsxDEV(Select.Option, {
value: "2",
children: "Banana"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 21
}, this), _jsxDEV(Select.Option, {
value: "3",
children: "Cherries"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 19
}, this), _jsxDEV(IconButton, {
icon: ArrowRightIcon,
title: "Next",
variant: "dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Sizing InputGroups",
children: _jsxDEV(Library.Demo, {
title: "Scaling to local font size",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV("div", {
className: "text-xs",
children: _jsxDEV(InputGroup, {
children: [_jsxDEV(Input, {
name: "test"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 21
}, this), _jsxDEV(IconButton, {
icon: CopyIcon,
title: "copy",
size: "sm",
variant: "dark"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 21
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 17
}, this)
}, void 0, false, {
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, true, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 17
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
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: 105,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 14,
columnNumber: 5
}, this);
}
//# sourceMappingURL=InputGroupPage.js.map