@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
794 lines (792 loc) • 28.9 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/UsingComponentsPage.tsx";
import Library from '../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function UsingComponentsPage() {
return _jsxDEV(Library.Page, {
title: "Using components",
intro: _jsxDEV("p", {
children: "This package provides several categories of components. Which category a component belongs to indicates its general role and common props API."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 8,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.Section, {
title: "Presentational components",
children: [_jsxDEV("p", {
children: [_jsxDEV("strong", {
className: "font-semibold",
children: "Presentational components"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this), ' ', "are the most common type of component. They are composable components that encapsulate design patterns and UI behavior."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 9
}, this), _jsxDEV("p", {
children: ["Examples:", ' ', _jsxDEV(Library.Link, {
href: "/input-button",
children: _jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 11
}, this), ",", ' ', _jsxDEV(Library.Link, {
href: "/navigation-link",
children: _jsxDEV("code", {
children: "Link"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
id: "presentational-components-api",
title: "API",
children: [_jsxDEV("p", {
children: "All presentational components provide this API unless documented otherwise."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "children",
children: _jsxDEV(Library.Info, {
children: _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "preact.ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "classes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["CSS class(es) that will be appended to the CSS classes applied to the ", "component's", " outermost or most significant element. This can be used independently or in conjunction with the Styling API props."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "elementRef",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["A ", _jsxDEV("code", {
children: "Ref"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 19
}, this), " applied to the ", "component's", " outermost or most significant element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: 'preact.Ref<HTMLElement | undefined>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Presentational components accept HTML attributes applicable to the element type of the ", "component's", " outermost or most significant element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 71,
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: 77,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: 'preact.JSX.HTMLAttributes<T extends HTMLElement>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
id: "presentational-components-styling-api",
title: "Styling API",
children: [_jsxDEV("p", {
children: _jsxDEV(Library.Callout, {
children: "These props extend the common presentational-component API. They are new and not supported by all presentational components yet. See individual component API documentation for details."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["See also the", ' ', _jsxDEV(Library.Link, {
href: "/styling-components",
children: "styling guide"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 13
}, this), ' ', "that details how to use these props to customize components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Many presentational components have multiple variants. Variants", ' ', '"theme"', " a component, affecting such aspects as color, transitions, shadows, etc. Set to ", _jsxDEV("code", {
children: "'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 51
}, this), " to disable variant styling."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'custom' | string`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "example",
children: _jsxDEV(Library.Code, {
content: `<SomeComponent variant="secondary" classes="bg-pink">
<p>This will EXTEND the "secondary" variant styles with a pink background</p>
</SomeComponent>
<SomeComponent variant="custom" classes="bg-pink">
<p>This will REPLACE all theming styles with a pink background</p>
</SomeComponent>`,
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "size",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Many, but not all, presentational components provide multiple sizes. The ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 28
}, this), " value affects size, padding, margins, etc. Set to ", _jsxDEV("code", {
children: "'custom'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 38
}, this), " to disable size-related styling."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'custom' | string`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "example",
children: _jsxDEV(Library.Code, {
content: `<SomeComponent size="lg" classes="mt-4">
This will EXTEND size styling with a top margin
</SomeComponent>
<SomeComponent size="custom" classes="mt-4">
This will REPLACE size styling with a top margin
</SomeComponent>`,
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "unstyled",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set this to disable all styling. This is a ", '"master switch"', ' ', "that will supersede ", _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 37
}, this), " and ", _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 59
}, this), ' ', "values. Note that some components have core (typically behavioral) CSS classes that cannot be disabled."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "example",
children: _jsxDEV(Library.Code, {
content: `<SomeComponent unstyled classes="bg-pink">
This will replace all styles with a pink background (only)
</SomeComponent>`,
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "Composite components",
children: [_jsxDEV("p", {
children: [_jsxDEV("strong", {
className: "font-semibold",
children: "Composite components"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 11
}, this), ' ', "compose and style presentational components in a particular way to satisfy a use case and sometimes support more complex or widget-like behavior."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 191,
columnNumber: 9
}, this), _jsxDEV("p", {
children: ["Examples:", ' ', _jsxDEV(Library.Link, {
href: "/data-scrollbox",
children: _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 11
}, this), ",", ' ', _jsxDEV(Library.Link, {
href: "/layout-panel",
children: _jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 204,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
id: "composite-components-api",
title: "API",
children: [_jsxDEV(Library.SectionL3, {
title: "children",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Some, but not all, composite components accept", ' ', _jsxDEV("code", {
children: "children"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "preact.ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 216,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "elementRef",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["A ", _jsxDEV("code", {
children: "Ref"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 19
}, this), " applied to the ", "component's", " outermost or most significant element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: 'preact.Ref<HTMLElement | undefined>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Some, but not all, composite components accept HTML attributes applicable to the element type of the ", "component's", " outermost or most significant element."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 236,
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: 242,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: 'preact.JSX.HTMLAttributes<T extends HTMLElement>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 248,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "Transition components",
children: [_jsxDEV("p", {
children: [_jsxDEV("strong", {
className: "font-semibold",
children: "Transition components"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 11
}, this), " are components with an in/out transition which can be used standalone or wrapped by other components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 258,
columnNumber: 9
}, this), _jsxDEV("p", {
children: ["Example:", ' ', _jsxDEV(Library.Link, {
href: "/transitions-slider",
children: _jsxDEV("code", {
children: "Slider"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 267,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "API",
id: "transition-components-api",
children: [_jsxDEV(Library.SectionL3, {
title: "direction",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Sets the current direction of the component transition."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "'in' | 'out' "
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 277,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 276,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'in'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 279,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 272,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 271,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onTransitionEnd",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Callback invoked when the ", "component's", " transition has completed."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 287,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `(direction: 'in' | 'out') => void`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 292,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 291,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 286,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "Simple components",
children: _jsxDEV("p", {
children: [_jsxDEV("strong", {
className: "font-semibold",
children: "Simple components"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 11
}, this), " are opinionated, simple components that apply design patterns. These components have a minimal, component-specific API."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 300,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 299,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 5,
columnNumber: 5
}, this);
}
//# sourceMappingURL=UsingComponentsPage.js.map