@bitrise/bitkit 12.64.0 → 12.65.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.64.0",
+  "version": "12.65.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/CodeSnippet/CodeSnippet.theme.ts

@@ -3,6 +3,7 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
 const baseStyle = defineStyle(({ isCopiable }) => {
   const style = {
     fontFamily: 'mono',
+    fontSize: '14px',
     py: '4',
     px: '8',
     borderRadius: '2',

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

@@ -0,0 +1,62 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+
+const itemHelpers = createMultiStyleConfigHelpers(['container', 'stage', 'iconWithLine', 'line', 'label']);
+
+const ProgressIndicatorTheme = itemHelpers.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      display: 'flex',
+    },
+    stage: {
+      display: 'flex',
+      gap: '1rem',
+    },
+    iconWithLine: {
+      display: 'flex',
+    },
+    line: {
+      flexGrow: '1',
+    },
+    label: {
+      size: '2',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      maxWidth: 'calc(100% - 1rem)',
+      lineHeight: '1.5rem',
+    },
+  },
+  variants: {
+    vertical: {
+      container: {
+        flexDir: 'column',
+      },
+      stage: {
+        flexDir: 'row',
+      },
+      iconWithLine: {
+        flexDir: 'column',
+      },
+      line: {
+        marginX: 'calc(.75rem - 1px)',
+        height: '1.5rem',
+      },
+    },
+    horizontal: {
+      container: {
+        flexDir: 'row',
+      },
+      stage: {
+        flexDir: 'column',
+      },
+      iconWithLine: {
+        flexDir: 'row',
+      },
+      line: {
+        marginY: 'calc(.75rem - 1px)',
+      },
+    },
+  },
+});
+
+export default ProgressIndicatorTheme;

package/src/Components/ProgressIndicator/ProgressIndicator.tsx

@@ -0,0 +1,103 @@
+import { createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+import Icon, { IconProps } from '../Icon/Icon';
+import Text from '../Text/Text';
+import Divider, { DividerProps } from '../Divider/Divider';
+import Link, { LinkProps } from '../Link/Link';
+
+const [ProgressIndicatorContext] = createStylesContext('ProgressIndicator');
+
+type ProgressIndicatorProps = {
+  stages: {
+    label: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    action?: {
+      label: string;
+      onClick?: () => void;
+      href?: LinkProps['href'];
+      isExternal?: LinkProps['isExternal'];
+    };
+  }[];
+  activeStageIndex: number;
+  variant: 'horizontal' | 'vertical';
+};
+
+const ProgressIndicator = ({ stages, activeStageIndex, variant }: ProgressIndicatorProps): JSX.Element => {
+  const style = useMultiStyleConfig('ProgressIndicator', { variant });
+
+  return (
+    <ProgressIndicatorContext value={style}>
+      <Box sx={style.container}>
+        {stages.map(({ label, isInvalid, isDisabled, action }, index, array) => {
+          let iconName: IconProps['name'];
+          let iconColor: IconProps['color'] = 'purple.50';
+
+          let dividerProps: {
+            color: DividerProps['color'];
+            variant?: DividerProps['variant'];
+          } = { color: 'neutral.93' };
+
+          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';
+          }
+
+          return (
+            <Box
+              width={variant === 'horizontal' ? `${100 / array.length}%` : 'auto'}
+              sx={style.stage}
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+            >
+              <Box sx={style.iconWithLine}>
+                <Icon name={iconName} color={iconColor} />
+                <Divider
+                  sx={style.line}
+                  size="2"
+                  orientation={variant === 'horizontal' ? 'horizontal' : 'vertical'}
+                  {...dividerProps}
+                />
+              </Box>
+              {action && !isDisabled ? (
+                <Link
+                  colorScheme="purple"
+                  as={action.href ? 'a' : 'button'}
+                  href={action.href}
+                  onClick={action.onClick}
+                  isExternal={action.isExternal}
+                  sx={style.label}
+                >
+                  {label}
+                </Link>
+              ) : (
+                <Text color={isDisabled ? 'neutral.80' : 'neutral.10'} sx={style.label}>
+                  {label}
+                </Text>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+    </ProgressIndicatorContext>
+  );
+};
+
+export default ProgressIndicator;

package/src/theme.ts

@@ -31,6 +31,7 @@ import DatePickerDay from './Components/DatePicker/DatePickerDay.theme';
 import NumberInput from './Components/NumberInput/NumberInput.theme';
 import Skeleton from './Components/Skeleton/Skeleton.theme';
 import ProgressBar from './Components/ProgressBar/ProgressBar.theme';
+import ProgressIndicator from './Components/ProgressIndicator/ProgressIndicator.theme';
 import Slider from './Components/Slider/Slider.theme';
 import Sidebar from './Components/Sidebar/Sidebar.theme';
 import SidebarItem from './Components/Sidebar/SidebarItem.theme';
@@ -125,6 +126,7 @@ const theme = {
     Sidebar,
     SidebarItem,
     Progress: ProgressBar,
+    ProgressIndicator,
     Slider,
     SegmentedControl,
     Tag,