@octopusdeploy/design-system-components
Version:
The design systems component library.
147 lines (146 loc) • 8.97 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DetailedCard = DetailedCard;
exports.CompactCard = CompactCard;
exports.ActionCard = ActionCard;
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 react_1 = __importDefault(require("react"));
const utils_1 = require("../../utils");
const Button_1 = require("../Button");
const CheckboxInput_1 = require("../Form/Primitives/CheckboxInput");
const RadioInput_1 = require("../Form/Primitives/RadioInput");
const Link_1 = require("../Link");
const Adornment_1 = require("./Adornment");
function DetailedCard({ adornment, title, description, value, onChange, checked, disabled, isMultiSelect, groupName }) {
const inputId = `detailed-card-${groupName}-${react_1.default.useId()}`;
return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, className: (0, css_1.cx)(cardBaseStyles.card, cardBaseStyles.optionCard), children: [(0, jsx_runtime_1.jsxs)("div", { className: detailedCardStyles.content, children: [adornment && (0, jsx_runtime_1.jsx)(Adornment_1.Adornment, { adornment: adornment }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: (0, css_1.cx)(cardBaseStyles.title, detailedCardStyles.title), children: title }), (0, jsx_runtime_1.jsx)("p", { className: cardBaseStyles.description, children: description })] })] }), isMultiSelect ? ((0, jsx_runtime_1.jsx)(CheckboxInput_1.CheckboxInput, { id: inputId, name: groupName, value: value, checked: checked, disabled: disabled, onChange: () => onChange(value) })) : ((0, jsx_runtime_1.jsx)(RadioInput_1.RadioInput, { id: inputId, name: groupName, value: value, checked: checked, disabled: disabled, onChange: () => onChange(value) }))] }));
}
function CompactCard({ adornment, title, value, onChange, checked, disabled, isMultiSelect, groupName }) {
const inputId = `compact-card-${groupName}-${react_1.default.useId()}`;
return ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, className: (0, css_1.cx)(cardBaseStyles.card, cardBaseStyles.optionCard, compactCardStyles.card), children: [(0, jsx_runtime_1.jsxs)("div", { className: compactCardStyles.content, children: [adornment && (0, jsx_runtime_1.jsx)(Adornment_1.Adornment, { adornment: adornment }), (0, jsx_runtime_1.jsx)("h3", { className: cardBaseStyles.title, children: title })] }), isMultiSelect ? ((0, jsx_runtime_1.jsx)(CheckboxInput_1.CheckboxInput, { id: inputId, name: groupName, value: value, checked: checked, disabled: disabled, onChange: () => onChange(value) })) : ((0, jsx_runtime_1.jsx)(RadioInput_1.RadioInput, { id: inputId, name: groupName, value: value, checked: checked, disabled: disabled, onChange: () => onChange(value) }))] }));
}
function ActionCard({ adornments, title, subtitle, description, primaryAction, secondaryAction, disabled }) {
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(cardBaseStyles.card, actionCardStyles.card), children: [adornments && ((0, jsx_runtime_1.jsxs)("div", { className: actionCardStyles.adornmentContainer, children: [(0, jsx_runtime_1.jsx)(Adornment_1.Adornment, { adornment: adornments.leadingAdornment }), adornments.trailingAdornment && (0, jsx_runtime_1.jsx)(Adornment_1.Adornment, { adornment: adornments.trailingAdornment })] })), (0, jsx_runtime_1.jsxs)("div", { className: actionCardStyles.titleAndDescription, children: [subtitle ? ((0, jsx_runtime_1.jsxs)("hgroup", { children: [(0, jsx_runtime_1.jsx)("h3", { className: cardBaseStyles.title, children: title }), (0, jsx_runtime_1.jsx)("p", { className: actionCardStyles.subtitle, children: subtitle })] })) : ((0, jsx_runtime_1.jsx)("h3", { className: cardBaseStyles.title, children: title })), (0, jsx_runtime_1.jsx)("p", { className: cardBaseStyles.description, children: description })] }), (primaryAction || secondaryAction) && ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(actionCardStyles.actionsContainer, { [actionCardStyles.withSecondaryLink]: secondaryAction && isCardLink(secondaryAction) }), children: [primaryAction && (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "secondary", label: primaryAction.label, onClick: primaryAction.onClick, disabled: disabled }), secondaryAction && ((0, jsx_runtime_1.jsx)("div", { className: actionCardStyles.secondaryAction, children: isCardLink(secondaryAction) ? (secondaryAction.external ? ((0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { href: secondaryAction.href, size: "medium", weight: "bold", children: secondaryAction.label })) : ((0, jsx_runtime_1.jsx)(Link_1.Link, { href: secondaryAction.href, size: "medium", weight: "bold", children: secondaryAction.label }))) : ((0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "quiet", label: secondaryAction.label, onClick: secondaryAction.onClick, disabled: disabled })) }))] }))] }));
}
function isCardLink(props) {
return "href" in props;
}
const cardBaseStyles = {
card: (0, css_1.css)({
width: "100%",
boxSizing: "border-box",
padding: design_system_tokens_1.space[16],
maxWidth: "37.5rem",
minWidth: "16rem",
border: "1px solid",
borderColor: design_system_tokens_1.themeTokens.color.border.primary,
borderRadius: design_system_tokens_1.borderRadius.medium,
}),
optionCard: (0, css_1.css)({
display: "grid",
gridTemplateColumns: `auto ${CheckboxInput_1.checkboxButtonSize}`,
gap: design_system_tokens_1.space[16],
cursor: "pointer",
"&:hover": {
borderColor: design_system_tokens_1.themeTokens.color.border.link.hover,
},
"&:has(input:focus-visible)": {
outline: `2px solid ${design_system_tokens_1.themeTokens.color.border.selected}`,
},
"& input:focus-visible": {
outline: "none",
},
"&:has(input:checked)": {
backgroundColor: design_system_tokens_1.themeTokens.color.button.background.secondary.hover,
borderColor: design_system_tokens_1.themeTokens.color.button.border.secondary,
},
"&:has(input:disabled)": {
backgroundColor: design_system_tokens_1.themeTokens.color.background.disabled,
borderColor: design_system_tokens_1.themeTokens.color.border.disabled,
cursor: "not-allowed",
},
}),
title: (0, css_1.css)({
...utils_1.resetStyles.heading,
font: design_system_tokens_1.text.heading.small,
}),
description: (0, css_1.css)({
...utils_1.resetStyles.paragraph,
font: design_system_tokens_1.text.body.regular.medium,
color: design_system_tokens_1.themeTokens.color.text.secondary,
display: "-webkit-box",
WebkitLineClamp: 4,
WebkitBoxOrient: "vertical",
overflow: "hidden",
}),
};
const detailedCardStyles = {
content: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[16],
}),
title: (0, css_1.css)({
marginBottom: design_system_tokens_1.space[4],
}),
};
const compactCardStyles = {
card: (0, css_1.css)({
alignItems: "center",
}),
content: (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[16],
}),
};
const actionCardStyles = {
card: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[16],
containerType: "inline-size",
}),
adornmentContainer: (0, css_1.css)({
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "flex-start",
}),
titleAndDescription: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[12],
}),
subtitle: (0, css_1.css)({
...utils_1.resetStyles.paragraph,
font: design_system_tokens_1.text.body.regular.small,
color: design_system_tokens_1.themeTokens.color.text.secondary,
}),
actionsContainer: (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[8],
marginTop: "auto",
paddingTop: design_system_tokens_1.space[8],
"@container (max-width: 23.5rem)": {
display: "grid",
gridTemplateColumns: "1fr",
rowGap: design_system_tokens_1.space[8],
textAlign: "center",
},
}),
withSecondaryLink: (0, css_1.css)({
gap: design_system_tokens_1.space[16],
}),
secondaryAction: (0, css_1.css)({
height: "2.25rem",
display: "grid",
alignItems: "center",
}),
};