@bitrise/bitkit 10.4.1 → 10.5.1

package/package.json

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

package/src/Components/Notification/Notification.stories.tsx

@@ -31,12 +31,28 @@ export default {
   },
 } as ComponentMeta<typeof Notification>;
 
-export const Default: ComponentStoryFn<typeof Notification> = ({ title, description, ...args }) => (
-  <Notification {...args}>
+const Template: ComponentStoryFn<typeof Notification> = ({ title, description, ...props }) => (
+  <Notification {...props}>
     <NotificationTitle>{title}</NotificationTitle>
     <NotificationText>{description}</NotificationText>
   </Notification>
 );
+
+export const Default: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
 Default.args = {
   action: undefined,
 };
+
+export const WithCustomIcon: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
+WithCustomIcon.storyName = 'With custom icon';
+WithCustomIcon.args = {
+  action: undefined,
+  iconName: 'Bitbot',
+};
+
+export const WithoutIcon: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
+WithoutIcon.storyName = 'Without icon';
+WithoutIcon.args = {
+  action: undefined,
+  showIcon: false,
+};

package/src/Components/Notification/Notification.tsx

@@ -13,17 +13,17 @@ import { ColorScheme } from '@/Foundations/Colors/Colors';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
-import Icon from '../Icon/Icon';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
-const STATUSES: Record<string, { colorScheme: ColorScheme; icon: ReactNode }> = {
-  info: { colorScheme: 'blue', icon: <Icon flexShrink={0} name="Info" /> },
-  error: { colorScheme: 'red', icon: <Icon flexShrink={0} name="ErrorGeneral" /> },
-  success: { colorScheme: 'green', icon: <Icon flexShrink={0} name="Tick" /> },
-  warning: { colorScheme: 'yellow', icon: <Icon flexShrink={0} name="Warning" /> },
+const STATUSES: Record<string, { colorScheme: ColorScheme; defaultIcon: ReactNode }> = {
+  info: { colorScheme: 'blue', defaultIcon: <Icon name="Info" /> },
+  error: { colorScheme: 'red', defaultIcon: <Icon name="ErrorGeneral" /> },
+  success: { colorScheme: 'green', defaultIcon: <Icon name="Tick" /> },
+  warning: { colorScheme: 'yellow', defaultIcon: <Icon name="Warning" /> },
   progress: {
     colorScheme: 'purple',
-    icon: (
-      <chakra.span w="24" h="24" p="2" flexShrink={0}>
+    defaultIcon: (
+      <chakra.span w="24" h="24" p="2">
         <Spinner w="100%" h="100%" />
       </chakra.span>
     ),
@@ -38,6 +38,8 @@ export interface NotificationProps extends Omit<AlertProps, 'status' | 'colorSch
   status: keyof typeof STATUSES;
   onClose?: () => void;
   action?: ActionProps;
+  iconName?: TypeIconName;
+  showIcon?: boolean;
 }
 
 const ActionContext = createContext<{ colorScheme: ColorScheme }>({ colorScheme: 'blue' });
@@ -59,8 +61,9 @@ const NotificationAction = ({ label, href, ...rest }: ActionProps) => {
 };
 
 const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
-  const { status, action, children, onClose, ...rest } = props;
-  const { colorScheme, icon } = STATUSES[status];
+  const { status, action, children, onClose, showIcon = true, iconName, ...rest } = props;
+  const { colorScheme, defaultIcon } = STATUSES[status];
+  const icon = iconName ? <Icon name={iconName} /> : defaultIcon;
   let actionButton;
   if (action) {
     actionButton = <NotificationAction marginRight="12" {...action} alignSelf="center" />;
@@ -69,7 +72,7 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
   return (
     <ChakraAlert ref={ref} {...rest} colorScheme={colorScheme}>
       <ActionContext.Provider value={actionContext}>
-        {icon}
+        {showIcon && <Box flexShrink={0}>{icon}</Box>}
         <Box wordBreak="break-word" display="flex" flexDirection="column" flexGrow={1}>
           {children}
         </Box>

package/src/Components/Ribbon/Ribbon.tsx

@@ -2,6 +2,8 @@ import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
 import { ColorScheme } from '@/Foundations/Colors/Colors';
+import { BREAKPOINTS } from '@/Foundations/Breakpoints/Breakpoints';
+
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Icon from '../Icon/Icon';
@@ -61,9 +63,22 @@ const Ribbon = forwardRef<RibbonProps, 'div'>((props, ref) => {
       {...rest}
     >
       <ActionContext.Provider value={actionContext}>
-        {onClose && <Box width={24} height={24} marginRight="auto" />}
-        {children}
-        {actionButton}
+        {onClose && (
+          <Box
+            display={{ [BREAKPOINTS.MOBILE]: 'none', [BREAKPOINTS.DESKTOP]: 'block' }}
+            width={24}
+            height={24}
+            marginEnd="auto"
+          />
+        )}
+        <Box
+          display="flex"
+          flexDirection={{ [BREAKPOINTS.MOBILE]: 'column', [BREAKPOINTS.DESKTOP]: 'row' }}
+          gap={{ [BREAKPOINTS.MOBILE]: 12, [BREAKPOINTS.DESKTOP]: 16 }}
+        >
+          {children}
+          {actionButton}
+        </Box>
         {onClose && (
           <CloseButton flexShrink={0} colorScheme={colorScheme} marginStart="auto" onClick={onClose}>
             <Icon name="CloseSmall" />

package/src/Old/Input/InputInlineHelp.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import Text, { Props as TextProps } from '../Text/Text';
+import Text, { TextProps } from '../../Components/Text/Text';
 
 export type Props = TextProps;
 
 /** Provides specific styling for an inline input label */
 const InputInlineHelp: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text margin="x2" size="2" textColor="neutral.50" {...props} />;
+  return <Text marginY="8" size="2" color="neutral.50" {...props} />;
 };
 
 export default InputInlineHelp;