@bitrise/bitkit 10.3.0-alpha-cleanup.2 → 10.4.0

package/package.json

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

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,8 +1,9 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
+import { ColorScheme } from '@/Foundations/Colors/Colors';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
-  colorScheme?: 'blue' | 'red' | 'green' | 'yellow' | 'purple';
+  colorScheme?: ColorScheme;
 }
 
 /**

package/src/Components/Dialog/Dialog.stories.tsx

@@ -1,7 +1,9 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import { Story, ComponentMeta } from '@storybook/react';
 import { useDisclosure } from '@chakra-ui/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
 import Button from '../Button/Button';
+import Link from '../Link/Link';
 import Dialog, { DialogProps } from './Dialog';
 import DialogBody from './DialogBody';
 import DialogFooter from './DialogFooter';
@@ -11,14 +13,19 @@ export default {
   component: Dialog,
 } as ComponentMeta<typeof Dialog>;
 
-const TextContent = () => (
-  <p>
-    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
-    of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
-    into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
-    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
-    PageMaker including versions of Lorem Ipsum.
-  </p>
+const TextContent = ({ lotsOfContent = false }: { lotsOfContent?: boolean }) => (
+  <>
+    {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
+      // eslint-disable-next-line react/no-array-index-key
+      <p key={index}>
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
+        galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
+        the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
+        release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.
+      </p>
+    ))}
+  </>
 );
 
 interface StoryType extends DialogProps {
@@ -26,18 +33,24 @@ interface StoryType extends DialogProps {
 }
 
 export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryType) => {
+  const { variant } = props;
   const { isOpen, onClose, onOpen } = useDisclosure();
 
-  return (
-    <>
-      <Button onClick={onOpen}>Open Dialog</Button>
-
-      <Dialog {...props} isOpen={isOpen} onClose={onClose}>
+  const getContent = () => {
+    if (variant === 'empty') {
+      return (
+        <DialogBody padding="0">
+          <TextContent lotsOfContent={lotsOfContent} />
+          <Link as="button" colorScheme="purple" onClick={onClose} marginTop="16">
+            Link or button or anything to close this Dialog with onClick
+          </Link>
+        </DialogBody>
+      );
+    }
+    return (
+      <>
         <DialogBody>
-          {[...Array(lotsOfContent ? 10 : 1)].map((_key, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <TextContent key={index} />
-          ))}
+          <TextContent lotsOfContent={lotsOfContent} />
         </DialogBody>
         <DialogFooter>
           <Button marginRight="auto" variant="tertiary">
@@ -46,6 +59,15 @@ export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryTy
           <Button variant="secondary">Secondary</Button>
           <Button>Primary</Button>
         </DialogFooter>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Button onClick={onOpen}>Open Dialog</Button>
+      <Dialog padding={variant === 'empty' ? '16' : '0'} {...props} isOpen={isOpen} onClose={onClose}>
+        {getContent()}
       </Dialog>
     </>
   );

package/src/Components/Dialog/Dialog.tsx

@@ -21,6 +21,7 @@ export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBeh
   scrollBehavior?: 'inside' | 'outside';
   title: string;
   trapFocus?: boolean;
+  variant?: 'default' | 'empty';
 }
 
 const Dialog = ({
@@ -33,6 +34,7 @@ const Dialog = ({
   size,
   title,
   trapFocus,
+  variant,
   ...rest
 }: DialogProps) => {
   const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
@@ -51,14 +53,18 @@ const Dialog = ({
     >
       <ModalOverlay />
       <ModalContent data-testid={dataTestid} {...rest}>
-        <ModalHeader>
-          <Text as="h1" size="5">
-            {title}
-          </Text>
-        </ModalHeader>
-        <ModalCloseButton isDisabled={!isClosable}>
-          <Icon name="CloseSmall" />
-        </ModalCloseButton>
+        {variant !== 'empty' && (
+          <>
+            <ModalHeader>
+              <Text as="h1" size="5">
+                {title}
+              </Text>
+            </ModalHeader>
+            <ModalCloseButton isDisabled={!isClosable}>
+              <Icon name="CloseSmall" />
+            </ModalCloseButton>
+          </>
+        )}
         {children}
       </ModalContent>
     </Modal>
@@ -70,6 +76,7 @@ Dialog.defaultProps = {
   scrollBehavior: 'outside',
   size: 'medium',
   trapFocus: true,
+  variant: 'default',
 } as DialogProps;
 
 export default Dialog;

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

@@ -10,7 +10,6 @@ export default {
     description: { type: 'string', defaultValue: 'description' },
     action: {
       control: 'inline-radio',
-      defaultValue: 'unset',
       options: ['unset', 'link', 'action'],
       mapping: {
         unset: undefined,
@@ -38,3 +37,6 @@ export const Default: ComponentStoryFn<typeof Notification> = ({ title, descript
     <NotificationText>{description}</NotificationText>
   </Notification>
 );
+Default.args = {
+  action: undefined,
+};

package/src/Components/Notification/Notification.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, ReactNode, useContext, useMemo } from 'react';
 import {
   Alert as ChakraAlert,
   AlertTitle as NotificationTitle,
@@ -9,12 +9,13 @@ import {
   chakra,
 } from '@chakra-ui/react';
 
+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';
 
-const STATUSES = {
+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" /> },
@@ -39,14 +40,14 @@ export interface NotificationProps extends Omit<AlertProps, 'status' | 'colorSch
   action?: ActionProps;
 }
 
-const ActionContext = createContext<{ colorScheme: ColorButtonProps['colorScheme'] }>({ colorScheme: 'blue' });
+const ActionContext = createContext<{ colorScheme: ColorScheme }>({ colorScheme: 'blue' });
 
 const NotificationAction = ({ label, href, ...rest }: ActionProps) => {
   const actionContext = useContext(ActionContext);
   return (
     <ColorButton
       flexGrow={0}
-      flexShrink={1}
+      flexShrink={0}
       as={(href ? 'a' : 'button') as any}
       href={href}
       {...actionContext}

package/src/Components/Ribbon/Ribbon.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentMeta, ComponentStoryFn } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Ribbon from './Ribbon';
+
+export default {
+  title: 'Components/Ribbon',
+  component: Ribbon,
+  argTypes: {
+    children: { type: 'string' },
+    action: {
+      control: 'inline-radio',
+      options: ['unset', 'link', 'action'],
+      mapping: {
+        unset: undefined,
+        link: { label: 'link', href: '#' },
+        action: { label: 'action', onClick: action('action') },
+      },
+    },
+    onClose: {
+      control: 'inline-radio',
+      options: ['unset', 'action'],
+      mapping: {
+        unset: undefined,
+        action: action('onClose'),
+      },
+    },
+  },
+  args: {
+    children: 'text',
+    colorScheme: 'blue',
+    action: undefined,
+  },
+} as ComponentMeta<typeof Ribbon>;
+
+export const Default: ComponentStoryFn<typeof Ribbon> = (args) => <Ribbon {...args} />;

package/src/Components/Ribbon/Ribbon.tsx

@@ -0,0 +1,77 @@
+import { createContext, useContext, useMemo } from 'react';
+import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
+
+import { ColorScheme } from '@/Foundations/Colors/Colors';
+import CloseButton from '../CloseButton/CloseButton';
+import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
+import Icon from '../Icon/Icon';
+import Box from '../Box/Box';
+
+export type ActionProps = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+} & Omit<ColorButtonProps, 'as' | 'onClick' | 'colorScheme'>;
+
+export interface RibbonProps extends Omit<AlertProps, 'status' | 'colorScheme' | 'onClose'> {
+  colorScheme: ColorScheme;
+  onClose?: () => void;
+  action?: ActionProps;
+}
+
+const ActionContext = createContext<{
+  colorScheme: ColorButtonProps['colorScheme'];
+}>({ colorScheme: 'blue' });
+
+const RibbonAction = ({ label, href, ...rest }: ActionProps) => {
+  const actionContext = useContext(ActionContext);
+  return (
+    <ColorButton
+      flexGrow={0}
+      flexShrink={0}
+      as={(href ? 'a' : 'button') as any}
+      marginY={-4}
+      href={href}
+      {...actionContext}
+      {...rest}
+    >
+      {label}
+    </ColorButton>
+  );
+};
+
+const Ribbon = forwardRef<RibbonProps, 'div'>((props, ref) => {
+  const { action, children, onClose, colorScheme, ...rest } = props;
+  const actionContext = useMemo(() => ({ colorScheme }), [colorScheme]);
+  let actionButton;
+  if (action) {
+    actionButton = <RibbonAction {...action} />;
+  }
+
+  return (
+    <ChakraAlert
+      ref={ref}
+      colorScheme={colorScheme}
+      justifyContent="center"
+      alignItems="center"
+      gap={16}
+      borderRadius={0}
+      borderLeftWidth={0}
+      borderRightWidth={0}
+      {...rest}
+    >
+      <ActionContext.Provider value={actionContext}>
+        {onClose && <Box width={24} height={24} marginRight="auto" />}
+        {children}
+        {actionButton}
+        {onClose && (
+          <CloseButton flexShrink={0} colorScheme={colorScheme} marginStart="auto" onClick={onClose}>
+            <Icon name="CloseSmall" />
+          </CloseButton>
+        )}
+      </ActionContext.Provider>
+    </ChakraAlert>
+  );
+});
+
+export default Ribbon;

package/src/Foundations/Colors/Colors.ts

@@ -126,4 +126,7 @@ const colors = {
 };
 
 export type Colors = typeof colors;
+
+export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple';
+
 export default colors;

package/src/{Components/Notification/Notification.theme.ts → Foundations/Themes/Alert.theme.ts}

@@ -1,6 +1,8 @@
+import { ColorScheme } from '../Colors/Colors';
+
 const AlertTheme = {
   parts: ['container', 'title', 'icon', 'body'],
-  baseStyle({ colorScheme }: { colorScheme: 'blue' | 'red' | 'green' | 'yellow' | 'purple' }) {
+  baseStyle({ colorScheme }: { colorScheme: ColorScheme }) {
     return {
       container: {
         display: 'flex',

package/src/Old/Dropdown/Dropdown.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import Placement from '../Placement/Placement';
-import PlacementManager from '../Placement/PlacementManager';
-import PlacementReference from '../Placement/PlacementReference';
 import Text from '../../Components/Text/Text';
-import DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
-import DropdownMenu from './DropdownMenu';
-import DropdownMenuItem from './DropdownMenuItem';
+import Popover from '../../Components/Popover/Popover';
+import PopoverTrigger from '../../Components/Popover/PopoverTrigger';
+import PopoverContent from '../../Components/Popover/PopoverContent';
+import Button, { ButtonProps } from '../../Components/Button/Button';
 import DropdownMenuItemGroup from './DropdownMenuItemGroup';
-
-const { useState } = React;
+import DropdownMenuItem from './DropdownMenuItem';
+import DropdownMenu from './DropdownMenu';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type DropdownValue = any;
@@ -22,7 +20,7 @@ interface OptionGroup {
   options: DropdownValue[];
 }
 
-export interface Props extends DropdownButtonProps {
+export interface Props extends ButtonProps {
   /** Handler for the value that is selected */
   onChange?: (value: DropdownValue) => void;
   /** Array of options that can be selected */
@@ -40,56 +38,63 @@ export interface Props extends DropdownButtonProps {
  */
 const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   const { children, options, onChange, selected, maxHeight, menuClassName, ...rest } = props;
-  const [visible, setVisible] = useState(false);
 
   const handleChange = (value: DropdownValue) => {
     if (onChange) {
       onChange(value);
     }
-    setVisible(false);
   };
 
-  const renderOption = ({ text, value }: Option) => (
-    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value} width="100%">
+  const renderOption = ({ text, value }: Option, onClose: () => void) => (
+    <DropdownMenuItem
+      onClick={() => {
+        handleChange(value);
+        onClose();
+      }}
+      selected={selected === value}
+      width="100%"
+    >
       {text}
     </DropdownMenuItem>
   );
 
   return (
-    <PlacementManager>
-      <PlacementReference>
-        {() => (
-          <DropdownButton
-            {...rest}
-            onClick={() => {
-              setVisible(!visible);
-            }}
-          >
-            <Text hasEllipsis>{children}</Text>
-          </DropdownButton>
-        )}
-      </PlacementReference>
-
-      <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
-        {() => (
-          <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
-            {options.map((option) => (
-              <React.Fragment key={option.text}>
-                {'options' in option ? (
-                  <DropdownMenuItemGroup text={option.text}>
-                    {option.options.map((groupOption) => (
-                      <React.Fragment key={groupOption.value}>{renderOption(groupOption)}</React.Fragment>
-                    ))}
-                  </DropdownMenuItemGroup>
-                ) : (
-                  renderOption(option)
-                )}
-              </React.Fragment>
-            ))}
-          </DropdownMenu>
-        )}
-      </Placement>
-    </PlacementManager>
+    <Popover matchWidth>
+      {({ onClose }) => (
+        <>
+          <PopoverTrigger>
+            <Button
+              width="100%"
+              variant="secondary"
+              rightIconName="ChevronDown"
+              justifyContent="space-between"
+              {...rest}
+            >
+              <Text as="span" hasEllipsis>
+                {children}
+              </Text>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent>
+            <DropdownMenu className={menuClassName} maxHeight={maxHeight} width="100%">
+              {options.map((option) => (
+                <React.Fragment key={option.text}>
+                  {'options' in option ? (
+                    <DropdownMenuItemGroup text={option.text}>
+                      {option.options.map((groupOption) => (
+                        <React.Fragment key={groupOption.value}>{renderOption(groupOption, onClose)}</React.Fragment>
+                      ))}
+                    </DropdownMenuItemGroup>
+                  ) : (
+                    renderOption(option, onClose)
+                  )}
+                </React.Fragment>
+              ))}
+            </DropdownMenu>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
   );
 };
 

package/src/Old/Status/Status500.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMediaQuery } from '../hooks';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Image from '../Image/Image';
+import Image from '../../Components/Image/Image';
 import Text from '../../Components/Text/Text';
 
 export type Props = FlexProps;
@@ -32,7 +32,7 @@ const Status500: React.FunctionComponent<Props> = (props: Props) => {
         Everything is under control, we will be back soon. Until then keep refreshing your browser.
       </Text>
 
-      <Image margin="x16" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
+      <Image marginY="64" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
     </Flex>
   );
 };

package/src/index.ts

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

package/src/old.ts

@@ -18,12 +18,6 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 export type { Props as DropdownProps } from './Old/Dropdown/Dropdown';
 export { default as Dropdown } from './Old/Dropdown/Dropdown';
 
-export type { Props as DropdownButtonProps } from './Old/Dropdown/DropdownButton';
-export { default as DropdownButton } from './Old/Dropdown/DropdownButton';
-
-export type { Props as DropdownMenusProps } from './Old/Dropdown/DropdownMenus';
-export { default as DropdownMenus } from './Old/Dropdown/DropdownMenus';
-
 export type { Props as DropdownMenuProps } from './Old/Dropdown/DropdownMenu';
 export { default as DropdownMenu } from './Old/Dropdown/DropdownMenu';
 
@@ -63,24 +57,6 @@ 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 PlacementProps } from './Old/Placement/Placement';
-export { default as Placement } from './Old/Placement/Placement';
-
-export type { Props as PlacementAreaProps } from './Old/Placement/PlacementArea';
-export { default as PlacementArea } from './Old/Placement/PlacementArea';
-
-export type { Props as PlacementArrowProps } from './Old/Placement/PlacementArrow';
-export { default as PlacementArrow } from './Old/Placement/PlacementArrow';
-
-export type { Props as PlacementManagerProps } from './Old/Placement/PlacementManager';
-export { default as PlacementManager } from './Old/Placement/PlacementManager';
-
-export type { Props as PlacementReferenceProps } from './Old/Placement/PlacementReference';
-export { default as PlacementReference } from './Old/Placement/PlacementReference';
-
-export type { Props as PortalProps } from './Old/Portal/Portal';
-export { default as Portal } from './Old/Portal/Portal';
-
 export type { Props as ProgressBarProps } from './Old/Progress/ProgressBar';
 export { default as ProgressBar } from './Old/Progress/ProgressBar';
 
@@ -90,21 +66,12 @@ export { default as ProgressBitbot } from './Old/Progress/ProgressBitbot';
 export type { Props as ProgressSpinnerProps } from './Old/Progress/ProgressSpinner';
 export { default as ProgressSpinner } from './Old/Progress/ProgressSpinner';
 
-export type { Props as RadioButtonProps } from './Old/RadioButton/RadioButton';
-export { default as RadioButton } from './Old/RadioButton/RadioButton';
-
-export type { Props as RibbonProps } from './Old/Ribbon/Ribbon';
-export { default as Ribbon } from './Old/Ribbon/Ribbon';
-
 export type { Props as SkeletonProps } from './Old/Skeleton/Skeleton';
 export { default as Skeleton } from './Old/Skeleton/Skeleton';
 
 export type { Props as SkeletonBoxProps } from './Old/Skeleton/SkeletonBox';
 export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
 
-export type { Props as Status404Props } from './Old/Status/Status404';
-export { default as Status404 } from './Old/Status/Status404';
-
 export type { Props as Status500Props } from './Old/Status/Status500';
 export { default as Status500 } from './Old/Status/Status500';
 

package/src/theme.ts

@@ -15,7 +15,7 @@ import Radio from './Components/Form/Radio/Radio.theme';
 import Select from './Components/Select/Select.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';
-import Notification from './Components/Notification/Notification.theme';
+import Alert from './Foundations/Themes/Alert.theme';
 import Tooltip from './Components/Tooltip/Tooltip.theme';
 import CloseButton from './Components/CloseButton/CloseButton.theme';
 import Popover from './Components/Popover/Popover.theme';
@@ -82,7 +82,7 @@ const theme = {
     Tabs,
     Text,
     Tooltip,
-    Alert: Notification,
+    Alert,
     CloseButton,
     Popover,
   },