@bitrise/bitkit 12.29.1 → 12.29.2

package/package.json

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

package/src/Components/Card/Card.tsx

@@ -11,7 +11,7 @@ export interface CardProps extends BoxProps {
 }
 
 /**
- * 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, variant, ...rest } = props;

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;