@navikt/ds-react/esm/read-more/ReadMore.js

React components from the Norwegian Labour and Welfare Administration.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef } from "react";
import { ChevronDownIcon } from "@navikt/aksel-icons";
import { BodyLong } from "../typography/index.js";
import { cl, composeEventHandlers } from "../utils/helpers/index.js";
import { useControllableState } from "../utils/hooks/index.js";
/**
 * ReadMore
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/read-more)
 * @see 🏷️ {@link ReadMoreProps}
 *
 * @example
 * <ReadMore header="Dette regnes som helsemessige begrensninger">
 *   Med helsemessige begrensninger mener vi funksjonshemming, sykdom...
 * </ReadMore>
 */
export const ReadMore = forwardRef((_a, ref) => {
    var { className, header, children, open, defaultOpen = false, onClick, size = "medium", onOpenChange } = _a, rest = __rest(_a, ["className", "header", "children", "open", "defaultOpen", "onClick", "size", "onOpenChange"]);
    const [_open, _setOpen] = useControllableState({
        defaultValue: defaultOpen,
        value: open,
        onChange: onOpenChange,
    });
    const typoSize = size === "small" ? "small" : "medium";
    return (React.createElement("div", { className: cl("aksel-read-more", `aksel-read-more--${size}`, className, { "aksel-read-more--open": _open }), "data-volume": "low" },
        React.createElement("button", Object.assign({}, rest, { ref: ref, type: "button", className: cl("aksel-read-more__button", "aksel-body-short", {
                "aksel-body-short--small": size === "small",
            }), onClick: composeEventHandlers(onClick, () => _setOpen((x) => !x)), "aria-expanded": _open, "data-state": _open ? "open" : "closed" }),
            React.createElement(ChevronDownIcon, { className: "aksel-read-more__expand-icon", "aria-hidden": true }),
            React.createElement("span", null, header)),
        React.createElement(BodyLong, { as: "div", className: cl("aksel-read-more__content", {
                "aksel-read-more__content--closed": !_open,
            }), size: typoSize, "data-state": _open ? "open" : "closed" }, children)));
});
export default ReadMore;
//# sourceMappingURL=ReadMore.js.map