@bitrise/bitkit 9.39.0 → 9.40.0-alpha-chakra.2

package/package.json

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

package/src/Components/CloseButton/CloseButton.theme.ts

@@ -3,6 +3,14 @@ const sizes = {
   medium: { w: '32', h: '32' },
   small: { w: '24', h: '24' },
 };
+
+// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
+const _disabled = {
+  cursor: 'not-allowed',
+  opacity: '0.4',
+  background: 'transparent',
+};
+
 const CloseButtonTheme = {
   baseStyle({
     colorScheme,
@@ -19,6 +27,7 @@ const CloseButtonTheme = {
         _hover: { bg: 'neutral.95' },
         _active: { bg: 'neutral.90' },
         ...sizes[size],
+        _disabled,
       };
     }
     return {
@@ -28,6 +37,7 @@ const CloseButtonTheme = {
       _hover: { bg: `${colorScheme}.93` },
       _active: { bg: `${colorScheme}.90` },
       ...sizes[size],
+      _disabled,
     };
   },
   defaultProps: { colorScheme: 'neutral', size: 'small' },

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

@@ -1,5 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { useDisclosure } from '@chakra-ui/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
 import Button from '../Button/Button';
 import Dialog, { DialogProps } from './Dialog';
 import DialogBody from './DialogBody';
@@ -50,10 +51,10 @@ export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryTy
   );
 };
 
-WithProps.args = {
+WithProps.args = sortObjectByKey({
   ...Dialog.defaultProps,
   title: 'Title',
   lotsOfContent: false,
   dataTestid: 'test-modal',
   trapFocus: false,
-};
+});

package/src/Components/Dialog/Dialog.tsx

@@ -12,6 +12,7 @@ import Text from '../Text/Text';
 
 export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
   dataTestid?: string;
+  isClosable?: boolean;
   isOpen: boolean;
   onClose(): void;
   size?: 'small' | 'medium' | 'large' | 'full';
@@ -23,6 +24,7 @@ export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBeh
 const Dialog = ({
   children,
   dataTestid,
+  isClosable,
   isOpen,
   onClose,
   scrollBehavior,
@@ -34,9 +36,10 @@ const Dialog = ({
   const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
   return (
     <Modal
+      closeOnEsc={isClosable}
       closeOnOverlayClick={false}
       isOpen={isOpen}
-      onClose={onClose}
+      onClose={isClosable ? onClose : () => {}}
       scrollBehavior={scrollBehavior}
       size={dialogSize}
       trapFocus={trapFocus}
@@ -48,7 +51,7 @@ const Dialog = ({
             {title}
           </Text>
         </ModalHeader>
-        <ModalCloseButton>
+        <ModalCloseButton isDisabled={!isClosable}>
           <Icon name="CloseSmall" />
         </ModalCloseButton>
         {children}
@@ -58,6 +61,7 @@ const Dialog = ({
 };
 
 Dialog.defaultProps = {
+  isClosable: true,
   scrollBehavior: 'outside',
   size: 'medium',
   trapFocus: true,

package/src/Components/Image/Image.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Image from './Image';
+
+export default {
+  title: 'Components/Image',
+  component: Image,
+} as ComponentMeta<typeof Image>;
+
+const Template: ComponentStory<typeof Image> = (props) => <Image {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  alt: 'Bitrise office',
+  src: 'bitrise_office.jpg',
+};

package/src/Components/Image/Image.tsx

@@ -0,0 +1,12 @@
+import { Image as ChakraImage, ImageProps, forwardRef } from '@chakra-ui/react';
+
+/**
+ * The Image component is used to display images with support for fallback. (Default callback not implemented yet)
+ */
+const Image = forwardRef<ImageProps, 'img'>((props, ref) => {
+  return <ChakraImage {...props} ref={ref} />;
+});
+
+export type { ImageProps };
+
+export default Image;

package/src/index.ts

@@ -129,3 +129,6 @@ export { default as Radio } from './Components/Form/Radio/Radio';
 
 export type { RadioGroupProps } from './Components/Form/Radio/RadioGroup';
 export { default as RadioGroup } from './Components/Form/Radio/RadioGroup';
+
+export type { ImageProps } from './Components/Image/Image';
+export { default as Image } from './Components/Image/Image';

package/src/old.ts

@@ -79,9 +79,6 @@ export { default as Grid } from './Old/Grid/Grid';
 export type { Props as HamburgerProps } from './Old/Hamburger/Hamburger';
 export { default as Hamburger } from './Old/Hamburger/Hamburger';
 
-export type { Props as ImageProps } from './Old/Image/Image';
-export { default as Image } from './Old/Image/Image';
-
 export type { Props as InputProps } from './Old/Input/Input';
 export { default as Input } from './Old/Input/Input';