@bitrise/bitkit 9.28.0 → 9.29.0-alpha-dot-migration.1

package/package.json

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

package/src/Components/Dialog/Dialog.stories.tsx

@@ -53,4 +53,5 @@ WithProps.args = {
   ...Dialog.defaultProps,
   title: 'Title',
   lotsOfContent: false,
+  dataTestid: 'test-modal',
 };

package/src/Components/Dialog/Dialog.tsx

@@ -14,7 +14,7 @@ import Text from '../Text/Text';
 type DialogState = {
   isOpen: boolean;
   onClose(): void;
-  onOpen(): void;
+  onOpen?(): void;
 };
 
 export const useDialog = (): DialogState => {
@@ -27,17 +27,18 @@ export const useDialog = (): DialogState => {
 };
 export interface DialogProps {
   children: ReactNode;
+  dataTestid?: string;
   size?: 'small' | 'medium' | 'large';
   state: DialogState;
   title: string;
 }
 
-const Dialog = ({ children, state, size, title }: DialogProps) => {
+const Dialog = ({ children, dataTestid, state, size, title }: DialogProps) => {
   const dialogSize = useBreakpointValue({ mobile: 'full', desktop: size });
   return (
     <Modal closeOnOverlayClick={false} isOpen={state.isOpen} onClose={state.onClose} size={dialogSize}>
       <ModalOverlay />
-      <ModalContent>
+      <ModalContent data-testid={dataTestid}>
         <ModalHeader>
           <Text as="h1" size="5">
             {title}

package/src/Components/Dot/Dot.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Dot from './Dot';
+
+export default {
+  title: 'Components/Dot',
+  component: Dot,
+} as ComponentMeta<typeof Dot>;
+
+const Template: ComponentStory<typeof Dot> = ({ ...props }) => <Dot {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  size: 32,
+  backgroundColor: 'green.50',
+};

package/src/Components/Dot/Dot.tsx

@@ -0,0 +1,14 @@
+import { BoxProps, forwardRef } from '@chakra-ui/react';
+import Box from '../Box/Box';
+
+export interface DotProps extends BoxProps {
+  size: BoxProps['width'];
+}
+
+const Dot = forwardRef<DotProps, 'div'>((props, ref) => {
+  const { size, ...rest } = props;
+
+  return <Box ref={ref} width={size} height={size} borderRadius="50%" aria-hidden {...rest} />;
+});
+
+export default Dot;

package/src/Components/Notification/Notification.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import {
   Alert as ChakraAlert,
   AlertTitle as NotificationTitle,

package/src/index.ts

@@ -81,6 +81,9 @@ export { default as MenuItem } from './Components/Menu/MenuItem';
 export type { MenuListProps } from './Components/Menu/MenuList';
 export { default as MenuList } from './Components/Menu/MenuList';
 
+export type { DotProps } from './Components/Dot/Dot';
+export { default as Dot } from './Components/Dot/Dot';
+
 export { default as useToast } from './Components/Toast/Toast';
 
 export type { EmptyStateProps } from './Components/EmptyState/EmptyState';

package/src/old.ts

@@ -52,9 +52,6 @@ export { default as Checkbox } from './Old/Checkbox/Checkbox';
 export type { Props as DatePickerProps } from './Old/DatePicker/DatePicker';
 export { default as DatePicker } from './Old/DatePicker/DatePicker';
 
-export type { Props as DotProps } from './Old/Dot/Dot';
-export { default as Dot } from './Old/Dot/Dot';
-
 export type { Props as DropdownProps } from './Old/Dropdown/Dropdown';
 export { default as Dropdown } from './Old/Dropdown/Dropdown';