@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
447 lines • 15.9 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/feedback/ToastMessagesPage.tsx";
import { useCallback, useState } from 'preact/hooks';
import ToastMessages from '../../../../components/feedback/ToastMessages';
import Button from '../../../../components/input/Button';
import Link from '../../../../components/navigation/Link';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
const toastMessages = [{
message: 'Success toast message',
type: 'success',
autoDismiss: false
}, {
message: 'Warning toast message',
type: 'notice',
autoDismiss: false
}, {
message: 'Error toast message',
type: 'error',
autoDismiss: false
}];
function ToastMessages_({
messages: initialMessages,
transitionClasses,
_printOnDismiss = false,
_allowAppending = false
}) {
const [messages, setMessages] = useState(initialMessages.map((message, index) => ({
id: `${index}`,
...message
})));
const [lastDismissedMessage, setLastDismissedMessage] = useState();
const onMessageDismiss = useCallback(id => {
setLastDismissedMessage(messages.find(message => message.id === id));
setMessages(prev => prev.filter(message => message.id !== id));
}, [messages]);
const appendMessage = useCallback(({
autoDismiss
}) => {
const newId = messages.length === 0 ? 1 : Number(messages[messages.length - 1].id) + 1;
const newMessage = {
id: `${newId}`,
message: autoDismiss ? 'Dismissing in 5 seconds...' : 'Click me to dismiss',
type: 'success',
autoDismiss
};
setMessages(prev => [...prev, newMessage]);
}, [messages]);
return _jsxDEV("div", {
className: "w-full",
children: [_allowAppending && _jsxDEV("div", {
className: "flex gap-x-2 mb-3",
children: [_jsxDEV(Button, {
onClick: () => appendMessage({
autoDismiss: false
}),
classes: "mb-2",
variant: "primary",
children: "Append message"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 11
}, this), _jsxDEV(Button, {
onClick: () => appendMessage({
autoDismiss: true
}),
classes: "mb-2",
variant: "primary",
children: "Append auto-dismiss message"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 9
}, this), _jsxDEV("div", {
className: "w-1/2 mx-auto flex flex-col gap-y-4",
children: [_jsxDEV(ToastMessages, {
messages: messages,
onMessageDismiss: onMessageDismiss,
transitionClasses: transitionClasses
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 9
}, this), _printOnDismiss && lastDismissedMessage && _jsxDEV("div", {
children: ["Just dismissed message ", '"', lastDismissedMessage.message, '"']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 5
}, this);
}
export default function ToastMessagesPage() {
return _jsxDEV(Library.Page, {
title: "ToastMessages",
intro: _jsxDEV("p", {
children: ["ToastMessages is a component that wraps", ' ', _jsxDEV(Library.Link, {
href: "/feedback-callout",
children: "Callout"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 11
}, this), " with out of the box accessibility, message auto-dismiss, dismiss-on-click, transitions and message positioning."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "ToastMessages"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
withSource: true,
title: "Basic ToastMessages",
children: _jsxDEV(ToastMessages_, {
messages: toastMessages,
onMessageDismiss: () => {}
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 130,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with ToastMessages",
children: [_jsxDEV(Library.SectionL3, {
title: "Accessibility",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ToastMessages"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 145,
columnNumber: 15
}, this), " includes an", ' ', _jsxDEV(Link, {
href: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions",
children: _jsxDEV("code", {
children: ["aria-live=", '"', "polite", '"']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 15
}, this), ' ', "wrapper which will announce added toast messages to screen readers."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 144,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["Additionally, it is possible to append hidden messages that are only announced by screen readers, via", ' ', _jsxDEV("code", {
children: '{ visuallyHidden: true }'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 157,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Positioning",
children: _jsxDEV("p", {
children: ["By default, every message rendered by ", _jsxDEV("code", {
children: "ToastMessages"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 53
}, this), ' ', "will be relative positioned. It", "'", "s up to consumers to wrap it in an absolute-positioned container if desired."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 160,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Auto-dismiss",
children: _jsxDEV("p", {
children: ["All messages will be auto-dismissed after 5 seconds. Pass", _jsxDEV("code", {
children: '{ autoDismiss: false }'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
columnNumber: 15
}, this), " for those messages where you want this to be prevented."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Transitions",
children: _jsxDEV("p", {
children: ["All messages will fade-in when appended and fade-out when dismissed, but you can provide your own transition classes via", ' ', _jsxDEV("code", {
children: "transitionClasses"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 15
}, this), " prop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV(Library.SectionL3, {
title: "messages",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "The list of toast messages to display at a given point."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `ToastMessage[]`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 185,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "ToastMessages with one message",
withSource: true,
children: _jsxDEV(ToastMessages_, {
messages: [toastMessages[0]],
onMessageDismiss: () => {}
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 195,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "onMessageDismiss",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Callback invoked with the toast message id, when it ends its dismiss transition. The message with that id can then be removed from the list."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `(toastMessageId: string) => void`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 208,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 202,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Click a message to dismiss it",
withSource: true,
children: _jsxDEV(ToastMessages_, {
messages: toastMessages,
onMessageDismiss: () => {},
_printOnDismiss: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "transitionClasses",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Custom CSS classes to apply to toast messages when appended and/or dismissed. By default they get", ' ', _jsxDEV("code", {
children: "animate-fade-in"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 17
}, this), " and ", _jsxDEV("code", {
children: "animate-fade-out"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 50
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `{ transitionIn?: string; transitionOut?: string; }`
}, 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: 222,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Custom transitions",
withSource: true,
children: _jsxDEV(ToastMessages_, {
messages: toastMessages,
onMessageDismiss: () => {},
transitionClasses: {
transitionIn: 'animate-slide-in-from-right',
transitionOut: 'animate-slide-out-to-right'
},
_allowAppending: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 183,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 7
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 5
}, this);
}
//# sourceMappingURL=ToastMessagesPage.js.map