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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.17.0-alpha-export-new-notification.1",
+  "version": "10.17.0",
   "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/Notification/Notification.stories.tsx

@@ -1,13 +1,13 @@
 import { ComponentMeta, ComponentStoryFn } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import Notification, { NotificationText, NotificationTitle } from './Notification';
+import Link from '../Link/Link';
+import Notification from './Notification';
 
 export default {
   title: 'Components/Notification',
   component: Notification,
   argTypes: {
-    title: { type: 'string', defaultValue: 'title' },
-    description: { type: 'string', defaultValue: 'description' },
+    children: { type: 'string', defaultValue: 'text' },
     action: {
       control: 'inline-radio',
       options: ['unset', 'link', 'action'],
@@ -31,12 +31,7 @@ export default {
   },
 } as ComponentMeta<typeof Notification>;
 
-const Template: ComponentStoryFn<typeof Notification> = ({ title, description, ...props }) => (
-  <Notification {...props}>
-    <NotificationTitle>{title}</NotificationTitle>
-    <NotificationText>{description}</NotificationText>
-  </Notification>
-);
+const Template: ComponentStoryFn<typeof Notification> = (props) => <Notification {...props} />;
 
 export const Default: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
 Default.args = {
@@ -64,3 +59,26 @@ WithAction.args = {
     label: 'Upgrade',
   },
 };
+
+export const WithActionAfterContent: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
+WithActionAfterContent.storyName = 'With action after content';
+WithActionAfterContent.args = {
+  action: {
+    label: 'Upgrade',
+    placement: 'after-content',
+  },
+};
+
+export const WithLink: ComponentStoryFn<typeof Notification> = (props) => <Template {...props} />;
+WithLink.storyName = 'With link';
+WithLink.args = {
+  children: (
+    <>
+      Unable to send build status back to your git host. Please check{' '}
+      <Link href="#/" isUnderlined>
+        our guide
+      </Link>
+      .
+    </>
+  ),
+};

package/src/Components/Notification/Notification.tsx

@@ -1,13 +1,5 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
-import {
-  Alert as ChakraAlert,
-  AlertTitle as NotificationTitle,
-  AlertProps,
-  forwardRef,
-  AlertDescription as NotificationText,
-  Spinner,
-  chakra,
-} from '@chakra-ui/react';
+import { Alert as ChakraAlert, AlertProps, forwardRef, Spinner } from '@chakra-ui/react';
 
 import { ColorScheme } from '../../Foundations/Colors/Colors';
 import Box from '../Box/Box';
@@ -25,9 +17,9 @@ const STATUSES: Record<NotificationStatus, { colorScheme: ColorScheme; defaultIc
   progress: {
     colorScheme: 'purple',
     defaultIcon: (
-      <chakra.span w="24" h="24" p="2">
-        <Spinner w="100" h="100" />
-      </chakra.span>
+      <Box width={24} height={24} padding={2}>
+        <Spinner width={20} height={20} />
+      </Box>
     ),
   },
 } as const;
@@ -36,6 +28,7 @@ export type ActionProps = {
   label: string;
   href?: string;
   onClick?: () => void;
+  placement?: 'end' | 'after-content';
 } & Omit<ColorButtonProps, 'as' | 'onClick' | 'colorScheme'>;
 export interface NotificationProps extends Omit<AlertProps, 'status' | 'colorScheme' | 'onClose'> {
   status: NotificationStatus;
@@ -70,6 +63,7 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
   const { colorScheme, defaultIcon } = STATUSES[status];
   const icon = iconName ? <Icon name={iconName} /> : defaultIcon;
   let actionButton;
+  const actionPlacement = action?.placement ?? 'end';
   if (action) {
     actionButton = <NotificationAction marginRight="12" {...action} alignSelf="center" />;
   }
@@ -81,12 +75,18 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
     <ChakraAlert ref={ref} {...rest} colorScheme={colorScheme}>
       <ActionContext.Provider value={actionContext}>
         {showIcon && cloneElement(icon, { flexShrink: 0, marginTop })}
-        <Box wordBreak="break-word" display="flex" flexDirection="column" flexGrow={1} marginTop={marginTop}>
+        <Box wordBreak="break-word" flexGrow={actionPlacement === 'end' ? 1 : undefined} marginTop={marginTop}>
           {children}
         </Box>
         {actionButton}
         {onClose && (
-          <CloseButton flexShrink={0} colorScheme={colorScheme} onClick={onClose}>
+          <CloseButton
+            flexShrink={0}
+            marginLeft="auto"
+            marginTop={marginTop}
+            colorScheme={colorScheme}
+            onClick={onClose}
+          >
             <Icon name="CloseSmall" />
           </CloseButton>
         )}
@@ -95,5 +95,5 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
   );
 });
 
-export { NotificationTitle, NotificationText, NotificationAction };
+export { NotificationAction };
 export default Notification;

package/src/Components/Toast/Toast.tsx

@@ -1,12 +1,7 @@
-import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react';
+import { useToast as useChakraToast, UseToastOptions, AlertTitle, AlertDescription } from '@chakra-ui/react';
 import { DateTime } from 'luxon';
-import Notification, {
-  ActionProps,
-  NotificationAction,
-  NotificationProps,
-  NotificationText,
-  NotificationTitle,
-} from '../Notification/Notification';
+import Box from '../Box/Box';
+import Notification, { ActionProps, NotificationAction, NotificationProps } from '../Notification/Notification';
 
 export interface ToastOptions {
   title: string;
@@ -37,10 +32,12 @@ const useToast = () => {
           status={opts.status}
           onClose={opts.isClosable ? onClose : undefined}
         >
-          <NotificationTitle>{opts.title}</NotificationTitle>
-          <NotificationText>{opts.description}</NotificationText>
-          {!opts.action && timestamp && <NotificationText marginTop="8">{timestamp}</NotificationText>}
-          {opts.action && <NotificationAction alignSelf="start" marginTop="8" marginBottom="4" {...opts.action} />}
+          <Box display="flex" flexDirection="column">
+            <AlertTitle>{opts.title}</AlertTitle>
+            <AlertDescription>{opts.description}</AlertDescription>
+            {!opts.action && timestamp && <AlertDescription marginTop="8">{timestamp}</AlertDescription>}
+            {opts.action && <NotificationAction alignSelf="start" marginTop="8" marginBottom="4" {...opts.action} />}
+          </Box>
         </Notification>
       ),
     });