@bitrise/bitkit 10.16.4 → 10.17.1

package/package.json

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

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/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { isValidElement, ReactElement, useEffect, useState } from 'react';
+import React, { isValidElement, ReactElement, useState } from 'react';
 import { Tabs as ChakraTabs, TabsProps as ChakraTabsProps, forwardRef } from '@chakra-ui/react';
 import { useHistory } from '../../hooks';
 
@@ -15,6 +15,25 @@ const getTabIds = (props: TabsProps): string[] => {
   return tabs.filter((item) => isValidElement(item)).map((item) => item.props.id);
 };
 
+const getTabIndexFromSearchParams = (tabIds: string[], defaultIndex?: number) => {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+
+  const searchParams = new URLSearchParams(window.location.search);
+  const tabName = searchParams.get('tab');
+  if (!tabName) {
+    return undefined;
+  }
+
+  const index = tabIds.indexOf(tabName);
+  if (index === -1) {
+    return defaultIndex;
+  }
+
+  return index;
+};
+
 /**
  * An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern.
  */
@@ -23,21 +42,16 @@ const Tabs = forwardRef<TabsProps, 'div'>((props, ref) => {
   const tabIds = getTabIds(props);
   const defaultIndex = tabIds.indexOf(defaultTab) > -1 ? tabIds.indexOf(defaultTab) : 0;
 
-  const { searchParams, replace } = useHistory();
-  const [actualIndex, setActualIndex] = useState(defaultIndex);
-
-  useEffect(() => {
-    if (withHistory && searchParams.get('tab')) {
-      const tabName = searchParams.get('tab') || '';
-      const index = tabIds.indexOf(tabName) > -1 ? tabIds.indexOf(tabName) : defaultIndex;
-      setActualIndex(index);
-    }
-  }, []);
+  const { replace } = useHistory();
+  const [actualIndex, setActualIndex] = useState(
+    withHistory ? getTabIndexFromSearchParams(tabIds, defaultIndex) : defaultIndex,
+  );
 
   const onTabChange = (index: number) => {
     const tabId = tabIds[index];
     setActualIndex(index);
     if (withHistory) {
+      const searchParams = new URLSearchParams(window.location.search);
       if (tabId) {
         searchParams.set('tab', tabId);
       } else {

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>
       ),
     });