@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

package/src/AddonBeam/AddonBeam.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as dataAtIds from '../dataAtIds.json';
 import { TypeIconName } from '../Icon/tsx';
-import AddonBeamLink from './AddonBeamLink';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Hamburger from '../Hamburger/Hamburger';
 import Badge from '../Badge/Badge';
@@ -9,6 +8,7 @@ import Icon from '../Icon/Icon';
 import Link from '../Link/Link';
 import Image from '../Image/Image';
 import Text from '../Text/Text';
+import AddonBeamLink from './AddonBeamLink';
 import './AddonBeam.css';
 
 export interface Props extends FlexProps {
@@ -49,70 +49,63 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
   } = props;
 
   return (
-    <Flex { ...rest }
-        alignChildrenHorizontal="between"
-        alignChildrenVertical="middle"
-        className="AddonBeam"
-        container
-        direction="horizontal">
-      { isInResponsiveView && !!onHamburgerIconClick && (
+    <Flex
+      {...rest}
+      alignChildrenHorizontal="between"
+      alignChildrenVertical="middle"
+      className="AddonBeam"
+      container
+      direction="horizontal"
+    >
+      {isInResponsiveView && !!onHamburgerIconClick && (
         <Flex>
-          <Link
-              color="white"
-              onClick={ onHamburgerIconClick }>
-            <Hamburger active={ isHamburgerIconActive } data-bitkit-at-id={ dataAtIds.AddonBeamHamburger } />
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link color="white" onClick={onHamburgerIconClick}>
+            <Hamburger active={isHamburgerIconActive} data-bitkit-at-id={dataAtIds.AddonBeamHamburger} />
           </Link>
         </Flex>
-      ) }
+      )}
 
       <Flex
-          absolute={ isInResponsiveView ? 'center' : undefined }
-          alignChildrenVertical="middle"
-          direction="horizontal"
-          gap="x2">
+        absolute={isInResponsiveView ? 'center' : undefined}
+        alignChildrenVertical="middle"
+        direction="horizontal"
+        gap="x2"
+      >
         <Flex>
-          <Icon name={ addonIcon } />
+          <Icon name={addonIcon} />
         </Flex>
 
         <Flex>
           <Text size="3">
-            <Text inline weight="bold">{ addonName }</Text> by Bitrise
+            <Text inline weight="bold">
+              {addonName}
+            </Text>{' '}
+            by Bitrise
           </Text>
         </Flex>
 
-        { isBeta && (
+        {isBeta && (
           <Flex>
-            <Badge
-                backgroundColor="yellow-3"
-                textColor="grape-5">
+            <Badge backgroundColor="yellow-3" textColor="grape-5">
               BETA
             </Badge>
           </Flex>
-        ) }
+        )}
       </Flex>
 
-      { !isInResponsiveView && appName && (
+      {!isInResponsiveView && appName && (
         <Flex absolute="center">
-          <AddonBeamLink href={ appLink }>
-            <Flex
-                alignChildrenVertical="middle"
-                direction="horizontal"
-                gap="x2">
-              { appImage && (
+          <AddonBeamLink href={appLink}>
+            <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
+              {appImage && (
                 <Flex>
-                  <Image
-                      borderRadius="x1"
-                      height="1.5rem"
-                      src={ appImage }
-                      width="1.5rem" />
+                  <Image borderRadius="x1" height="1.5rem" src={appImage} width="1.5rem" />
                 </Flex>
-              ) }
+              )}
 
-              <Flex
-                  alignChildrenVertical="middle"
-                  direction="horizontal"
-                  gap="x1">
-                <Flex>{ appName }</Flex>
+              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x1">
+                <Flex>{appName}</Flex>
                 <Flex>
                   <Icon name="OpenInBrowser" />
                 </Flex>
@@ -120,17 +113,13 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
             </Flex>
           </AddonBeamLink>
         </Flex>
-      ) }
-
+      )}
 
-      { children && !isInResponsiveView && (
-        <Flex
-            alignChildrenVertical="middle"
-            direction="horizontal"
-            gap="x6">
-          { children }
+      {children && !isInResponsiveView && (
+        <Flex alignChildrenVertical="middle" direction="horizontal" gap="x6">
+          {children}
         </Flex>
-      ) }
+      )}
     </Flex>
   );
 };

package/src/AddonBeam/AddonBeamLink.tsx

@@ -4,6 +4,7 @@ import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 
 export interface Props extends FlexProps {
+  Component?: FlexProps['Component'];
   /** Name of the icon that appears next to the text of the link. */
   icon?: TypeIconName;
   /** @Ignore */
@@ -17,19 +18,14 @@ const AddonBeamLink: React.FunctionComponent<Props> = (props: Props) => {
   const { children, icon, ...rest } = props;
 
   return (
-    <Flex { ...rest }
-        className="AddonBeam__link"
-        direction="horizontal"
-        gap="x1">
-      { icon && (
+    <Flex {...rest} className="AddonBeam__link" direction="horizontal" gap="x1">
+      {icon && (
         <Flex>
-          <Icon name={ icon } />
+          <Icon name={icon} />
         </Flex>
-      ) }
+      )}
 
-      <Flex>
-        { children }
-      </Flex>
+      <Flex>{children}</Flex>
     </Flex>
   );
 };

package/src/AddonFooter/AddonFooter.tsx

@@ -10,10 +10,10 @@ export interface Props extends FlexProps {
 
 /** A common Bitrise footer component */
 const AddonFooter: React.FunctionComponent<Props> = ({ addonName, ...rest }: Props) => (
-  <Flex { ...rest } alignChildren="middle" direction="vertical">
+  <Flex {...rest} alignChildren="middle" direction="vertical">
     <Icon margin="x2" name="Bitbot" size="1.5rem" />
     <Text align="middle" letterSpacing="x5" size="1" uppercase>
-      { addonName }
+      {addonName}
     </Text>
     <Text align="middle" letterSpacing="x5" size="1" uppercase>
       An Official Bitrise Add-on

package/src/AppLayout/AppLayout.css

@@ -12,7 +12,7 @@
   top: var(--AddonBeam--height);
   width: 18.75rem;
   height: calc(100vh - var(--AddonBeam--height));
-  background-color: var(--bitkit-colors-grape-5);
+  background-color: var(--color-grape--5);
   overflow: auto;
   z-index: var(--z-index-Sidebar);
 }

package/src/AppLayout/AppLayout.tsx

@@ -15,9 +15,7 @@ const AppLayout: React.FunctionComponent<Props> = (props: Props) => {
     'AppLayout--sidebar-visible': isSidebarVisible,
   });
 
-  return (
-    <Flex { ...rest } className={ classes } direction="vertical" grow />
-  );
+  return <Flex {...rest} className={classes} direction="vertical" grow />;
 };
 
 export default AppLayout;

package/src/AppLayout/AppLayoutBody.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 const AppLayoutBody: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } direction="horizontal" grow />
-  );
+  return <Flex {...props} direction="horizontal" grow />;
 };
 
 export default AppLayoutBody;

package/src/AppLayout/AppLayoutHeader.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 const AppLayoutHeader: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } className="AppLayout__header" />
-  );
+  return <Flex {...props} className="AppLayout__header" />;
 };
 
 export default AppLayoutHeader;

package/src/AppLayout/AppLayoutMain.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 const AppLayoutMain: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } direction="vertical" grow />
-  );
+  return <Flex {...props} direction="vertical" grow />;
 };
 
 export default AppLayoutMain;

package/src/AppLayout/AppLayoutSidebar.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 const AppLayoutSidebar: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } alignSelf="start" className="AppLayout__sidebar" />
-  );
+  return <Flex {...props} alignSelf="start" className="AppLayout__sidebar" />;
 };
 
 export default AppLayoutSidebar;

package/src/Appear/Appear.tsx

@@ -13,12 +13,7 @@ const durations = {
   slow: transitionDurationSlow,
 };
 
-export type TypeAppearAnimationName =
-  'Fade' |
-  'FadeSlideUp' |
-  'FadeSlideRight' |
-  'FadeSlideDown' |
-  'FadeSlideLeft';
+export type TypeAppearAnimationName = 'Fade' | 'FadeSlideUp' | 'FadeSlideRight' | 'FadeSlideDown' | 'FadeSlideLeft';
 
 export interface Props extends BaseProps {
   /** Type of enter and exit animation */
@@ -35,14 +30,7 @@ export interface Props extends BaseProps {
 
 /** Enter and exit components into view with a bit of bedazzle */
 const Appear: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    animation,
-    className,
-    delay,
-    duration = 'fast',
-    visible,
-    ...rest
-  } = props;
+  const { animation, className, delay, duration = 'fast', style, visible, ...rest } = props;
 
   const classes = classnames(className, 'Appear', `Appear--${animation}`, `Appear--${duration}`, {
     [`Appear--${animation}-appear`]: !isClient && visible,
@@ -59,19 +47,20 @@ const Appear: React.FunctionComponent<Props> = (props: Props) => {
     exitDone: `Appear--${animation}-exit-done`,
   };
 
-  const style = {
-    ...props.style,
+  const newStyle = {
+    ...style,
     animationDelay: `${delay}ms`,
     transitionDelay: `${delay}ms`,
   };
 
   return (
     <CSSTransition
-        appear={ isClient && visible }
-        classNames={ transition }
-        in={ isClient && visible }
-        timeout={ durations[duration] }>
-      <Base { ...rest } className={ classes } style={ style } />
+      appear={isClient && visible}
+      classNames={transition}
+      in={isClient && visible}
+      timeout={durations[duration]}
+    >
+      <Base {...rest} className={classes} style={newStyle} />
     </CSSTransition>
   );
 };

package/src/Avatar/Avatar.tsx

@@ -22,7 +22,7 @@ const Avatar: React.FunctionComponent<Props> = (props: Props) => {
       const seed = str.charCodeAt(0) + str.charCodeAt(str.length - 1);
 
       return {
-        shortHand: shortHand,
+        shortHand,
         styles: {
           backgroundColor: avatarColors[seed % avatarColors.length],
         },
@@ -39,22 +39,23 @@ const Avatar: React.FunctionComponent<Props> = (props: Props) => {
 
   return (
     <Flex
-        borderRadius="rounded"
-        { ...rest }
-        alignChildrenHorizontal="middle"
-        alignChildrenVertical="middle"
-        className="Avatar"
-        direction="horizontal"
-        height={ size }
-        overflow="hidden"
-        style={ { ...memoizedValue.styles, ...rest.styles } }
-        width={ size }>
+      borderRadius="rounded"
+      {...rest}
+      alignChildrenHorizontal="middle"
+      alignChildrenVertical="middle"
+      className="Avatar"
+      direction="horizontal"
+      height={size}
+      overflow="hidden"
+      style={{ ...memoizedValue.styles, ...rest.styles }}
+      width={size}
+    >
       <Flex>
-        { memoizedValue.shortHand && (
+        {memoizedValue.shortHand && (
           <Text size="3" textColor="white">
-            { memoizedValue.shortHand }
+            {memoizedValue.shortHand}
           </Text>
-        ) }
+        )}
       </Flex>
     </Flex>
   );

package/src/Badge/Badge.tsx

@@ -12,12 +12,7 @@ export interface Props extends TextProps {
  * important to a user.
  */
 const Badge: React.FunctionComponent<Props> = ({ uppercase = true, className, ...rest }: Props) => {
-  return (
-    <Text { ...rest }
-        className={ classnames('Badge', className) }
-        size="1"
-        uppercase={ uppercase } />
-  );
+  return <Text {...rest} className={classnames('Badge', className)} size="1" uppercase={uppercase} />;
 };
 
 export default Badge;