@razorpay/blade
Version:
The Design System that powers Razorpay
221 lines (218 loc) • 9.68 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import 'react';
import { useVerifyInsideCard } from './CardContext.js';
import { ComponentIds } from './Card.js';
import '../Badge/index.js';
import '../Link/index.js';
import '../Button/index.js';
import '../Counter/index.js';
import '../Divider/index.js';
import '../Box/BaseBox/index.js';
import '../Typography/index.js';
import { minHeight } from '../Button/BaseButton/buttonTokens.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/makeSpace/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import '../../utils/logger/index.js';
import { useVerifyAllowedChildren } from '../../utils/useVerifyAllowedChildren/useVerifyAllowedChildren.js';
import '../Amount/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { Counter } from '../Counter/Counter.js';
import { Badge } from '../Badge/Badge.js';
import { Amount } from '../Amount/Amount.js';
import { Text } from '../Typography/Text/Text.js';
import Link from '../Link/Link/Link.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import Button from '../Button/Button/Button.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { Divider } from '../Divider/Divider.js';
import { isValidAllowedChildren, getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { throwBladeError } from '../../utils/logger/logger.js';
var _excluded = ["children", "testID", "marginBottom", "paddingBottom", "showDivider"],
_excluded2 = ["title", "subtitle", "prefix", "suffix"];
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 _CardHeaderIcon = function _CardHeaderIcon(_ref) {
var Icon = _ref.icon;
useVerifyInsideCard('CardHeaderIcon');
return /*#__PURE__*/jsx(Icon, {
color: "surface.icon.gray.normal",
size: "large"
});
};
var CardHeaderIcon = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderIcon, {
componentId: ComponentIds.CardHeaderIcon
});
var _CardHeaderCounter = function _CardHeaderCounter(props) {
useVerifyInsideCard('CardHeaderCounter');
return /*#__PURE__*/jsx(Counter, _objectSpread({}, props));
};
var CardHeaderCounter = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderCounter, {
componentId: ComponentIds.CardHeaderCounter
});
var _CardHeaderBadge = function _CardHeaderBadge(props) {
useVerifyInsideCard('CardHeaderBadge');
return /*#__PURE__*/jsx(Badge, _objectSpread({}, props));
};
var CardHeaderBadge = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderBadge, {
componentId: ComponentIds.CardHeaderBadge
});
var _CardHeaderAmount = function _CardHeaderAmount(props) {
useVerifyInsideCard('CardHeaderAmount');
return /*#__PURE__*/jsx(Amount, _objectSpread({}, props));
};
var CardHeaderAmount = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderAmount, {
componentId: ComponentIds.CardHeaderAmount
});
var _CardHeaderText = function _CardHeaderText(props) {
useVerifyInsideCard('CardHeaderText');
return /*#__PURE__*/jsx(Text, _objectSpread({
textAlign: "left"
}, props));
};
var CardHeaderText = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderText, {
componentId: ComponentIds.CardHeaderText
});
var _CardHeaderLink = function _CardHeaderLink(props) {
useVerifyInsideCard('CardHeaderLink');
return /*#__PURE__*/jsx(Link, _objectSpread({}, props));
};
var CardHeaderLink = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderLink, {
componentId: ComponentIds.CardHeaderLink
});
var _CardHeaderIconButton = function _CardHeaderIconButton(props) {
useVerifyInsideCard('CardHeaderIconButton');
return /*#__PURE__*/jsx(BaseBox, {
width: makeSpace(minHeight.xsmall),
children: /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
variant: "tertiary",
size: "xsmall",
iconPosition: "left",
isFullWidth: true
}))
});
};
var CardHeaderIconButton = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderIconButton, {
componentId: ComponentIds.CardHeaderIconButton
});
var _CardHeader = function _CardHeader(_ref2) {
var children = _ref2.children,
testID = _ref2.testID,
_ref2$marginBottom = _ref2.marginBottom,
marginBottom = _ref2$marginBottom === void 0 ? 'spacing.4' : _ref2$marginBottom,
_ref2$paddingBottom = _ref2.paddingBottom,
paddingBottom = _ref2$paddingBottom === void 0 ? 'spacing.4' : _ref2$paddingBottom,
_ref2$showDivider = _ref2.showDivider,
showDivider = _ref2$showDivider === void 0 ? true : _ref2$showDivider,
rest = _objectWithoutProperties(_ref2, _excluded);
useVerifyInsideCard('CardHeader');
useVerifyAllowedChildren({
children: children,
componentName: 'CardHeader',
allowedComponents: [ComponentIds.CardHeaderLeading, ComponentIds.CardHeaderTrailing]
});
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
marginBottom: marginBottom
}, metaAttribute({
name: MetaConstants.CardHeader,
testID: testID
})), makeAnalyticsAttribute(rest)), {}, {
children: [/*#__PURE__*/jsx(BaseBox, {
paddingBottom: paddingBottom,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
children: children
}), showDivider ? /*#__PURE__*/jsx(Divider, {}) : null]
}));
};
var CardHeader = /*#__PURE__*/assignWithoutSideEffects(_CardHeader, {
componentId: ComponentIds.CardHeader
});
var _CardHeaderLeading = function _CardHeaderLeading(_ref3) {
var title = _ref3.title,
subtitle = _ref3.subtitle,
prefix = _ref3.prefix,
suffix = _ref3.suffix,
rest = _objectWithoutProperties(_ref3, _excluded2);
useVerifyInsideCard('CardHeaderLeading');
if (false) {
if (prefix && !isValidAllowedChildren(prefix, ComponentIds.CardHeaderIcon)) {
throwBladeError({
message: "Only `".concat(ComponentIds.CardHeaderIcon, "` component is accepted in prefix"),
moduleName: 'CardHeaderLeading'
});
}
if (suffix && !isValidAllowedChildren(suffix, ComponentIds.CardHeaderCounter)) {
throwBladeError({
message: "Only `".concat(ComponentIds.CardHeaderCounter, "` component is accepted in prefix"),
moduleName: 'CardHeaderLeading'
});
}
}
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({}, makeAnalyticsAttribute(rest)), {}, {
flex: 1,
display: "flex",
flexDirection: "row",
children: [/*#__PURE__*/jsx(BaseBox, {
marginRight: "spacing.3",
alignSelf: "center",
display: "flex",
children: prefix
}), /*#__PURE__*/jsxs(BaseBox, {
marginRight: "spacing.5",
children: [/*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "row",
alignItems: "center",
flexWrap: "wrap",
children: [/*#__PURE__*/jsx(Text, {
color: "surface.text.gray.normal",
size: "large",
weight: "semibold",
children: title
}), /*#__PURE__*/jsx(BaseBox, {
marginLeft: "spacing.3",
children: suffix
})]
}), subtitle && /*#__PURE__*/jsx(Text, {
color: "surface.text.gray.subtle",
textAlign: "left",
size: "small",
children: subtitle
})]
})]
}));
};
var CardHeaderLeading = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderLeading, {
componentId: ComponentIds.CardHeaderLeading
});
var headerTrailingAllowedComponents = [ComponentIds.CardHeaderLink, ComponentIds.CardHeaderText, ComponentIds.CardHeaderIconButton, ComponentIds.CardHeaderBadge, ComponentIds.CardHeaderAmount];
var _CardHeaderTrailing = function _CardHeaderTrailing(_ref4) {
var visual = _ref4.visual;
useVerifyInsideCard('CardHeaderTrailing');
if (false) {
if (visual && !headerTrailingAllowedComponents.includes(getComponentId(visual))) {
throwBladeError({
message: "Only one of `".concat(headerTrailingAllowedComponents.join(', '), "` component is accepted in visual"),
moduleName: 'CardHeaderTrailing'
});
}
}
return /*#__PURE__*/jsx(BaseBox, {
alignSelf: "center",
children: visual
});
};
var CardHeaderTrailing = /*#__PURE__*/assignWithoutSideEffects(_CardHeaderTrailing, {
componentId: ComponentIds.CardHeaderTrailing
});
export { CardHeader, CardHeaderAmount, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing };
//# sourceMappingURL=CardHeader.js.map