@bitrise/bitkit 9.30.0 → 9.31.0

package/package.json

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

package/src/Components/Popover/Popover.stories.tsx

@@ -0,0 +1,19 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import Button from '../Button/Button';
+import Popover from './Popover';
+import PopoverTrigger from './PopoverTrigger';
+import PopoverContent from './PopoverContent';
+
+export default {
+  title: 'Components/Popover',
+  component: Popover,
+} as ComponentMeta<typeof Popover>;
+
+export const Default: ComponentStory<typeof Popover> = () => (
+  <Popover>
+    <PopoverTrigger>
+      <Button>Open popover</Button>
+    </PopoverTrigger>
+    <PopoverContent>Test content</PopoverContent>
+  </Popover>
+);

package/src/Components/Popover/Popover.theme.ts

@@ -0,0 +1,15 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const PopoverTheme: SystemStyleObject = {
+  baseStyle: {
+    content: {
+      backgroundColor: 'neutral.100',
+      borderRadius: 8,
+      boxShadow: 'large',
+      py: 24,
+      px: 32,
+    },
+  },
+};
+
+export default PopoverTheme;

package/src/Components/Popover/Popover.tsx

@@ -0,0 +1,7 @@
+import { PopoverProps as ChakraPopoverProps, Popover as ChakraPopover } from '@chakra-ui/react';
+
+export type PopoverProps = ChakraPopoverProps;
+
+const Popover = (props: PopoverProps) => <ChakraPopover {...props} />;
+
+export default Popover;

package/src/Components/Popover/PopoverContent.tsx

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import {
+  PopoverContentProps as ChakraPopoverContentProps,
+  PopoverContent as ChakraPopoverContent,
+} from '@chakra-ui/react';
+
+export interface PopoverContentProps extends ChakraPopoverContentProps {
+  children: ReactNode;
+}
+
+const PopoverContent = (props: PopoverContentProps) => <ChakraPopoverContent {...props} />;
+
+export default PopoverContent;

package/src/Components/Popover/PopoverTrigger.tsx

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { PopoverTrigger as ChakraPopoverTrigger } from '@chakra-ui/react';
+
+const PopoverTigger: FC = (props) => <ChakraPopoverTrigger {...props} />;
+
+export default PopoverTigger;

package/src/theme.ts

@@ -13,6 +13,7 @@ import Text from './Components/Text/Text.theme';
 import Notification from './Components/Notification/Notification.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
+import Popover from './Components/Popover/Popover.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -71,6 +72,7 @@ const theme = {
     Tooltip,
     Alert: Notification,
     CloseButton,
+    Popover,
   },
 };