@octopusdeploy/design-system-components
Version:
The design systems component library.
92 lines (91 loc) • 6.38 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepCard = StepCard;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Button_1 = require("../Button");
const Chip_1 = require("../Chip");
const ScrollArea_1 = require("../ScrollArea");
function StepCard({ chipType = "primary", chipLabel, disabled, ...props }) {
const currentScrollArea = (0, ScrollArea_1.useCurrentScrollArea)();
const triggerPrimaryActionAndResetScrollPosition = () => {
if (currentScrollArea?.scroll instanceof Function) {
currentScrollArea.scroll({ top: 0, behavior: "instant" });
}
if (props.primaryAction && props.primaryAction.onClick) {
props.primaryAction.onClick();
}
};
return ((0, jsx_runtime_1.jsxs)("div", { className: disabled ? (0, css_1.cx)(styles.base, styles.disabled) : (0, css_1.cx)(styles.base, styles.shadow), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles.header, children: [props.logo, chipLabel && (0, jsx_runtime_1.jsx)(Chip_1.Chip, { backgroundColor: design_system_tokens_1.themeTokens.color.chip.filled.background[chipType], labelColor: design_system_tokens_1.themeTokens.color.chip.filled.text[chipType], noMargin: true, label: chipLabel })] }), (0, jsx_runtime_1.jsx)("div", { className: styles.heading, children: props.heading }), props.subHeading && (0, jsx_runtime_1.jsx)("div", { className: styles.subHeading, children: props.subHeading }), props.description && (0, jsx_runtime_1.jsx)("div", { className: styles.description, children: props.description }), props.dotpoints && props.dotpoints.length > 2 && props.truncateDotpoints ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dotpoints.slice(0, 2).map((dotpoint) => ((0, jsx_runtime_1.jsxs)("div", { className: styles.featureContainer, children: [(0, jsx_runtime_1.jsx)(design_system_icons_1.CheckCircleIcon, { size: 20 }), (0, jsx_runtime_1.jsx)("div", { className: styles.featureText, children: dotpoint })] }, dotpoint))), (0, jsx_runtime_1.jsxs)("div", { className: styles.featureText, children: ["+ ", props.dotpoints.length - 2, " more"] })] })) : (props.dotpoints?.map((dotpoint) => ((0, jsx_runtime_1.jsxs)("div", { className: styles.featureContainer, children: [(0, jsx_runtime_1.jsx)(design_system_icons_1.CheckCircleIcon, { size: 16 }), (0, jsx_runtime_1.jsx)("div", { className: styles.featureText, children: dotpoint })] }, dotpoint))))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles.buttonsContainer, children: [props.primaryAction ? ("href" in props.primaryAction ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "secondary", size: "small", label: props.primaryAction.label, disabled: disabled, href: props.primaryAction.href, external: props.primaryAction.external, onClick: triggerPrimaryActionAndResetScrollPosition })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "secondary", size: "small", label: props.primaryAction.label, disabled: disabled, onClick: triggerPrimaryActionAndResetScrollPosition }))) : undefined, props.secondaryAction ? ("href" in props.secondaryAction ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "quiet", size: "small", opensInNewTab: true, label: props.secondaryAction.label, href: props.secondaryAction.href, onClick: props.secondaryAction.onClick, external: props.secondaryAction.external })) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "quiet", size: "small", label: props.secondaryAction.label, onClick: props.secondaryAction.onClick }))) : undefined] })] }));
}
StepCard.displayName = "StepCard";
const styles = {
base: (0, css_1.css)({
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "100%",
width: "100%",
padding: design_system_tokens_1.space[16],
backgroundColor: design_system_tokens_1.themeTokens.color.card.background.primary.default,
borderRadius: design_system_tokens_1.borderRadius.small,
WebkitFontSmoothing: "antialiased",
}),
shadow: (0, css_1.css)({
boxShadow: design_system_tokens_1.themeTokens.shadow.small,
}),
disabled: (0, css_1.css)({
opacity: 0.5,
border: `1px solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
}),
header: (0, css_1.css)({
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
}),
heading: (0, css_1.css)({
display: "-webkit-box",
WebkitLineClamp: 3,
WebkitBoxOrient: "vertical",
overflow: "hidden",
font: design_system_tokens_1.text.body.bold.large,
color: design_system_tokens_1.themeTokens.color.text.primary,
marginTop: design_system_tokens_1.space[8],
}),
subHeading: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.xSmall,
color: design_system_tokens_1.themeTokens.color.text.secondary,
}),
description: (0, css_1.css)({
display: "-webkit-box",
WebkitLineClamp: 4,
WebkitBoxOrient: "vertical",
overflow: "hidden",
fontSize: design_system_tokens_1.fontSize.small,
color: design_system_tokens_1.themeTokens.color.text.secondary,
marginTop: design_system_tokens_1.space[8],
marginBottom: design_system_tokens_1.space[8],
lineHeight: design_system_tokens_1.lineHeight.xSmall,
}),
featureContainer: (0, css_1.css)({
display: "flex",
alignItems: "center",
marginTop: design_system_tokens_1.space[8],
marginBottom: design_system_tokens_1.space[8],
columnGap: design_system_tokens_1.space[4],
}),
featureText: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.small,
color: design_system_tokens_1.themeTokens.color.text.secondary,
}),
buttonsContainer: (0, css_1.css)({
display: "flex",
alignItems: "center",
marginTop: design_system_tokens_1.space[12],
justifyContent: "flex-start",
flexWrap: "wrap",
gap: design_system_tokens_1.space[8],
}),
};