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

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Divider = Divider;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/**
 * A divider is a visual separator between content. It can be used to separate content into groups or to visually
 * separate content on a page.
 * @param props - The props for the divider.
 * @param props.orientation - The orientation of the divider.
 * @param props.ariaHidden - Whether the divider should be hidden from assistive technologies.
 * @returns A divider component.
 */
function Divider({ orientation = "horizontal", ariaHidden = true }) {
    const vertical = orientation === "vertical";
    //We default the divider to show as a flex item when the orientation is vertical. This allows the divider
    //to work in a flexbox layout without the consumer to do anything else. This means that we don't technically
    //support the divider with a vertical orientation outside of a flexbox layout. It should be noted that even
    //if we didn't enable this, a fixed height would be required for the vertical divider to be shown.
    return (0, jsx_runtime_1.jsx)("hr", { className: (0, css_1.cx)(dividerStyles, { [verticalDividerStyles]: vertical }), "aria-orientation": vertical ? "vertical" : undefined, "aria-hidden": ariaHidden });
}
const verticalDividerStyles = (0, css_1.css)({
    flexShrink: "0",
    borderWidth: "0px thin 0px 0px",
    alignSelf: "stretch",
    height: "auto",
});
const dividerStyles = (0, css_1.css)({
    borderWidth: "0px 0px thin",
    borderStyle: "solid",
    borderColor: design_system_tokens_1.themeTokens.color.border.primary,
    padding: 0,
    margin: 0,
});