@razorpay/blade
Version:
The Design System that powers Razorpay
237 lines (233 loc) • 9.99 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import styled from 'styled-components';
import { StepLine } from './StepLine.web.js';
import { useStepGroup } from './StepGroupContext.js';
import { componentIds } from './componentIds.js';
import { stepItemHeaderTokens, itemLineGap } from './tokens.js';
import '../Box/index.js';
import '../Typography/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../Box/BaseBox/index.js';
import '../../utils/index.js';
import '../../tokens/global/index.js';
import '../../utils/getFocusRingStyles/index.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../../utils/logger/index.js';
import '../../utils/metaAttribute/index.js';
import '../../utils/makeAnalyticsAttribute/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import { getFocusRingStyles } from '../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
import { throwBladeError } from '../../utils/logger/logger.js';
import { Box } from '../Box/Box.js';
import { Text } from '../Typography/Text/Text.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { size } from '../../tokens/global/size.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["title", "titleColor", "timestamp", "description", "stepProgress", "marker", "trailing", "isSelected", "isDisabled", "href", "target", "onClick", "children", "_index", "_totalIndex", "_nestingLevel"];
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 InteractiveItemHeaderBox = /*#__PURE__*/styled.button.withConfig({
displayName: "StepItemweb__InteractiveItemHeaderBox",
componentId: "x6btk4-0"
})(function (props) {
return {
padding: "".concat(makeSpace(getIn(props.theme, props.paddingY)), " ").concat(makeSpace(getIn(props.theme, props.paddingX))),
cursor: 'pointer',
display: 'inline-block',
textDecoration: 'none',
border: 'none',
textAlign: 'inherit',
backgroundColor: props.isSelected ? props.theme.colors.interactive.background.primary.faded : props.theme.colors.transparent,
borderRadius: props.theme.border.radius.medium,
width: '100%',
transition: "background-color ".concat(props.theme.motion.duration.xquick, " ").concat(props.theme.motion.easing.standard),
':not([disabled]):hover': {
backgroundColor: props.isSelected ? props.theme.colors.interactive.background.primary.fadedHighlighted : props.theme.colors.interactive.background.gray.fadedHighlighted
},
':not([disabled]):focus-visible': _objectSpread({}, getFocusRingStyles({
theme: props.theme
})),
'&[disabled]': {
cursor: 'not-allowed'
}
};
});
var getStepTypeFromIndex = function getStepTypeFromIndex(_ref) {
var _index = _ref._index,
_nestingLevel = _ref._nestingLevel,
itemsCount = _ref.itemsCount;
if (_nestingLevel === 0) {
return 'default';
}
if (itemsCount === 1) {
return 'single-item';
}
if (_index === 0) {
return 'start';
}
if (_index === itemsCount - 1) {
return 'end';
}
return 'middle';
};
var _StepItem = function _StepItem(_ref2) {
var title = _ref2.title,
titleColor = _ref2.titleColor,
timestamp = _ref2.timestamp,
description = _ref2.description,
_ref2$stepProgress = _ref2.stepProgress,
stepProgress = _ref2$stepProgress === void 0 ? 'none' : _ref2$stepProgress,
marker = _ref2.marker,
trailing = _ref2.trailing,
isSelected = _ref2.isSelected,
isDisabled = _ref2.isDisabled,
href = _ref2.href,
target = _ref2.target,
onClick = _ref2.onClick,
children = _ref2.children,
_ref2$_index = _ref2._index,
_index = _ref2$_index === void 0 ? 0 : _ref2$_index,
_ref2$_totalIndex = _ref2._totalIndex,
_totalIndex = _ref2$_totalIndex === void 0 ? 0 : _ref2$_totalIndex,
_ref2$_nestingLevel = _ref2._nestingLevel,
_nestingLevel = _ref2$_nestingLevel === void 0 ? 0 : _ref2$_nestingLevel,
rest = _objectWithoutProperties(_ref2, _excluded);
var _useStepGroup = useStepGroup(),
itemsCount = _useStepGroup.itemsInGroupCount,
totalItemsInParentGroupCount = _useStepGroup.totalItemsInParentGroupCount,
orientation = _useStepGroup.orientation,
size$1 = _useStepGroup.size;
var stepType = React__default.useMemo(function () {
return getStepTypeFromIndex({
_index: _index,
_nestingLevel: _nestingLevel,
itemsCount: itemsCount
});
}, [_index, _nestingLevel, itemsCount]);
var itemRef = React__default.useRef(null);
var isFirstItem = _totalIndex === 0;
var isLastItem = _totalIndex === totalItemsInParentGroupCount - 1;
var isInteractive = Boolean(href) || Boolean(onClick);
var isVertical = orientation === 'vertical';
var isNested = _nestingLevel > 0;
if (false) {
if (trailing && orientation === 'horizontal') {
throwBladeError({
message: 'trailing is not allowed in horizontal StepGroup',
moduleName: 'StepItem'
});
}
if (_nestingLevel >= 1 && orientation === 'horizontal') {
throwBladeError({
message: 'Nested StepGroup components are not allowed in horizontal orientation',
moduleName: 'StepItem'
});
}
}
var stepItemHeaderJSX = /*#__PURE__*/jsxs(Box, {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
gap: "spacing.4",
children: [/*#__PURE__*/jsxs(Box, {
children: [/*#__PURE__*/jsx(Text, {
size: stepItemHeaderTokens[size$1].title,
color: isDisabled ? 'surface.text.gray.disabled' : titleColor !== null && titleColor !== void 0 ? titleColor : 'surface.text.gray.subtle',
weight: isNested ? 'regular' : 'semibold',
children: title
}), /*#__PURE__*/jsx(Text, {
size: stepItemHeaderTokens[size$1].timestamp,
marginY: "spacing.2",
color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted',
variant: "caption",
children: timestamp
}), /*#__PURE__*/jsx(Text, {
size: stepItemHeaderTokens[size$1].description,
color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted',
children: description
})]
}), /*#__PURE__*/jsx(Box, {
children: trailing
})]
});
var stepItemHeaderPaddings = {
paddingY: 'spacing.3',
paddingX: 'spacing.4'
};
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({
display: "flex",
flexDirection: isVertical ? 'row' : 'column',
gap: itemLineGap[size$1],
className: "step-item step-index-".concat(_index, " step-nesting-level-").concat(_nestingLevel),
textAlign: isVertical ? 'left' : 'center',
alignItems: isVertical ? undefined : 'center',
minWidth: isVertical ? undefined : "min(".concat(makeSize(size['120']), ", 100%)"),
width: isVertical ? '100%' : undefined,
flex: isVertical ? undefined : '1',
marginX: isVertical ? 'spacing.4' : 'spacing.0'
}, metaAttribute({
name: MetaConstants.StepItem
})), makeAnalyticsAttribute(rest)), {}, {
ref: itemRef,
children: [/*#__PURE__*/jsx(StepLine, {
shouldShowStartBranch: !isFirstItem,
shouldShowEndBranch: !isLastItem,
stepType: stepType,
marker: marker,
stepProgress: stepProgress
}), /*#__PURE__*/jsxs(Box, {
flex: "1",
marginRight: isVertical ? undefined : undefined,
children: [isInteractive ? /*#__PURE__*/jsx(InteractiveItemHeaderBox, _objectSpread(_objectSpread({}, stepItemHeaderPaddings), {}, {
as: href ? 'a' : 'button',
href: href,
target: target,
isSelected: isSelected,
onClick: onClick,
disabled: isDisabled,
children: stepItemHeaderJSX
})) : /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, stepItemHeaderPaddings), {}, {
children: stepItemHeaderJSX
})), children ? /*#__PURE__*/jsx(Box, {
paddingX: "spacing.4",
paddingBottom: "spacing.3",
children: children
}) : null]
})]
}));
};
/**
* ## StepItem
*
* Component meant to be used inside the StepGroup parent component
*
* ### Usage
*
* ```jsx
* <StepGroup orientation="vertical" size="medium">
* <StepItem
* title="Personal Details"
* timestamp="Thu 15th Oct'23 | 12:00pm"
* description="Fill your personal details here"
* marker={<StepItemIndicator color="negative" />}
* />
* </StepGroup>
* ```
*
* ---
*
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-stepgroup--docs StepGroup Documentation}
*/
var StepItem = /*#__PURE__*/assignWithoutSideEffects(_StepItem, {
componentId: componentIds.StepItem,
displayName: componentIds.StepItem
});
export { StepItem, StepLine };
//# sourceMappingURL=StepItem.web.js.map