@octopusdeploy/design-system-components/dist/src/components/SectionHeader/SectionHeader.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SectionHeader = SectionHeader;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
function SectionHeader({ title, description }) {
    return ((0, jsx_runtime_1.jsxs)("div", { className: sectionHeaderStyles, children: [(0, jsx_runtime_1.jsx)("div", { className: sectionHeaderTitleStyles, children: title }), description && (0, jsx_runtime_1.jsx)("div", { className: sectionHeaderDescriptionStyles, children: description })] }));
}
const sectionHeaderStyles = (0, css_1.css)({
    width: "100%",
    marginBottom: "-0.0725rem",
    paddingBottom: design_system_tokens_1.space[1],
    backgroundColor: design_system_tokens_1.themeTokens.color.background.secondary.default,
    borderWidth: design_system_tokens_1.borderWidth.none,
    borderTop: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
    borderRadius: 0,
});
const sectionHeaderTitleStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.primary,
    font: design_system_tokens_1.text.body.regular.large,
    paddingTop: "0.6rem",
    paddingBottom: "0.6rem",
    paddingLeft: design_system_tokens_1.space[16],
    paddingRight: design_system_tokens_1.space[16],
    "&:not(:last-child)": {
        paddingBottom: design_system_tokens_1.space[2],
    },
});
const sectionHeaderDescriptionStyles = (0, css_1.css)({
    padding: "0 1rem 0.6rem 1rem",
    fontSize: design_system_tokens_1.fontSize.small,
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
});