@bitrise/bitkit 10.5.0-alpha-notification.1 → 10.5.2

package/package.json

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

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,5 +1,5 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
-import { ColorScheme } from '@/Foundations/Colors/Colors';
+import { ColorScheme } from '../../Foundations/Colors/Colors';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';

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

@@ -1,7 +1,8 @@
 import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '@/Foundations/Colors/Colors';
+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 +62,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;

package/src/Old/Notification/Notification.css

@@ -0,0 +1,34 @@
+.Notification {
+  border: 0.0625rem solid transparent;
+  border-radius: var(--size--x2);
+}
+
+.Notification--type-alert {
+  border-color: var(--color-red--3);
+  background-color: var(--color-red--1);
+  color: var(--color-red--4);
+}
+
+.Notification--type-inform {
+  border-color: var(--color-blue--2);
+  background-color: var(--color-blue--1);
+  color: var(--color-blue--4);
+}
+
+.Notification--type-progress {
+  border-color: var(--color-grape--2);
+  background-color: var(--color-grape--1);
+  color: var(--color-eggplant);
+}
+
+.Notification--type-success {
+  border-color: var(--color-green--2);
+  background-color: var(--color-green--1);
+  color: var(--color-green--5);
+}
+
+.Notification--type-warning {
+  border-color: var(--color-yellow--3);
+  background-color: var(--color-yellow--1);
+  color: var(--color-yellow--5);
+}

package/src/Old/Notification/Notification.test.tsx

@@ -0,0 +1,33 @@
+import { shallow } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import Notification from './Notification';
+
+describe('Notification', () => {
+  test('default template', () => {
+    expect(shallowToJson(shallow(<Notification type="alert">Content</Notification>))).toMatchSnapshot();
+  });
+
+  test('default icon can be overridden', () => {
+    expect(
+      shallowToJson(
+        shallow(
+          <Notification icon="Bell" type="alert">
+            Content
+          </Notification>,
+        ),
+      ),
+    ).toMatchSnapshot();
+  });
+
+  test('with onRemove has a close icon', () => {
+    expect(
+      shallowToJson(
+        shallow(
+          <Notification onRemove={() => {}} type="alert">
+            Content
+          </Notification>,
+        ),
+      ),
+    ).toMatchSnapshot();
+  });
+});

package/src/Old/Notification/Notification.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import Icon, { TypeIconName } from '../../Components/Icon/Icon';
+import Link from '../../Components/Link/Link';
+import ProgressSpinner from '../Progress/ProgressSpinner';
+import './Notification.css';
+
+type TypeNotificationType = 'alert' | 'inform' | 'progress' | 'success' | 'warning';
+
+export interface Props extends FlexProps {
+  /**
+   * A callback to remove the notification, that when provided will
+   * render a clickable cross, that when clicked will call the given
+   * function.
+   */
+  onRemove?: (e: React.SyntheticEvent) => void;
+  /**
+   * Name of one of the Bitkit icons that will accompany the message
+   * of the notification. By default, some of the notification
+   * types have icons, but these can be overridden.
+   */
+  icon?: TypeIconName;
+  /**
+   * The type of the notification that affects the styling and content.
+   */
+  type: TypeNotificationType;
+}
+
+const defaultIcons: {
+  [key: string]: TypeIconName;
+} = {
+  alert: 'ErrorGeneral',
+  success: 'Tick',
+  warning: 'Warning',
+};
+
+/**
+ * Notification component used to inform the user of something important.
+ */
+const Notification: React.FunctionComponent<Props> = (props: Props) => {
+  const { children, onRemove, type, icon, className, ...rest } = props;
+
+  const classes = classnames('Notification', `Notification--type-${type}`, className);
+  const defaultIcon = defaultIcons[type];
+
+  return (
+    <Flex {...rest} alignChildrenVertical="middle" className={classes} direction="horizontal" gap="x2" padding="x3">
+      {(icon || defaultIcon || type === 'progress') && (
+        <Flex>{type === 'progress' ? <ProgressSpinner /> : <Icon name={icon || defaultIcon} />}</Flex>
+      )}
+
+      <Flex grow shrink>
+        {children}
+      </Flex>
+
+      {onRemove && (
+        <Flex>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link as="button" onClick={onRemove}>
+            <Icon name="CloseSmall" />
+          </Link>
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default Notification;

package/src/Old/Notification/__snapshots__/Notification.test.tsx.snap

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Notification default icon can be overridden 1`] = `
+<Flex
+  alignChildrenVertical="middle"
+  className="Notification Notification--type-alert"
+  direction="horizontal"
+  gap="x2"
+  padding="x3"
+>
+  <Flex>
+    <ForwardRef
+      name="Bell"
+    />
+  </Flex>
+  <Flex
+    grow={true}
+    shrink={true}
+  >
+    Content
+  </Flex>
+</Flex>
+`;
+
+exports[`Notification default template 1`] = `
+<Flex
+  alignChildrenVertical="middle"
+  className="Notification Notification--type-alert"
+  direction="horizontal"
+  gap="x2"
+  padding="x3"
+>
+  <Flex>
+    <ForwardRef
+      name="ErrorGeneral"
+    />
+  </Flex>
+  <Flex
+    grow={true}
+    shrink={true}
+  >
+    Content
+  </Flex>
+</Flex>
+`;
+
+exports[`Notification with onRemove has a close icon 1`] = `
+<Flex
+  alignChildrenVertical="middle"
+  className="Notification Notification--type-alert"
+  direction="horizontal"
+  gap="x2"
+  padding="x3"
+>
+  <Flex>
+    <ForwardRef
+      name="ErrorGeneral"
+    />
+  </Flex>
+  <Flex
+    grow={true}
+    shrink={true}
+  >
+    Content
+  </Flex>
+  <Flex>
+    <ForwardRef
+      as="button"
+      isUnderlined={false}
+      onClick={[Function]}
+    >
+      <ForwardRef
+        name="CloseSmall"
+      />
+    </ForwardRef>
+  </Flex>
+</Flex>
+`;

package/src/index.ts

@@ -139,7 +139,4 @@ export { default as BreadcrumbLink } from './Components/Breadcrumb/BreadcrumbLin
 export type { RibbonProps } from './Components/Ribbon/Ribbon';
 export { default as Ribbon } from './Components/Ribbon/Ribbon';
 
-export type { NotificationProps } from './Components/Notification/Notification';
-export { default as Notification } from './Components/Notification/Notification';
-
 export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';

package/src/old.ts

@@ -54,6 +54,9 @@ export { default as InputLabel } from './Old/Input/InputLabel';
 export type { Props as LogoProps } from './Old/Logo/Logo';
 export { default as Logo } from './Old/Logo/Logo';
 
+export type { Props as NotificationProps } from './Old/Notification/Notification';
+export { default as Notification } from './Old/Notification/Notification';
+
 export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
 export { default as ProgressBar } from './Old/Progress/ProgressBar';