@bitrise/bitkit 10.5.4 → 10.7.0

package/package.json

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

package/src/Components/ColorButton/ColorButton.stories.tsx

@@ -1,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
+import Box from '../Box/Box';
 import ColorButton from './ColorButton';
 
 export default {
@@ -13,7 +14,11 @@ export default {
   },
 } as ComponentMeta<typeof ColorButton>;
 
-const Template: ComponentStory<typeof ColorButton> = (props) => <ColorButton {...props} />;
+const Template: ComponentStory<typeof ColorButton> = ({ colorScheme, ...props }) => (
+  <Box padding={16} backgroundColor={colorScheme === 'neutral' ? 'black' : undefined}>
+    <ColorButton colorScheme={colorScheme} {...props} />
+  </Box>
+);
 
 export const WithProps = Template.bind({});
 WithProps.args = sortObjectByKey({

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,4 +1,6 @@
-const schemeColors = {
+import { ColorScheme } from '../../Foundations/Colors/Colors';
+
+const schemeColors: Record<ColorScheme, any> = {
   blue: {
     color: 'blue.40',
     _active: {
@@ -44,16 +46,25 @@ const schemeColors = {
       backgroundColor: 'purple.93',
     },
   },
+  neutral: {
+    color: 'neutral.100',
+    _active: {
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    },
+    _hover: {
+      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    },
+  },
 };
 
 const ColorButtonTheme = {
-  baseStyle: ({ colorScheme: c }: { colorScheme?: 'blue' | 'red' | 'green' | 'yellow' | 'purple' }) => {
+  baseStyle: ({ colorScheme }: { colorScheme?: ColorScheme }) => {
     return {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: 'transparent',
-      ...schemeColors[c || 'blue'],
+      ...schemeColors[colorScheme || 'blue'],
     };
   },
 };

package/src/Components/Popover/PopoverArrow.tsx

@@ -0,0 +1,7 @@
+import { PopoverArrowProps as ChakraPopoverArrowProps, PopoverArrow as ChakraPopoverArrow } from '@chakra-ui/react';
+
+export type PopoverArrowProps = ChakraPopoverArrowProps;
+
+const PopoverArrow = (props: PopoverArrowProps) => <ChakraPopoverArrow {...props} />;
+
+export default PopoverArrow;

package/src/Foundations/Colors/Colors.ts

@@ -127,6 +127,6 @@ const colors = {
 
 export type Colors = typeof colors;
 
-export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple';
+export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'neutral';
 
 export default colors;

package/src/index.ts

@@ -106,6 +106,9 @@ export { default as PopoverTrigger } from './Components/Popover/PopoverTrigger';
 export type { PopoverContentProps } from './Components/Popover/PopoverContent';
 export { default as PopoverContent } from './Components/Popover/PopoverContent';
 
+export type { PopoverArrowProps } from './Components/Popover/PopoverArrow';
+export { default as PopoverArrow } from './Components/Popover/PopoverArrow';
+
 export type { AvatarProps } from './Components/Avatar/Avatar';
 export { default as Avatar } from './Components/Avatar/Avatar';