@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
60 lines • 2.28 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl-next';
import { LinkButton } from '@atlaskit/button/new';
import { Box, Text, xcss } from '@atlaskit/primitives';
import NotFoundIllustration from './NotFoundIllustration';
export default function EmptyState(_ref) {
var onExternalLinkClick = _ref.onExternalLinkClick;
return jsx("div", {
css: emptyStateWrapper,
"data-testid": "empty-state-wrapper"
}, jsx(NotFoundIllustration, null), jsx("div", {
css: emptyStateHeading
}, jsx(FormattedMessage, {
id: "fabric.editor.elementbrowser.search.empty-state.heading",
defaultMessage: "Nothing matches your search",
description: "Empty state heading"
})), jsx("div", {
css: emptyStateSubHeading
}, jsx(Text, null, jsx(FormattedMessage, {
id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
description: "Empty state sub-heading"
})), jsx(Box, {
xcss: externalLinkWrapper
}, jsx(LinkButton, {
appearance: "primary",
target: "_blank",
href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
onClick: onExternalLinkClick
}, jsx(FormattedMessage, {
id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
defaultMessage: "Explore Atlassian Marketplace",
description: "Empty state sub-heading external link"
})))));
}
var emptyStateHeading = css({
font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
color: "var(--ds-text, rgb(23, 43, 77))",
marginTop: "var(--ds-space-300, 24px)"
});
var emptyStateSubHeading = css({
marginTop: "var(--ds-space-200, 16px)",
maxWidth: '400px',
textAlign: 'center'
});
var emptyStateWrapper = css({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: '100%'
});
var externalLinkWrapper = xcss({
marginTop: 'space.150'
});