@bitrise/bitkit 10.6.0-alpha-notification.1 → 10.6.0

package/package.json

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

package/src/Components/ColorButton/ColorButton.stories.tsx

@@ -1,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
+import Box from '../Box/Box';
 import ColorButton from './ColorButton';
 
 export default {
@@ -13,7 +14,11 @@ export default {
   },
 } as ComponentMeta<typeof ColorButton>;
 
-const Template: ComponentStory<typeof ColorButton> = (props) => <ColorButton {...props} />;
+const Template: ComponentStory<typeof ColorButton> = ({ colorScheme, ...props }) => (
+  <Box padding={16} backgroundColor={colorScheme === 'neutral' ? 'black' : undefined}>
+    <ColorButton colorScheme={colorScheme} {...props} />
+  </Box>
+);
 
 export const WithProps = Template.bind({});
 WithProps.args = sortObjectByKey({

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,4 +1,6 @@
-const schemeColors = {
+import { ColorScheme } from '../../Foundations/Colors/Colors';
+
+const schemeColors: Record<ColorScheme, any> = {
   blue: {
     color: 'blue.40',
     _active: {
@@ -44,16 +46,25 @@ const schemeColors = {
       backgroundColor: 'purple.93',
     },
   },
+  neutral: {
+    color: 'neutral.100',
+    _active: {
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    },
+    _hover: {
+      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    },
+  },
 };
 
 const ColorButtonTheme = {
-  baseStyle: ({ colorScheme: c }: { colorScheme?: 'blue' | 'red' | 'green' | 'yellow' | 'purple' }) => {
+  baseStyle: ({ colorScheme }: { colorScheme?: ColorScheme }) => {
     return {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: 'transparent',
-      ...schemeColors[c || 'blue'],
+      ...schemeColors[colorScheme || 'blue'],
     };
   },
 };

package/src/Components/Dialog/Dialog.theme.ts

@@ -36,7 +36,7 @@ const DialogTheme: ComponentStyleConfig = {
     body: {
       flex: 1,
       paddingX: '32',
-      overflow: 'auto',
+      overflow: scrollBehavior === 'inside' ? 'auto' : undefined,
     },
     footer: {
       display: 'flex',

package/src/Foundations/Colors/Colors.ts

@@ -127,6 +127,6 @@ const colors = {
 
 export type Colors = typeof colors;
 
-export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple';
+export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'neutral';
 
 export default colors;

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';