@atlaskit/inline-message
Version:
An inline message lets users know when important information is available or when an action is required.
112 lines (111 loc) • 3.72 kB
JavaScript
/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useState } from 'react';
import { useId } from '@atlaskit/ds-lib/use-id';
import Popup from '@atlaskit/popup';
import { Box, Inline, Pressable, Text } from '@atlaskit/primitives/compiled';
import MessageIcon from '../message-icon';
const styles = {
contentStyles: "_1reo1wug _18m91wug _bozg1ejb _y4ti1ejb _1q51pxbi _85i5pxbi _p12flti4 _c71llti4",
rootStyles: "_1e0c1o8l _p12f1osq _1yyu1kum _y2mv1w7i",
pressableStyles: "_2rko1qi0 _11c8fhey _1rjcze3t _18zrze3t _1e0c116y _bfhksm61 _syazazsu _o5721q9c _kqswh2mm _4cvr1q9y _p12f1osq _4t3i1wug _1bsb1wug _s7n41q9y _9oik1r31 _1bnx8stv _jf4cnqa1"
};
const iconColor = {
connectivity: "_x5v91ft0",
confirmation: "_x5v94pcx",
info: "_x5v9qm1h",
warning: "_x5v9ervl",
error: "_x5v9s4qr"
};
/**
* __Inline message__
*
* An inline message lets users know when important information is available or when an action is required.
*
* - [Examples](https://atlassian.design/components/inline-message/examples)
* - [Code](https://atlassian.design/components/inline-message/code)
* - [Usage](https://atlassian.design/components/inline-message/usage)
*
* @example
*
* ```jsx
* const Component = () => (
* <InlineMessage
* title="Inline Message Title Example"
* secondaryText="Secondary Text"
* >
* <p>Some text that would be inside the open dialog and otherwise hidden.</p>
* </InlineMessage>
* );
* ```
*/
const InlineMessage = ({
placement = 'bottom-start',
secondaryText = '',
title = '',
appearance = 'connectivity',
spacing = 'spacious',
children,
testId,
iconLabel,
fallbackPlacements
}) => {
const [isOpen, setIsOpen] = useState(false);
const id = useId();
const toggleDialog = useCallback(() => {
setIsOpen(oldState => !oldState);
}, [setIsOpen]);
const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
return /*#__PURE__*/React.createElement("div", {
"data-testid": testId,
className: ax([styles.rootStyles, iconColor[appearance]])
}, /*#__PURE__*/React.createElement(Popup, {
onClose: onCloseDialog,
content: () => /*#__PURE__*/React.createElement(Box, {
xcss: styles.contentStyles
}, children),
isOpen: isOpen,
placement: placement,
testId: testId && `${testId}--popup`,
fallbackPlacements: fallbackPlacements,
shouldRenderToParent: true,
role: "dialog",
titleId: id,
trigger: ({
ref,
...triggerProps
}) => /*#__PURE__*/React.createElement(Pressable, _extends({}, triggerProps, {
ref: ref,
id: id,
"data-ds--inline-message--button": true,
onClick: toggleDialog,
testId: testId && `${testId}--button`,
xcss: styles.pressableStyles,
"aria-expanded": isOpen
}), /*#__PURE__*/React.createElement(Inline, {
as: "span",
space: "space.050",
alignBlock: "center"
}, /*#__PURE__*/React.createElement(MessageIcon, {
isOpen: isOpen,
appearance: appearance,
label: iconLabel,
spacing: spacing
}), /*#__PURE__*/React.createElement(Inline, {
as: "span",
space: "space.100"
}, title && /*#__PURE__*/React.createElement(Text, {
weight: "medium",
testId: testId && `${testId}--title`
}, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
weight: "medium",
color: "color.text.subtlest",
maxLines: 1,
testId: testId && `${testId}--text`
}, secondaryText))))
}));
};
export default InlineMessage;