@bitrise/bitkit 10.33.0-alpha-chakra.2 → 10.33.0-alpha-chakra.3

package/package.json

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

package/src/Components/ProgressBitbot/ProgressBitbot.stories.tsx

@@ -0,0 +1,12 @@
+import ProgressBitbot from './ProgressBitbot';
+
+export default {
+  component: ProgressBitbot,
+};
+
+export const WithProps = {
+  args: {
+    content: 'Loading...',
+    size: 64,
+  },
+};

package/src/{Old/Progress → Components/ProgressBitbot}/ProgressBitbot.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { Props as BaseProps } from '../Base/Base';
-import Text from '../../Components/Text/Text';
+import { forwardRef } from '@chakra-ui/react';
+import Box, { BoxProps } from '../Box/Box';
+import Text from '../Text/Text';
 
-export interface Props extends BaseProps {
+export interface ProgressBitbotProps extends BoxProps {
   /**
    * Message that appears underneath Bitbot to help
    * indicate what is progressing.
@@ -11,7 +11,7 @@ export interface Props extends BaseProps {
   /**
    * The size of the Bitbot progress indicator.
    */
-  size?: string;
+  size?: BoxProps['width'];
 }
 
 const alternate = (a: string, b: string, length: number) =>
@@ -58,12 +58,12 @@ const mouth = alternate(mouth0, mouth1, 7);
 /**
  * A playful indeterminate progress indicator.
  */
-const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
+const ProgressBitbot = forwardRef<ProgressBitbotProps, 'div'>((props, ref) => {
   const { content, size, ...rest } = props;
 
   return (
-    <Text {...rest} textAlign="center">
-      <svg fill="currentColor" height={size} viewBox="0 0 24 24" width={size}>
+    <Box {...rest} ref={ref}>
+      <Box as="svg" fill="currentColor" height={size} viewBox="0 0 24 24" width={size} marginX="auto">
         <g fill="currentColor" fillRule="evenodd" stroke="none" strokeWidth="1">
           <path d={dot0}>
             <animate
@@ -156,19 +156,19 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
             />
           </path>
         </g>
-      </svg>
+      </Box>
 
       {content && (
         <Text textAlign="center" size="1" textTransform="uppercase">
           {content}
         </Text>
       )}
-    </Text>
+    </Box>
   );
-};
+});
 
 ProgressBitbot.defaultProps = {
-  size: '64px',
+  size: 64,
 };
 
 export default ProgressBitbot;

package/src/index.ts

@@ -216,3 +216,6 @@ export { default as SkeletonBox } from './Components/Skeleton/SkeletonBox';
 
 export type { ProgressBarProps } from './Components/ProgressBar/ProgressBar';
 export { default as ProgressBar } from './Components/ProgressBar/ProgressBar';
+
+export type { ProgressBitbotProps } from './Components/ProgressBitbot/ProgressBitbot';
+export { default as ProgressBitbot } from './Components/ProgressBitbot/ProgressBitbot';

package/src/old.ts

@@ -18,8 +18,5 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
 
-export type { Props as ProgressBitbotProps } from './Old/Progress/ProgressBitbot';
-export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
-
 export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
 export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';