@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
785 lines • 28 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/navigation/LinkButtonPage.tsx";
import { LinkButton } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function LinkButtonPage() {
return _jsxDEV(Library.Page, {
title: "LinkButton",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this), " is a presentational component that can be used to style a button to appear as a link."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic LinkButton",
withSource: true,
children: _jsxDEV(LinkButton, {
children: "Example of LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV(Library.SectionL3, {
title: "color",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "status",
children: [_jsxDEV(Library.StatusChip, {
status: "deprecated"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 17
}, this), " Use", ' ', _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 17
}, this), " prop instead."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "description",
children: ["Link ", _jsxDEV("code", {
children: "color"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 22
}, this), " affects the color of link text (including hover color)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'brand' | 'text' | 'text-light'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'brand'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "inline",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Style a ", _jsxDEV("code", {
children: "LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 25
}, this), " to lay out inline. Ignored if", ' ', _jsxDEV("code", {
children: "unstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 17
}, this), " is set."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "flex flex-col gap-y-4",
children: [_jsxDEV("p", {
children: ["This is", ' ', _jsxDEV(LinkButton, {
underline: "always",
children: "a default LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 19
}, this), ' ', "with some text."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 17
}, this), _jsxDEV("p", {
children: ["This is", ' ', _jsxDEV(LinkButton, {
underline: "always",
inline: true,
children: "an inline LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 19
}, this), ' ', "with some text."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "underline",
children: [_jsxDEV("div", {
className: "m-4",
children: _jsxDEV(Library.Callout, {
children: [_jsxDEV("strong", {
children: "Note"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 17
}, this), " The ", _jsxDEV("code", {
children: "underline"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 43
}, this), " prop is likely to be removed in future and underlining will be controlled with a styling-API prop. This prop is ignored if", ' ', _jsxDEV("code", {
children: "unstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 17
}, this), " is set (in which case, no underline styling will be applied)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 13
}, this), _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Control when underlines are applied to ", _jsxDEV("code", {
children: "LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 56
}, this), "s. Current default is ", _jsxDEV("code", {
children: "'none'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 36
}, this), ", but this will be changing in future. Links inline with text content should set", ' ', _jsxDEV("code", {
children: "underline"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 17
}, this), " to ", _jsxDEV("code", {
children: "'always'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 43
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'none' | 'hover' | 'always'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'none'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "flex flex-col",
children: [_jsxDEV(LinkButton, {
underline: "none",
children: "Underline: none (default)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 17
}, this), _jsxDEV(LinkButton, {
underline: "hover",
children: "Underline: hover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 17
}, this), _jsxDEV(LinkButton, {
underline: "always",
children: "Underline: always"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 17
}, this), _jsxDEV("p", {
children: ["LinkButtons should be", ' ', _jsxDEV(LinkButton, {
underline: "always",
inline: true,
children: "always underlined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 19
}, this), ' ', "when inline with text content."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 17
}, this), " accepts HTML attribute props applicable to ", _jsxDEV("code", {
children: "HTMLButtonElement"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 20
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: 'preact.JSX.ButtonHTMLAttributes<HTMLButtonElement>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Styling API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 13
}, this), " accepts the following props from the", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-styling-api",
children: "presentational component styling API"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set to ", _jsxDEV("code", {
children: "custom"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 24
}, this), " to remove theming styles."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'brand' | 'text' | 'text-light' | 'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'brand'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 13
}, this), _jsxDEV("div", {
className: "m-8 grid grid-cols-4 gap-x-16 gap-y-4",
children: [_jsxDEV("div", {
className: "row-span-2 self-end",
children: _jsxDEV("strong", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 15
}, this), _jsxDEV("div", {
className: "uppercase col-span-3 w-full text-center font-semibold border-b border-stone-300 pb-2 border-dashed",
children: "states"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 15
}, this), _jsxDEV("div", {
children: _jsxDEV("strong", {
children: "default"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 15
}, this), _jsxDEV("div", {
children: _jsxDEV("strong", {
children: "pressed"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 15
}, this), _jsxDEV("div", {
children: _jsxDEV("strong", {
children: "disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 15
}, this), _jsxDEV("div", {
className: "col-span-4 border-b border-stone-300"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 15
}, this), _jsxDEV("div", {
children: _jsxDEV("code", {
children: `'brand'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "brand",
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "brand",
pressed: true,
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "brand",
disabled: true,
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 15
}, this), _jsxDEV("div", {
children: _jsxDEV("code", {
children: `'text'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 188,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "text",
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "text",
pressed: true,
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "text",
disabled: true,
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 195,
columnNumber: 15
}, this), _jsxDEV("div", {
children: _jsxDEV("code", {
children: `'text-light'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "text-light",
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "text-light",
pressed: true,
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "text-light",
disabled: true,
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 15
}, this), _jsxDEV("div", {
children: _jsxDEV("code", {
children: `'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "custom",
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "custom",
pressed: true,
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 15
}, this), _jsxDEV(LinkButton, {
variant: "custom",
disabled: true,
children: "Link text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "unstyled",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set to remove all styling."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(LinkButton, {
unstyled: true,
children: "Unstyled LinkButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=LinkButtonPage.js.map