@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
642 lines • 21.2 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/IconButtonPage.js";
import { IconButton } from '../../../../next';
import { CautionIcon, EditIcon, ReplyIcon, ShareIcon } from '../../../../next';
import Library from '../../Library';
import Next from '../../LibraryNext';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function IconButtonPage() {
return _jsxDEV(Library.Page, {
title: "IconButton",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 12,
columnNumber: 11
}, this), " is a presentational component for", ' ', _jsxDEV("code", {
children: "button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 11
}, this), " elements that contain solely an icon."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.Pattern, {
title: "Status",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 11
}, this), " is a reimplementation of an existing legacy component with the same name."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Migrating to this component",
children: _jsxDEV(Next.Changelog, {
children: [_jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: ["Prop name:", ' ', _jsxDEV("s", {
children: _jsxDEV("code", {
children: "buttonRef"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 15
}, this), ' ', "\u279C ", _jsxDEV("code", {
children: "elementRef"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: ["Prop: ", _jsxDEV("code", {
children: "icon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 21
}, this), ",", ' ', _jsxDEV("s", {
children: _jsxDEV("code", {
children: '{string}'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 15
}, this), ' ', "\u279C Now takes ", _jsxDEV("code", {
children: '{IconComponent}'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 27
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: ["Prop: ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 21
}, this), " value", ' ', _jsxDEV("s", {
children: [_jsxDEV("code", {
children: "'light'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 17
}, this), ":"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 15
}, this), ' ', "This is no longer a standard variant \u279C Use", ' ', _jsxDEV("code", {
children: "ButtonUnstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 15
}, this), " instead"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 13
}, this), _jsxDEV(Next.ChangelogItem, {
status: "breaking",
children: ["Prop: ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 21
}, this), " default value", ' ', _jsxDEV("s", {
children: _jsxDEV("code", {
children: "'normal'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 15
}, this), ' ', "\u279C ", _jsxDEV("code", {
children: "'secondary'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 23,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Usage",
children: [_jsxDEV(Next.Usage, {
componentName: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Basic IconButton",
withSource: true,
children: _jsxDEV(IconButton, {
onClick: () => alert('You clicked the button'),
icon: ReplyIcon,
title: "Reply"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Icons",
children: [_jsxDEV(Library.Example, {
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 17
}, this), "'s", " ", _jsxDEV("code", {
children: "icon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 20
}, this), " prop accepts an icon component and will render it sized proportionally to the local font size."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV("span", {
className: "text-xl",
children: _jsxDEV(IconButton, {
icon: ShareIcon,
title: "Share"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
icon: ShareIcon,
title: "Share"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 13
}, this), _jsxDEV("span", {
className: "text-xs",
children: _jsxDEV(IconButton, {
icon: ShareIcon,
title: "Share"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Custom icon styling",
children: [_jsxDEV("p", {
children: "If you need more control over icon styles, use an icon component directly in the content instead."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV(IconButton, {
title: "Share",
children: _jsxDEV(ShareIcon, {
className: "w-8 h-8"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
title: "Share",
children: _jsxDEV(ShareIcon, {
className: "w-3 h-3"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Variant",
children: [_jsxDEV("p", {
children: ["These examples show each variant in each of the supported states. These states are associated with the ", _jsxDEV("code", {
children: "pressed"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 48
}, this), ",", ' ', _jsxDEV("code", {
children: "expanded"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 11
}, this), " and ", _jsxDEV("code", {
children: "disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 37
}, this), " boolean props."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 9
}, this), _jsxDEV("p", {
children: ["For customization, use ", _jsxDEV("code", {
children: "ButtonUnstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 34
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "variant: 'secondary' (default)",
children: _jsxDEV(Library.Demo, {
title: "default, pressed, expanded, disabled",
withSource: true,
children: [_jsxDEV(IconButton, {
variant: "secondary",
title: "Watch out!",
icon: CautionIcon
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "secondary",
title: "Watch out!",
icon: CautionIcon,
pressed: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "secondary",
title: "Watch out!",
icon: CautionIcon,
expanded: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "secondary",
title: "Watch out!",
icon: CautionIcon,
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "variant: 'primary'",
children: _jsxDEV(Library.Demo, {
title: "default, pressed, expanded, disabled",
withSource: true,
children: [_jsxDEV(IconButton, {
variant: "primary",
title: "Watch out!",
icon: CautionIcon
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "primary",
title: "Watch out!",
icon: CautionIcon,
pressed: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "primary",
title: "Watch out!",
icon: CautionIcon,
expanded: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "primary",
title: "Watch out!",
icon: CautionIcon,
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "variant: 'dark'",
children: _jsxDEV(Library.Demo, {
classes: "bg-slate-0 p-4",
title: "default, pressed, expanded, disabled",
withSource: true,
children: [_jsxDEV(IconButton, {
variant: "dark",
title: "Watch out!",
icon: CautionIcon
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "dark",
title: "Watch out!",
icon: CautionIcon,
pressed: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "dark",
title: "Watch out!",
icon: CautionIcon,
expanded: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 182,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
variant: "dark",
title: "Watch out!",
icon: CautionIcon,
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Size",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 15
}, this), " prop affects padding and spacing within the", ' ', _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 11
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV(IconButton, {
icon: EditIcon,
size: "sm",
title: "Edit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
icon: EditIcon,
size: "md",
title: "Edit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 13
}, this), _jsxDEV(IconButton, {
icon: EditIcon,
size: "lg",
title: "Edit"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 207,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 204,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "Disabling touch-target sizing",
children: [_jsxDEV("p", {
children: ["By default, ", _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 25
}, this), " will apply styles for touch devices (", _jsxDEV("code", {
children: "pointer: coarse"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 22
}, this), ") to ensure the minimum dimensions are equal or greater to our defined touch-target minimums (44\xD744px). In some cases that is undesirable. Disable with the", ' ', _jsxDEV("code", {
children: "disableTouchSizing"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 13
}, this), " boolean prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(IconButton, {
icon: EditIcon,
title: "Edit",
disableTouchSizing: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 5
}, this);
}
//# sourceMappingURL=IconButtonPage.js.map