@bitrise/bitkit 12.29.0 → 12.29.2

package/package.json

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

package/src/Components/Card/Card.theme.ts

@@ -1,7 +1,19 @@
 const CardTheme = {
   baseStyle: {
     _focusVisible: {
-      boxShadow: 'outline',
+      boxShadow: 'medium',
+    },
+    borderRadius: '8',
+    border: '1px solid',
+  },
+  variants: {
+    elevated: {
+      boxShadow: 'medium',
+      borderColor: 'neutral.93',
+    },
+    outline: {
+      boxShadow: 'none',
+      borderColor: 'neutral.90',
     },
   },
 };

package/src/Components/Card/Card.tsx

@@ -7,14 +7,15 @@ export interface CardProps extends BoxProps {
   borderRadius?: keyof Radii;
   boxShadow?: keyof Shadows;
   withBorder?: boolean;
+  variant?: 'elevated' | 'outline';
 }
 
 /**
- * Basic container element with default box shadow and border radius. Use with `CardContent` to add padding.
+ * Basic container element with default box shadow and border radius.
  */
 const Card = forwardRef<CardProps, 'div'>((props, ref) => {
-  const { withBorder, ...rest } = props;
-  const css = useStyleConfig('Card');
+  const { withBorder, variant, ...rest } = props;
+  const css = useStyleConfig('Card', { variant });
 
   const properties = {
     backgroundColor: 'white',
@@ -22,9 +23,8 @@ const Card = forwardRef<CardProps, 'div'>((props, ref) => {
     width: '100%',
     ...rest,
   } as BoxProps;
-  if (withBorder) {
-    properties.border = '1px solid';
-    properties.borderColor = 'neutral.93';
+  if (!withBorder) {
+    css.border = 'none';
   }
   if (props.as === 'button' && !(props as HTMLChakraProps<'button'>).type) {
     (properties as HTMLChakraProps<'button'>).type = 'button';
@@ -41,6 +41,8 @@ const Card = forwardRef<CardProps, 'div'>((props, ref) => {
 Card.defaultProps = {
   as: 'div',
   borderRadius: '8',
+  withBorder: true,
+  variant: 'elevated',
 } as CardProps;
 
 export default Card;

package/src/Components/Provider/Provider.tsx

@@ -1,8 +1,23 @@
-import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
 import theme from '../../theme';
 
-const Provider = ({ children }: ChakraProviderProps) => {
-  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
+type ProviderProps = {
+  children: ReactNode;
+  toastOffset?: string;
+};
+
+const Provider = ({ children, toastOffset }: ProviderProps) => {
+  return (
+    <ChakraProvider
+      theme={theme}
+      toastOptions={{
+        defaultOptions: toastOffset ? { containerStyle: { transform: `translateY(${toastOffset})` } } : undefined,
+      }}
+    >
+      {children}
+    </ChakraProvider>
+  );
 };
 
 export default Provider;

package/src/Components/Toast/Toast.tsx

@@ -5,7 +5,7 @@ import Notification, { ActionProps, NotificationAction, NotificationProps } from
 
 export interface ToastOptions {
   title: string;
-  description: React.ReactNode;
+  description?: React.ReactNode;
   status: NotificationProps['status'];
   action?: ActionProps;
   duration?: UseToastOptions['duration'];
@@ -24,7 +24,7 @@ const useToast = () => {
     toast({
       isClosable: opts.isClosable,
       duration: opts.duration,
-      position: opts.position || 'bottom',
+      position: opts.position || 'top-right',
       render: ({ onClose }) => (
         <Notification
           boxShadow="large"
@@ -34,7 +34,7 @@ const useToast = () => {
         >
           <Box display="flex" flexDirection="column">
             <AlertTitle>{opts.title}</AlertTitle>
-            <AlertDescription>{opts.description}</AlertDescription>
+            {opts.description && <AlertDescription>{opts.description}</AlertDescription>}
             {!opts.action && timestamp && <AlertDescription marginTop="8">{timestamp}</AlertDescription>}
             {opts.action && <NotificationAction alignSelf="start" marginTop="8" marginBottom="4" {...opts.action} />}
           </Box>

package/src/index.ts

@@ -29,9 +29,6 @@ export { default as ButtonGroup } from './Components/ButtonGroup/ButtonGroup';
 export type { CardProps } from './Components/Card/Card';
 export { default as Card } from './Components/Card/Card';
 
-export type { CardContentProps } from './Components/Card/CardContent';
-export { default as CardContent } from './Components/Card/CardContent';
-
 export type { TextProps } from './Components/Text/Text';
 export { default as Text } from './Components/Text/Text';
 

package/src/Components/Card/CardContent.tsx

@@ -1,14 +0,0 @@
-import Box, { BoxProps } from '../Box/Box';
-
-export type CardContentProps = BoxProps;
-
-/**
- * Basic container element with default box shadow, border radius and padding.
- */
-const CardContent = (props: CardContentProps) => {
-  return <Box {...props} />;
-};
-
-CardContent.defaultProps = {} as CardContentProps;
-
-export default CardContent;