@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

package/src/Dropdown/DropdownMenu.css

@@ -17,7 +17,7 @@
   flex: 1;
   /* stylelint-disable-next-line unit-blacklist */
   height: 1px;
-  background-color: var(--bitkit-colors-gray-3);
+  background-color: var(--color-gray--3);
 }
 
 .DropdownMenu__item {
@@ -38,11 +38,11 @@
 }
 
 .DropdownMenu__item[disabled] {
-  color: var(--bitkit-colors-gray-5);
+  color: var(--color-gray--5);
   pointer-events: none;
 }
 
 .DropdownMenu__item:hover {
-  background-color: var(--bitkit-colors-grape-1);
-  color: var(--bitkit-colors-grape-3);
+  background-color: var(--color-grape--1);
+  color: var(--color-grape--3);
 }

package/src/Dropdown/DropdownMenu.tsx

@@ -15,23 +15,12 @@ export interface Props extends BaseProps {
  * Parent container for DropdownMenuItems
  */
 const DropdownMenu: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    children,
-    maxHeight,
-    width,
-    ...rest
-  } = props;
+  const { children, maxHeight, width, ...rest } = props;
 
   return (
-    <PlacementArea { ...rest }
-        direction="vertical"
-        paddingVertical="x4">
-      <Flex
-          className="DropdownMenu__content"
-          direction="vertical"
-          maxHeight={ maxHeight }
-          width={ width }>
-        { children }
+    <PlacementArea {...rest} direction="vertical" paddingVertical="x4">
+      <Flex className="DropdownMenu__content" direction="vertical" maxHeight={maxHeight} width={width}>
+        {children}
       </Flex>
     </PlacementArea>
   );

package/src/Dropdown/DropdownMenuItem.tsx

@@ -19,7 +19,7 @@ export interface Props extends FlexProps {
  * component.
  */
 const DropdownMenuItem: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, icon, onClick, selected, ...rest } = props;
+  const { children, icon, onClick, selected, textColor, ...rest } = props;
   const classes = classnames('DropdownMenu__item', {
     'DropdownMenu__item--selected': selected,
   });
@@ -33,29 +33,27 @@ const DropdownMenuItem: React.FunctionComponent<Props> = (props: Props) => {
   };
 
   return (
-    <Flex { ...rest }
-        alignChildrenVertical="middle"
-        className={ classes }
-        direction="horizontal"
-        gap="x1"
-        onClick={ handleClick }>
-      <Visibility Component={ Flex } visible={ selected || false }>
+    <Flex
+      {...rest}
+      alignChildrenVertical="middle"
+      className={classes}
+      direction="horizontal"
+      gap="x1"
+      onClick={handleClick}
+    >
+      <Visibility Component={Flex} visible={selected || false}>
         <Icon name="Tick" />
       </Visibility>
 
-      <Flex
-          direction="horizontal"
-          gap="x4"
-          grow
-          initial="none">
-        { icon && (
+      <Flex direction="horizontal" gap="x4" grow initial="none">
+        {icon && (
           <Flex>
-            <Icon name={ icon } />
+            <Icon name={icon} textColor={textColor} />
           </Flex>
-        ) }
+        )}
 
-        <Flex grow initial="none">
-          { children }
+        <Flex grow initial="none" textColor={textColor}>
+          {children}
         </Flex>
       </Flex>
     </Flex>

package/src/Dropdown/DropdownMenuItemGroup.tsx

@@ -7,15 +7,12 @@ export interface Props extends FlexProps {
   text: string;
 }
 
-const DropdownMenuItemGroup: React.FunctionComponent<Props> = ({
-  text,
-  children,
-  className,
-  ...rest
-}: Props) => (
-  <Flex className={ classnames('DropdownMenu__group', className) } { ...rest }>
-    <Text className="DropdownMenu__group-text" size="2" textColor="gray-6">{ text }</Text>
-    { children }
+const DropdownMenuItemGroup: React.FunctionComponent<Props> = ({ text, children, className, ...rest }: Props) => (
+  <Flex className={classnames('DropdownMenu__group', className)} {...rest}>
+    <Text className="DropdownMenu__group-text" size="2" textColor="gray-6">
+      {text}
+    </Text>
+    {children}
   </Flex>
 );
 

package/src/Dropdown/DropdownMenus.tsx

@@ -1,16 +1,14 @@
 import * as React from 'react';
 import PlacementArea, { Props as PlacementAreaProps } from '../Placement/PlacementArea';
 
-export interface Props extends PlacementAreaProps {}
+export type Props = PlacementAreaProps;
 
 /**
  * Provides a horizontal flex environment for a
  * dual view dropdown menu.
  */
 const DropdownMenus: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <PlacementArea { ...props } direction="horizontal" />
-  );
+  return <PlacementArea {...props} direction="horizontal" />;
 };
 
 export default DropdownMenus;

package/src/Expand/Expand.test.tsx

@@ -8,29 +8,33 @@ describe('Expand', () => {
   describe('removing children', () => {
     test('does render children when initially expanded', () => {
       expect(
-        shallowToJson(shallow(
-          <Expand expanded removeChildren>
-            I should appear in the snapshot
-          </Expand>
-        ))
+        shallowToJson(
+          shallow(
+            <Expand expanded removeChildren>
+              I should appear in the snapshot
+            </Expand>,
+          ),
+        ),
       ).toMatchSnapshot();
     });
 
     test('does not render children when not initially expanded', () => {
       expect(
-        shallowToJson(shallow(
-          <Expand expanded={ false } removeChildren>
-            I should not appear in the snapshot
-          </Expand>
-        ))
+        shallowToJson(
+          shallow(
+            <Expand expanded={false} removeChildren>
+              I should not appear in the snapshot
+            </Expand>,
+          ),
+        ),
       ).toMatchSnapshot();
     });
 
     test('does render children once expanded', () => {
       const wrapper = mount(
-        <Expand expanded={ false } removeChildren>
+        <Expand expanded={false} removeChildren>
           I should appear in the snapshot
-        </Expand>
+        </Expand>,
       );
 
       act(() => {
@@ -42,11 +46,7 @@ describe('Expand', () => {
 
     test('always renders children when removeChildren is not set', () => {
       expect(
-        shallowToJson(shallow(
-          <Expand expanded={ false }>
-            I should appear in the snapshot
-          </Expand>
-        ))
+        shallowToJson(shallow(<Expand expanded={false}>I should appear in the snapshot</Expand>)),
       ).toMatchSnapshot();
     });
   });

package/src/Expand/Expand.tsx

@@ -46,18 +46,23 @@ const Expand: React.FunctionComponent<Props> = (props: Props) => {
 
   const [height, setHeight] = useState<number | undefined>(expanded ? undefined : 0);
   const [isTransitioning, setIsTransitioning] = useState(false);
-  const [opacity, setOpacity] = useState<number | undefined>((expanded || peekHeight) ? 1 : 0);
-  const [overflow, setOverflow] = useState<string | undefined>((expanded || peekHeight) ? undefined : 'hidden');
-
-  useEventListener(refOuter.current, 'transitionend', () => {
-    setIsTransitioning(false);
-
-    if (expanded) {
-      setHeight(undefined);
-      setOpacity(undefined);
-      setOverflow(undefined);
-    }
-  }, [expanded]);
+  const [opacity, setOpacity] = useState<number | undefined>(expanded || peekHeight ? 1 : 0);
+  const [overflow, setOverflow] = useState<string | undefined>(expanded || peekHeight ? undefined : 'hidden');
+
+  useEventListener(
+    refOuter.current,
+    'transitionend',
+    () => {
+      setIsTransitioning(false);
+
+      if (expanded) {
+        setHeight(undefined);
+        setOpacity(undefined);
+        setOverflow(undefined);
+      }
+    },
+    [expanded],
+  );
 
   useEffect(() => {
     refIsExpanded.current = expanded;
@@ -99,7 +104,7 @@ const Expand: React.FunctionComponent<Props> = (props: Props) => {
     };
   }, [expanded]);
 
-  const renderChildren = isTransitioning || peekHeight || (expanded || refIsExpanded.current) || !removeChildren;
+  const renderChildren = isTransitioning || peekHeight || expanded || refIsExpanded.current || !removeChildren;
   const style = { opacity, overflow };
   const innerStyle = { overflow };
   const classes = classnames('Expand', {
@@ -110,20 +115,16 @@ const Expand: React.FunctionComponent<Props> = (props: Props) => {
   const classesInner = classnames(className, 'Expand__inner');
 
   return (
-    <Flex { ...rest }
-        className={ classes }
-        height={ height }
-        innerRef={ refOuter }
-        minHeight={ peekHeight }
-        style={ style }>
+    <Flex {...rest} className={classes} height={height} innerRef={refOuter} minHeight={peekHeight} style={style}>
       <Base
-          className={ classesInner }
-          innerRef={ refInner }
-          padding={ padding }
-          paddingHorizontal={ paddingHorizontal }
-          paddingVertical={ paddingVertical }
-          style={ innerStyle }>
-        { renderChildren && children }
+        className={classesInner}
+        innerRef={refInner}
+        padding={padding}
+        paddingHorizontal={paddingHorizontal}
+        paddingVertical={paddingVertical}
+        style={innerStyle}
+      >
+        {renderChildren && children}
       </Base>
     </Flex>
   );

package/src/ExternalLink/ExternalLink.tsx

@@ -3,20 +3,15 @@ import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
 import Link, { Props as LinkProps } from '../Link/Link';
 
-export interface Props extends LinkProps {}
+export type Props = LinkProps;
 
 const ExternalLink: React.FunctionComponent<Props> = (props: Props) => {
   const { children, ...rest } = props;
 
   return (
-    <Link { ...rest }>
-      <Flex
-          alignChildrenVertical="middle"
-          direction="horizontal"
-          gap="x1">
-        <Flex>
-          { children }
-        </Flex>
+    <Link {...rest}>
+      <Flex alignChildrenVertical="middle" direction="horizontal" gap="x1">
+        <Flex>{children}</Flex>
 
         <Flex>
           <Icon name="OpenInBrowser" />

package/src/Flex/Flex.tsx

@@ -66,25 +66,27 @@ const Flex: React.FunctionComponent<Props> = (props: Props) => {
     ...rest
   } = props;
 
-  const classes = classnames('Flex', {
-    [`Flex--align-horz-${alignChildrenHorizontal}`]: alignChildrenHorizontal,
-    [`Flex--align-self-${alignSelf}`]: alignSelf,
-    [`Flex--align-vert-${alignChildrenVertical}`]: alignChildrenVertical,
-    [`Flex--${direction}`]: direction,
-    [`Flex--initial-${initial}`]: initial,
-    'Flex--gapped': gap,
-    [`Flex--gap-${gap}`]: gap,
-    'Flex--reverse': reverse,
-    'Flex--grow': grow === true,
-    [`Flex--grow-${grow}`]: typeof grow === 'string',
-    'Flex--shrink': shrink === true,
-    [`Flex--shrink-${shrink}`]: typeof shrink === 'string',
-    'Flex--wrap': wrap,
-  }, className);
-
-  return (
-    <Base { ...rest } className={ classes } />
+  const classes = classnames(
+    'Flex',
+    {
+      [`Flex--align-horz-${alignChildrenHorizontal}`]: alignChildrenHorizontal,
+      [`Flex--align-self-${alignSelf}`]: alignSelf,
+      [`Flex--align-vert-${alignChildrenVertical}`]: alignChildrenVertical,
+      [`Flex--${direction}`]: direction,
+      [`Flex--initial-${initial}`]: initial,
+      'Flex--gapped': gap,
+      [`Flex--gap-${gap}`]: gap,
+      'Flex--reverse': reverse,
+      'Flex--grow': grow === true,
+      [`Flex--grow-${grow}`]: typeof grow === 'string',
+      'Flex--shrink': shrink === true,
+      [`Flex--shrink-${shrink}`]: typeof shrink === 'string',
+      'Flex--wrap': wrap,
+    },
+    className,
   );
+
+  return <Base {...rest} className={classes} />;
 };
 
 export default Flex;

package/src/Grid/Grid.test.tsx

@@ -5,57 +5,46 @@ import Grid from './Grid';
 
 describe('Grid', () => {
   test('alignChildren', () => {
-    expect(shallowToJson(shallow(
-      <Grid alignChildren="start">*</Grid>
-    ))).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Grid alignChildren="start">*</Grid>))).toMatchSnapshot();
   });
 
   test('gap', () => {
-    expect(shallowToJson(shallow(
-      <Grid gap="x1">*</Grid>
-    ))).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Grid gap="x1">*</Grid>))).toMatchSnapshot();
   });
 
   test('gapHorizontal', () => {
-    expect(shallowToJson(shallow(
-      <Grid gapHorizontal="x1">*</Grid>
-    ))).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Grid gapHorizontal="x1">*</Grid>))).toMatchSnapshot();
   });
 
   test('gapVertical', () => {
-    expect(shallowToJson(shallow(
-      <Grid gapVertical="x1">*</Grid>
-    ))).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Grid gapVertical="x1">*</Grid>))).toMatchSnapshot();
   });
 
   test('repeat', () => {
-    expect(shallowToJson(shallow(
-      <Grid repeat="3">*</Grid>
-    ))).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Grid repeat="3">*</Grid>))).toMatchSnapshot();
   });
 
   test('repeatWidth', () => {
-    expect(shallowToJson(shallow(
-      <Grid repeatWidth="1fr">*</Grid>
-    ))).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Grid repeatWidth="1fr">*</Grid>))).toMatchSnapshot();
   });
 
   test('repeatWidthMin', () => {
-    expect(shallowToJson(shallow(
-      <Grid repeatWidthMin="4rem">*</Grid>
-    ))).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Grid repeatWidthMin="4rem">*</Grid>))).toMatchSnapshot();
   });
 
   test('repeatWidthMax', () => {
-    expect(shallowToJson(shallow(
-      <Grid repeatWidthMax="2fr" repeatWidthMin="4rem">*</Grid>
-    ))).toMatchSnapshot();
+    expect(
+      shallowToJson(
+        shallow(
+          <Grid repeatWidthMax="2fr" repeatWidthMin="4rem">
+            *
+          </Grid>,
+        ),
+      ),
+    ).toMatchSnapshot();
   });
 
   test('rowSize', () => {
-    expect(shallowToJson(shallow(
-      <Grid rowSize="1fr">*</Grid>
-    ))).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Grid rowSize="1fr">*</Grid>))).toMatchSnapshot();
   });
-
 });

package/src/Grid/Grid.tsx

@@ -44,22 +44,26 @@ const Grid: React.FunctionComponent<Props> = (props: Props) => {
     ...rest
   } = props;
 
-  const classes = classnames('Grid', {
-    [`Grid--align-${alignChildren}`]: alignChildren,
-    [`Grid--gap-${gap}`]: gap,
-    [`Grid--gap-horizontal-${gapHorizontal}`]: gapHorizontal,
-    [`Grid--gap-vertical-${gapVertical}`]: gapVertical,
-  }, className);
+  const classes = classnames(
+    'Grid',
+    {
+      [`Grid--align-${alignChildren}`]: alignChildren,
+      [`Grid--gap-${gap}`]: gap,
+      [`Grid--gap-horizontal-${gapHorizontal}`]: gapHorizontal,
+      [`Grid--gap-vertical-${gapVertical}`]: gapVertical,
+    },
+    className,
+  );
 
   const style = {
     ...rest.style,
-    gridTemplateColumns: `repeat(${repeat}, ${repeatWidthMin ? `minmax(${repeatWidthMin}, ${repeatWidthMax})` : repeatWidth})`,
+    gridTemplateColumns: `repeat(${repeat}, ${
+      repeatWidthMin ? `minmax(${repeatWidthMin}, ${repeatWidthMax})` : repeatWidth
+    })`,
     gridAutoRows: rowSize,
   };
 
-  return (
-    <Flex { ...rest } className={ classes } style={ style } />
-  );
+  return <Flex {...rest} className={classes} style={style} />;
 };
 
 Grid.defaultProps = {

package/src/Hamburger/Hamburger.tsx

@@ -20,10 +20,7 @@ const Hamburger: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Base { ...rest }
-        className={ classes }
-        height={ size }
-        width={ size }>
+    <Base {...rest} className={classes} height={size} width={size}>
       <div className="Hamburger--bar" />
     </Base>
   );

package/src/Icon/Icon.tsx

@@ -18,12 +18,7 @@ const Icon: React.FunctionComponent<Props> = (props: Props) => {
   const IconSVG = IconMap[name];
 
   return (
-    <Base { ...rest }
-        Component="svg"
-        className="Icon"
-        height={ size }
-        viewBox="0 0 24 24"
-        width={ size }>
+    <Base {...rest} Component="svg" className="Icon" height={size} viewBox="0 0 24 24" width={size}>
       <IconSVG height="100%" width="100%" />
     </Base>
   );

package/src/Icon/tsx/{IconsEye.tsx → IconsShowPassword.tsx}

@@ -1,15 +1,18 @@
 // THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
 import * as React from 'react';
 
-const SvgIconsEye = (props: React.SVGProps<SVGSVGElement>) => (
+const SvgIconsShowPassword = (props: React.SVGProps<SVGSVGElement>) => (
   <svg { ...props } viewBox="0 0 24 24">
     <defs>
       <path
           d="M11.999 9a3.001 3.001 0 0 1 0 6 3 3 0 1 1 0-6zm5.467 6.535L21.002 12l-3.536-3.534a4.961 4.961 0 0 0-3.534-1.464H10.07a4.967 4.967 0 0 0-3.536 1.463L2.999 12l3.536 3.536A4.971 4.971 0 0 0 10.07 17h3.86a5.029 5.029 0 0 0 3.535-1.465zm4.949-4.949c.78.78.78 2.05 0 2.828L18.88 16.95A7.042 7.042 0 0 1 13.932 19H10.07a6.954 6.954 0 0 1-4.95-2.05l-3.535-3.536a2.001 2.001 0 0 1 0-2.828L5.12 7.05A6.95 6.95 0 0 1 10.07 5l3.862.001c1.868 0 3.626.727 4.947 2.05l3.535 3.535z"
-          id="icons-eye_svg__a"/>
+          id="icons-show-password_svg__a"/>
     </defs>
-    <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-eye_svg__a" />
+    <use
+        fill="currentColor"
+        fillRule="evenodd"
+        xlinkHref="#icons-show-password_svg__a"/>
   </svg>
 );
 
-export default SvgIconsEye;
+export default SvgIconsShowPassword;

package/src/Icon/tsx/index.ts

@@ -61,7 +61,6 @@ import Dudes from './IconsDudes';
 import Duplicate from './IconsDuplicate';
 import Enterprise from './IconsEnterprise';
 import ErrorGeneral from './IconsErrorGeneral';
-import Eye from './IconsEye';
 import FileDoc from './IconsFileDoc';
 import FilePdf from './IconsFilePdf';
 import FilePlist from './IconsFilePlist';
@@ -135,6 +134,7 @@ import Save from './IconsSave';
 import SecurityShield from './IconsSecurityShield';
 import Settings from './IconsSettings';
 import Ship from './IconsShip';
+import ShowPassword from './IconsShowPassword';
 import Shuffle from './IconsShuffle';
 import Stability from './IconsStability';
 import Stack from './IconsStack';
@@ -234,7 +234,6 @@ export type TypeIconName =
   | 'Duplicate'
   | 'Enterprise'
   | 'ErrorGeneral'
-  | 'Eye'
   | 'FileDoc'
   | 'FilePdf'
   | 'FilePlist'
@@ -308,6 +307,7 @@ export type TypeIconName =
   | 'SecurityShield'
   | 'Settings'
   | 'Ship'
+  | 'ShowPassword'
   | 'Shuffle'
   | 'Stability'
   | 'Stack'
@@ -407,7 +407,6 @@ export const IconList: TypeIconName[] = [
   'Duplicate',
   'Enterprise',
   'ErrorGeneral',
-  'Eye',
   'FileDoc',
   'FilePdf',
   'FilePlist',
@@ -481,6 +480,7 @@ export const IconList: TypeIconName[] = [
   'SecurityShield',
   'Settings',
   'Ship',
+  'ShowPassword',
   'Shuffle',
   'Stability',
   'Stack',
@@ -583,7 +583,6 @@ export const IconMap: {
   Duplicate,
   Enterprise,
   ErrorGeneral,
-  Eye,
   FileDoc,
   FilePdf,
   FilePlist,
@@ -657,6 +656,7 @@ export const IconMap: {
   SecurityShield,
   Settings,
   Ship,
+  ShowPassword,
   Shuffle,
   Stability,
   Stack,

package/src/Image/Image.tsx

@@ -2,18 +2,14 @@ import * as React from 'react';
 import Base, { Props as BaseProps } from '../Base/Base';
 import './Image.css';
 
-export interface Props extends BaseProps {}
+export type Props = BaseProps;
 
 /**
  * Standard img element component component, that scales to the
  * available container width
  * */
 const Image: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Base { ...props }
-        Component="img"
-        className="Image" />
-  );
+  return <Base {...props} Component="img" className="Image" />;
 };
 
 export default Image;