@octopusdeploy/design-system-components
Version:
The design systems component library.
41 lines (40 loc) • 2.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdvancedFilterPanel = AdvancedFilterPanel;
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 utils_1 = require("../../utils");
const Button_1 = require("../Button");
function AdvancedFilterPanel({ content, onResetFilter, isResetEnabled, parentOrientation }) {
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(advancedFilterPanelStyles.container, {
[advancedFilterPanelStyles.inRow]: parentOrientation === "row",
[advancedFilterPanelStyles.inColumn]: parentOrientation === "column",
}), children: [(0, jsx_runtime_1.jsxs)("div", { className: advancedFilterPanelStyles.header, children: [(0, jsx_runtime_1.jsx)("h4", { className: advancedFilterPanelStyles.heading, children: "Advanced filter" }), (0, jsx_runtime_1.jsx)(Button_1.ActionButton, { disabled: !isResetEnabled, label: "Reset", type: Button_1.ActionButtonType.Secondary, onClick: () => onResetFilter() })] }), content] }));
}
const advancedFilterPanelStyles = {
container: (0, css_1.css)({
display: "flex",
flexDirection: "column",
padding: `${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[32]} ${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[16]}`,
gap: design_system_tokens_1.space[8],
minWidth: "304px",
}),
inRow: (0, css_1.css)({
width: "17.6rem",
}),
inColumn: (0, css_1.css)({
borderTop: `1px solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
}),
header: (0, css_1.css)({
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: design_system_tokens_1.space[16],
}),
heading: (0, css_1.css)({
...utils_1.resetStyles.heading,
font: design_system_tokens_1.text.body.bold.large,
color: design_system_tokens_1.themeTokens.color.text.primary,
}),
};