@bitrise/bitkit 10.12.0-alpha-export-new-notification.1 → 10.12.1

package/package.json

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

package/src/Components/Accordion/Accordion.stories.tsx

@@ -25,18 +25,18 @@ const onButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
   e.stopPropagation();
 };
 
-const ButtonContentElement = () => {
+const ButtonContentElement = ({ title }: { title: string }) => {
   return (
     <Box display="flex" alignItems="center" flexGrow={1}>
       <Icon name="Doc" />
       <Text as="p" align="left" size="3" margin="0 auto 0 1rem">
-        The buttonContent is a React element
+        {title}
         <br />
         <Text as="span" size="2" textColor="neutral.40">
           Generated by clone-build workflow
         </Text>
       </Text>
-      <Button as="a" size="small" onClick={onButtonClick} leftIconName="Download">
+      <Button as="a" href="#" size="small" onClick={onButtonClick} leftIconName="Download">
         Download
       </Button>
     </Box>
@@ -48,9 +48,13 @@ export const DefaultVariant: ComponentStory<typeof Accordion> = (props) => (
     <AccordionItem buttonContent="The buttonContent is a string" fontSize="2" id="first">
       Content - you can use any style prop on AccordionItem
     </AccordionItem>
-    <AccordionItem buttonContent={<ButtonContentElement />} fontSize="2" id="second">
+    <AccordionItem
+      buttonContent={<ButtonContentElement title="The buttonContent is a React element" />}
+      fontSize="2"
+      id="second"
+    >
       Content - you can use any style prop on AccordionItem
     </AccordionItem>
-    <AccordionItem buttonContent="Without children the button is disabled" id="third" />
+    <AccordionItem buttonContent={<ButtonContentElement title="Without children" />} id="third" />
   </Accordion>
 );

package/src/Components/Accordion/Accordion.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Accordion from './Accordion';
+import AccordionItem from './AccordionItem';
+
+describe('Accordion', () => {
+  it('calls the onChange handler with the proper id if Accordion has a conditionally not rendered item', async () => {
+    const thirdId = 'third-item';
+    const thirdTitle = 'Third item';
+
+    const handleChange = jest.fn();
+
+    render(
+      <Accordion onChange={handleChange}>
+        <AccordionItem id="first" buttonContent="First item">
+          First content
+        </AccordionItem>
+        {false && (
+          <AccordionItem id="second" buttonContent="Second item">
+            Second content
+          </AccordionItem>
+        )}
+        <AccordionItem id={thirdId} buttonContent={thirdTitle}>
+          Third content
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const thirdTab = await screen.findByText(thirdTitle);
+    await userEvent.click(thirdTab);
+
+    expect(handleChange).toHaveBeenCalledWith(['third-item'], [1]);
+  });
+});

package/src/Components/Accordion/Accordion.theme.ts

@@ -10,19 +10,18 @@ const AccordionTheme: ComponentStyleConfig = {
       marginBottom: '16',
     },
     button: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
       width: '100%',
       padding: '16',
       background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
       borderBottom: '1px solid',
       borderColor: 'neutral.93',
       borderRadius: '8',
-      justifyContent: 'space-between',
-      _hover: {
+      '&[type="button"]:hover': {
         background: 'purple.95',
       },
-      _disabled: {
-        pointerEvents: 'none',
-      },
       '&[aria-expanded="true"]': {
         borderBottomLeftRadius: '0',
         borderBottomRightRadius: '0',

package/src/Components/Accordion/Accordion.tsx

@@ -20,6 +20,9 @@ const getItemIds = (props: AccordionProps) => {
   return ids;
 };
 
+/**
+ * Accordions display a list of high-level options that can expand/collapse to reveal more information.
+ */
 const Accordion = (props: AccordionProps) => {
   const prefersReducedMotion = usePrefersReducedMotion();
   const { children, colorScheme, onChange, ...rest } = props;

package/src/Components/Accordion/AccordionItem.tsx

@@ -6,8 +6,9 @@ import {
   AccordionPanel,
   AccordionPanelProps,
   AccordionIcon,
-  useMultiStyleConfig,
+  useAccordionStyles,
 } from '@chakra-ui/react';
+import Box from '../Box/Box';
 import Text from '../Text/Text';
 
 export interface AccordionItemProps extends AccordionPanelProps {
@@ -18,14 +19,16 @@ export interface AccordionItemProps extends AccordionPanelProps {
 
 const AccordionItem = (props: AccordionItemProps) => {
   const { buttonContent, children, id, ...rest } = props;
-  const styles = useMultiStyleConfig('Accordion');
+  const styles = useAccordionStyles();
+
+  const ButtonComponent = children ? AccordionButton : Box;
 
   return (
-    <ChakraAccordionItem sx={styles.item} id={id} isDisabled={!children}>
-      <AccordionButton>
+    <ChakraAccordionItem sx={styles.item} id={id}>
+      <ButtonComponent sx={styles.button}>
         {isValidElement(buttonContent) ? buttonContent : <Text as="span">{buttonContent}</Text>}
-        <AccordionIcon />
-      </AccordionButton>
+        <AccordionIcon opacity={children ? 1 : 0.4} />
+      </ButtonComponent>
       {!!children && <AccordionPanel {...rest}>{children}</AccordionPanel>}
     </ChakraAccordionItem>
   );

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -124,3 +124,12 @@ export const InsideDialog = () => {
     </Provider>
   );
 };
+export const WithIcon = () => {
+  return (
+    <Dropdown iconName="Calendar" defaultValue="daily">
+      <DropdownOption value="daily">Daily</DropdownOption>
+      <DropdownOption value="weekly">Weekly</DropdownOption>
+      <DropdownOption value="monthly">Monthly</DropdownOption>
+    </Dropdown>
+  );
+};

package/src/Components/Dropdown/Dropdown.theme.ts

@@ -86,6 +86,7 @@ const DropdownTheme = {
         height: '32',
         paddingLeft: '12',
         paddingRight: '12',
+        gap: '0.375rem',
       },
     },
     medium: {
@@ -94,6 +95,7 @@ const DropdownTheme = {
         height: '48',
         paddingLeft: '16',
         paddingRight: '16',
+        gap: '0.625rem',
       },
     },
   },

package/src/Components/Dropdown/Dropdown.tsx

@@ -19,7 +19,7 @@ import {
   useMultiStyleConfig,
 } from '@chakra-ui/react';
 import { FloatingFocusManager } from '@floating-ui/react-dom-interactions';
-import Icon from '../Icon/Icon';
+import Icon, { TypeIconName } from '../Icon/Icon';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -101,6 +101,7 @@ export interface DropdownProps<T> extends ChakraProps {
   'aria-label'?: string;
   search?: ReactNode;
   children?: ReactNode;
+  iconName?: TypeIconName;
 }
 
 function useOptionListWithIndexes({ children }: { children: ReactNode }) {

package/src/Components/Dropdown/DropdownButton.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ReactNode } from 'react';
 import { chakra, ChakraProps } from '@chakra-ui/react';
-import Icon from '../Icon/Icon';
+import Icon, { TypeIconName } from '../Icon/Icon';
 import { useDropdownStyles } from './Dropdown.context';
 
 interface DropdownButtonProps extends ChakraProps {
@@ -10,17 +10,19 @@ interface DropdownButtonProps extends ChakraProps {
   formLabel?: ReactNode;
   size: 'medium' | 'small';
   children?: ReactNode;
+  iconName?: TypeIconName;
 }
 const DropdownButton = forwardRef<HTMLButtonElement, DropdownButtonProps>(
-  ({ size, blurHandler, formLabel, readOnly, placeholder, children, ...rest }, ref) => {
+  ({ size, blurHandler, formLabel, readOnly, placeholder, children, iconName, ...rest }, ref) => {
     const { field, icon } = useDropdownStyles();
     const iconSize = size === 'medium' ? '24' : '16';
     return (
       <chakra.button aria-readonly={readOnly} type="button" ref={ref} onBlur={blurHandler} __css={field} {...rest}>
+        {iconName && <Icon aria-hidden="true" __css={icon} name={iconName} size={iconSize} />}
         <chakra.span overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" flexGrow={1}>
           {formLabel || placeholder}
         </chakra.span>
-        <Icon aria-hidden="true" __css={icon} name="DropdownArrows" fontSize={iconSize} size={iconSize} />
+        <Icon aria-hidden="true" __css={icon} name="DropdownArrows" size={iconSize} />
       </chakra.button>
     );
   },

package/src/Components/Notification/Notification.tsx

@@ -15,9 +15,7 @@ import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Icon, { TypeIconName } from '../Icon/Icon';
 
-type NotificationStatus = 'info' | 'error' | 'success' | 'warning' | 'progress';
-
-const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIcon: ReactNode }> = {
+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" /> },
@@ -37,7 +35,7 @@ export type ActionProps = { label: string; href?: string; onClick?: () => void }
   'as' | 'onClick' | 'colorScheme'
 >;
 export interface NotificationProps extends Omit<AlertProps, 'status' | 'colorScheme' | 'onClose'> {
-  status: NotificationStatus;
+  status: keyof typeof STATUSES;
   onClose?: () => void;
   action?: ActionProps;
   iconName?: TypeIconName;

package/src/Components/Tabs/Tabs.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Tabs from './Tabs';
+import TabList from './TabList';
+import Tab from './Tab';
+import TabPanels from './TabPanels';
+import TabPanel from './TabPanel';
+
+describe('Tabs', () => {
+  it('calls the onChange handler with the proper id if TabList has a conditionally not rendered item', async () => {
+    const thirdTabId = 'third-tab';
+    const thirdTabTitle = 'Third tab';
+
+    const handleChange = jest.fn();
+
+    render(
+      <Tabs onChange={handleChange}>
+        <TabList>
+          <Tab id="first-tab">First tab</Tab>
+          {false && <Tab id="second-tab">Second tab</Tab>}
+          <Tab id={thirdTabId}>{thirdTabTitle}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>First content</TabPanel>
+          {false && <TabPanel>Second content</TabPanel>}
+          <TabPanel>Third content</TabPanel>
+        </TabPanels>
+      </Tabs>,
+    );
+
+    const thirdTab = await screen.findByText(thirdTabTitle);
+    await userEvent.click(thirdTab);
+
+    expect(handleChange).toHaveBeenCalledWith(1, thirdTabId);
+  });
+});

package/src/Components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
 import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
 
@@ -8,13 +8,11 @@ export interface TabsProps extends ChakraTabsProps {
   withHistory?: boolean;
 }
 
-const getTabIds = (props: TabsProps) => {
-  const ids: string[] = [];
-  const tabs = React.Children.toArray(props.children)[0] as any;
-  React.Children.forEach(tabs.props.children, (c, index) => {
-    ids[index] = c?.props?.id;
-  });
-  return ids;
+const getTabIds = (props: TabsProps): string[] => {
+  const tabList = React.Children.toArray(props.children)[0] as ReactElement;
+  const tabs = React.Children.toArray(tabList.props.children) as ReactElement[];
+
+  return tabs.filter((item) => isValidElement(item)).map((item) => item.props.id);
 };
 
 /**

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

@@ -152,9 +152,6 @@ export {
   typedDropdown,
 } from './Components/Dropdown/Dropdown';
 
-export type { NotificationProps } from './Components/Notification/Notification';
-export { default as Notification } from './Components/Notification/Notification';
-
 export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';
 
 export type { AccordionProps } from './Components/Accordion/Accordion';

package/src/old.ts

@@ -51,6 +51,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';