@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
131 lines (130 loc) • 4.25 kB
JavaScript
"use client";
import React, { useCallback } 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 { applySpacing } 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 defaultProps = {
centered: false,
dropShadow: true,
skeleton: false,
icon: LightbulbIcon
};
const InfoCard = localProps => {
var _IconPrimary;
const context = React.useContext(Context);
const allProps = extendPropsWithContext(localProps, defaultProps, {
skeleton: context === null || context === void 0 ? void 0 : context.skeleton
}, context === null || context === void 0 ? void 0 : context.InfoCard);
const {
alt,
centered,
dropShadow,
title,
skeleton,
stretch,
className,
icon,
src,
imgProps,
text,
children,
onClose,
onAccept,
closeButtonText,
acceptButtonText,
closeButtonAttributes,
acceptButtonAttributes,
...props
} = allProps;
const closeButtonIsHidden = !onClose && !closeButtonText;
const acceptButtonIsHidden = !onAccept && !acceptButtonText;
validateDOMAttributes(allProps, props);
const rootProps = applySpacing(allProps, {
...props,
className: clsx('dnb-info-card', className, centered && 'dnb-info-card--centered', stretch && 'dnb-info-card--stretch', dropShadow && 'dnb-info-card--shadow')
});
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