@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
558 lines • 20 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/feedback/CalloutPage.tsx";
import { Callout, ProfileIcon } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function CalloutPage() {
return _jsxDEV(Library.Page, {
title: "Callout",
intro: _jsxDEV("p", {
children: "Callout is a presentational component that can be used for alerts, banners or toast messages."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 9,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Callout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
withSource: true,
title: "Basic Callout",
children: _jsxDEV("div", {
className: "flex flex-col gap-y-4",
children: [_jsxDEV(Callout, {
status: "notice",
children: "A callout with (default) notice status."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 17
}, this), _jsxDEV(Callout, {
status: "success",
children: "A callout with a success message."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 17
}, this), _jsxDEV(Callout, {
status: "error",
children: "A callout with an error message."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 17
}, this)]
}, void 0, true, {
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("p", {
children: [_jsxDEV("code", {
children: "Callout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "icon",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Custom icon to display in callout."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Callout with custom icon",
withSource: true,
children: _jsxDEV(Callout, {
icon: ProfileIcon,
status: "success",
children: "This callout has a custom icon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "status",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Will theme the callout with an appropriate icon and coloring (unless overridden by the ", _jsxDEV("code", {
children: "icon"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 43
}, this), " prop or Styling API props)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'notice' | 'success' | 'error'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'notice'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Callout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 17
}, this), " accepts HTML attribute props applicable to", ' ', _jsxDEV("code", {
children: "HTMLElement"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<JSX.HTMLAttributes<HTMLElement>, 'size' | 'icon'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Styling API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Callout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
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: 93,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set the ", _jsxDEV("code", {
children: "Callout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 25
}, this), " theming."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'outlined' | 'raised' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'outlined'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Callout variants",
withSource: true,
children: _jsxDEV("div", {
className: "flex flex-col gap-y-4",
children: [_jsxDEV(Callout, {
variant: "outlined",
children: ["This is an ", _jsxDEV("strong", {
children: "outlined"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 30
}, this), " (default) callout."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 17
}, this), _jsxDEV(Callout, {
variant: "raised",
children: ["This is a ", _jsxDEV("strong", {
children: "raised"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 29
}, this), " callout, which provides dimensionality and interactive cursor."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Callout with custom variant",
withSource: true,
children: _jsxDEV(Callout, {
variant: "custom",
children: ["Note that no icon is rendered when variant is", ' ', _jsxDEV("code", {
children: `'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "size",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set the relative internal sizing of the callout. Set to", ' ', _jsxDEV("code", {
children: `'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 17
}, this), " to disable sizing classes and set your own with ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 26
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'sm' | 'md' | 'lg' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'md'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Callout sizes",
withSource: true,
children: _jsxDEV("div", {
className: "flex flex-col gap-y-4",
children: [_jsxDEV(Callout, {
status: "success",
size: "sm",
children: "A callout with a small size."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 17
}, this), _jsxDEV(Callout, {
status: "success",
size: "md",
children: "A callout with a medium size."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 17
}, this), _jsxDEV(Callout, {
status: "success",
size: "lg",
children: "A callout with a large size."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 17
}, this), _jsxDEV(Callout, {
status: "success",
size: "custom",
classes: "p-4",
children: ["Note that no icon is rendered if size is", ' ', _jsxDEV("code", {
children: `'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 131,
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 and provide your own styling with ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 22
}, this), ". No icon will be rendered."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 172,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 6,
columnNumber: 5
}, this);
}
//# sourceMappingURL=CalloutPage.js.map