feat(StepGroup): StepGroup Implementation & Documentation (#2131)

* feat: add basic structure

* feat: add click

* feat: code table test

* feat: finish base decision doc

* feat: add alternate api

* feat: make props more prominent

* feat: turn types into table

* feat: add children

* feat: add straight line StepItem

* feat: add dotted line

* feat: save item index logic

* feat: add first and last line trimming

* feat: make interactive

* fix: horizontal heights

* feat: handle StepItemIndicator

* feat: add dotted svgs

* fix: handle dotted line in horizontal

* fix: naming of file

* docs: add user based documentations

* feat: stepper docs

* feat: rename leading prop to marker

* feat: add react router example

* export StepGroup from index.ts

* feat: add jsdoc

* feat: add width prop

* docs: add StepItem playground story

* fix: ts errors

* fix: resolve comments

* fix: add visibility prop to omit from html filter

* fix: dotted line

* fix: spacings and gaps in horizontal orientation

* fix: storybook sorting of marker prop

* fix: trailing prop breaking in storybook orientation horizontal

* fix: spacing of items between dots

* fix: dots spacing without weird math

* fix: spacing without token

* fix: border styles type

* fix: curved dotted lines

* fix: spacings in story

* feat: add padding around to keep focus ring uncut

packages/blade/src/components/Amount/Amount.tsx

@@ -344,8 +344,11 @@ const _Amount = ({
           </BaseText>
         )}
         {isStrikethrough && (
+          // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+          // @ts-ignore: the borderBottomColor error below is thrown here as well
           <BaseBox
-            // @ts-expect-error - intentionally setting the border color to the color prop for this hacky strikethrough
+            // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+            // @ts-ignore- intentionally setting the border color to the color prop for this hacky strikethrough
             borderBottomColor={amountValueColor}
             borderBottomWidth={type === 'body' ? 'thin' : 'thicker'}
             borderBottomStyle="solid"

packages/blade/src/components/Box/BaseBox/baseBoxStyles.ts

@@ -107,6 +107,30 @@ export const getElevationValue = (
       getIn(theme, `elevation.${responsiveElevationValue!}`);
 };
 
+type GetBorderStyleValueReturnType =
+  | CSSObject['borderStyle']
+  | CSSObject['borderTopStyle']
+  | CSSObject['borderBottomStyle']
+  | CSSObject['borderLeftStyle']
+  | CSSObject['borderRightStyle'];
+const getBorderStyleValue = (
+  borderStyle: BaseBoxProps['borderStyle'],
+  breakpoint?: keyof Breakpoints,
+  hasBorder?: boolean,
+  // Using any as return type because borderStyle's type is incompatible with borderBottomStyle. There are ways to fix it but anyway since its internal function. Taking an easy way out
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): GetBorderStyleValueReturnType => {
+  if (borderStyle) {
+    return getResponsiveValue(borderStyle, breakpoint);
+  }
+
+  if (hasBorder) {
+    return 'solid';
+  }
+
+  return undefined;
+};
+
 const getAllProps = (
   props: BaseBoxProps & { theme: Theme },
   breakpoint?: keyof Breakpoints,
@@ -220,17 +244,36 @@ const getAllProps = (
       props.theme,
       breakpoint,
     ),
-    borderStyle: hasBorder ? 'solid' : undefined,
+    borderStyle: getBorderStyleValue(
+      props.borderStyle,
+      breakpoint,
+      Boolean(hasBorder),
+    ) as CSSObject['borderStyle'],
     cursor: getResponsiveValue(props.cursor, breakpoint),
     // Since we only allow 'solid', we can use the same value for all borders if hasBorder is true
     // If hasBorder is false, we need to check each border individually
     ...(!hasBorder && {
-      borderTopStyle: hasBorderTop ? 'solid' : undefined,
-      borderBottomStyle: hasBorderBottom ? 'solid' : undefined,
-      borderLeftStyle: hasBorderLeft ? 'solid' : undefined,
-      borderRightStyle: hasBorderRight ? 'solid' : undefined,
+      borderTopStyle: getBorderStyleValue(
+        props.borderTopStyle,
+        breakpoint,
+        Boolean(hasBorderTop),
+      ) as CSSObject['borderTopStyle'],
+      borderBottomStyle: getBorderStyleValue(
+        props.borderBottomStyle,
+        breakpoint,
+        Boolean(hasBorderBottom),
+      ) as CSSObject['borderBottomStyle'],
+      borderLeftStyle: getBorderStyleValue(
+        props.borderLeftStyle,
+        breakpoint,
+        Boolean(hasBorderLeft),
+      ) as CSSObject['borderLeftStyle'],
+      borderRightStyle: getBorderStyleValue(
+        props.borderRightStyle,
+        breakpoint,
+        Boolean(hasBorderRight),
+      ) as CSSObject['borderRightStyle'],
     }),
-
     touchAction: getResponsiveValue(props.touchAction, breakpoint),
     userSelect: getResponsiveValue(props.userSelect, breakpoint),
     pointerEvents: getResponsiveValue(props.pointerEvents),

packages/blade/src/components/Box/BaseBox/types/propsTypes.ts

@@ -152,6 +152,11 @@ type CommonBoxVisualProps = MakeObjectResponsive<
     | 'transform'
     | 'transformOrigin'
     | 'clipPath'
+    | 'borderStyle'
+    | 'borderTopStyle'
+    | 'borderBottomStyle'
+    | 'borderLeftStyle'
+    | 'borderRightStyle'
   > & {
       /**
        * Sets the elevation for Box
@@ -218,7 +223,8 @@ type StyledPropsBlade = Partial<
         | 'gridColumnEnd'
         | 'gridArea'
       > &
-      Pick<LayoutProps, 'display'>,
+      Pick<LayoutProps, 'display'> &
+      Pick<CommonBoxVisualProps, 'visibility'>,
     '__brand__'
   >
 >;

packages/blade/src/components/Box/Box.tsx

@@ -138,14 +138,19 @@ const makeBoxProps = (
     // Border
     borderWidth: props.borderWidth,
     borderColor: props.borderColor,
+    borderStyle: props.borderStyle,
     borderTopWidth: props.borderTopWidth,
     borderTopColor: props.borderTopColor,
+    borderTopStyle: props.borderTopStyle,
     borderRightWidth: props.borderRightWidth,
     borderRightColor: props.borderRightColor,
+    borderRightStyle: props.borderRightStyle,
     borderBottomWidth: props.borderBottomWidth,
     borderBottomColor: props.borderBottomColor,
+    borderBottomStyle: props.borderBottomStyle,
     borderLeftWidth: props.borderLeftWidth,
     borderLeftColor: props.borderLeftColor,
+    borderLeftStyle: props.borderLeftStyle,
     borderRadius: props.borderRadius,
     borderTopLeftRadius: props.borderTopLeftRadius,
     borderTopRightRadius: props.borderTopRightRadius,

packages/blade/src/components/Box/styledProps/getStyledProps.ts

@@ -75,6 +75,7 @@ const makeStyledProps = (props: StyledPropsInputType): KeysRequired<StyledPropsB
     right: props.right,
     bottom: props.bottom,
     left: props.left,
+    visibility: props.visibility,
   };
 };
 

packages/blade/src/components/Icons/_Svg/Svg/types.ts

@@ -9,4 +9,4 @@ export type SvgProps = {
   width: string;
   fillOpacity?: number;
 } & TestID &
-  Omit<StyledPropsBlade, 'order'>; // Order prop on SVG has different meaning so removing this prop from styledProps
+  Omit<StyledPropsBlade, 'order' | 'visibility'>; // Order prop on SVG has different meaning so removing this prop from styledProps

packages/blade/src/components/Indicator/Indicator.tsx

@@ -21,7 +21,7 @@ type IndicatorCommonProps = {
    *
    * @default neutral
    */
-  color?: FeedbackColors;
+  color?: FeedbackColors | 'primary';
 
   /**
    * Size of the indicator
@@ -74,7 +74,10 @@ const Indicator = ({
   const { theme } = useTheme();
   const childrenString = getStringFromReactText(children);
 
-  const fillColor = theme.colors.feedback.background[color].intense;
+  const fillColor =
+    color === 'primary'
+      ? theme.colors.surface.background.primary.intense
+      : theme.colors.feedback.background[color].intense;
   const getDimension = useCallback((): Dimensions => {
     switch (size) {
       case 'small':

packages/blade/src/components/StepGroup/StepGroup.native.tsx

@@ -0,0 +1,14 @@
+import type { StepGroupProps } from './types';
+import { Text } from '~components/Typography';
+import { throwBladeError } from '~utils/logger';
+
+const StepGroup = (_props: StepGroupProps): React.ReactElement => {
+  throwBladeError({
+    message: 'StepGroup is not yet implemented for native',
+    moduleName: 'StepGroup',
+  });
+
+  return <Text>StepGroup Component is not available for Native mobile apps.</Text>;
+};
+
+export { StepGroup };