@razorpay/blade/build/lib/web/production/components/Card/Card.js

The Design System that powers Razorpay

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React__default from 'react';
import { CardSurface } from './CardSurface.web.js';
import { CardProvider, useVerifyInsideCard } from './CardContext.js';
import { LinkOverlay } from './LinkOverlay.web.js';
import { CardRoot } from './CardRoot.web.js';
import { CARD_LINK_OVERLAY_ID } from './constants.js';
import '../Box/BaseBox/index.js';
import '../../utils/metaAttribute/index.js';
import '../Box/styledProps/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/makeAccessible/index.js';
import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
import '../../utils/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
import { isReactNative } from '../../utils/platform/isReactNative.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';

var _excluded = ["children", "backgroundColor", "borderRadius", "elevation", "testID", "padding", "width", "height", "minHeight", "minWidth", "onClick", "isSelected", "accessibilityLabel", "shouldScaleOnHover", "onHover", "href", "target", "rel", "as"],
  _excluded2 = ["height", "children", "testID"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ComponentIds = {
  CardHeader: 'CardHeader',
  CardHeaderTrailing: 'CardHeaderTrailing',
  CardHeaderLeading: 'CardHeaderLeading',
  CardFooter: 'CardFooter',
  CardFooterTrailing: 'CardFooterTrailing',
  CardFooterLeading: 'CardFooterLeading',
  CardBody: 'CardBody',
  CardHeaderIcon: 'CardHeaderIcon',
  CardHeaderCounter: 'CardHeaderCounter',
  CardHeaderBadge: 'CardHeaderBadge',
  CardHeaderAmount: 'CardHeaderAmount',
  CardHeaderText: 'CardHeaderText',
  CardHeaderLink: 'CardHeaderLink',
  CardHeaderIconButton: 'CardHeaderIconButton'
};
var _Card = function _Card(_ref, ref) {
  var children = _ref.children,
    _ref$backgroundColor = _ref.backgroundColor,
    backgroundColor = _ref$backgroundColor === void 0 ? 'surface.background.gray.intense' : _ref$backgroundColor,
    _ref$borderRadius = _ref.borderRadius,
    borderRadius = _ref$borderRadius === void 0 ? 'medium' : _ref$borderRadius,
    _ref$elevation = _ref.elevation,
    elevation = _ref$elevation === void 0 ? 'lowRaised' : _ref$elevation,
    testID = _ref.testID,
    _ref$padding = _ref.padding,
    padding = _ref$padding === void 0 ? 'spacing.7' : _ref$padding,
    width = _ref.width,
    height = _ref.height,
    minHeight = _ref.minHeight,
    minWidth = _ref.minWidth,
    onClick = _ref.onClick,
    _ref$isSelected = _ref.isSelected,
    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
    accessibilityLabel = _ref.accessibilityLabel,
    _ref$shouldScaleOnHov = _ref.shouldScaleOnHover,
    shouldScaleOnHover = _ref$shouldScaleOnHov === void 0 ? false : _ref$shouldScaleOnHov,
    onHover = _ref.onHover,
    href = _ref.href,
    target = _ref.target,
    rel = _ref.rel,
    as = _ref.as,
    rest = _objectWithoutProperties(_ref, _excluded);
  var _React$useState = React__default.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isFocused = _React$useState2[0],
    setIsFocused = _React$useState2[1];
  useVerifyAllowedChildren({
    children: children,
    componentName: 'Card',
    allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter]
  });
  var linkOverlayProps = _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
    name: CARD_LINK_OVERLAY_ID
  })), makeAccessible({
    label: accessibilityLabel,
    pressed: isSelected
  })), {}, {
    onFocus: function onFocus() {
      setIsFocused(true);
    },
    onBlur: function onBlur() {
      setIsFocused(false);
    }
  });
  var defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;
  return /*#__PURE__*/jsx(CardProvider, {
    children: /*#__PURE__*/jsx(CardRoot, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
      as: as,
      ref: ref,
      display: 'block',
      borderRadius: borderRadius,
      onMouseEnter: onHover,
      shouldScaleOnHover: shouldScaleOnHover,
      isSelected: isSelected,
      isFocused: isFocused
      // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN
      ,
      onClick: isReactNative() ? onClick : undefined,
      width: width,
      height: height,
      minHeight: minHeight,
      minWidth: minWidth,
      href: href,
      accessibilityLabel: accessibilityLabel
    }, metaAttribute({
      name: MetaConstants.Card,
      testID: testID
    })), getStyledProps(rest)), makeAnalyticsAttribute(rest)), {}, {
      children: /*#__PURE__*/jsxs(CardSurface, {
        height: height,
        minHeight: minHeight,
        padding: padding,
        borderRadius: borderRadius,
        elevation: elevation,
        textAlign: 'left',
        backgroundColor: backgroundColor,
        children: [href ? /*#__PURE__*/jsx(LinkOverlay, _objectSpread({
          onClick: onClick,
          href: href,
          target: target,
          rel: rel !== null && rel !== void 0 ? rel : defaultRel
        }, linkOverlayProps)) : null, !href && onClick ? /*#__PURE__*/jsx(LinkOverlay, _objectSpread({
          as: "button",
          onClick: onClick
        }, linkOverlayProps)) : null, children]
      })
    }))
  });
};
var _CardBody = function _CardBody(_ref2) {
  var height = _ref2.height,
    children = _ref2.children,
    testID = _ref2.testID,
    rest = _objectWithoutProperties(_ref2, _excluded2);
  useVerifyInsideCard('CardBody');
  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
    name: MetaConstants.CardBody,
    testID: testID
  })), makeAnalyticsAttribute(rest)), {}, {
    height: height,
    children: children
  }));
};
var Card = /*#__PURE__*/React__default.forwardRef(_Card);
var CardBody = /*#__PURE__*/assignWithoutSideEffects(_CardBody, {
  componentId: ComponentIds.CardBody
});

export { Card, CardBody, ComponentIds };
//# sourceMappingURL=Card.js.map