UNPKG

@hypothesis/frontend-shared

Version:

Shared components, styles and utilities for Hypothesis projects

899 lines 29.4 kB
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/ButtonComponents.js"; import { IconButton, LabeledButton, LinkButton } from '../../../'; import Library from '../Library'; import Next from '../LibraryNext'; import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime"; export default function ButtonComponents() { return _jsxDEV(Library.Page, { title: "Buttons", children: [_jsxDEV(Library.Pattern, { title: "Status", children: _jsxDEV(Next.Changelog, { children: [_jsxDEV(Next.ChangelogItem, { status: "deprecated", children: ["The legacy implementation of", _jsxDEV("s", { children: _jsxDEV("code", { children: "Button" }, void 0, false, { fileName: _jsxFileName, lineNumber: 13, columnNumber: 15 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 12, columnNumber: 13 }, this), ' ', "is deprecated and slated for removal in v6 of", ' ', _jsxDEV("code", { children: "frontend-shared" }, void 0, false, { fileName: _jsxFileName, lineNumber: 16, columnNumber: 13 }, this), ". Use re-implemented", _jsxDEV("code", { children: "Button" }, void 0, false, { fileName: _jsxFileName, lineNumber: 17, columnNumber: 13 }, this), " component in the input group instead."] }, void 0, true, { fileName: _jsxFileName, lineNumber: 10, columnNumber: 11 }, this), _jsxDEV(Next.ChangelogItem, { status: "deprecated", children: ["The legacy implementation of", _jsxDEV("s", { children: _jsxDEV("code", { children: "IconButton" }, void 0, false, { fileName: _jsxFileName, lineNumber: 22, columnNumber: 15 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 21, columnNumber: 13 }, this), ' ', "is deprecated and slated for removal in v6 of", ' ', _jsxDEV("code", { children: "frontend-shared" }, void 0, false, { fileName: _jsxFileName, lineNumber: 25, columnNumber: 13 }, this), ". Use re-implemented", _jsxDEV("code", { children: "IconButton" }, void 0, false, { fileName: _jsxFileName, lineNumber: 26, columnNumber: 13 }, this), " component in the input group instead."] }, void 0, true, { fileName: _jsxFileName, lineNumber: 19, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 9 }, this) }, void 0, false, { fileName: _jsxFileName, lineNumber: 8, columnNumber: 7 }, this), _jsxDEV(Library.Pattern, { title: "Usage", children: [_jsxDEV(Next.Usage, { componentName: "Button", generation: "legacy" }, void 0, false, { fileName: _jsxFileName, lineNumber: 31, columnNumber: 9 }, this), _jsxDEV(Next.Usage, { componentName: "IconButton", generation: "legacy" }, void 0, false, { fileName: _jsxFileName, lineNumber: 32, columnNumber: 9 }, this), _jsxDEV(Next.Usage, { componentName: "LinkButton", generation: "legacy" }, void 0, false, { fileName: _jsxFileName, lineNumber: 33, columnNumber: 9 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 30, columnNumber: 7 }, this), _jsxDEV(Library.Pattern, { title: "Button variants", children: [_jsxDEV("p", { children: ["Button components support the following ", _jsxDEV("strong", { children: "variants" }, void 0, false, { fileName: _jsxFileName, lineNumber: 37, columnNumber: 51 }, this), ":"] }, void 0, true, { fileName: _jsxFileName, lineNumber: 36, columnNumber: 9 }, this), _jsxDEV("ul", { className: "list-disc list-inside", children: [_jsxDEV("li", { children: "Default" }, void 0, false, { fileName: _jsxFileName, lineNumber: 40, columnNumber: 11 }, this), _jsxDEV("li", { children: "Primary: For indicating that a button represents a primary action" }, void 0, false, { fileName: _jsxFileName, lineNumber: 41, columnNumber: 11 }, this), _jsxDEV("li", { children: "Dark: For rendering a button on a grey background" }, void 0, false, { fileName: _jsxFileName, lineNumber: 44, columnNumber: 11 }, this), _jsxDEV("li", { children: "Light: This variant should only be used for non-critical buttons on white backgrounds (low contrast)." }, void 0, false, { fileName: _jsxFileName, lineNumber: 45, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 39, columnNumber: 9 }, this), _jsxDEV("p", { children: "In addition, a button may be in one of four states, which are represented in their variant examples, left to right:" }, void 0, false, { fileName: _jsxFileName, lineNumber: 50, columnNumber: 9 }, this), _jsxDEV("ul", { className: "list-disc list-inside", children: [_jsxDEV("li", { children: "Default" }, void 0, false, { fileName: _jsxFileName, lineNumber: 55, columnNumber: 11 }, this), _jsxDEV("li", { children: "Pressed" }, void 0, false, { fileName: _jsxFileName, lineNumber: 56, columnNumber: 11 }, this), _jsxDEV("li", { children: "Expanded" }, void 0, false, { fileName: _jsxFileName, lineNumber: 57, columnNumber: 11 }, this), _jsxDEV("li", { children: "Disabled" }, void 0, false, { fileName: _jsxFileName, lineNumber: 58, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 54, columnNumber: 9 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 35, columnNumber: 7 }, this), _jsxDEV(Library.Pattern, { title: "IconButton", children: [_jsxDEV("p", { children: "A button containing an icon and no other content." }, void 0, false, { fileName: _jsxFileName, lineNumber: 63, columnNumber: 9 }, this), _jsxDEV(Library.Example, { title: "Basic use and sizes", children: [_jsxDEV("p", { children: ["The optional ", _jsxDEV("code", { children: "size" }, void 0, false, { fileName: _jsxFileName, lineNumber: 66, columnNumber: 26 }, this), " property affects the proportions and overall size of the button by way of padding. It does not change the size of the icon itself, which is sized at\xA0", _jsxDEV("code", { children: "1em" }, void 0, false, { fileName: _jsxFileName, lineNumber: 69, columnNumber: 13 }, this), ". The default sizing is ", _jsxDEV("code", { children: "medium" }, void 0, false, { fileName: _jsxFileName, lineNumber: 69, columnNumber: 53 }, this), "."] }, void 0, true, { fileName: _jsxFileName, lineNumber: 65, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { withSource: true, children: [_jsxDEV(IconButton, { icon: "edit", title: "Edit", size: "small" }, void 0, false, { fileName: _jsxFileName, lineNumber: 72, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "edit", title: "Edit", size: "medium" }, void 0, false, { fileName: _jsxFileName, lineNumber: 73, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "edit", title: "Edit", size: "large" }, void 0, false, { fileName: _jsxFileName, lineNumber: 74, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 71, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 64, columnNumber: 9 }, this), _jsxDEV(Library.Example, { title: "Variants", variant: "wide", children: [_jsxDEV("h4", { children: "Dark variant" }, void 0, false, { fileName: _jsxFileName, lineNumber: 79, columnNumber: 11 }, this), _jsxDEV("p", { children: ["The ", _jsxDEV("code", { children: "IconButton" }, void 0, false, { fileName: _jsxFileName, lineNumber: 81, columnNumber: 17 }, this), " dark variant is for use on darker (light grey vs. white) backgrounds. Note that this button, unlike other", ' ', _jsxDEV("code", { children: "IconButton" }, void 0, false, { fileName: _jsxFileName, lineNumber: 83, columnNumber: 13 }, this), "s, has a background color. This is to allow for a use case in which the dark ", _jsxDEV("code", { children: "IconButton" }, void 0, false, { fileName: _jsxFileName, lineNumber: 84, columnNumber: 46 }, this), " is initially fixed on a grey background but floats on top of content when scrolled."] }, void 0, true, { fileName: _jsxFileName, lineNumber: 80, columnNumber: 11 }, this), _jsxDEV("h4", { children: "Light variant" }, void 0, false, { fileName: _jsxFileName, lineNumber: 88, columnNumber: 11 }, this), _jsxDEV("p", { children: "This variant should only be used for non-critical icons on white backgrounds (low contrast)." }, void 0, false, { fileName: _jsxFileName, lineNumber: 89, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Default", withSource: true, children: [_jsxDEV(IconButton, { icon: "trash", title: "Delete annotation" }, void 0, false, { fileName: _jsxFileName, lineNumber: 94, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", pressed: true }, void 0, false, { fileName: _jsxFileName, lineNumber: 95, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", expanded: true }, void 0, false, { fileName: _jsxFileName, lineNumber: 96, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", disabled: true }, void 0, false, { fileName: _jsxFileName, lineNumber: 97, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 93, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Primary", withSource: true, children: [_jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", variant: "primary" }, void 0, false, { fileName: _jsxFileName, lineNumber: 101, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", pressed: true, variant: "primary" }, void 0, false, { fileName: _jsxFileName, lineNumber: 106, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", expanded: true, variant: "primary" }, void 0, false, { fileName: _jsxFileName, lineNumber: 112, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", disabled: true, variant: "primary" }, void 0, false, { fileName: _jsxFileName, lineNumber: 118, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 100, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Dark", withSource: true, children: [_jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", variant: "dark" }, void 0, false, { fileName: _jsxFileName, lineNumber: 127, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", pressed: true, variant: "dark" }, void 0, false, { fileName: _jsxFileName, lineNumber: 128, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", expanded: true, variant: "dark" }, void 0, false, { fileName: _jsxFileName, lineNumber: 134, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", disabled: true, variant: "dark" }, void 0, false, { fileName: _jsxFileName, lineNumber: 140, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 126, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Light", withSource: true, children: [_jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", variant: "light" }, void 0, false, { fileName: _jsxFileName, lineNumber: 149, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", pressed: true, variant: "light" }, void 0, false, { fileName: _jsxFileName, lineNumber: 154, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", expanded: true, variant: "light" }, void 0, false, { fileName: _jsxFileName, lineNumber: 160, columnNumber: 13 }, this), _jsxDEV(IconButton, { icon: "trash", title: "Delete annotation", disabled: true, variant: "light" }, void 0, false, { fileName: _jsxFileName, lineNumber: 166, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 148, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 78, columnNumber: 9 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 62, columnNumber: 7 }, this), _jsxDEV(Library.Pattern, { title: "LabeledButton", children: [_jsxDEV("p", { children: "A button with content and, optionally, an icon." }, void 0, false, { fileName: _jsxFileName, lineNumber: 177, columnNumber: 9 }, this), _jsxDEV(Library.Example, { title: "Basic use and sizes", children: [_jsxDEV("p", { children: ["The optional ", _jsxDEV("code", { children: "size" }, void 0, false, { fileName: _jsxFileName, lineNumber: 180, columnNumber: 26 }, this), " property affects the proportions and overall size of the button by way of padding. It does not change the size of the icon itself, which is sized at\xA0", _jsxDEV("code", { children: "1em" }, void 0, false, { fileName: _jsxFileName, lineNumber: 183, columnNumber: 13 }, this), ". The default sizing is ", _jsxDEV("code", { children: "medium" }, void 0, false, { fileName: _jsxFileName, lineNumber: 183, columnNumber: 53 }, this), "."] }, void 0, true, { fileName: _jsxFileName, lineNumber: 179, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Label only", withSource: true, children: [_jsxDEV(LabeledButton, { size: "small", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 186, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 187, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { size: "large", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 188, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 185, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Label, icon", withSource: true, children: [_jsxDEV(LabeledButton, { icon: "profile", size: "small", children: "Edit User" }, void 0, false, { fileName: _jsxFileName, lineNumber: 192, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "profile", children: "Edit User" }, void 0, false, { fileName: _jsxFileName, lineNumber: 195, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "profile", size: "large", children: "Edit User" }, void 0, false, { fileName: _jsxFileName, lineNumber: 196, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 191, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Label, icon on right", withSource: true, children: [_jsxDEV(LabeledButton, { icon: "profile", size: "small", iconPosition: "right", children: "Edit User" }, void 0, false, { fileName: _jsxFileName, lineNumber: 202, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "profile", iconPosition: "right", children: "Edit User" }, void 0, false, { fileName: _jsxFileName, lineNumber: 205, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "profile", size: "large", iconPosition: "right", children: "Edit User" }, void 0, false, { fileName: _jsxFileName, lineNumber: 208, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 201, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 178, columnNumber: 9 }, this), _jsxDEV(Library.Example, { title: "Variants", variant: "wide", children: [_jsxDEV(Library.Demo, { title: "Default", withSource: true, children: [_jsxDEV(LabeledButton, { icon: "edit", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 216, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", pressed: true, children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 217, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", expanded: true, children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 220, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", disabled: true, children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 223, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 215, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Primary", withSource: true, children: [_jsxDEV(LabeledButton, { icon: "edit", variant: "primary", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 229, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", variant: "primary", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 232, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", variant: "primary", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 235, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", variant: "primary", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 238, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 228, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Dark", withSource: true, children: [_jsxDEV(LabeledButton, { icon: "edit", variant: "dark", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 244, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", pressed: true, variant: "dark", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 247, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", expanded: true, variant: "dark", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 250, columnNumber: 13 }, this), _jsxDEV(LabeledButton, { icon: "edit", disabled: true, variant: "dark", children: "Edit" }, void 0, false, { fileName: _jsxFileName, lineNumber: 253, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 243, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 214, columnNumber: 9 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 176, columnNumber: 7 }, this), _jsxDEV(Library.Pattern, { title: "LinkButton", children: [_jsxDEV("p", { children: "A button styled to look like a link (anchor tag)." }, void 0, false, { fileName: _jsxFileName, lineNumber: 261, columnNumber: 9 }, this), _jsxDEV(Library.Example, { title: "Variants", children: [_jsxDEV(Library.Demo, { title: "Default", withSource: true, children: [_jsxDEV(LinkButton, { children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 265, columnNumber: 13 }, this), _jsxDEV(LinkButton, { pressed: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 266, columnNumber: 13 }, this), _jsxDEV(LinkButton, { expanded: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 267, columnNumber: 13 }, this), _jsxDEV(LinkButton, { disabled: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 268, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 264, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Primary", withSource: true, children: [_jsxDEV(LinkButton, { variant: "primary", children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 272, columnNumber: 13 }, this), _jsxDEV(LinkButton, { variant: "primary", pressed: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 273, columnNumber: 13 }, this), _jsxDEV(LinkButton, { variant: "primary", expanded: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 276, columnNumber: 13 }, this), _jsxDEV(LinkButton, { variant: "primary", disabled: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 279, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 271, columnNumber: 11 }, this), _jsxDEV(Library.Demo, { title: "Dark", withSource: true, children: [_jsxDEV(LinkButton, { variant: "dark", children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 285, columnNumber: 13 }, this), _jsxDEV(LinkButton, { variant: "dark", pressed: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 286, columnNumber: 13 }, this), _jsxDEV(LinkButton, { variant: "dark", expanded: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 289, columnNumber: 13 }, this), _jsxDEV(LinkButton, { variant: "dark", disabled: true, children: "Show replies (10)" }, void 0, false, { fileName: _jsxFileName, lineNumber: 292, columnNumber: 13 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 284, columnNumber: 11 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 263, columnNumber: 9 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 260, columnNumber: 7 }, this)] }, void 0, true, { fileName: _jsxFileName, lineNumber: 7, columnNumber: 5 }, this); } //# sourceMappingURL=ButtonComponents.js.map