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

package/package.json

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

package/src/Components/Transitions/Fade.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useDisclosure } from '@chakra-ui/react';
+import Button from '../Button/Button';
+import Box from '../Box/Box';
+import Fade from './Fade';
+
+export default {
+  title: 'Components/Fade',
+  component: Fade,
+} as ComponentMeta<typeof Fade>;
+
+export const WithProps: ComponentStory<typeof Fade> = (props) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  return (
+    <Box height="200">
+      <Button onClick={onToggle}>Toggle fade transition</Button>
+
+      <Fade in={isOpen} {...props}>
+        <Box p="32" color="neutral.10" mt="4" bg="neutral.90">
+          Fade
+        </Box>
+      </Fade>
+    </Box>
+  );
+};

package/src/Components/Transitions/Fade.tsx

@@ -0,0 +1,12 @@
+import { Fade as ChakraFade, FadeProps, forwardRef } from '@chakra-ui/react';
+
+/**
+ * Fade is a transition component
+ */
+const Fade = forwardRef<FadeProps, 'div'>((props, ref) => {
+  return <ChakraFade {...props} ref={ref} />;
+});
+
+export type { FadeProps };
+
+export default Fade;

package/src/index.ts

@@ -98,3 +98,6 @@ export { default as DialogBody } from './Components/Dialog/DialogBody';
 
 export type { DialogFooterProps } from './Components/Dialog/DialogFooter';
 export { default as DialogFooter } from './Components/Dialog/DialogFooter';
+
+export type { FadeProps } from './Components/Transitions/Fade';
+export { default as Fade } from './Components/Transitions/Fade';