@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
135 lines (134 loc) • 4.48 kB
JavaScript
"use client";
import { useCallback, useContext } from 'react';
import { clsx } from 'clsx';
import Button from "../button/Button.js";
import IconPrimary from "../icon-primary/IconPrimary.js";
import Img from "../../elements/img/Img.js";
import Space from "../space/Space.js";
import P from "../../elements/P.js";
import { lightbulb_medium as LightbulbIcon } from "../../icons/index.js";
import { useSpacing } from "../space/SpacingUtils.js";
import Context from "../../shared/Context.js";
import Provider from "../../shared/Provider.js";
import { extendPropsWithContext, validateDOMAttributes } from "../../shared/component-helper.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const infoCardDefaultProps = {
centered: false,
dropShadow: true,
skeleton: false,
icon: LightbulbIcon
};
const InfoCard = localProps => {
var _IconPrimary;
const context = useContext(Context);
const allProps = extendPropsWithContext(localProps, infoCardDefaultProps, {
skeleton: context?.skeleton
}, context?.InfoCard);
const {
alt,
centered,
dropShadow,
title,
skeleton,
stretch,
className,
icon,
src,
imgProps,
text,
children,
onClose,
onAccept,
closeButtonText,
acceptButtonText,
closeButtonProps: closeButtonPropsProp,
closeButtonAttributes: closeButtonAttributesProp,
acceptButtonProps: acceptButtonPropsProp,
acceptButtonAttributes: acceptButtonAttributesProp,
...props
} = allProps;
const closeButtonAttributes = closeButtonPropsProp || closeButtonAttributesProp;
const acceptButtonAttributes = acceptButtonPropsProp || acceptButtonAttributesProp;
const closeButtonIsHidden = !onClose && !closeButtonText;
const acceptButtonIsHidden = !onAccept && !acceptButtonText;
validateDOMAttributes(allProps, props);
const rootProps = useSpacing(allProps, {
...props,
className: clsx('dnb-info-card', centered && 'dnb-info-card--centered', stretch && 'dnb-info-card--stretch', dropShadow && 'dnb-info-card--shadow', className)
});
const getButtons = useCallback(() => {
if (closeButtonIsHidden && acceptButtonIsHidden) return null;
return _jsxs("div", {
className: "dnb-info-card__buttons",
children: [!acceptButtonIsHidden && _jsx(Button, {
top: centered ? 'medium' : 'small',
type: "button",
className: "dnb-info-card__buttons__accept-button",
variant: "secondary",
right: centered ? 'zero' : 'small',
onClick: onAccept,
text: acceptButtonText,
...acceptButtonAttributes
}), !closeButtonIsHidden && _jsx(Button, {
type: "button",
className: "dnb-info-card__buttons__close-button",
variant: "tertiary",
top: "small",
onClick: onClose,
icon: "close",
iconPosition: "left",
text: closeButtonText,
...closeButtonAttributes
})]
});
}, [acceptButtonAttributes, acceptButtonIsHidden, acceptButtonText, centered, closeButtonAttributes, closeButtonIsHidden, closeButtonText, onAccept, onClose]);
const getIllustration = useCallback(() => {
if (src || imgProps) {
const imageProps = {
src,
alt,
...imgProps
};
return _jsx(Img, {
className: "dnb-info-card__image",
...imageProps
});
}
return _IconPrimary || (_IconPrimary = _jsx(IconPrimary, {
size: "medium",
className: "dnb-info-card__icon",
icon: icon
}));
}, [alt, icon, imgProps, src]);
return _jsx("div", {
...rootProps,
children: _jsxs(Provider, {
skeleton: skeleton,
children: [_jsx(Space, {
right: !centered ? 'small' : false,
bottom: centered ? 'small' : false,
children: getIllustration()
}), _jsxs("div", {
className: "dnb-info-card__content",
children: [title && _jsx(P, {
className: "dnb-info-card__title",
size: "small",
weight: "medium",
bottom: "x-small",
children: title
}), text && _jsx(P, {
size: "small",
className: "dnb-info-card__text",
bottom: "0",
children: text
}), children, getButtons()]
})]
})
});
};
withComponentMarkers(InfoCard, {
_supportsSpacingProps: true
});
export default InfoCard;
//# sourceMappingURL=InfoCard.js.map