@bitrise/bitkit 10.16.1 → 10.16.4

package/package.json

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

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

@@ -56,5 +56,8 @@ export const DefaultVariant: ComponentStory<typeof Accordion> = (props) => (
       Content - you can use any style prop on AccordionItem
     </AccordionItem>
     <AccordionItem buttonContent={<ButtonContentElement title="Without children" />} id="third" />
+    <AccordionItem buttonContent="Fourth, enabled element" fontSize="2" id="fourth">
+      Fourth, enabled element
+    </AccordionItem>
   </Accordion>
 );

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

@@ -1,5 +1,22 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
+const buttonStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '16',
+  borderBottom: '1px solid',
+  borderColor: 'neutral.93',
+  borderRadius: '8',
+};
+
+const iconStyle = {
+  width: '24',
+  height: '24',
+  marginLeft: '16',
+};
+
 const AccordionTheme: ComponentStyleConfig = {
   baseStyle: ({ colorScheme }) => ({
     item: {
@@ -9,28 +26,29 @@ const AccordionTheme: ComponentStyleConfig = {
       boxShadow: 'small',
       marginBottom: '16',
     },
-    button: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      width: '100%',
-      padding: '16',
+    enabledButton: {
+      ...buttonStyle,
       background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
-      borderBottom: '1px solid',
-      borderColor: 'neutral.93',
-      borderRadius: '8',
-      '&[type="button"]:hover': {
+      _hover: {
         background: 'purple.95',
       },
-      '&[aria-expanded="true"]': {
+      _expanded: {
         borderBottomLeftRadius: '0',
         borderBottomRightRadius: '0',
       },
     },
-    icon: {
-      width: '24',
-      height: '24',
-      marginLeft: '16',
+    disabledButton: {
+      ...buttonStyle,
+      background: colorScheme === 'gray' ? 'neutral.95' : 'neutral.100',
+      cursor: 'default',
+    },
+    enabledIcon: {
+      ...iconStyle,
+    },
+    disabledIcon: {
+      ...iconStyle,
+      opacity: '0.4',
+      transform: 'none',
     },
     panel: {
       padding: '16',

package/src/Components/Accordion/AccordionItem.tsx

@@ -8,7 +8,6 @@ import {
   AccordionIcon,
   useAccordionStyles,
 } from '@chakra-ui/react';
-import Box from '../Box/Box';
 import Text from '../Text/Text';
 
 export interface AccordionItemProps extends AccordionPanelProps {
@@ -21,14 +20,12 @@ const AccordionItem = (props: AccordionItemProps) => {
   const { buttonContent, children, id, ...rest } = props;
   const styles = useAccordionStyles();
 
-  const ButtonComponent = children ? AccordionButton : Box;
-
   return (
     <ChakraAccordionItem sx={styles.item} id={id}>
-      <ButtonComponent sx={styles.button}>
+      <AccordionButton sx={children ? styles.enabledButton : styles.disabledButton}>
         {isValidElement(buttonContent) ? buttonContent : <Text as="span">{buttonContent}</Text>}
-        <AccordionIcon opacity={children ? 1 : 0.4} />
-      </ButtonComponent>
+        <AccordionIcon sx={children ? styles.enabledIcon : styles.disabledIcon} />
+      </AccordionButton>
       {!!children && <AccordionPanel {...rest}>{children}</AccordionPanel>}
     </ChakraAccordionItem>
   );

package/src/Components/LightBox/LightBox.stories.tsx

@@ -1,6 +1,7 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { useDisclosure } from '@chakra-ui/react';
 import Button from '../Button/Button';
+import AspectRatio from '../AspectRatio/AspectRatio';
 import LightBox, { LightBoxProps } from './LightBox';
 
 export default {
@@ -13,15 +14,15 @@ export const WithProps: Story<LightBoxProps> = ({ ...props }: LightBoxProps) =>
 
   const getContent = () => {
     return (
-      <iframe
-        id="ytplayer"
-        title="Intro to Bitrise"
-        width="100%"
-        height="500"
-        src="https://www.youtube.com/embed/JrCn9xWQ7IM"
-        frameBorder="0"
-        allowFullScreen
-      />
+      <AspectRatio ratio={props.size === 'full' ? 1.33 : 1.77}>
+        <iframe
+          id="ytplayer"
+          title="Intro to Bitrise"
+          src="https://www.youtube.com/embed/JrCn9xWQ7IM"
+          frameBorder="0"
+          allowFullScreen
+        />
+      </AspectRatio>
     );
   };
 
@@ -34,3 +35,5 @@ export const WithProps: Story<LightBoxProps> = ({ ...props }: LightBoxProps) =>
     </>
   );
 };
+
+WithProps.args = { ...LightBox.defaultProps };

package/src/Components/LightBox/LightBox.tsx

@@ -1,16 +1,26 @@
-import { Modal, ModalOverlay, ModalContent, usePrefersReducedMotion, HTMLChakraProps } from '@chakra-ui/react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  useBreakpointValue,
+  usePrefersReducedMotion,
+  HTMLChakraProps,
+} from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 
 export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
   dataTestid?: string;
+  size?: 'small' | 'medium' | 'large' | 'full';
   isOpen: boolean;
   onClose(): void;
 }
 
-const LightBox = ({ children, dataTestid, isOpen, onClose, ...rest }: LightBoxProps) => {
+const LightBox = ({ children, dataTestid, size, isOpen, onClose, ...rest }: LightBoxProps) => {
   const prefersReducedMotion = usePrefersReducedMotion();
+  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
 
   return (
-    <Modal isOpen={isOpen} motionPreset={prefersReducedMotion ? 'none' : 'scale'} onClose={onClose}>
+    <Modal isOpen={isOpen} motionPreset={prefersReducedMotion ? 'none' : 'scale'} onClose={onClose} size={dialogSize}>
       <ModalOverlay />
       <ModalContent borderRadius="0" data-testid={dataTestid} {...rest}>
         {children}
@@ -19,4 +29,8 @@ const LightBox = ({ children, dataTestid, isOpen, onClose, ...rest }: LightBoxPr
   );
 };
 
+LightBox.defaultProps = {
+  size: 'large',
+} as LightBoxProps;
+
 export default LightBox;

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

@@ -56,3 +56,11 @@ WithoutIcon.args = {
   action: undefined,
   showIcon: false,
 };
+
+export const WithAction: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
+WithAction.storyName = 'With action';
+WithAction.args = {
+  action: {
+    label: 'Upgrade',
+  },
+};

package/src/Components/Notification/Notification.tsx

@@ -1,4 +1,4 @@
-import { createContext, ReactNode, useContext, useMemo } from 'react';
+import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
 import {
   Alert as ChakraAlert,
   AlertTitle as NotificationTitle,
@@ -15,7 +15,9 @@ import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Icon, { TypeIconName } from '../Icon/Icon';
 
-const STATUSES: Record<string, { colorScheme: ColorScheme; defaultIcon: ReactNode }> = {
+type NotificationStatus = 'info' | 'error' | 'success' | 'warning' | 'progress';
+
+const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIcon: ReactElement }> = {
   info: { colorScheme: 'blue', defaultIcon: <Icon name="Info" /> },
   error: { colorScheme: 'red', defaultIcon: <Icon name="ErrorGeneral" /> },
   success: { colorScheme: 'green', defaultIcon: <Icon name="Tick" /> },
@@ -24,25 +26,28 @@ const STATUSES: Record<string, { colorScheme: ColorScheme; defaultIcon: ReactNod
     colorScheme: 'purple',
     defaultIcon: (
       <chakra.span w="24" h="24" p="2">
-        <Spinner w="100%" h="100%" />
+        <Spinner w="100" h="100" />
       </chakra.span>
     ),
   },
 } as const;
 
-export type ActionProps = { label: string; href?: string; onClick?: () => void } & Omit<
-  ColorButtonProps,
-  'as' | 'onClick' | 'colorScheme'
->;
+export type ActionProps = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+} & Omit<ColorButtonProps, 'as' | 'onClick' | 'colorScheme'>;
 export interface NotificationProps extends Omit<AlertProps, 'status' | 'colorScheme' | 'onClose'> {
-  status: keyof typeof STATUSES;
+  status: NotificationStatus;
   onClose?: () => void;
   action?: ActionProps;
   iconName?: TypeIconName;
   showIcon?: boolean;
 }
 
-const ActionContext = createContext<{ colorScheme: ColorScheme }>({ colorScheme: 'blue' });
+const ActionContext = createContext<{ colorScheme: ColorScheme }>({
+  colorScheme: 'blue',
+});
 
 const NotificationAction = ({ label, href, ...rest }: ActionProps) => {
   const actionContext = useContext(ActionContext);
@@ -69,11 +74,14 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
     actionButton = <NotificationAction marginRight="12" {...action} alignSelf="center" />;
   }
   const actionContext = useMemo(() => ({ colorScheme }), [colorScheme]);
+  // This is needed when the actionButton is rendered with a one-liner text.
+  // Without this both the icon and the text would be strangely aligned.
+  const marginTop = actionButton ? 4 : undefined;
   return (
     <ChakraAlert ref={ref} {...rest} colorScheme={colorScheme}>
       <ActionContext.Provider value={actionContext}>
-        {showIcon && <Box flexShrink={0}>{icon}</Box>}
-        <Box wordBreak="break-word" display="flex" flexDirection="column" flexGrow={1}>
+        {showIcon && cloneElement(icon, { flexShrink: 0, marginTop })}
+        <Box wordBreak="break-word" display="flex" flexDirection="column" flexGrow={1} marginTop={marginTop}>
           {children}
         </Box>
         {actionButton}

package/src/index.ts

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