@dnb/eufemia/cjs/components/info-card/InfoCard.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultProps = exports.default = void 0;
var _react = require("react");
var _clsx = _interopRequireDefault(require("clsx"));
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary.js"));
var _Img = _interopRequireDefault(require("../../elements/img/Img.js"));
var _Space = _interopRequireDefault(require("../space/Space.js"));
var _P = _interopRequireDefault(require("../../elements/P.js"));
var _index = require("../../icons/index.js");
var _SpacingUtils = require("../space/SpacingUtils.js");
var _Context = _interopRequireDefault(require("../../shared/Context.js"));
var _Provider = _interopRequireDefault(require("../../shared/Provider.js"));
var _componentHelper = require("../../shared/component-helper.js");
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const defaultProps = exports.defaultProps = {
  centered: false,
  dropShadow: true,
  skeleton: false,
  icon: _index.lightbulb_medium
};
const InfoCard = localProps => {
  var _IconPrimary;
  const context = (0, _react.useContext)(_Context.default);
  const allProps = (0, _componentHelper.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;
  (0, _componentHelper.validateDOMAttributes)(allProps, props);
  const rootProps = (0, _SpacingUtils.useSpacing)(allProps, {
    ...props,
    className: (0, _clsx.default)('dnb-info-card', className, centered && 'dnb-info-card--centered', stretch && 'dnb-info-card--stretch', dropShadow && 'dnb-info-card--shadow')
  });
  const getButtons = (0, _react.useCallback)(() => {
    if (closeButtonIsHidden && acceptButtonIsHidden) return null;
    return (0, _jsxRuntime.jsxs)("div", {
      className: "dnb-info-card__buttons",
      children: [!acceptButtonIsHidden && (0, _jsxRuntime.jsx)(_Button.default, {
        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 && (0, _jsxRuntime.jsx)(_Button.default, {
        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 = (0, _react.useCallback)(() => {
    if (src || imgProps) {
      const imageProps = {
        src,
        alt,
        ...imgProps
      };
      return (0, _jsxRuntime.jsx)(_Img.default, {
        className: "dnb-info-card__image",
        ...imageProps
      });
    }
    return _IconPrimary || (_IconPrimary = (0, _jsxRuntime.jsx)(_IconPrimary2.default, {
      size: "medium",
      className: "dnb-info-card__icon",
      icon: icon
    }));
  }, [alt, icon, imgProps, src]);
  return (0, _jsxRuntime.jsx)("div", {
    ...rootProps,
    children: (0, _jsxRuntime.jsxs)(_Provider.default, {
      skeleton: skeleton,
      children: [(0, _jsxRuntime.jsx)(_Space.default, {
        right: !centered ? 'small' : false,
        bottom: centered ? 'small' : false,
        children: getIllustration()
      }), (0, _jsxRuntime.jsxs)("div", {
        className: "dnb-info-card__content",
        children: [title && (0, _jsxRuntime.jsx)(_P.default, {
          className: "dnb-info-card__title",
          size: "small",
          weight: "medium",
          bottom: "x-small",
          children: title
        }), text && (0, _jsxRuntime.jsx)(_P.default, {
          size: "small",
          className: "dnb-info-card__text",
          bottom: "0",
          children: text
        }), children, getButtons()]
      })]
    })
  });
};
(0, _withComponentMarkers.default)(InfoCard, {
  _supportsSpacingProps: true
});
var _default = exports.default = InfoCard;
//# sourceMappingURL=InfoCard.js.map