@octopusdeploy/design-system-components
Version:
The design systems component library.
59 lines (58 loc) • 2.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SkeletonHeaders = SkeletonHeaders;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const breakpoints_1 = require("../../hooks/breakpoints");
function SkeletonHeaders({ showBreadcrumbSkeleton }) {
const isLargerThanIpad = (0, breakpoints_1.useIsLargerThanIpadResolution)();
return ((0, jsx_runtime_1.jsxs)("header", { role: "progressbar", className: (0, css_1.cx)(headerContainerStyles, { [headerContainerMobileStyles]: !isLargerThanIpad }), children: [(0, jsx_runtime_1.jsx)("div", { className: breadcrumbContainerStyles, children: showBreadcrumbSkeleton && (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(skeletonStyles, breadcrumbPlaceholderStyles) }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(headerContentStyles, { [headerContentMobileStyles]: !isLargerThanIpad }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(skeletonStyles, titlePlaceholderStyles) }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(skeletonStyles, pageActionsPlaceholderStyles) })] })] }));
}
const pulseKeyframes = (0, css_1.keyframes)({
"0%": { opacity: 1 },
"50%": { opacity: 0.5 },
"100%": { opacity: 1 },
});
const skeletonStyles = (0, css_1.css)({
// This animation has a 0.5s delay sa that a quick chain of redirects doesn't show a constantly resetting animation
animation: `${pulseKeyframes} 2s linear 0.5s infinite`,
borderRadius: design_system_tokens_1.borderRadius.small,
backgroundColor: design_system_tokens_1.themeTokens.color.background.tertiary,
});
const headerContainerStyles = (0, css_1.css)({
display: "flex",
flexDirection: "column",
padding: `${design_system_tokens_1.space[24]} ${design_system_tokens_1.space[32]}`,
gap: design_system_tokens_1.space[12],
});
const headerContainerMobileStyles = (0, css_1.css)({
padding: `${design_system_tokens_1.space[24]} ${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[12]}`,
});
const breadcrumbContainerStyles = (0, css_1.css)({
display: "flex",
alignItems: "flex-end",
height: "2rem",
});
const breadcrumbPlaceholderStyles = (0, css_1.css)({
height: "1.25rem",
width: "5rem",
});
const titlePlaceholderStyles = (0, css_1.css)({
height: "2.25rem",
width: "14.25rem",
});
const pageActionsPlaceholderStyles = (0, css_1.css)({
height: "2.25rem",
width: "8rem",
});
const headerContentStyles = (0, css_1.css)({
display: "flex",
justifyContent: "space-between",
gap: design_system_tokens_1.space[48],
});
const headerContentMobileStyles = (0, css_1.css)({
flexDirection: "column",
gap: design_system_tokens_1.space[24],
alignItems: "unset",
});