@octopusdeploy/design-system-components
Version:
The design systems component library.
66 lines (65 loc) • 3.53 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.selectOptionWithDescriptionHeight = exports.selectOptionHeight = void 0;
exports.SelectOptionLayout = SelectOptionLayout;
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 remToPx_1 = require("../utils/remToPx");
function SelectOptionLayout({ label, description, prefix, className }) {
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(styles.container, { [styles.containerWithDescription]: !!description }, className), children: [prefix && description ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(styles.prefix, styles.prefixTopContainer), children: (0, jsx_runtime_1.jsx)("span", { className: styles.prefixTop, children: prefix }) })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(styles.prefix, styles.prefixCenterContainer), children: prefix })), (0, jsx_runtime_1.jsxs)("div", { className: styles.textContainer, children: [(0, jsx_runtime_1.jsx)("span", { className: styles.label, children: label }), description && (0, jsx_runtime_1.jsx)("span", { className: styles.description, children: description })] })] }));
}
// Known heights are required for virtualization of the listbox
const containerPaddingVertical = design_system_tokens_1.space[6];
const labelLineHeight = design_system_tokens_1.lineHeight.small;
const descriptionLineHeight = design_system_tokens_1.fontSize.large;
exports.selectOptionHeight = 2 * (0, remToPx_1.remToPx)(containerPaddingVertical) + (0, remToPx_1.remToPx)(labelLineHeight);
exports.selectOptionWithDescriptionHeight = exports.selectOptionHeight + (0, remToPx_1.remToPx)(descriptionLineHeight);
const styles = {
container: (0, css_1.css)({
display: "flex",
boxSizing: "border-box",
height: exports.selectOptionHeight,
padding: `${containerPaddingVertical} ${design_system_tokens_1.space[12]}`,
gap: design_system_tokens_1.space[6],
borderRadius: design_system_tokens_1.borderRadius.small,
}),
containerWithDescription: (0, css_1.css)({
height: exports.selectOptionWithDescriptionHeight,
}),
prefix: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.icon.secondary,
}),
prefixCenterContainer: (0, css_1.css)({
alignSelf: "center",
}),
prefixTopContainer: (0, css_1.css)({
// This text token needs to be the same as the label's, so that the prefix can use vertical-align: text-top styling
font: design_system_tokens_1.text.body.regular.medium,
}),
prefixTop: (0, css_1.css)({
display: "inline-block",
verticalAlign: "text-top",
}),
textContainer: (0, css_1.css)({
display: "flex",
flexDirection: "column",
minWidth: 0,
}),
label: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.medium,
lineHeight: labelLineHeight,
color: design_system_tokens_1.themeTokens.color.text.primary,
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden",
}),
description: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.medium,
lineHeight: descriptionLineHeight,
color: design_system_tokens_1.themeTokens.color.text.secondary,
textOverflow: "ellipsis",
whiteSpace: "nowrap",
overflow: "hidden",
}),
};