@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
115 lines (114 loc) • 4.03 kB
JavaScript
"use client";
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React, { useCallback } from 'react';
import classnames from 'classnames';
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 { createSpacingClasses } from "../space/SpacingHelper.js";
import Context from "../../shared/Context.js";
import Provider from "../../shared/Provider.js";
import { extendPropsWithContext, validateDOMAttributes } from "../../shared/component-helper.js";
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
});
const {
alt,
centered,
dropShadow,
title,
skeleton,
stretch,
className,
icon,
src,
imgProps,
text,
children,
onClose,
onAccept,
closeButtonText,
acceptButtonText,
closeButtonAttributes,
acceptButtonAttributes,
...props
} = allProps;
const spacingClasses = createSpacingClasses(props);
const closeButtonIsHidden = !onClose && !closeButtonText;
const acceptButtonIsHidden = !onAccept && !acceptButtonText;
validateDOMAttributes(allProps, props);
const getButtons = useCallback(() => {
if (closeButtonIsHidden && acceptButtonIsHidden) return null;
return React.createElement("div", {
className: "dnb-info-card__buttons"
}, !acceptButtonIsHidden && React.createElement(Button, _extends({
top: centered ? 'medium' : 'small',
type: "button",
className: "dnb-info-card__buttons__accept-button",
variant: "secondary",
right: centered ? 'zero' : 'small',
on_click: onAccept,
text: acceptButtonText
}, acceptButtonAttributes)), !closeButtonIsHidden && React.createElement(Button, _extends({
type: "button",
className: "dnb-info-card__buttons__close-button",
variant: "tertiary",
top: "small",
on_click: onClose,
icon: "close",
icon_position: "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 React.createElement(Img, _extends({
className: "dnb-info-card__image"
}, imageProps));
}
return _IconPrimary || (_IconPrimary = React.createElement(IconPrimary, {
size: "medium",
className: "dnb-info-card__icon",
icon: icon
}));
}, [alt, icon, imgProps, src]);
return React.createElement("div", _extends({
className: classnames('dnb-info-card', spacingClasses, className, centered && 'dnb-info-card--centered', stretch && 'dnb-info-card--stretch', dropShadow && 'dnb-info-card--shadow')
}, props), React.createElement(Provider, {
skeleton: skeleton
}, React.createElement(Space, {
right: !centered ? 'small' : false,
bottom: centered ? 'small' : false
}, getIllustration()), React.createElement("div", {
className: "dnb-info-card__content"
}, title && React.createElement(P, {
className: "dnb-info-card__title",
size: "small",
modifier: "medium",
bottom: "x-small"
}, title), text && React.createElement(P, {
size: "small",
className: "dnb-info-card__text",
bottom: "0"
}, text), children, getButtons())));
};
InfoCard._supportsSpacingProps = true;
export default InfoCard;
//# sourceMappingURL=InfoCard.js.map