@bitrise/bitkit 10.13.0 → 10.14.0

package/package.json

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

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

@@ -0,0 +1,36 @@
+import { Story, ComponentMeta } from '@storybook/react';
+import { useDisclosure } from '@chakra-ui/react';
+import Button from '../Button/Button';
+import LightBox, { LightBoxProps } from './LightBox';
+
+export default {
+  title: 'Components/LightBox',
+  component: LightBox,
+} as ComponentMeta<typeof LightBox>;
+
+export const WithProps: Story<LightBoxProps> = ({ ...props }: LightBoxProps) => {
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  const getContent = () => {
+    return (
+      <iframe
+        id="ytplayer"
+        title="Intro to Bitrise"
+        width="100%"
+        height="500"
+        src="https://www.youtube.com/embed/JrCn9xWQ7IM"
+        frameBorder="0"
+        allowFullScreen
+      />
+    );
+  };
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open LightBox</Button>
+      <LightBox padding="0" {...props} isOpen={isOpen} onClose={onClose}>
+        {getContent()}
+      </LightBox>
+    </>
+  );
+};

package/src/Components/LightBox/LightBox.tsx

@@ -0,0 +1,22 @@
+import { Modal, ModalOverlay, ModalContent, usePrefersReducedMotion, HTMLChakraProps } from '@chakra-ui/react';
+
+export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
+  dataTestid?: string;
+  isOpen: boolean;
+  onClose(): void;
+}
+
+const LightBox = ({ children, dataTestid, isOpen, onClose, ...rest }: LightBoxProps) => {
+  const prefersReducedMotion = usePrefersReducedMotion();
+
+  return (
+    <Modal isOpen={isOpen} motionPreset={prefersReducedMotion ? 'none' : 'scale'} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent borderRadius="0" data-testid={dataTestid} {...rest}>
+        {children}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LightBox;

package/src/index.ts

@@ -159,3 +159,6 @@ export { default as Accordion } from './Components/Accordion/Accordion';
 
 export type { AccordionItemProps } from './Components/Accordion/AccordionItem';
 export { default as AccordionItem } from './Components/Accordion/AccordionItem';
+
+export type { LightBoxProps } from './Components/LightBox/LightBox';
+export { default as LightBox } from './Components/LightBox/LightBox';