shelving/ui/block/Block.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { getAlignClass } from "../style/Align.js";
import { getColorClass } from "../style/Color.js";
import { getSpacingClass } from "../style/Spacing.js";
import { getTypographyClass } from "../style/Typography.js";
import { getWidthClass } from "../style/Width.js";
import { getClass, getModuleClass } from "../util/css.js";
import styles from "./Block.module.css";
export const BLOCK_CLASS = getModuleClass(styles, "block");
function renderBlock(Component, { children, ...variants }) {
    const className = getClass(getModuleClass(styles, "block", variants), variants.scrollable && getModuleClass(styles, "scrollable"), getColorClass(variants), getSpacingClass(variants), getTypographyClass(variants), getWidthClass(variants));
    return variants.scrollable ? (_jsx(Component, { className: className, tabIndex: 0, role: "region", "aria-label": "Scrollable region", children: children })) : (_jsx(Component, { className: className, children: children }));
}
/** Plain `<div>` block with block-level spacing. Base building block; use a semantic variant (`<Section>`, `<Figure>`, etc.) when the element matters. */
export function Block(props) {
    return renderBlock("div", props);
}
/** `<section>` block with block-level spacing. */
export function Section(props) {
    return renderBlock("section", props);
}
/** `<header>` block with block-level spacing. */
export function Header(props) {
    return renderBlock("header", props);
}
/** `<footer>` block with block-level spacing. */
export function Footer(props) {
    return renderBlock("footer", props);
}
/** `<nav>` block with block-level spacing. */
export function Nav(props) {
    return renderBlock("nav", props);
}
/** `<aside>` block with block-level spacing. */
export function Aside(props) {
    return renderBlock("aside", props);
}
/** `<figure>` block with block-level spacing. Pair with `<Caption>` for `<figcaption>` content. */
export function Figure(props) {
    return renderBlock("figure", props);
}
/** `<figcaption>` block — caption text for a `<Figure>`. */
export function Caption({ children, ...variants }) {
    return (_jsx("figcaption", { className: getClass(getModuleClass(styles, "caption"), getColorClass(variants), getAlignClass(variants), getTypographyClass(variants)), children: children }));
}