@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
399 lines • 14.7 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/navigation/PointerButtonPage.tsx";
import { PointerButton } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function PointerButtonPage() {
return _jsxDEV(Library.Page, {
title: "PointerButton",
intro: _jsxDEV(_Fragment, {
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "PointerButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 13
}, this), " is a presentational component for styling a button that points towards a group of items elsewhere in the UI or off-screen. They are specifically used to indicate and navigate to \"buckets\" (groups of annotations that are near each other in document content) in the Hypothesis client."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this), _jsxDEV("p", {
children: "PointerButtons point at and navigate to these groups of annotation highlights, which are either in the visible content of the source document (guest page) or off-screen (above or below)."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this)]
}, void 0, true),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "PointerButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic PointerButtons",
withSource: true,
children: [_jsxDEV(PointerButton, {
direction: "up",
children: "3"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 15
}, this), _jsxDEV(PointerButton, {
direction: "down",
children: "7"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 15
}, this), _jsxDEV(PointerButton, {
direction: "left",
children: "5"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with PointerButtons",
children: _jsxDEV(Library.SectionL3, {
title: "PointerButtons in context",
children: [_jsxDEV("p", {
children: ["The following example shows ", _jsxDEV("code", {
children: "PointerButtons"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 43
}, this), " as they might appear in the client, positioned absolutely in a", ' ', '"bucket bar"', "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "PointerButtons in visual context",
withSource: true,
children: _jsxDEV("div", {
className: "w-[23px] h-[250px] bg-grey-2",
children: _jsxDEV("ul", {
className: "relative h-full pointer-events-none",
children: [_jsxDEV("li", {
className: "absolute right-0 pointer-events-auto mt-[-11px]",
style: {
top: '15px'
},
children: _jsxDEV(PointerButton, {
direction: "up",
children: "6"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 19
}, this), _jsxDEV("li", {
className: "absolute right-0 pointer-events-auto mt-[-8px]",
style: {
top: '47px'
},
children: _jsxDEV(PointerButton, {
direction: "left",
children: "10"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 19
}, this), _jsxDEV("li", {
className: "absolute right-0 pointer-events-auto mt-[-8px]",
style: {
top: '112px'
},
children: _jsxDEV(PointerButton, {
direction: "left",
children: "1"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 19
}, this), _jsxDEV("li", {
className: "absolute right-0 pointer-events-auto",
style: {
top: '230px'
},
children: _jsxDEV(PointerButton, {
direction: "down",
children: "4"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
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: 81,
columnNumber: 11
}, this), ".", _jsxDEV(Library.SectionL3, {
title: "direction",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Direction the button should point. If not provided, the button will be a round lozenge."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'up' | 'down' | 'left'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "direction not set",
withSource: true,
children: _jsxDEV(PointerButton, {
children: "24"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "left"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 19
}, this), " direction is intended to point to and navigate to a bucket of annotations currently visible on-screen."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "direction: left",
withSource: true,
children: _jsxDEV(PointerButton, {
direction: "left",
children: "3"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "up"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 19
}, this), " direction is intended to point to and navigate to the next bucket offscreen (above)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "direction: up",
withSource: true,
children: _jsxDEV(PointerButton, {
direction: "up",
children: "4"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "down"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 19
}, this), " direction is intended to point to and navigate to the next bucket offscreen (below)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "direction: down",
withSource: true,
children: _jsxDEV(PointerButton, {
direction: "down",
children: "6"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...buttonProps",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "PointerButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 17
}, this), " props for", ' ', _jsxDEV(Library.Link, {
href: "/input-button",
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 17
}, this), " except for styling API props. This includes HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<ButtonProps>, 'variant' | 'size' | 'unstyled'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=PointerButtonPage.js.map