@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
384 lines • 13.1 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/feedback/SpinnerPage.tsx";
import { useState } from 'preact/hooks';
import { Spinner, SpinnerOverlay, Button } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function SpinnerPage() {
const [overlayOpen, setOverlayOpen] = useState(false);
function toggleOverlayOpen() {
setOverlayOpen(!overlayOpen);
}
return _jsxDEV(Library.Page, {
title: "Spinner",
intro: _jsxDEV(_Fragment, {
children: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Spinner"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 13
}, this), " and ", _jsxDEV("code", {
children: "SpinnerOverlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 38
}, this), " are simple components to render loading spinners."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this)
}, void 0, false),
children: [_jsxDEV(Library.Section, {
title: "Spinner",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Spinner"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 13
}, this), " is a simple component to render a spinner with spokes, representing loading or other progress."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Spinner"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Spinner, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV(Library.SectionL3, {
title: "color",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set the foreground color of the spinner icon."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: [`'text' |'text-light' | 'text-inverted'`, "]"]
}, void 0, true, {
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: `'text-light'`
}, 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: 44,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Available Spinner colors",
withSource: true,
children: _jsxDEV("div", {
className: "flex gap-x-8 items-center",
children: [_jsxDEV(Spinner, {
color: "text-light",
size: "md"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 17
}, this), _jsxDEV(Spinner, {
color: "text",
size: "md"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "bg-slate-7 rounded-lg flex items-center justify-center p-8",
children: _jsxDEV(Spinner, {
color: "text-inverted",
size: "md"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "size",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set relative size of the spinner."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'sm' | 'md' | 'lg' `
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'md'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Spinner sizes",
withSource: true,
children: _jsxDEV("div", {
className: "flex gap-x-8 items-center",
children: [_jsxDEV(Spinner, {
size: "sm"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 17
}, this), _jsxDEV(Spinner, {
size: "md"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 17
}, this), _jsxDEV(Spinner, {
size: "lg"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "SpinnerOverlay",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "SpinnerOverlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 13
}, this), " is a simple component that composes a spinner with an", ' ', _jsxDEV(Library.Link, {
href: "/layout-overlay",
children: _jsxDEV("code", {
children: "Overlay"
}, 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: 93,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "SpinnerOverlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: [_jsxDEV(Library.Demo, {
title: "Basic SpinnerOverlay",
children: [_jsxDEV(Button, {
onClick: toggleOverlayOpen,
children: "Show overlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 15
}, this), overlayOpen && _jsxDEV(SpinnerOverlay, {
onClick: toggleOverlayOpen
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 31
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 13
}, this), _jsxDEV(Library.Code, {
content: `<Button onClick={toggleOverlayOpen}>Show overlay</Button>
{overlayOpen && <SpinnerOverlay onClick={toggleOverlayOpen} />}`,
title: "Source for spinner-overlay example"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "HTML attributes applied to the outermost full-screen element."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<JSX.HTMLAttributes<HTMLElement>, 'className' | 'open'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 13,
columnNumber: 5
}, this);
}
//# sourceMappingURL=SpinnerPage.js.map