@engie-group/fluid-design-system-react/lib/components/header-drawer/NJHeaderDrawer.js

Fluid Design System React

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { Utils } from '../../utils/util.js';
import { NJDivider } from '../divider/NJDivider.js';
import { NJIconButton } from '../icon-button/NJIconButton.js';

const rootClass = 'nj-header-drawer';
const NJHeaderDrawer = forwardRef((props, forwardRef) => {
    const { backArrow, closable, children, onBackClicked, onCloseClicked, iconBackRef, iconCloseRef, className: hostClass, ...htmlAttributes } = props;
    const className = Utils.classNames(rootClass, hostClass);
    const hasActions = backArrow !== undefined || closable;
    return (jsxs("div", { ref: forwardRef, ...htmlAttributes, className: className, children: [hasActions && (jsxs(Fragment, { children: [jsxs("div", { className: `${rootClass}__actions`, children: [backArrow !== undefined && (jsxs(Fragment, { children: [jsx(NJIconButton, { ref: iconBackRef, "aria-label": "Back icon", id: "header-drawer-back", scale: "md", variant: "tertiary", icon: "arrow_back", onClick: onBackClicked }), backArrow && (jsx("label", { htmlFor: "header-drawer-back", className: `${rootClass}__back-label`, children: backArrow }))] })), closable && (jsx(NJIconButton, { ref: iconCloseRef, className: `${rootClass}__close`, "aria-label": "Close icon", scale: "md", variant: "tertiary", icon: "close", onClick: onCloseClicked }))] }), jsx(NJDivider, {})] })), children] }));
});
NJHeaderDrawer.displayName = 'NJHeaderDrawer';

export { NJHeaderDrawer };