feat(StepGroup): spacing enhancements (#2421)

* feat: add color enhancements * feat: add temporary dotted lines and curved lines * feat: update to use large dotted line * feat: adjust stepline based on size * fix: interactive stepitem padding * fix: typecheck, extra code, cleanup code * tests: update snapshots * Create many-hotels-march.md * fix: padding below slot
razorpay · Nov 29, 2024 · a51e8f7 · a51e8f7
1 parent 62cf330
commit a51e8f7
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 101 deletions.
diff --git a/.changeset/many-hotels-march.md b/.changeset/many-hotels-march.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": minor
+---
+
+feat(StepGroup): spacing enhancements, support for titleColor prop
diff --git a/packages/blade/src/components/StepGroup/StepGroup.stories.tsx b/packages/blade/src/components/StepGroup/StepGroup.stories.tsx
@@ -205,6 +205,7 @@ const StepGroupStaticTemplate: StoryFn<typeof StepGroup> = (args) => {
       />
       <StepItem
         title="Needs Response"
+        titleColor="feedback.text.notice.intense"
         timestamp="Respond latest by Tue, 23rd Oct'24 | 12:00pm"
         stepProgress="start"
         marker={<StepItemIndicator color="notice" />}
@@ -272,18 +273,17 @@ const StepGroupNestedTemplate: StoryFn<typeof StepGroup> = (args) => {
       <StepItem
         title="Needs Response"
         timestamp="Respond latest by Tue, 23rd Oct'24 | 12:00pm"
-        stepProgress="full"
+        stepProgress="start"
         marker={<StepItemIndicator color="positive" />}
       />
       <StepGroup>
         <StepItem
           title="Personal Documents Submission"
-          stepProgress="full"
           marker={<StepItemIndicator color="positive" />}
         />
         <StepItem
           title="Company Documents Submission"
-          stepProgress="start"
+          titleColor="feedback.text.notice.intense"
           marker={<StepItemIndicator color="notice" />}
         >
           <Button size="medium" variant="secondary">

diff --git a/packages/blade/src/components/StepGroup/StepItem.web.tsx b/packages/blade/src/components/StepGroup/StepItem.web.tsx
@@ -84,6 +84,7 @@ const getStepTypeFromIndex = ({
 
 const _StepItem = ({
   title,
+  titleColor,
   timestamp,
   description,
   stepProgress = 'none',
@@ -116,6 +117,7 @@ const _StepItem = ({
   const isLastItem = _totalIndex === totalItemsInParentGroupCount - 1;
   const isInteractive = Boolean(href) || Boolean(onClick);
   const isVertical = orientation === 'vertical';
+  const isNested = _nestingLevel > 0;
 
   if (__DEV__) {
     if (trailing && orientation === 'horizontal') {
@@ -138,8 +140,10 @@ const _StepItem = ({
       <Box>
         <Text
           size={stepItemHeaderTokens[size].title}
-          color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.subtle'}
-          weight="semibold"
+          color={
+            isDisabled ? 'surface.text.gray.disabled' : titleColor ?? 'surface.text.gray.subtle'
+          }
+          weight={isNested ? 'regular' : 'semibold'}
         >
           {title}
         </Text>
@@ -188,7 +192,7 @@ const _StepItem = ({
         marker={marker}
         stepProgress={stepProgress}
       />
-      <Box marginTop="spacing.3" flex="1" marginRight={isVertical ? undefined : undefined}>
+      <Box flex="1" marginRight={isVertical ? undefined : undefined}>
         {isInteractive ? (
           <InteractiveItemHeaderBox
             {...stepItemHeaderPaddings}
@@ -205,7 +209,7 @@ const _StepItem = ({
           <Box {...stepItemHeaderPaddings}>{stepItemHeaderJSX}</Box>
         )}
         {children ? (
-          <Box paddingX="spacing.4" paddingY="spacing.3">
+          <Box paddingX="spacing.4" paddingBottom="spacing.3">
             {children}
           </Box>
         ) : null}

diff --git a/packages/blade/src/components/StepGroup/StepLine.web.tsx b/packages/blade/src/components/StepGroup/StepLine.web.tsx
@@ -92,25 +92,27 @@ const StepTopCurveVertical = ({
   ...styledProps
 }: StepLineSvgProps): React.ReactElement => {
   const { theme } = useTheme();
+
   return isDotted ? (
     <Svg
-      width="21"
-      height="15"
-      marginLeft="-1px"
-      viewBox="0 0 21 15"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill={theme.colors.surface.border.gray.subtle}
+      {...styledProps}
     >
-      <Path d="M1.90332 2.3916C2.20752 2.3916 2.47998 2.25586 2.66357 2.04199C2.81299 1.86719 2.90332 1.63965 2.90332 1.3916C2.90332 0.838867 2.45557 0.391602 1.90332 0.391602C1.35107 0.391602 0.90332 0.838867 0.90332 1.3916C0.90332 1.94434 1.35107 2.3916 1.90332 2.3916Z" />
-      <Path d="M9.85352 13.042C9.66992 13.2559 9.39746 13.3916 9.09326 13.3916C8.54102 13.3916 8.09326 12.9443 8.09326 12.3916C8.09326 11.8389 8.54102 11.3916 9.09326 11.3916C9.64551 11.3916 10.0933 11.8389 10.0933 12.3916C10.0933 12.6396 10.0029 12.8672 9.85352 13.042Z" />
-      <Path d="M14.498 14.3916C14.8022 14.3916 15.0747 14.2559 15.2583 14.042C15.4077 13.8672 15.498 13.6396 15.498 13.3916C15.498 12.8389 15.0503 12.3916 14.498 12.3916C13.9458 12.3916 13.498 12.8389 13.498 13.3916C13.498 13.9443 13.9458 14.3916 14.498 14.3916Z" />
-      <Path d="M19.9033 14.3916C20.2075 14.3916 20.48 14.2559 20.6636 14.042C20.813 13.8672 20.9033 13.6396 20.9033 13.3916C20.9033 12.8389 20.4556 12.3916 19.9033 12.3916C19.3511 12.3916 18.9033 12.8389 18.9033 13.3916C18.9033 13.9443 19.3511 14.3916 19.9033 14.3916Z" />
-      <Path d="M3.26318 6.08887C3.07959 6.30273 2.80713 6.43848 2.50293 6.43848C1.95068 6.43848 1.50293 5.99121 1.50293 5.43848C1.50293 4.88574 1.95068 4.43848 2.50293 4.43848C3.05518 4.43848 3.50293 4.88574 3.50293 5.43848C3.50293 5.68652 3.4126 5.91406 3.26318 6.08887Z" />
-      <Path d="M5.15137 10.6357C5.45557 10.6357 5.72803 10.5 5.91162 10.2861C6.06104 10.1113 6.15137 9.88379 6.15137 9.63574C6.15137 9.08301 5.70361 8.63574 5.15137 8.63574C4.59912 8.63574 4.15137 9.08301 4.15137 9.63574C4.15137 10.1885 4.59912 10.6357 5.15137 10.6357Z" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
     </Svg>
   ) : (
     <Svg width="20" height="14" viewBox="0 0 20 14" fill="none" {...styledProps}>
       <Path
-        d="M1 0V1C1 7.62742 6.37258 13 13 13H20"
+        d="M1 0V5C1 9.41828 4.58172 13 9 13H20"
         stroke={theme.colors.surface.border.gray.subtle}
         strokeWidth="2"
       />
@@ -123,22 +125,56 @@ const StepBottomCurveVertical = ({
   ...styledProps
 }: StepLineSvgProps): React.ReactElement => {
   const { theme } = useTheme();
+  const { size } = useStepGroup();
+
+  if (size === 'medium') {
+    return isDotted ? (
+      <Svg
+        width="42"
+        height="5"
+        viewBox="0 0 42 5"
+        fill={theme.colors.surface.border.gray.subtle}
+        {...styledProps}
+      >
+        <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" />
+        <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" />
+        <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" />
+        <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" />
+        <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" />
+        <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" />
+        <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" />
+      </Svg>
+    ) : (
+      <Svg width="33" height="5" viewBox="0 0 33 5" fill="none">
+        <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"
+        />
+      </Svg>
+    );
+  }
 
   return isDotted ? (
-    <Svg width="35" height="26" viewBox="0 0 35 26" fill={theme.colors.surface.border.gray.subtle}>
-      <Path d="M34.7603 1.93457C34.5767 2.14844 34.3042 2.28418 34 2.28418C33.4478 2.28418 33 1.83691 33 1.28418C33 0.731445 33.4478 0.28418 34 0.28418C34.5522 0.28418 35 0.731445 35 1.28418C35 1.53223 34.9097 1.75977 34.7603 1.93457Z" />
-      <Path d="M2 18.7803C2.3042 18.7803 2.57666 18.6445 2.76025 18.4307C2.90967 18.2559 3 18.0283 3 17.7803C3 17.2275 2.55225 16.7803 2 16.7803C1.44775 16.7803 1 17.2275 1 17.7803C1 18.333 1.44775 18.7803 2 18.7803Z" />
-      <Path d="M1 25.2842C1.3042 25.2842 1.57666 25.1484 1.76025 24.9346C1.90967 24.7598 2 24.5322 2 24.2842C2 23.7314 1.55225 23.2842 1 23.2842C0.447754 23.2842 0 23.7314 0 24.2842C0 24.8369 0.447754 25.2842 1 25.2842Z" />
-      <Path d="M7.30127 14.7842C7.60547 14.7842 7.87793 14.6484 8.06152 14.4346C8.21094 14.2598 8.30127 14.0322 8.30127 13.7842C8.30127 13.2314 7.85352 12.7842 7.30127 12.7842C6.74902 12.7842 6.30127 13.2314 6.30127 13.7842C6.30127 14.3369 6.74902 14.7842 7.30127 14.7842Z" />
-      <Path d="M14.7188 13.1338C14.5352 13.3477 14.2627 13.4834 13.9585 13.4834C13.4062 13.4834 12.9585 13.0361 12.9585 12.4834C12.9585 11.9307 13.4062 11.4834 13.9585 11.4834C14.5107 11.4834 14.9585 11.9307 14.9585 12.4834C14.9585 12.7314 14.8682 12.959 14.7188 13.1338Z" />
-      <Path d="M20.5698 12.2119C20.874 12.2119 21.1465 12.0762 21.3301 11.8623C21.4795 11.6875 21.5698 11.46 21.5698 11.2119C21.5698 10.6592 21.1221 10.2119 20.5698 10.2119C20.0176 10.2119 19.5698 10.6592 19.5698 11.2119C19.5698 11.7646 20.0176 12.2119 20.5698 12.2119Z" />
-      <Path d="M27.6211 10.6523C27.4375 10.8662 27.165 11.002 26.8608 11.002C26.3086 11.002 25.8608 10.5547 25.8608 10.002C25.8608 9.44922 26.3086 9.00195 26.8608 9.00195C27.4131 9.00195 27.8608 9.44922 27.8608 10.002C27.8608 10.25 27.7705 10.4775 27.6211 10.6523Z" />
-      <Path d="M32.0879 8.2002C32.3921 8.2002 32.6646 8.06445 32.8481 7.85059C32.9976 7.67578 33.0879 7.44824 33.0879 7.2002C33.0879 6.64746 32.6401 6.2002 32.0879 6.2002C31.5356 6.2002 31.0879 6.64746 31.0879 7.2002C31.0879 7.75293 31.5356 8.2002 32.0879 8.2002Z" />
+    <Svg
+      width="46"
+      height="5"
+      viewBox="0 0 46 5"
+      fill={theme.colors.surface.border.gray.subtle}
+      {...styledProps}
+    >
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
     </Svg>
   ) : (
-    <Svg width="35" height="25" viewBox="0 0 35 25" fill="none" {...styledProps}>
+    <Svg width="35" height="6" viewBox="0 0 35 6" fill="none" {...styledProps}>
       <Path
-        d="M1 25V21.3088C1 17.4754 3.71928 14.1808 7.48316 13.4539L27.5168 9.58528C31.2807 8.85845 34 5.56381 34 1.7304V-2.98023e-08"
+        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"
       />