@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

package/src/Input/Input.css

@@ -13,14 +13,14 @@
   appearance: none;
 
   &:focus { outline: none; }
-  &::placeholder { color: var(--bitkit-colors-gray-7); }
+  &::placeholder { color: var(--color-gray--7); }
 }
 
 .Input__container {
-  border: var(--Input--border) solid var(--bitkit-colors-gray-3);
+  border: var(--Input--border) solid var(--color-gray--3);
   border-radius: var(--size--x1);
   box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--bitkit-colors-white);
+  background-color: var(--color-white);
   overflow: hidden;
   transition-property: border-color, box-shadow;
   transition-duration: var(--transition-duration--base);
@@ -29,8 +29,8 @@
 
 .Input__content {
   padding: 0 var(--size--x3);
-  border-right: var(--Input--border) solid var(--bitkit-colors-gray-3);
-  color: var(--bitkit-colors-grape-5);
+  border-right: var(--Input--border) solid var(--color-gray--3);
+  color: var(--color-grape--5);
   transition-property: border-color, color;
   transition-duration: var(--transition-duration--base);
   transition-timing-function: var(--transition-timing-function);
@@ -41,7 +41,7 @@
 }
 
 .Input__content--outside {
-  background-color: var(--bitkit-colors-white);
+  background-color: var(--color-white);
 
   &:first-child {
     border-top-left-radius: var(--size--x1);
@@ -57,14 +57,14 @@
 .Input__container--disabled,
 .Input__container--readonly {
   box-shadow: none;
-  background-color: var(--bitkit-colors-gray-2);
+  background-color: var(--color-gray--2);
 }
 
 .Input__container--invalid,
 .Input__container--invalid .Input__content,
 .Input__container--invalid .Input::placeholder {
-  border-color: var(--bitkit-colors-red-3);
-  color: var(--bitkit-colors-red-3);
+  border-color: var(--color-red--3);
+  color: var(--color-red--3);
 }
 
 .Input:focus:focus::placeholder,
@@ -73,11 +73,11 @@
 }
 
 .Input__container:focus-within {
-  border-color: var(--bitkit-colors-grape-3);
+  border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
 
   & .Input__content {
-    border-color: var(--bitkit-colors-grape-3);
-    color: var(--bitkit-colors-grape-5);
+    border-color: var(--color-grape--3);
+    color: var(--color-grape--5);
   }
 }

package/src/Input/Input.tsx

@@ -1,19 +1,14 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 /**
  * Flex enabled input element component. Should be used in conjunction
  * with the Container and Content components for styling.
  */
 const Input: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props }
-        Component="input"
-        className="Input"
-        grow />
-  );
+  return <Flex {...props} Component="input" className="Input" grow />;
 };
 
 export default Input;

package/src/Input/InputContainer.tsx

@@ -24,12 +24,7 @@ const InputContainer: React.FunctionComponent<Props> = (props: Props) => {
     'Input__container--readonly': readOnly,
   });
 
-  return (
-    <Flex { ...rest }
-        Component="label"
-        className={ classes }
-        direction="horizontal" />
-  );
+  return <Flex {...rest} Component="label" className={classes} direction="horizontal" />;
 };
 
 export default InputContainer;

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.css

@@ -9,32 +9,32 @@
   text-decoration: underline;
 }
 
-.Link--bitkit-colors-grape-3 {
-  color: var(--bitkit-colors-grape-3);
+.Link--color-grape-3 {
+  color: var(--color-grape--3);
 
-  &:hover { color: var(--bitkit-colors-grape-4); }
+  &:hover { color: var(--color-grape--4); }
 }
 
-.Link--bitkit-colors-grape-5 {
-  color: var(--bitkit-colors-grape-5);
+.Link--color-grape-5 {
+  color: var(--color-grape--5);
 
-  &:hover { color: var(--bitkit-colors-grape-3); }
+  &:hover { color: var(--color-grape--3); }
 }
 
-.Link--bitkit-colors-gray-1 {
-  color: var(--bitkit-colors-gray-1);
+.Link--color-gray-1 {
+  color: var(--color-gray--1);
 
-  &:hover { color: var(--bitkit-colors-gray-2); }
+  &:hover { color: var(--color-gray--2); }
 }
 
-.Link--bitkit-colors-gray-5 {
-  color: var(--bitkit-colors-gray-5);
+.Link--color-gray-5 {
+  color: var(--color-gray--5);
 
-  &:hover { color: var(--bitkit-colors-gray-6); }
+  &:hover { color: var(--color-gray--6); }
 }
 
-.Link--bitkit-colors-white {
-  color: var(--bitkit-colors-white);
+.Link--color-white {
+  color: var(--color-white);
 
-  &:hover { color: var(--bitkit-colors-gray-1); }
+  &:hover { color: var(--color-gray--1); }
 }

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 */
@@ -15,13 +16,11 @@ export interface Props extends BaseProps {
 /** Styled link component */
 const Link: React.FunctionComponent<Props> = (props: Props) => {
   const { className, color, underline, ...rest } = props;
-  const classes = classnames(className, 'Link', `Link--bitkit-colors-${color}`, {
+  const classes = classnames(className, 'Link', `Link--color-${color}`, {
     '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.css

@@ -17,7 +17,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--bitkit-colors-overlay--black);
+  background-color: var(--color-overlay--black);
   overflow: auto;
   z-index: var(--z-index-Modal);
   animation-name: ModalFadeOut;
@@ -64,5 +64,5 @@
 .ModalHeader--with-separator::before {
   content: '';
   height: var(--size--x1);
-  background: linear-gradient(90deg, var(--bitkit-colors-grape-1) -28.36%, var(--bitkit-colors-grape-2) 100%);
+  background: linear-gradient(90deg, var(--color-grape--1) -28.36%, var(--color-grape--2) 100%);
 }

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.css

@@ -4,31 +4,31 @@
 }
 
 .Notification--type-alert {
-  border-color: var(--bitkit-colors-red-3);
-  background-color: var(--bitkit-colors-red-1);
-  color: var(--bitkit-colors-red-4);
+  border-color: var(--color-red--3);
+  background-color: var(--color-red--1);
+  color: var(--color-red--4);
 }
 
 .Notification--type-inform {
-  border-color: var(--bitkit-colors-blue-2);
-  background-color: var(--bitkit-colors-blue-1);
-  color: var(--bitkit-colors-blue-4);
+  border-color: var(--color-blue--2);
+  background-color: var(--color-blue--1);
+  color: var(--color-blue--4);
 }
 
 .Notification--type-progress {
-  border-color: var(--bitkit-colors-grape-2);
-  background-color: var(--bitkit-colors-grape-1);
-  color: var(--bitkit-colors-eggplant);
+  border-color: var(--color-grape--2);
+  background-color: var(--color-grape--1);
+  color: var(--color-eggplant);
 }
 
 .Notification--type-success {
-  border-color: var(--bitkit-colors-green-2);
-  background-color: var(--bitkit-colors-green-1);
-  color: var(--bitkit-colors-green-5);
+  border-color: var(--color-green--2);
+  background-color: var(--color-green--1);
+  color: var(--color-green--5);
 }
 
 .Notification--type-warning {
-  border-color: var(--bitkit-colors-yellow-3);
-  background-color: var(--bitkit-colors-yellow-1);
-  color: var(--bitkit-colors-yellow-5);
+  border-color: var(--color-yellow--3);
+  background-color: var(--color-yellow--1);
+  color: var(--color-yellow--5);
 }

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