@bitrise/bitkit 13.121.0 → 13.122.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.121.0",
+  "version": "13.122.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Notification/Notification.tsx

@@ -10,7 +10,10 @@ import ProgressSpinner from '../ProgressSpinner/ProgressSpinner';
 
 type NotificationStatus = 'info' | 'error' | 'success' | 'warning' | 'progress';
 
-const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIcon: ReactElement }> = {
+export const NOTIFICATION_STATUSES: Record<
+  NotificationStatus,
+  { colorScheme: ColorScheme; defaultIcon: ReactElement }
+> = {
   error: { colorScheme: 'red', defaultIcon: <Icon name="ErrorCircleFilled" /> },
   info: { colorScheme: 'blue', defaultIcon: <Icon name="InfoCircle" /> },
   progress: {
@@ -62,7 +65,7 @@ const NotificationAction = ({ href, label, ...rest }: ActionProps) => {
 
 const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
   const { action, children, iconName, onClose, showIcon = true, status, ...rest } = props;
-  const { colorScheme, defaultIcon } = STATUSES[status];
+  const { colorScheme, defaultIcon } = NOTIFICATION_STATUSES[status];
   const icon = iconName ? <Icon name={iconName} /> : defaultIcon;
   let actionButton;
   const actionPlacement = action?.placement ?? 'end';

package/src/Components/components.theme.ts

@@ -1,3 +1,4 @@
+import NotificationCard from '../Patterns/NotificationCard/NotificationCard.theme';
 import Alert from './Alert/Alert.theme';
 import Accordion from './Accordion/Accordion.theme';
 import Avatar from './Avatar/Avatar.theme';
@@ -81,6 +82,7 @@ const components = {
   Menu,
   Modal: Dialog,
   Note,
+  NotificationCard,
   NumberInput,
   Popover,
   Progress: ProgressBar,

package/src/Patterns/NotificationCard/NotificationCard.theme.ts

@@ -0,0 +1,75 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { ColorScheme } from 'src/types/bitkit';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['card', 'icon']);
+
+const colorSchemeToStatus = (colorScheme: ColorScheme) => {
+  switch (colorScheme) {
+    case 'blue':
+      return 'info';
+    case 'green':
+      return 'success';
+    case 'yellow':
+      return 'warning';
+    case 'red':
+      return 'critical';
+    case 'purple':
+      return 'progress';
+  }
+};
+
+const getIconColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+  switch (colorScheme) {
+    case 'blue':
+      return 'sys/info/base';
+    case 'green':
+      return 'icon/positive';
+    case 'yellow':
+      return 'sys/warning/base';
+    case 'red':
+      return 'icon/negative';
+    case 'purple':
+      return 'purple.40';
+  }
+};
+
+const getBackgroundColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+  return `status/${colorSchemeToStatus(colorScheme)}/bg`;
+};
+
+const getBorderColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+  return `status/${colorSchemeToStatus(colorScheme)}/border`;
+};
+
+const getTextColor = ({ colorScheme }: { colorScheme: ColorScheme }) => {
+  switch (colorScheme) {
+    case 'blue':
+      return 'text/primary';
+    case 'green':
+      return 'text/positive';
+    case 'yellow':
+      return 'text/primary';
+    case 'red':
+      return 'text/negative';
+    case 'purple':
+      return 'text/secondary';
+  }
+};
+
+const NotificationTheme = defineMultiStyleConfig({
+  baseStyle: ({ colorScheme }: { colorScheme: string }) => {
+    const cs = colorScheme as ColorScheme;
+    return {
+      card: {
+        bg: getBackgroundColor({ colorScheme: cs }),
+        borderColor: getBorderColor({ colorScheme: cs }),
+        color: getTextColor({ colorScheme: cs }),
+      },
+      icon: {
+        color: getIconColor({ colorScheme: cs }),
+      },
+    };
+  },
+});
+
+export default NotificationTheme;

package/src/Patterns/NotificationCard/NotificationCard.tsx

@@ -0,0 +1,78 @@
+import { BoxProps, CardProps, TextProps, useMultiStyleConfig, useStyleConfig } from '@chakra-ui/react';
+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';
+
+export type ActionProps = {
+  href?: string;
+  label: string;
+  onClick?: () => void;
+  target?: string;
+};
+
+export type NotificationCardProps = {
+  action?: ActionProps;
+  message: string;
+  status: NotificationProps['status'];
+  title?: string;
+};
+
+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 { colorScheme, defaultIcon } = NOTIFICATION_STATUSES[status || 'info'];
+
+  const style = useMultiStyleConfig('NotificationCard', { colorScheme });
+  const { borderColor, bg, color } = style.card;
+  const { borderRadius } = useStyleConfig('Card', { colorScheme });
+
+  let actionButton;
+  if (action) {
+    actionButton = <NotificationCardAction {...action} />;
+  }
+
+  return (
+    <Card borderColor={borderColor as BoxProps['borderColor']} display="flex" flexDirection="row" variant="outline">
+      <Box
+        alignItems="stretch"
+        borderLeftRadius={borderRadius as CardProps['borderRadius']}
+        bg={bg as BoxProps['backgroundColor']}
+        display="flex"
+        paddingInline="8"
+        paddingBlock="12"
+        sx={style.icon}
+      >
+        {defaultIcon}
+      </Box>
+      <Box
+        flex="1"
+        padding="12"
+        paddingInlineEnd="16"
+        display="flex"
+        gap="12"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Box display="flex" flexDir="column">
+          <Text color={color as TextProps['color']} textStyle="body/lg/semibold">
+            {title}
+          </Text>
+          <Text textStyle="body/md/regular" color={title ? '' : (color as TextProps['color'])}>
+            {description}
+          </Text>
+        </Box>
+        {actionButton}
+      </Box>
+    </Card>
+  );
+};
+
+export default NotificationCard;

package/src/index.ts

@@ -157,6 +157,9 @@ export {
 export type { NotificationProps } from './Components/Notification/Notification';
 export { default as Notification } from './Components/Notification/Notification';
 
+export type { NotificationCardProps } from './Patterns/NotificationCard/NotificationCard';
+export { default as NotificationCard } from './Patterns/NotificationCard/NotificationCard';
+
 export type { AccordionProps } from './Components/Accordion/Accordion';
 export { default as Accordion } from './Components/Accordion/Accordion';