@octopusdeploy/design-system-components
Version:
The design systems component library.
42 lines (41 loc) • 2.73 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Filters = Filters;
exports.FiltersSummary = FiltersSummary;
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 react_1 = __importDefault(require("react"));
const Button_1 = require("../Button");
const Divider_1 = require("../Divider/Divider");
function Filters({ inputs, showAdvancedFiltersToggle, isAdvancedFiltersVisible, onAdvancedFiltersVisibilityChanged, activeFilterCount, onShareFilters }) {
return ((0, jsx_runtime_1.jsxs)("div", { className: filtersStyles.container, children: [inputs.map((input, index) => ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: input }, index) // Filter ordering is unlikely to change, so using the index shouldn't be an issue
)), showAdvancedFiltersToggle && ((0, jsx_runtime_1.jsx)(Button_1.ActionButton, { type: Button_1.ActionButtonType.Ternary, label: `${isAdvancedFiltersVisible ? "Hide" : "Show"} advanced filters${activeFilterCount ? ` (${activeFilterCount})` : ""}`, icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.FilterIcon, { size: 24 }), onClick: () => {
onAdvancedFiltersVisibilityChanged(!isAdvancedFiltersVisible);
} })), onShareFilters && ((0, jsx_runtime_1.jsxs)("div", { className: filtersStyles.shareGroup, children: [(0, jsx_runtime_1.jsx)(Divider_1.Divider, { orientation: "vertical" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "quiet", accessibleName: "Share filters", title: "Share filters", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.ShareIcon, { size: 24 }), onClick: onShareFilters })] }))] }));
}
function FiltersSummary({ summary }) {
return (0, jsx_runtime_1.jsx)("div", { className: filtersStyles.summary, children: summary });
}
const filtersStyles = {
container: (0, css_1.css)({
minWidth: 0,
width: "100%",
display: "flex",
flexWrap: "wrap",
gap: design_system_tokens_1.space[12],
// Bottom-aligned so that inputs with a stacked label (e.g. Select) line up with unlabelled
// inputs and buttons on the input row rather than centring them against the label too.
alignItems: "flex-end",
}),
shareGroup: (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[12],
}),
summary: (0, css_1.css)({}),
};