@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
477 lines • 17.5 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/TextareaPage.tsx";
import { Textarea } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function TextareaPage() {
return _jsxDEV(Library.Page, {
title: "Textarea",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Textarea"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this), " is a presentational component for styling", ' ', _jsxDEV("code", {
children: "textarea"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 11
}, this), " elements."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Textarea"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Textarea",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(Textarea, {
"aria-label": "Textarea example",
placeholder: "Placeholder..."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with Textareas",
children: [_jsxDEV(Library.SectionL3, {
title: "Labels",
children: [_jsxDEV("p", {
children: ["Hypothesis does not currently have a design pattern for labeling textareas. However, for accessibility, it is critical that a", ' ', _jsxDEV("code", {
children: "Textarea"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 15
}, this), " have either an associated ", _jsxDEV("code", {
children: "label"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 63
}, this), ' ', "element or an ", _jsxDEV("code", {
children: "aria-label"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 29
}, this), " attribute."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Textarea with label",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: [_jsxDEV("label", {
htmlFor: "textarea-with-label",
className: "font-semibold",
children: "Label"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 17
}, this), _jsxDEV(Textarea, {
id: "textarea-with-label",
placeholder: "Placeholder..."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Disabled Textareas",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Textarea"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 15
}, this), "s can be disabled by applying the HTML", ' ', _jsxDEV("code", {
children: "disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 15
}, this), " attribute."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(Textarea, {
"aria-label": "Example textarea",
placeholder: "Placeholder...",
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Validation errors",
children: [_jsxDEV("p", {
children: ["Validation errors can be triggered as a result of standard HTML attributes such as ", _jsxDEV("code", {
children: "required"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 34
}, this), " or a custom error set using the ", _jsxDEV("code", {
children: "error"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 25
}, this), " prop. Errors set using", ' ', _jsxDEV("code", {
children: "error"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 15
}, this), " are synced to the browser via", ' ', _jsxDEV("code", {
children: "HTMLTextAreaElement.setCustomValidity"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 15
}, this), ". This allows the browser to alert the user when they try to submit the containing form."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["If the text area has custom validation checks, they should be performed in the element's ", _jsxDEV("code", {
children: "onChange"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 47
}, this), " handler."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["If the form is using custom UI to present validation errors, inputs must link to the element displaying their validation error using ", _jsxDEV("code", {
children: "aria-describedby"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 21
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Textarea"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 11
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "error",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set ", _jsxDEV("code", {
children: "error"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 21
}, this), " to indicate a validation error. This implicitly sets", ' ', _jsxDEV("code", {
children: ["feedback=", '"', "error", '"']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 17
}, this), ". In addition to visually and semantically indicating the error state, this will set a custom validation error on the textarea using ", _jsxDEV("code", {
children: "HTMLTextAreaElement.setCustomValidity"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 23
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "feedback",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set ", _jsxDEV("code", {
children: "feedback"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 21
}, this), " to indicate that there is an associated error or warning for the ", _jsxDEV("code", {
children: "Textarea"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 53
}, this), ".", _jsxDEV("br", {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 17
}, this), "Notice that setting", ' ', _jsxDEV("code", {
children: ["feedback=", '"', "error", '"']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 17
}, this), ' ', "will implicitly set", ' ', _jsxDEV("code", {
children: ["aria-invalid=", '"', "true", '"']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: [`"error"`, " | ", `"warning"`]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `undefined`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(Textarea, {
"aria-label": "Textarea with error",
feedback: "error",
value: "something invalid"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 15
}, this), _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(Textarea, {
"aria-label": "Textarea with warning",
feedback: "warning",
value: "might be a problem"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Textarea"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 17
}, this), " accepts HTML attributes for textarea elements."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.TextareaHTMLAttributes<HTMLTextareaElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=TextareaPage.js.map