@bitrise/bitkit 9.3.0 → 9.3.1

package/src/Input/InputContent.tsx

@@ -21,12 +21,14 @@ const InputContent: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Flex { ...rest }
-        alignChildrenVertical="middle"
-        className={ classes }
-        direction="horizontal"
-        gap="x2"
-        grow={ !outside } />
+    <Flex
+      {...rest}
+      alignChildrenVertical="middle"
+      className={classes}
+      direction="horizontal"
+      gap="x2"
+      grow={!outside}
+    />
   );
 };
 

package/src/Input/InputInlineHelp.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import Text, { Props as TextProps } from '../Text/Text';
 
-export interface Props extends TextProps {}
+export type Props = TextProps;
 
 /** Provides specific styling for an inline input label */
 const InputInlineHelp: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Text margin="x2" size="2" textColor="gray-6" { ...props } />
-  );
+  return <Text margin="x2" size="2" textColor="gray-6" {...props} />;
 };
 
 export default InputInlineHelp;

package/src/Input/InputLabel.tsx

@@ -1,21 +1,14 @@
 import * as React from 'react';
 import Text, { Props as TextProps } from '../Text/Text';
 
-export interface Props extends TextProps {}
+export type Props = TextProps;
 
 /**
  * Provides specific styling for a label that accompanies an
  * input.
  */
 const InputLabel: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Text { ...props }
-        Component="label"
-        margin="x1"
-        size="3"
-        textColor="grape-4"
-        weight="bold" />
-  );
+  return <Text {...props} Component="label" margin="x1" size="3" textColor="grape-4" weight="bold" />;
 };
 
 export default InputLabel;

package/src/Link/Link.tsx

@@ -6,6 +6,7 @@ import './Link.css';
 export type TypeLinkColor = 'grape-3' | 'grape-5' | 'gray-1' | 'gray-5' | 'white';
 
 export interface Props extends BaseProps {
+  Component?: BaseProps['Component'];
   /** A subset of the base level color that has interaction styling */
   color?: TypeLinkColor;
   /** Applies an underline styling to the link */
@@ -19,9 +20,7 @@ const Link: React.FunctionComponent<Props> = (props: Props) => {
     'Link--underline': underline,
   });
 
-  return (
-    <Base { ...rest } className={ classes } />
-  );
+  return <Base {...rest} className={classes} />;
 };
 
 Link.defaultProps = {

package/src/List/List.tsx

@@ -2,15 +2,13 @@ import * as React from 'react';
 import Base, { Props as BaseProps } from '../Base/Base';
 import './List.css';
 
-export interface Props extends BaseProps {}
+export type Props = BaseProps;
 
 /**
  * Standard unordered list component.
  */
 const List: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Base { ...props } Component="ul" className="List" />
-  );
+  return <Base {...props} Component="ul" className="List" />;
 };
 
 export default List;

package/src/List/ListItem.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import Base, { Props as BaseProps } from '../Base/Base';
 
-export interface Props extends BaseProps {}
+export type Props = BaseProps;
 
 /**
  * Standard list item component.
  */
 const ListItem: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Base { ...props } Component="li" className="List__item" />
-  );
+  return <Base {...props} Component="li" className="List__item" />;
 };
 
 export default ListItem;

package/src/Logo/Logo.tsx

@@ -22,7 +22,6 @@ const viewBoxWidth = 35;
 const viewBox = `0 0 ${viewBoxWidth} ${viewBoxHeight}`;
 const viewBoxScale = viewBoxWidth / viewBoxHeight;
 
-
 /**
  * Bitrise Logo
  */
@@ -33,15 +32,16 @@ const Logo: React.FunctionComponent<Props> = (props: Props) => {
 
   return (
     <Base
-        Component="svg"
-        className="Logo"
-        height={ scaledHeight }
-        viewBox={ viewBox }
-        width={ scaledWidth }
-        xmlns="http://www.w3.org/2000/svg">
+      Component="svg"
+      className="Logo"
+      height={scaledHeight}
+      viewBox={viewBox}
+      width={scaledWidth}
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <g fill="currentColor" fillRule="evenodd">
-        <path d="M17.103 22.771a3.804 3.804 0 0 1-3.803-3.804h7.607c0 2.101-1.703 3.804-3.804 3.804zM8.602 14.27a2.349 2.349 0 0 0-2.349 2.349h4.697a2.349 2.349 0 0 0-2.348-2.349M25.622 14.27a2.349 2.349 0 0 0-2.349 2.35h4.697a2.349 2.349 0 0 0-2.348-2.35M17.103 3.08a1.455 1.455 0 1 0 0-2.91 1.455 1.455 0 0 0 0 2.91"></path>
-        <path d="M31.19 24.734a2.615 2.615 0 0 1-1.84.876c-2.937.137-7.444.301-12.247.301-4.802 0-9.31-.164-12.245-.3a2.615 2.615 0 0 1-1.842-.877 2.607 2.607 0 0 1-.661-1.922c.154-2.349.364-4.428.622-6.18.383-2.6.959-5.24 1.374-6.997a2.611 2.611 0 0 1 2.393-2.017c2.129-.133 5.654-.29 10.36-.29 4.704 0 8.23.157 10.36.29a2.611 2.611 0 0 1 2.392 2.017c.416 1.757.991 4.398 1.374 6.997.258 1.752.467 3.831.622 6.18a2.608 2.608 0 0 1-.662 1.922m2.363-8.444c-.394-2.682-.985-5.393-1.412-7.196a4.947 4.947 0 0 0-4.532-3.82c-2.162-.135-5.74-.296-10.506-.296-4.765 0-8.343.161-10.505.296a4.947 4.947 0 0 0-4.532 3.82c-.427 1.802-1.018 4.513-1.413 7.196-.267 1.814-.483 3.956-.642 6.367A4.937 4.937 0 0 0 1.265 26.3a4.945 4.945 0 0 0 3.483 1.657c2.96.139 7.508.304 12.355.304 4.848 0 9.395-.165 12.356-.304a4.945 4.945 0 0 0 3.483-1.657 4.937 4.937 0 0 0 1.254-3.642c-.16-2.41-.375-4.553-.643-6.367"></path>
+        <path d="M17.103 22.771a3.804 3.804 0 0 1-3.803-3.804h7.607c0 2.101-1.703 3.804-3.804 3.804zM8.602 14.27a2.349 2.349 0 0 0-2.349 2.349h4.697a2.349 2.349 0 0 0-2.348-2.349M25.622 14.27a2.349 2.349 0 0 0-2.349 2.35h4.697a2.349 2.349 0 0 0-2.348-2.35M17.103 3.08a1.455 1.455 0 1 0 0-2.91 1.455 1.455 0 0 0 0 2.91" />
+        <path d="M31.19 24.734a2.615 2.615 0 0 1-1.84.876c-2.937.137-7.444.301-12.247.301-4.802 0-9.31-.164-12.245-.3a2.615 2.615 0 0 1-1.842-.877 2.607 2.607 0 0 1-.661-1.922c.154-2.349.364-4.428.622-6.18.383-2.6.959-5.24 1.374-6.997a2.611 2.611 0 0 1 2.393-2.017c2.129-.133 5.654-.29 10.36-.29 4.704 0 8.23.157 10.36.29a2.611 2.611 0 0 1 2.392 2.017c.416 1.757.991 4.398 1.374 6.997.258 1.752.467 3.831.622 6.18a2.608 2.608 0 0 1-.662 1.922m2.363-8.444c-.394-2.682-.985-5.393-1.412-7.196a4.947 4.947 0 0 0-4.532-3.82c-2.162-.135-5.74-.296-10.506-.296-4.765 0-8.343.161-10.505.296a4.947 4.947 0 0 0-4.532 3.82c-.427 1.802-1.018 4.513-1.413 7.196-.267 1.814-.483 3.956-.642 6.367A4.937 4.937 0 0 0 1.265 26.3a4.945 4.945 0 0 0 3.483 1.657c2.96.139 7.508.304 12.355.304 4.848 0 9.395-.165 12.356-.304a4.945 4.945 0 0 0 3.483-1.657 4.937 4.937 0 0 0 1.254-3.642c-.16-2.41-.375-4.553-.643-6.367" />
       </g>
     </Base>
   );

package/src/Modal/Modal.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { useEventListener } from '../hooks';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import { ModalContext } from './ModalContext';
 import Portal from '../Portal/Portal';
 import { TypeColors } from '../Base/Base';
+import { ModalContext } from './ModalContext';
 import './Modal.css';
 
 const { useEffect, useState } = React;
@@ -43,18 +43,10 @@ export interface Props extends FlexProps {
  * an important message or question.
  */
 const Modal: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    backgroundColor,
-    children,
-    fullHeight,
-    onClose,
-    visible,
-    width,
-    ...rest
-  } = props;
+  const { backgroundColor, children, fullHeight, onClose, visible, width, ...rest } = props;
 
   const [modalElement, setModalElement] = useState<HTMLElement | null>(null);
-  const [render, setRender] = useState(props.visible);
+  const [render, setRender] = useState(visible);
 
   const classes = classnames('Modal', {
     'Modal--visible': visible,
@@ -74,38 +66,44 @@ const Modal: React.FunctionComponent<Props> = (props: Props) => {
     }
   }, [visible]);
 
-  useEventListener(modalElement, 'animationend', () => {
-    if (!visible) {
-      setRender(false);
-      setModalElement(null);
-    }
-  }, [visible]);
+  useEventListener(
+    modalElement,
+    'animationend',
+    () => {
+      if (!visible) {
+        setRender(false);
+        setModalElement(null);
+      }
+    },
+    [visible],
+  );
 
   if (!render) {
     return null;
   }
 
   return (
-    <Portal element={ document.body }>
+    <Portal element={document.body}>
       <Flex
-          alignChildrenHorizontal="middle"
-          className={ classes }
-          direction="vertical"
-          innerRef={ setModalElement }
-          onClick={ onClose }
-          padding="x6">
+        alignChildrenHorizontal="middle"
+        className={classes}
+        direction="vertical"
+        innerRef={setModalElement}
+        onClick={onClose}
+        padding="x6"
+      >
         <Flex
-            backgroundColor={ backgroundColor }
-            borderRadius="x2"
-            className="Modal__content"
-            direction="vertical"
-            grow={ fullHeight }
-            onClick={ handleClick }
-            width={ width }
-            { ...rest }>
-          <ModalContext.Provider value={ { modalElement, onClose } }>
-            { children }
-          </ModalContext.Provider>
+          backgroundColor={backgroundColor}
+          borderRadius="x2"
+          className="Modal__content"
+          direction="vertical"
+          grow={fullHeight}
+          onClick={handleClick}
+          width={width}
+          {...rest}
+        >
+          {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}
+          <ModalContext.Provider value={{ modalElement, onClose }}>{children}</ModalContext.Provider>
         </Flex>
       </Flex>
     </Portal>

package/src/Modal/ModalBody.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps { }
+export type Props = FlexProps;
 
 /**
  * Modal body wrapper with preset padding.
  */
 const ModalBody: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex grow { ...props } />
-  );
+  return <Flex grow {...props} />;
 };
 
 ModalBody.defaultProps = {

package/src/Modal/ModalHeader.tsx

@@ -7,6 +7,8 @@ import { ModalContext } from './ModalContext';
 const { useContext } = React;
 
 export interface Props extends FlexProps {
+  gap?: FlexProps['gap'];
+  padding?: FlexProps['padding'];
   /**
    * Flag to toggle the gradient separator
    */
@@ -17,14 +19,7 @@ export interface Props extends FlexProps {
  * Modal header wrapper with optional gradient separator.
  */
 const ModalHeader: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    withSeparator,
-    children,
-    padding,
-    paddingHorizontal = padding,
-    paddingVertical = padding,
-    ...rest
-  } = props;
+  const { withSeparator, children, padding, paddingHorizontal = padding, paddingVertical = padding, ...rest } = props;
   const { onClose } = useContext(ModalContext);
 
   const classes = classnames('ModalHeader', {
@@ -32,21 +27,13 @@ const ModalHeader: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Flex { ...rest }
-        className={ classes }
-        direction="horizontal">
-      <Flex
-          grow
-          initial="none"
-          paddingHorizontal={ paddingHorizontal }
-          paddingVertical={ paddingVertical }>
-        { children }
+    <Flex {...rest} className={classes} direction="horizontal">
+      <Flex grow initial="none" paddingHorizontal={paddingHorizontal} paddingVertical={paddingVertical}>
+        {children}
       </Flex>
       <Flex padding="x4">
-        <Link
-            clickable
-            color="grape-5"
-            onClick={ onClose }>
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <Link clickable color="grape-5" onClick={onClose}>
           <Icon name="CloseSmall" />
         </Link>
       </Flex>
@@ -55,8 +42,8 @@ const ModalHeader: React.FunctionComponent<Props> = (props: Props) => {
 };
 
 ModalHeader.defaultProps = {
-  padding: 'x6',
   gap: 'x2',
+  padding: 'x6',
 };
 
 export default ModalHeader;

package/src/Modal/ModalHeaderProgress.tsx

@@ -14,11 +14,8 @@ const ModalHeaderProgress: React.FunctionComponent<Props> = (props: Props) => {
   const { progress, ...rest } = props;
 
   return (
-    <Flex { ...rest } className="ModalHeader__progress">
-      <ProgressBar
-          foregroundColor="eggplant"
-          height="4px"
-          progress={ progress } />
+    <Flex {...rest} className="ModalHeader__progress">
+      <ProgressBar foregroundColor="eggplant" height="4px" progress={progress} />
     </Flex>
   );
 };

package/src/Modal/ModalTitle.tsx

@@ -1,20 +1,13 @@
 import * as React from 'react';
 import Text, { Props as TextProps } from '../Text/Text';
 
-export interface Props extends TextProps {}
+export type Props = TextProps;
 
 /**
  * Modal specific styled text to appear as a title.
  */
 const ModalTitle: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Text { ...props }
-        letterSpacing="x1"
-        margin="x4"
-        size="5"
-        textColor="grape-5"
-        weight="bold" />
-  );
+  return <Text {...props} letterSpacing="x1" margin="x4" size="5" textColor="grape-5" weight="bold" />;
 };
 
 export default ModalTitle;

package/src/Notification/Notification.test.tsx

@@ -5,26 +5,30 @@ import Notification from './Notification';
 
 describe('Notification', () => {
   test('default template', () => {
-    expect(
-      shallowToJson(shallow(
-        <Notification type="alert">Content</Notification>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Notification type="alert">Content</Notification>))).toMatchSnapshot();
   });
 
   test('default icon can be overridden', () => {
     expect(
-      shallowToJson(shallow(
-        <Notification icon="Bell" type="alert">Content</Notification>
-      ))
+      shallowToJson(
+        shallow(
+          <Notification icon="Bell" type="alert">
+            Content
+          </Notification>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 
   test('with onRemove has a close icon', () => {
     expect(
-      shallowToJson(shallow(
-        <Notification onRemove={ () => {} } type="alert">Content</Notification>
-      ))
+      shallowToJson(
+        shallow(
+          <Notification onRemove={() => {}} type="alert">
+            Content
+          </Notification>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 });

package/src/Notification/Notification.tsx

@@ -7,12 +7,7 @@ import Link from '../Link/Link';
 import ProgressSpinner from '../Progress/ProgressSpinner';
 import './Notification.css';
 
-type TypeNotificationType =
-  'alert' |
-  'inform' |
-  'progress' |
-  'success' |
-  'warning';
+type TypeNotificationType = 'alert' | 'inform' | 'progress' | 'success' | 'warning';
 
 export interface Props extends FlexProps {
   /**
@@ -45,44 +40,29 @@ const defaultIcons: {
  * Notification component used to inform the user of something important.
  */
 const Notification: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    children,
-    onRemove,
-    type,
-    icon,
-    className,
-    ...rest
-  } = props;
+  const { children, onRemove, type, icon, className, ...rest } = props;
 
   const classes = classnames('Notification', `Notification--type-${type}`, className);
   const defaultIcon = defaultIcons[type];
 
   return (
-    <Flex { ...rest }
-        alignChildrenVertical="middle"
-        className={ classes }
-        direction="horizontal"
-        gap="x2"
-        padding="x3">
-      { (icon || defaultIcon || type === 'progress') && (
-        <Flex>
-          { type === 'progress'
-            ? <ProgressSpinner />
-            : <Icon name={ icon || defaultIcon } /> }
-        </Flex>
-      ) }
+    <Flex {...rest} alignChildrenVertical="middle" className={classes} direction="horizontal" gap="x2" padding="x3">
+      {(icon || defaultIcon || type === 'progress') && (
+        <Flex>{type === 'progress' ? <ProgressSpinner /> : <Icon name={icon || defaultIcon} />}</Flex>
+      )}
 
       <Flex grow shrink>
-        { children }
+        {children}
       </Flex>
 
-      { onRemove && (
+      {onRemove && (
         <Flex>
-          <Link clickable onClick={ onRemove }>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link clickable onClick={onRemove}>
             <Icon name="CloseSmall" />
           </Link>
         </Flex>
-      ) }
+      )}
     </Flex>
   );
 };

package/src/Placement/Placement.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  Placement as TypePlacement,
-  ReferenceObject as TypeReferenceObject,
-} from 'popper.js';
+import { Placement as TypePlacement, ReferenceObject as TypeReferenceObject } from 'popper.js';
 import { Props as BaseProps } from '../Base/Base';
 import { ModalContext } from '../Modal/ModalContext';
 import PlacementPopper from './PlacementPopper';
@@ -20,15 +17,12 @@ export interface Props extends BaseProps {
    * and the width of the target that is being positioned
    * around.
    */
-  children: (props: {
-    scheduleUpdate: () => void;
-    width?: number;
-  }) => React.ReactNode;
+  children: (props: { scheduleUpdate: () => void; width?: number }) => React.ReactNode;
   /**
    * Flag that disables margin around the Placement.
    */
-   disableMargin?: boolean | 'top-bottom' | 'left-right';
-   /**
+  disableMargin?: boolean | 'top-bottom' | 'left-right';
+  /**
    * Flag that disables repositioning on scroll and resize events.
    */
   disableReposition?: boolean;
@@ -75,11 +69,7 @@ export interface Props extends BaseProps {
 const Placement: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <ModalContext.Consumer>
-      { ({ modalElement }) => (
-        <PlacementPopper { ...props }
-            closeElement={ modalElement }
-            isInsideModal={ !!modalElement } />
-      ) }
+      {({ modalElement }) => <PlacementPopper {...props} closeElement={modalElement} isInsideModal={!!modalElement} />}
     </ModalContext.Consumer>
   );
 };

package/src/Placement/PlacementArea.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import PlacementArrow from '../Placement/PlacementArrow';
+import PlacementArrow from './PlacementArrow';
 
 export interface Props extends FlexProps {
   /**
@@ -23,31 +23,24 @@ export interface Props extends FlexProps {
  * when the content should be divided (see direction prop).
  */
 const PlacementArea: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    children,
-    direction,
-    padding,
-    paddingHorizontal,
-    paddingVertical,
-    withArrow,
-    ...rest
-  } = props;
+  const { children, direction, padding, paddingHorizontal, paddingVertical, withArrow, ...rest } = props;
 
   const classes = classnames('Placement__area', {
     [`Placement__area--${direction}`]: direction,
   });
 
   return (
-    <Flex { ...rest } className={ classes }>
-      { withArrow && <PlacementArrow /> }
+    <Flex {...rest} className={classes}>
+      {withArrow && <PlacementArrow />}
 
       <Flex
-          className="Placement__area-content"
-          direction={ direction }
-          padding={ padding }
-          paddingHorizontal={ paddingHorizontal }
-          paddingVertical={ paddingVertical }>
-        { children }
+        className="Placement__area-content"
+        direction={direction}
+        padding={padding}
+        paddingHorizontal={paddingHorizontal}
+        paddingVertical={paddingVertical}
+      >
+        {children}
       </Flex>
     </Flex>
   );

package/src/Placement/PlacementArrow.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Base, { Props as BaseProps } from '../Base/Base';
 import { PlacementArrowPropsContext } from './PlacementArrowPropsContext';
 
-export interface Props extends BaseProps {}
+export type Props = BaseProps;
 
 /**
  * The dynamically positioned arrow/tip.
@@ -10,13 +10,9 @@ export interface Props extends BaseProps {}
 const PlacementArrow: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <PlacementArrowPropsContext.Consumer>
-      { ({ backgroundColor, ref, style }) => (
-        <Base { ...props }
-            backgroundColor={ backgroundColor }
-            className="Placement__arrow"
-            innerRef={ ref }
-            style={ style } />
-      ) }
+      {({ backgroundColor, ref, style }) => (
+        <Base {...props} backgroundColor={backgroundColor} className="Placement__arrow" innerRef={ref} style={style} />
+      )}
     </PlacementArrowPropsContext.Consumer>
   );
 };

package/src/Placement/PlacementManager.tsx

@@ -4,7 +4,7 @@ import { PlacementManagerContext } from './PlacementManagerContext';
 
 const { useState } = React;
 
-export interface Props extends ManagerProps {}
+export type Props = ManagerProps;
 
 /**
  * The manager component handles the ref communication between
@@ -14,12 +14,11 @@ const PlacementManager: React.FunctionComponent<Props> = (props: Props) => {
   const [referenceNode, setReferenceNode] = useState<null | HTMLElement>(null);
 
   return (
-    <PlacementManagerContext.Provider value={ { referenceNode, setReferenceNode } }>
-      <Manager { ...props } />
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <PlacementManagerContext.Provider value={{ referenceNode, setReferenceNode }}>
+      <Manager {...props} />
     </PlacementManagerContext.Provider>
   );
 };
 
 export default PlacementManager;
-
-