@razorpay/blade
Version:
The Design System that powers Razorpay
65 lines (62 loc) • 2.29 kB
JavaScript
import { useStepGroup } from './StepGroupContext.js';
import { getMarkerLineSpacings, iconSizeTokens } from './tokens.js';
import '../Box/BaseBox/index.js';
import '../Indicator/index.js';
import '../../utils/index.js';
import { jsx } from 'react/jsx-runtime';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { Indicator } from '../Indicator/Indicator.js';
var MarkerBackgroundCircle = function MarkerBackgroundCircle(_ref) {
var color = _ref.color,
size = _ref.size,
margin = _ref.margin,
children = _ref.children;
return /*#__PURE__*/jsx(BaseBox, {
backgroundColor: color === 'primary' ? 'surface.background.primary.subtle' : "feedback.background.".concat(color, ".subtle"),
display: "flex",
alignItems: "center",
justifyContent: "center",
height: size,
width: size,
borderRadius: "round",
margin: margin,
children: children
});
};
var StepItemIndicator = function StepItemIndicator(_ref2) {
var color = _ref2.color;
var _useStepGroup = useStepGroup(),
size = _useStepGroup.size;
var spacingTokens = getMarkerLineSpacings(size);
return /*#__PURE__*/jsx(MarkerBackgroundCircle, {
color: color,
size: makeSize(spacingTokens.markerBackgroundSize),
margin: makeSize(spacingTokens.markerMargin),
children: /*#__PURE__*/jsx(Indicator, {
position: "relative",
color: color,
size: size,
accessibilityLabel: "".concat(color, " indicator")
})
});
};
var StepItemIcon = function StepItemIcon(_ref3) {
var Icon = _ref3.icon,
_ref3$color = _ref3.color,
color = _ref3$color === void 0 ? 'neutral' : _ref3$color;
var _useStepGroup2 = useStepGroup(),
size = _useStepGroup2.size;
var spacingTokens = getMarkerLineSpacings(size);
return /*#__PURE__*/jsx(MarkerBackgroundCircle, {
color: color,
size: makeSize(spacingTokens.markerBackgroundSize),
margin: makeSize(spacingTokens.markerMargin),
children: /*#__PURE__*/jsx(Icon, {
size: iconSizeTokens[size],
color: color === 'primary' ? 'surface.icon.primary.normal' : "feedback.icon.".concat(color, ".intense")
})
});
};
export { StepItemIcon, StepItemIndicator };
//# sourceMappingURL=StepItemMarker.js.map