@bitrise/bitkit 13.126.1-alpha.1 → 13.128.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.126.1-alpha.1",
+  "version": "13.128.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -40,8 +40,8 @@
     "@fontsource/source-code-pro": "^5.0.18",
     "framer-motion": "^11.3.6",
     "luxon": "^3.4.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
     "react-imask": "^7.6.1",
     "react-markdown": "^9.0.1"

package/src/Components/Toggle/ToggleComponent.tsx

@@ -1,4 +1,4 @@
-import { Switch, SwitchProps, useMultiStyleConfig } from '@chakra-ui/react';
+import { forwardRef, Switch, SwitchProps, useMultiStyleConfig } from '@chakra-ui/react';
 import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 import Badge from '../Badge/Badge';
@@ -7,7 +7,7 @@ export interface ToggleComponentProps extends SwitchProps {
   size?: 'md' | 'sm';
   isLoading?: boolean;
 }
-const ToggleComponent = (props: ToggleComponentProps) => {
+const ToggleComponent = forwardRef<ToggleComponentProps, 'input'>((props, ref) => {
   const { isLoading, isReadOnly, isChecked, ...rest } = props;
   const { skeleton } = useMultiStyleConfig('Switch', props);
   if (isLoading) {
@@ -37,7 +37,7 @@ const ToggleComponent = (props: ToggleComponentProps) => {
       </Badge>
     );
   }
-  return <Switch isReadOnly={isReadOnly} isChecked={isChecked} {...rest} />;
-};
+  return <Switch ref={ref} isReadOnly={isReadOnly} isChecked={isChecked} {...rest} />;
+});
 
 export default ToggleComponent;

package/src/Patterns/NotificationCard/NotificationCard.tsx

@@ -1,42 +1,61 @@
-import { BoxProps, CardProps, TextProps, useMultiStyleConfig, useStyleConfig } from '@chakra-ui/react';
+import { ReactNode, useState } from 'react';
+import { useMultiStyleConfig, useStyleConfig } from '@chakra-ui/react';
+import Icon, { TypeIconName } from '../../Components/Icon/Icon';
 import { NOTIFICATION_STATUSES, NotificationProps } from '../../Components/Notification/Notification';
-import Card from '../../Components/Card/Card';
-import Box from '../../Components/Box/Box';
-import Text from '../../Components/Text/Text';
-import Button from '../../Components/Button/Button';
+import Card, { CardProps } from '../../Components/Card/Card';
+import Box, { BoxProps } from '../../Components/Box/Box';
+import Text, { TextProps } from '../../Components/Text/Text';
+import Button, { ButtonProps } from '../../Components/Button/Button';
+import Collapse from '../../Components/Collapse/Collapse';
+import Link from '../../Components/Link/Link';
 
 export type ActionProps = {
   href?: string;
   label: string;
-  onClick?: () => void;
   target?: string;
-};
+} & Omit<ButtonProps, 'as' | 'children' | 'size'>;
 
 export type NotificationCardProps = {
   action?: ActionProps;
-  message: string;
-  status: NotificationProps['status'];
+  message: ReactNode;
+  details?: ReactNode;
   title?: string;
-};
+} & (
+  | {
+      status: NotificationProps['status'];
+      statusIconName?: never;
+    }
+  | {
+      status: 'error';
+      statusIconName?: Extract<TypeIconName, 'ErrorCircleFilled' | 'CrossCircle'>;
+    }
+);
 
-const NotificationCardAction = ({ href, label, ...rest }: ActionProps) => {
-  return (
-    <Button as={(href ? 'a' : 'button') as any} variant="tertiary" size="md" href={href} {...rest}>
-      {label}
-    </Button>
-  );
-};
-
-const NotificationCard = ({ action, status, message: description, title }: NotificationCardProps) => {
+const NotificationCard = ({
+  action,
+  details,
+  status,
+  statusIconName,
+  message: description,
+  title,
+}: NotificationCardProps) => {
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const { colorScheme, defaultIcon } = NOTIFICATION_STATUSES[status || 'info'];
 
+  const statusIcon = statusIconName ? <Icon name={statusIconName} /> : defaultIcon;
+
   const style = useMultiStyleConfig('NotificationCard', { colorScheme });
   const { borderColor, bg, color } = style.card;
   const { borderRadius } = useStyleConfig('Card', { colorScheme });
 
   let actionButton;
   if (action) {
-    actionButton = <NotificationCardAction {...action} />;
+    const { href, label, ...restAction } = action;
+    actionButton = (
+      <Button variant="tertiary" {...restAction} as={(href ? 'a' : 'button') as any} href={href} size="md">
+        {label}
+      </Button>
+    );
   }
 
   return (
@@ -56,7 +75,7 @@ const NotificationCard = ({ action, status, message: description, title }: Notif
         paddingBlock="12"
         sx={style.icon}
       >
-        {defaultIcon}
+        {statusIcon}
       </Box>
       <Box
         flex="1"
@@ -73,9 +92,26 @@ const NotificationCard = ({ action, status, message: description, title }: Notif
               {title}
             </Text>
           )}
-          <Text textStyle="body/md/regular" color={title ? '' : (color as TextProps['color'])}>
-            {description}
-          </Text>
+          <Box textStyle="body/md/regular" color={title ? '' : (color as TextProps['color'])}>
+            <Text>{description}</Text>
+            {details && (
+              <>
+                <Collapse in={isDetailsOpen}>
+                  <Box marginTop="8">{details}</Box>
+                </Collapse>
+                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <Link
+                  as="button"
+                  colorScheme="purple"
+                  display="block"
+                  marginTop="8"
+                  onClick={() => setIsDetailsOpen(!isDetailsOpen)}
+                >
+                  {isDetailsOpen ? 'Hide details' : 'Show details'}{' '}
+                </Link>
+              </>
+            )}
+          </Box>
         </Box>
         {actionButton && <Box paddingBlock="4">{actionButton}</Box>}
       </Box>