@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
478 lines • 17.2 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/navigation/LinkPage.tsx";
import { Link } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function LinkPage() {
return _jsxDEV(Library.Page, {
title: "Link",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Link"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 10,
columnNumber: 11
}, this), " is a presentational component that provides styling and common behavior for anchor (", _jsxDEV("code", {
children: "a"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 43
}, this), ") elements."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
title: "Link",
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Link"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Link",
withSource: true,
children: _jsxDEV(Link, {
href: "https://www.example.com",
children: "A link to a website"
}, 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("code", {
children: "Link"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
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: 27,
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: 34,
columnNumber: 17
}, this), " The ", _jsxDEV("code", {
children: "underline"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
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: 37,
columnNumber: 17
}, this), " is set (in which case, no underline styling will be applied)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 13
}, this), _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Control when underlines are applied to links. Current default is", ' ', _jsxDEV("code", {
children: "'none'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 17
}, 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: 45,
columnNumber: 59
}, this), ' ', "to ", _jsxDEV("code", {
children: "'always'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 20
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'none' | 'hover' | 'always'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'none'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "flex flex-col",
children: [_jsxDEV(Link, {
href: "https://www.example.com",
underline: "none",
children: "Link with underline: none"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 17
}, this), _jsxDEV(Link, {
href: "https://www.example.com",
underline: "hover",
children: "Link with underline: hover"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 17
}, this), _jsxDEV(Link, {
href: "https://www.example.com",
underline: "always",
children: "Link with underline: always"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Link"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 17
}, this), " accepts HTML attribute props applicable to", ' ', _jsxDEV("code", {
children: "HTMLAnchorElement"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: 'preact.JSX.AnchorHTMLAttributes<HTMLAnchorElement>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "example",
children: _jsxDEV(Library.Code, {
content: `<Link id="my-own-id" href="https://www.example.com">A Link with attributes</Link>`,
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
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: "Link"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
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: 94,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
id: "styling-api-variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Link ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 22
}, this), "s affect the color of link text (including hover color). Set to ", _jsxDEV("code", {
children: "custom"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 49
}, this), " to remove theming styles."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'brand' | 'text' | 'text-light' | 'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'brand'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "flex flex-col",
children: [_jsxDEV(Link, {
href: "https://www.example.com",
variant: "brand",
children: "Variant: brand (default)"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 17
}, this), _jsxDEV(Link, {
href: "https://www.example.com",
variant: "text",
children: "Variant: text"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 17
}, this), _jsxDEV(Link, {
href: "https://www.example.com",
variant: "text-light",
children: "Variant: text-light"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 17
}, this), _jsxDEV(Link, {
href: "https://www.example.com",
variant: "custom",
children: "Variant: custom"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 99,
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: 134,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Link, {
href: "https://www.example.com",
unstyled: true,
children: "Unstyled Link"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=LinkPage.js.map