@bitrise/bitkit 10.16.1 → 10.16.2

package/package.json

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

package/src/Components/LightBox/LightBox.stories.tsx

@@ -1,6 +1,7 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { useDisclosure } from '@chakra-ui/react';
 import Button from '../Button/Button';
+import AspectRatio from '../AspectRatio/AspectRatio';
 import LightBox, { LightBoxProps } from './LightBox';
 
 export default {
@@ -13,15 +14,15 @@ export const WithProps: Story<LightBoxProps> = ({ ...props }: LightBoxProps) =>
 
   const getContent = () => {
     return (
-      <iframe
-        id="ytplayer"
-        title="Intro to Bitrise"
-        width="100%"
-        height="500"
-        src="https://www.youtube.com/embed/JrCn9xWQ7IM"
-        frameBorder="0"
-        allowFullScreen
-      />
+      <AspectRatio ratio={props.size === 'full' ? 1.33 : 1.77}>
+        <iframe
+          id="ytplayer"
+          title="Intro to Bitrise"
+          src="https://www.youtube.com/embed/JrCn9xWQ7IM"
+          frameBorder="0"
+          allowFullScreen
+        />
+      </AspectRatio>
     );
   };
 
@@ -34,3 +35,5 @@ export const WithProps: Story<LightBoxProps> = ({ ...props }: LightBoxProps) =>
     </>
   );
 };
+
+WithProps.args = { ...LightBox.defaultProps };

package/src/Components/LightBox/LightBox.tsx

@@ -1,16 +1,26 @@
-import { Modal, ModalOverlay, ModalContent, usePrefersReducedMotion, HTMLChakraProps } from '@chakra-ui/react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  useBreakpointValue,
+  usePrefersReducedMotion,
+  HTMLChakraProps,
+} from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 
 export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
   dataTestid?: string;
+  size?: 'small' | 'medium' | 'large' | 'full';
   isOpen: boolean;
   onClose(): void;
 }
 
-const LightBox = ({ children, dataTestid, isOpen, onClose, ...rest }: LightBoxProps) => {
+const LightBox = ({ children, dataTestid, size, isOpen, onClose, ...rest }: LightBoxProps) => {
   const prefersReducedMotion = usePrefersReducedMotion();
+  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
 
   return (
-    <Modal isOpen={isOpen} motionPreset={prefersReducedMotion ? 'none' : 'scale'} onClose={onClose}>
+    <Modal isOpen={isOpen} motionPreset={prefersReducedMotion ? 'none' : 'scale'} onClose={onClose} size={dialogSize}>
       <ModalOverlay />
       <ModalContent borderRadius="0" data-testid={dataTestid} {...rest}>
         {children}
@@ -19,4 +29,8 @@ const LightBox = ({ children, dataTestid, isOpen, onClose, ...rest }: LightBoxPr
   );
 };
 
+LightBox.defaultProps = {
+  size: 'large',
+} as LightBoxProps;
+
 export default LightBox;