@octopusdeploy/design-system-components/dist/src/components/List/ListTitle.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListTitle = ListTitle;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
//** ListTitle is a component that displays a title for a list item. */
//*
//* @param children - The content to display in the list title.
//* @param verticalAlignment - The vertical alignment of the list title.
//* @returns A React component that displays a title for a list item.
//*
//* @example
//* <ListTitle>Title</ListTitle>
//*
function ListTitle({ children, alignment = "center" }) {
    return (0, jsx_runtime_1.jsx)("h3", { className: (0, css_1.cx)(listTitleStyles, alignmentStyles[alignment]), children: children });
}
exports.default = ListTitle;
const listTitleStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.heading.small,
    //TODO: this needs more consideration, its been styled this way to match existing use cases
    color: design_system_tokens_1.themeTokens.color.text.link.default,
    flexGrow: 1,
    margin: 0,
});
const alignmentStyles = {
    left: (0, css_1.css)({
        alignSelf: "start",
    }),
    center: (0, css_1.css)({
        alignSelf: "center",
    }),
    right: (0, css_1.css)({
        alignSelf: "end",
    }),
};