@bitrise/bitkit 10.2.3 → 10.3.0

package/package.json

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

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

@@ -1,7 +1,9 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { Story, ComponentMeta } from '@storybook/react';
 import { useDisclosure } from '@chakra-ui/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Button from '../Button/Button';
+import Link from '../Link/Link';
 import Dialog, { DialogProps } from './Dialog';
 import DialogBody from './DialogBody';
 import DialogFooter from './DialogFooter';
@@ -11,14 +13,19 @@ export default {
   component: Dialog,
 } as ComponentMeta<typeof Dialog>;
 
-const TextContent = () => (
-  <p>
-    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
-    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
-    into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
-    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-    PageMaker including versions of Lorem Ipsum.
-  </p>
+const TextContent = ({ lotsOfContent = false }: { lotsOfContent?: boolean }) => (
+  <>
+    {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <p key={index}>
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
+        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
+        the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
+        release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.
+      </p>
+    ))}
+  </>
 );
 
 interface StoryType extends DialogProps {
@@ -26,18 +33,24 @@ interface StoryType extends DialogProps {
 }
 
 export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryType) => {
+  const { variant } = props;
   const { isOpen, onClose, onOpen } = useDisclosure();
 
-  return (
-    <>
-      <Button onClick={onOpen}>Open Dialog</Button>
-
-      <Dialog {...props} isOpen={isOpen} onClose={onClose}>
+  const getContent = () => {
+    if (variant === 'empty') {
+      return (
+        <DialogBody padding="0">
+          <TextContent lotsOfContent={lotsOfContent} />
+          <Link as="button" colorScheme="purple" onClick={onClose} marginTop="16">
+            Link or button or anything to close this Dialog with onClick
+          </Link>
+        </DialogBody>
+      );
+    }
+    return (
+      <>
         <DialogBody>
-          {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <TextContent key={index} />
-          ))}
+          <TextContent lotsOfContent={lotsOfContent} />
         </DialogBody>
         <DialogFooter>
           <Button marginRight="auto" variant="tertiary">
@@ -46,6 +59,15 @@ export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryTy
           <Button variant="secondary">Secondary</Button>
           <Button>Primary</Button>
         </DialogFooter>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open Dialog</Button>
+      <Dialog padding={variant === 'empty' ? '16' : '0'} {...props} isOpen={isOpen} onClose={onClose}>
+        {getContent()}
       </Dialog>
     </>
   );

package/src/Components/Dialog/Dialog.tsx

@@ -21,6 +21,7 @@ export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBeh
   scrollBehavior?: 'inside' | 'outside';
   title: string;
   trapFocus?: boolean;
+  variant?: 'default' | 'empty';
 }
 
 const Dialog = ({
@@ -33,6 +34,7 @@ const Dialog = ({
   size,
   title,
   trapFocus,
+  variant,
   ...rest
 }: DialogProps) => {
   const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
@@ -51,14 +53,18 @@ const Dialog = ({
     >
       <ModalOverlay />
       <ModalContent data-testid={dataTestid} {...rest}>
-        <ModalHeader>
-          <Text as="h1" size="5">
-            {title}
-          </Text>
-        </ModalHeader>
-        <ModalCloseButton isDisabled={!isClosable}>
-          <Icon name="CloseSmall" />
-        </ModalCloseButton>
+        {variant !== 'empty' && (
+          <>
+            <ModalHeader>
+              <Text as="h1" size="5">
+                {title}
+              </Text>
+            </ModalHeader>
+            <ModalCloseButton isDisabled={!isClosable}>
+              <Icon name="CloseSmall" />
+            </ModalCloseButton>
+          </>
+        )}
         {children}
       </ModalContent>
     </Modal>
@@ -70,6 +76,7 @@ Dialog.defaultProps = {
   scrollBehavior: 'outside',
   size: 'medium',
   trapFocus: true,
+  variant: 'default',
 } as DialogProps;
 
 export default Dialog;