@razorpay/blade
Version:
The Design System that powers Razorpay
374 lines (371 loc) • 18.1 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { encode } from 'universal-base64';
import { StepItemIndicator } from './StepItemMarker.js';
import { useStepGroup } from './StepGroupContext.js';
import { markerLineDotWidth, markerLineDotSpacing, markerLineWidth, getMarkerLineSpacings, itemTopMargin } from './tokens.js';
import '../Box/index.js';
import '../Box/BaseBox/index.js';
import '../Icons/_Svg/index.js';
import '../../utils/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import useTheme from '../BladeProvider/useTheme.js';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import Svg from '../Icons/_Svg/Svg/Svg.web.js';
import Path from '../Icons/_Svg/Path/Path.web.js';
import { Box } from '../Box/Box.js';
var _excluded = ["isDotted", "width"],
_excluded2 = ["height", "isDotted"],
_excluded3 = ["isDotted"],
_excluded4 = ["isDotted"];
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 useDottedLineStyles = function useDottedLineStyles() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
isHorizontal = _ref.isHorizontal;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var svgString = "<svg width=\"2\" height=\"2\" viewBox=\"0 0 2 2\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M0 1C0 0.447715 0.447715 0 1 0C1.55228 0 2 0.447715 2 1C2 1.55228 1.55228 2 1 2C0.447715 2 0 1.55228 0 1Z\"\n fill=\"".concat(theme.colors.surface.border.gray.subtle, "\"\n />\n </svg>\n ");
var backgroundURL = "url(data:image/svg+xml;base64,".concat(encode(svgString), ")");
return {
backgroundImage: backgroundURL,
backgroundPosition: isHorizontal ? 'left' : 'top',
backgroundSize: isHorizontal ? "".concat(makeSize(markerLineDotWidth + markerLineDotSpacing), " ").concat(makeSize(markerLineDotWidth)) : "".concat(makeSize(markerLineDotWidth), " ").concat(makeSize(markerLineDotWidth + markerLineDotSpacing), " "),
backgroundRepeat: isHorizontal ? 'round no-repeat' : 'no-repeat round'
};
};
var StepStraightLineHorizontal = function StepStraightLineHorizontal(_ref2) {
var isDotted = _ref2.isDotted,
width = _ref2.width,
styledProps = _objectWithoutProperties(_ref2, _excluded);
var dottedStyles = useDottedLineStyles({
isHorizontal: true
});
var borderStyles = isDotted ? dottedStyles : {
borderTopWidth: 'thicker',
borderTopColor: 'surface.border.gray.subtle'
};
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
height: makeSize(markerLineWidth),
flex: "1"
}, borderStyles), styledProps));
};
var StepStraightLineVertical = function StepStraightLineVertical(_ref3) {
var height = _ref3.height,
isDotted = _ref3.isDotted,
styledProps = _objectWithoutProperties(_ref3, _excluded2);
var dottedStyles = useDottedLineStyles();
var borderStyles = isDotted ? dottedStyles : {
borderLeftWidth: 'thicker',
borderLeftColor: 'surface.border.gray.subtle'
};
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
height: height ? makeSize(height) : undefined,
flex: height ? undefined : '1',
width: makeSize(markerLineWidth)
}, borderStyles), styledProps));
};
var StepTopCurveVertical = function StepTopCurveVertical(_ref4) {
var isDotted = _ref4.isDotted,
styledProps = _objectWithoutProperties(_ref4, _excluded3);
var _useTheme2 = useTheme(),
theme = _useTheme2.theme;
return isDotted ? /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: theme.colors.surface.border.gray.subtle
}, styledProps), {}, {
children: [/*#__PURE__*/jsx(Path, {
d: "M2 1C2 1.55228 1.55228 2 1 2C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0C1.55228 0 2 0.447715 2 1Z"
}), /*#__PURE__*/jsx(Path, {
d: "M2 6C2 6.55228 1.55228 7 1 7C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5C1.55228 5 2 5.44772 2 6Z"
}), /*#__PURE__*/jsx(Path, {
d: "M1 12C1.55228 12 2 11.5523 2 11C2 10.4477 1.55228 10 1 10C0.447715 10 0 10.4477 0 11C0 11.5523 0.447715 12 1 12Z"
}), /*#__PURE__*/jsx(Path, {
d: "M3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16Z"
}), /*#__PURE__*/jsx(Path, {
d: "M7 20C7.55228 20 8 19.5523 8 19C8 18.4477 7.55228 18 7 18C6.44772 18 6 18.4477 6 19C6 19.5523 6.44772 20 7 20Z"
}), /*#__PURE__*/jsx(Path, {
d: "M14 19C14 19.5523 13.5523 20 13 20C12.4477 20 12 19.5523 12 19C12 18.4477 12.4477 18 13 18C13.5523 18 14 18.4477 14 19Z"
}), /*#__PURE__*/jsx(Path, {
d: "M19 20C19.5523 20 20 19.5523 20 19C20 18.4477 19.5523 18 19 18C18.4477 18 18 18.4477 18 19C18 19.5523 18.4477 20 19 20Z"
})]
})) : /*#__PURE__*/jsx(Svg, _objectSpread(_objectSpread({
width: "20",
height: "14",
viewBox: "0 0 20 14",
fill: "none"
}, styledProps), {}, {
children: /*#__PURE__*/jsx(Path, {
d: "M1 0V5C1 9.41828 4.58172 13 9 13H20",
stroke: theme.colors.surface.border.gray.subtle,
strokeWidth: "2"
})
}));
};
var StepBottomCurveVertical = function StepBottomCurveVertical(_ref5) {
var isDotted = _ref5.isDotted,
styledProps = _objectWithoutProperties(_ref5, _excluded4);
var _useTheme3 = useTheme(),
theme = _useTheme3.theme;
var _useStepGroup = useStepGroup(),
size = _useStepGroup.size;
if (size === 'medium') {
return isDotted ? /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
width: "42",
height: "5",
viewBox: "0 0 42 5",
fill: theme.colors.surface.border.gray.subtle
}, styledProps), {}, {
children: [/*#__PURE__*/jsx(Path, {
d: "M32 1C32 1.55228 31.5523 2 31 2C30.4477 2 30 1.55228 30 1C30 0.447715 30.4477 0 31 0C31.5523 0 32 0.447715 32 1Z"
}), /*#__PURE__*/jsx(Path, {
d: "M2 4C2 4.55228 1.55228 5 1 5C0.447715 5 0 4.55228 0 4C0 3.44772 0.447715 3 1 3C1.55228 3 2 3.44772 2 4Z"
}), /*#__PURE__*/jsx(Path, {
d: "M27.5 3.5C28.0523 3.5 28.5 3.05228 28.5 2.5C28.5 1.94772 28.0523 1.5 27.5 1.5C26.9477 1.5 26.5 1.94772 26.5 2.5C26.5 3.05228 26.9477 3.5 27.5 3.5Z"
}), /*#__PURE__*/jsx(Path, {
d: "M5.5 2.5C5.5 3.05228 5.05228 3.5 4.5 3.5C3.94772 3.5 3.5 3.05228 3.5 2.5C3.5 1.94772 3.94772 1.5 4.5 1.5C5.05228 1.5 5.5 1.94772 5.5 2.5Z"
}), /*#__PURE__*/jsx(Path, {
d: "M16.5 3.5C17.0523 3.5 17.5 3.05228 17.5 2.5C17.5 1.94772 17.0523 1.5 16.5 1.5C15.9477 1.5 15.5 1.94772 15.5 2.5C15.5 3.05228 15.9477 3.5 16.5 3.5Z"
}), /*#__PURE__*/jsx(Path, {
d: "M11.5 2.5C11.5 3.05228 11.0523 3.5 10.5 3.5C9.94771 3.5 9.5 3.05228 9.5 2.5C9.5 1.94772 9.94771 1.5 10.5 1.5C11.0523 1.5 11.5 1.94772 11.5 2.5Z"
}), /*#__PURE__*/jsx(Path, {
d: "M22.5 3.5C23.0523 3.5 23.5 3.05228 23.5 2.5C23.5 1.94772 23.0523 1.5 22.5 1.5C21.9477 1.5 21.5 1.94772 21.5 2.5C21.5 3.05228 21.9477 3.5 22.5 3.5Z"
})]
})) : /*#__PURE__*/jsx(Svg, {
width: "33",
height: "5",
viewBox: "0 0 33 5",
fill: "none",
children: /*#__PURE__*/jsx(Path, {
d: "M1 5V5C1 3.63251 2.108 2.52363 3.47549 2.52255L29.5 2.50198C30.881 2.50088 32 1.38103 32 1.19209e-07V1.19209e-07",
stroke: theme.colors.surface.border.gray.subtle,
strokeWidth: "2"
})
});
}
return isDotted ? /*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
width: "46",
height: "5",
viewBox: "0 0 46 5",
fill: theme.colors.surface.border.gray.subtle
}, styledProps), {}, {
children: [/*#__PURE__*/jsx(Path, {
d: "M35 1C35 1.55228 34.5523 2 34 2C33.4477 2 33 1.55228 33 1C33 0.447715 33.4477 0 34 0C34.5523 0 35 0.447715 35 1Z"
}), /*#__PURE__*/jsx(Path, {
d: "M2 4C2 4.55228 1.55228 5 1 5C0.447715 5 0 4.55228 0 4C0 3.44772 0.447715 3 1 3C1.55228 3 2 3.44772 2 4Z"
}), /*#__PURE__*/jsx(Path, {
d: "M31.5 3.5C32.0523 3.5 32.5 3.05228 32.5 2.5C32.5 1.94772 32.0523 1.5 31.5 1.5C30.9477 1.5 30.5 1.94772 30.5 2.5C30.5 3.05228 30.9477 3.5 31.5 3.5Z"
}), /*#__PURE__*/jsx(Path, {
d: "M4.5 2.5C4.5 3.05228 4.05228 3.5 3.5 3.5C2.94772 3.5 2.5 3.05228 2.5 2.5C2.5 1.94772 2.94772 1.5 3.5 1.5C4.05228 1.5 4.5 1.94772 4.5 2.5Z"
}), /*#__PURE__*/jsx(Path, {
d: "M17.5 3.5C18.0523 3.5 18.5 3.05228 18.5 2.5C18.5 1.94772 18.0523 1.5 17.5 1.5C16.9477 1.5 16.5 1.94772 16.5 2.5C16.5 3.05228 16.9477 3.5 17.5 3.5Z"
}), /*#__PURE__*/jsx(Path, {
d: "M11.5 2.5C11.5 3.05228 11.0523 3.5 10.5 3.5C9.94771 3.5 9.5 3.05228 9.5 2.5C9.5 1.94772 9.94771 1.5 10.5 1.5C11.0523 1.5 11.5 1.94772 11.5 2.5Z"
}), /*#__PURE__*/jsx(Path, {
d: "M24.5 3.5C25.0523 3.5 25.5 3.05228 25.5 2.5C25.5 1.94772 25.0523 1.5 24.5 1.5C23.9477 1.5 23.5 1.94772 23.5 2.5C23.5 3.05228 23.9477 3.5 24.5 3.5Z"
})]
})) : /*#__PURE__*/jsx(Svg, _objectSpread(_objectSpread({
width: "35",
height: "6",
viewBox: "0 0 35 6",
fill: "none"
}, styledProps), {}, {
children: /*#__PURE__*/jsx(Path, {
d: "M1 6V6C1 4.36914 2.31973 3.04584 3.95058 3.04142L31.04 2.96802C32.6761 2.96359 34 1.63606 34 1.3411e-07V1.3411e-07",
stroke: theme.colors.surface.border.gray.subtle,
strokeWidth: "2"
})
}));
};
var defaultMarker = /*#__PURE__*/jsx(StepItemIndicator, {
color: "neutral"
});
var StepLineVertical = function StepLineVertical(_ref6) {
var _ref6$marker = _ref6.marker,
marker = _ref6$marker === void 0 ? defaultMarker : _ref6$marker,
stepProgress = _ref6.stepProgress,
isIndented = _ref6.isIndented,
shouldShowStartBranch = _ref6.shouldShowStartBranch,
shouldShowEndBranch = _ref6.shouldShowEndBranch;
var _useStepGroup2 = useStepGroup(),
size = _useStepGroup2.size;
var spacingTokens = getMarkerLineSpacings(size);
return /*#__PURE__*/jsxs(Box, {
position: "relative",
marginLeft: isIndented ? makeSize(spacingTokens.indentationWidth) : undefined,
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsx(StepStraightLineVertical, {
height: itemTopMargin,
isDotted: stepProgress === 'none' || stepProgress === 'end',
visibility: shouldShowStartBranch ? 'visible' : 'hidden'
}), /*#__PURE__*/jsx(Box, {
marginLeft: makeSize(-spacingTokens.markerLeftAlignment),
children: marker
}), /*#__PURE__*/jsx(StepStraightLineVertical, {
isDotted: stepProgress === 'none' || stepProgress === 'start',
visibility: shouldShowEndBranch ? 'visible' : 'hidden'
})]
});
};
var StepLineStart = function StepLineStart(_ref7) {
var _ref7$marker = _ref7.marker,
marker = _ref7$marker === void 0 ? defaultMarker : _ref7$marker,
stepProgress = _ref7.stepProgress,
shouldShowStartBranch = _ref7.shouldShowStartBranch,
shouldShowEndBranch = _ref7.shouldShowEndBranch;
var _useStepGroup3 = useStepGroup(),
size = _useStepGroup3.size;
var spacingTokens = getMarkerLineSpacings(size);
return /*#__PURE__*/jsxs(Box, {
position: "relative",
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsx(StepStraightLineVertical, {
height: itemTopMargin,
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
isDotted: stepProgress === 'none' || stepProgress === 'end'
}), /*#__PURE__*/jsx(StepTopCurveVertical, {
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
isDotted: stepProgress === 'none' || stepProgress === 'end'
}), /*#__PURE__*/jsx(Box, {
marginLeft: makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth),
marginTop: makeSize(spacingTokens.markerTopAlignment),
children: marker
}), /*#__PURE__*/jsx(StepStraightLineVertical, {
visibility: shouldShowEndBranch ? 'visible' : 'hidden',
marginLeft: makeSize(spacingTokens.indentationWidth),
isDotted: stepProgress === 'none' || stepProgress === 'start'
})]
});
};
var StepLineEnd = function StepLineEnd(_ref8) {
var _ref8$marker = _ref8.marker,
marker = _ref8$marker === void 0 ? defaultMarker : _ref8$marker,
stepProgress = _ref8.stepProgress,
shouldShowStartBranch = _ref8.shouldShowStartBranch,
shouldShowEndBranch = _ref8.shouldShowEndBranch;
var _useStepGroup4 = useStepGroup(),
size = _useStepGroup4.size;
var spacingTokens = getMarkerLineSpacings(size);
return /*#__PURE__*/jsxs(Box, {
position: "relative",
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsx(StepStraightLineVertical, {
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
marginLeft: makeSize(spacingTokens.indentationWidth),
height: itemTopMargin,
isDotted: stepProgress === 'none' || stepProgress === 'end'
}), /*#__PURE__*/jsx(Box, {
marginLeft: makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth),
children: marker
}), /*#__PURE__*/jsx(StepStraightLineVertical, {
marginLeft: makeSize(spacingTokens.indentationWidth),
visibility: shouldShowEndBranch ? 'visible' : 'hidden',
isDotted: stepProgress === 'none' || stepProgress === 'start'
}), /*#__PURE__*/jsx(StepBottomCurveVertical, {
isDotted: stepProgress === 'none' || stepProgress === 'start',
visibility: shouldShowEndBranch ? 'visible' : 'hidden'
})]
});
};
var StepLineHorizontal = function StepLineHorizontal(_ref9) {
var _ref9$marker = _ref9.marker,
marker = _ref9$marker === void 0 ? defaultMarker : _ref9$marker,
stepProgress = _ref9.stepProgress,
shouldShowStartBranch = _ref9.shouldShowStartBranch,
shouldShowEndBranch = _ref9.shouldShowEndBranch;
return /*#__PURE__*/jsxs(Box, {
position: "relative",
display: "flex",
flexDirection: "row",
width: "100%",
justifyContent: "center",
alignItems: "center",
children: [/*#__PURE__*/jsx(StepStraightLineHorizontal, {
isDotted: stepProgress === 'none' || stepProgress === 'end',
visibility: shouldShowStartBranch ? 'visible' : 'hidden'
}), /*#__PURE__*/jsx(Box, {
children: marker
}), /*#__PURE__*/jsx(StepStraightLineHorizontal, {
isDotted: stepProgress === 'none' || stepProgress === 'start',
visibility: shouldShowEndBranch ? 'visible' : 'hidden'
})]
});
};
var StepLineSingleItem = function StepLineSingleItem(_ref10) {
var _ref10$marker = _ref10.marker,
marker = _ref10$marker === void 0 ? defaultMarker : _ref10$marker,
stepProgress = _ref10.stepProgress,
shouldShowEndBranch = _ref10.shouldShowEndBranch,
shouldShowStartBranch = _ref10.shouldShowStartBranch;
var _useStepGroup5 = useStepGroup(),
size = _useStepGroup5.size;
var spacingTokens = getMarkerLineSpacings(size);
return /*#__PURE__*/jsxs(Box, {
position: "relative",
display: "flex",
flexDirection: "column",
children: [/*#__PURE__*/jsx(StepStraightLineVertical, {
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
height: itemTopMargin,
isDotted: stepProgress === 'none' || stepProgress === 'end'
}), /*#__PURE__*/jsx(StepTopCurveVertical, {
visibility: shouldShowStartBranch ? 'visible' : 'hidden',
isDotted: stepProgress === 'none' || stepProgress === 'end'
}), /*#__PURE__*/jsx(Box
// -12 (markerLeftAlginment) + 33 (indentationWidth)
, {
marginLeft: makeSize(-spacingTokens.markerLeftAlignment + spacingTokens.indentationWidth),
marginTop: makeSize(spacingTokens.markerTopAlignment),
children: marker
}), /*#__PURE__*/jsx(StepStraightLineVertical, {
marginLeft: makeSize(spacingTokens.indentationWidth),
visibility: shouldShowEndBranch ? 'visible' : 'hidden',
isDotted: stepProgress === 'none' || stepProgress === 'start'
}), /*#__PURE__*/jsx(StepBottomCurveVertical, {
visibility: shouldShowEndBranch ? 'visible' : 'hidden',
isDotted: stepProgress === 'none' || stepProgress === 'start'
})]
});
};
var StepLine = function StepLine(_ref11) {
var _ref11$stepType = _ref11.stepType,
stepType = _ref11$stepType === void 0 ? 'default' : _ref11$stepType,
shouldShowStartBranch = _ref11.shouldShowStartBranch,
shouldShowEndBranch = _ref11.shouldShowEndBranch,
marker = _ref11.marker,
stepProgress = _ref11.stepProgress;
var _useStepGroup6 = useStepGroup(),
orientation = _useStepGroup6.orientation;
var commonProps = {
shouldShowStartBranch: shouldShowStartBranch,
shouldShowEndBranch: shouldShowEndBranch,
marker: marker,
stepProgress: stepProgress
};
if (orientation === 'horizontal') {
return /*#__PURE__*/jsx(StepLineHorizontal, _objectSpread({}, commonProps));
}
if (stepType === 'start') {
return /*#__PURE__*/jsx(StepLineStart, _objectSpread({}, commonProps));
}
if (stepType === 'middle') {
return /*#__PURE__*/jsx(StepLineVertical, _objectSpread(_objectSpread({}, commonProps), {}, {
isIndented: true
}));
}
if (stepType === 'end') {
return /*#__PURE__*/jsx(StepLineEnd, _objectSpread({}, commonProps));
}
if (stepType === 'single-item') {
return /*#__PURE__*/jsx(StepLineSingleItem, _objectSpread({}, commonProps));
}
return /*#__PURE__*/jsx(StepLineVertical, _objectSpread({}, commonProps));
};
export { StepLine };
//# sourceMappingURL=StepLine.web.js.map