@bitrise/bitkit 12.99.0 → 12.100.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.99.0",
+  "version": "12.100.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/ProgressIndicator/ProgressIndicator.theme.ts

@@ -1,29 +1,41 @@
 import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
 
-const itemHelpers = createMultiStyleConfigHelpers(['container', 'stage', 'iconWithLine', 'line', 'label']);
+const itemHelpers = createMultiStyleConfigHelpers([
+  'container',
+  'stage',
+  'iconWithLine',
+  'line',
+  'label',
+  'labelContainer',
+]);
 
 const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
   baseStyle: {
     container: {
       display: 'flex',
+      width: '100%',
     },
     iconWithLine: {
-      display: 'flex',
+      display: 'grid',
     },
     label: {
-      alignSelf: 'flex-start',
       lineHeight: '1.5rem',
-      maxWidth: 'max(8rem, calc(100% - 1rem))',
+      maxWidth: '8rem',
       overflow: 'hidden',
+      textAlign: 'center',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
     },
+    labelContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+    },
     line: {
       flexGrow: '1',
     },
     stage: {
       display: 'flex',
-      gap: '1rem',
+      gap: '8',
     },
   },
   variants: {
@@ -32,6 +44,9 @@ const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
         flexDir: 'row',
       },
       iconWithLine: {
+        gridTemplateColumns: '1fr 24px 1fr',
+      },
+      labelContainer: {
         flexDir: 'row',
       },
       line: {
@@ -46,11 +61,16 @@ const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
         flexDir: 'column',
       },
       iconWithLine: {
+        gridTemplateRows: '24px 1fr',
+        minHeight: '62px',
+      },
+      labelContainer: {
         flexDir: 'column',
+        justifyContent: 'start',
       },
       line: {
-        height: '1.5rem',
-        marginX: 'calc(.75rem - 1px)',
+        height: '100%',
+        justifySelf: 'center',
       },
       stage: {
         flexDir: 'row',

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -1,99 +1,205 @@
+import { useMemo } from 'react';
 import { useMultiStyleConfig } from '@chakra-ui/react';
 import Box from '../Box/Box';
 import Icon, { IconProps } from '../Icon/Icon';
-import Text from '../Text/Text';
+import Text, { TextProps } from '../Text/Text';
 import Divider, { DividerProps } from '../Divider/Divider';
 import Link, { LinkProps } from '../Link/Link';
 
+type ProgressStage = {
+  label: string;
+  isInvalid?: boolean;
+  isDisabled?: boolean;
+  helperText?: string;
+  action?: {
+    onClick?: () => void;
+    href?: LinkProps['href'];
+    isExternal?: LinkProps['isExternal'];
+  };
+};
 export type ProgressIndicatorProps = {
-  stages: {
-    label: string;
-    isInvalid?: boolean;
-    isDisabled?: boolean;
-    action?: {
-      label: string;
-      onClick?: () => void;
-      href?: LinkProps['href'];
-      isExternal?: LinkProps['isExternal'];
-    };
-  }[];
+  stages: ProgressStage[];
   activeStageIndex: number;
+} & (
+  | {
+      variant: 'horizontal';
+      extendLines?: boolean;
+    }
+  | {
+      variant: 'vertical';
+    }
+);
+
+type RenderStage = (ProgressStage & { spacer?: never }) | { spacer: true };
+
+const SegmentLine = ({
+  activeSegmentIndex,
+  segmentIndex,
+  spacer,
+  variant,
+}: {
+  segmentIndex: number;
+  activeSegmentIndex: number;
   variant: 'horizontal' | 'vertical';
+  spacer?: true;
+}) => {
+  const style = useMultiStyleConfig('ProgressIndicator', { variant });
+  let props: {
+    color: DividerProps['color'];
+    variant?: DividerProps['variant'];
+  } = { color: 'border.minimal' };
+
+  if (segmentIndex < activeSegmentIndex) {
+    props = { ...props, color: 'border.selected' };
+  } else if (segmentIndex === activeSegmentIndex) {
+    props = {
+      ...props,
+      color: 'border.selected',
+      variant: 'dashed',
+    };
+  }
+  return (
+    <Divider
+      gridColumn={spacer ? '1/4' : undefined}
+      orientation={variant === 'horizontal' ? 'horizontal' : 'vertical'}
+      size="2"
+      sx={style.line}
+      {...props}
+    />
+  );
 };
 
-const ProgressIndicator = ({ activeStageIndex, stages, variant }: ProgressIndicatorProps): JSX.Element => {
+const RealStage = ({
+  activeSegmentIndex,
+  extendLines,
+  lastBlock,
+  segmentIndex,
+  stage: { action, helperText, isDisabled, isInvalid, label },
+  variant,
+}: Pick<ProgressIndicatorProps, 'variant'> & {
+  segmentIndex: number;
+  activeSegmentIndex: number;
+  stage: ProgressStage;
+  lastBlock: boolean;
+  extendLines: boolean;
+}) => {
+  let iconName: IconProps['name'];
+  let iconColor: IconProps['color'] = 'icon.interactive';
+  let textColor: TextProps['color'] = 'text.secondary';
+  let iconTransform: IconProps['transform'];
+
+  if (segmentIndex < activeSegmentIndex) {
+    iconName = 'BuildstatusSuccessfulSolid';
+  } else if (segmentIndex === activeSegmentIndex) {
+    iconName = 'StageCurrent';
+    if (variant === 'vertical') iconTransform = 'rotate(90deg)';
+    textColor = 'text.primary';
+  } else {
+    iconName = 'StageIncomplete';
+    iconColor = 'icon.tertiary';
+  }
+  if (isInvalid) {
+    iconName = 'StepstatusWarning';
+    iconColor = 'icon.negative';
+  }
+  if (isDisabled) {
+    iconColor = 'icon.disabled';
+    textColor = 'text.disabled';
+  }
   const style = useMultiStyleConfig('ProgressIndicator', { variant });
 
   return (
-    <Box sx={style.container}>
-      {stages.map(({ action, isDisabled, isInvalid, label }, index, array) => {
-        let iconName: IconProps['name'];
-        let iconColor: IconProps['color'] = 'purple.50';
-
-        let dividerProps: {
-          color: DividerProps['color'];
-          variant?: DividerProps['variant'];
-        } = { color: 'neutral.93' };
+    <>
+      <Box sx={style.iconWithLine}>
+        {variant === 'horizontal' &&
+          (segmentIndex > 0 ? (
+            <SegmentLine
+              activeSegmentIndex={activeSegmentIndex}
+              segmentIndex={segmentIndex - (extendLines ? 2 : 1)}
+              variant={variant}
+            />
+          ) : (
+            <div />
+          ))}
+        <Icon color={iconColor} name={iconName} transform={iconTransform} />
+        {lastBlock ? (
+          <div />
+        ) : (
+          <SegmentLine activeSegmentIndex={activeSegmentIndex} segmentIndex={segmentIndex} variant={variant} />
+        )}
+      </Box>
+      <Box sx={style.labelContainer}>
+        {action && !isDisabled ? (
+          <Link
+            as={action.href ? 'a' : 'button'}
+            colorScheme="purple"
+            href={action.href}
+            isExternal={action.isExternal}
+            onClick={action.onClick}
+            size="2"
+            sx={style.label}
+          >
+            {label}
+          </Link>
+        ) : (
+          <Text color={textColor} size="2" sx={style.label}>
+            {label}
+          </Text>
+        )}
+        {variant === 'vertical' && helperText && (
+          <Text color="text.secondary" fontSize="1" lineHeight="1rem">
+            {helperText}
+          </Text>
+        )}
+      </Box>
+    </>
+  );
+};
 
-        if (index < activeStageIndex) {
-          iconName = 'BuildstatusSuccessful';
-          dividerProps = { ...dividerProps, color: 'purple.50' };
-        } else if (index === activeStageIndex) {
-          iconName = 'StageCurrent';
-          dividerProps = {
-            ...dividerProps,
-            color: 'purple.50',
-            variant: 'dashed',
-          };
-        } else {
-          iconName = 'StageIncomplete';
-          iconColor = 'neutral.60';
-        }
-        if (isInvalid) {
-          iconName = 'StepstatusWarning';
-          iconColor = 'red.50';
-        }
-        if (isDisabled) {
-          iconColor = 'neutral.80';
-        }
+const ProgressIndicator = ({ activeStageIndex, stages, ...rest }: ProgressIndicatorProps): JSX.Element => {
+  const style = useMultiStyleConfig('ProgressIndicator', { variant: rest.variant });
+  const extendLines = Boolean(rest.variant === 'horizontal' && rest.extendLines);
+  const activeSegmentIndex = extendLines ? activeStageIndex * 2 : activeStageIndex;
 
-        const lastBlock = index === array.length - 1;
+  const renderStages = useMemo((): RenderStage[] => {
+    if (!extendLines) return stages;
+    const extendedStages: RenderStage[] = stages.map((stage) => ({ ...stage, type: 'real' }));
+    for (let i = 1; i < stages.length * 2 - 1; i += 2) {
+      extendedStages.splice(i, 0, { spacer: true });
+    }
+    return extendedStages;
+  }, [extendLines, stages]);
+  return (
+    <Box sx={style.container}>
+      {renderStages.map((stage, segmentIndex, array) => {
+        const lastBlock = segmentIndex === array.length - 1;
 
         return (
           <Box
             // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            flexBasis={lastBlock ? undefined : `${100 / array.length}%`}
-            flexGrow={lastBlock ? undefined : '1'}
+            key={segmentIndex}
+            flex="1"
             sx={style.stage}
           >
-            <Box sx={style.iconWithLine}>
-              <Icon color={iconColor} name={iconName} />
-              {!lastBlock && (
-                <Divider
-                  orientation={variant === 'horizontal' ? 'horizontal' : 'vertical'}
-                  size="2"
-                  sx={style.line}
-                  {...dividerProps}
+            {!stage.spacer && (
+              <RealStage
+                activeSegmentIndex={activeSegmentIndex}
+                extendLines={Boolean(extendLines)}
+                lastBlock={lastBlock}
+                segmentIndex={segmentIndex}
+                stage={stage}
+                variant={rest.variant}
+              />
+            )}
+            {stage.spacer && (
+              <Box sx={style.iconWithLine}>
+                <SegmentLine
+                  activeSegmentIndex={activeSegmentIndex}
+                  segmentIndex={segmentIndex - 1}
+                  spacer
+                  variant="horizontal"
                 />
-              )}
-            </Box>
-            {action && !isDisabled ? (
-              <Link
-                as={action.href ? 'a' : 'button'}
-                colorScheme="purple"
-                href={action.href}
-                isExternal={action.isExternal}
-                onClick={action.onClick}
-                size="2"
-                sx={style.label}
-              >
-                {label}
-              </Link>
-            ) : (
-              <Text color={isDisabled ? 'neutral.80' : 'neutral.10'} size="2" sx={style.label}>
-                {label}
-              </Text>
+              </Box>
             )}
           </Box>
         );