@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

package/src/Button/Button.css

@@ -104,15 +104,15 @@
 }
 
 .Button--level-primary {
-  border-color: var(--bitkit-colors-eggplant);
-  background-color: var(--bitkit-colors-grape-5);
-  color: var(--bitkit-colors-gray-1);
+  border-color: var(--color-eggplant);
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
   font-weight: var(--font-weight--bold);
 
   &:disabled,
   &[disabled] {
-    border-color: var(--bitkit-colors-gray-5);
-    background-image: linear-gradient(to bottom, var(--bitkit-colors-gray-4), var(--bitkit-colors-gray-5));
+    border-color: var(--color-gray--5);
+    background-image: linear-gradient(to bottom, var(--color-gray--4), var(--color-gray--5));
   }
 
   &::before {
@@ -125,25 +125,25 @@
 }
 
 .Button--level-secondary {
-  border-color: var(--bitkit-colors-gray-3);
-  background-color: var(--bitkit-colors-gray-2);
-  color: var(--bitkit-colors-grape-5);
+  border-color: var(--color-gray--3);
+  background-color: var(--color-gray--2);
+  color: var(--color-grape--5);
 
   &:disabled,
   &[disabled] {
-    border-color: var(--bitkit-colors-gray-3);
-    background-image: linear-gradient(to bottom, var(--bitkit-colors-white), var(--bitkit-colors-gray-1));
-    color: var(--bitkit-colors-gray-5);
+    border-color: var(--color-gray--3);
+    background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
+    color: var(--color-gray--5);
   }
 
   &:active:not(:disabled) {
-    border-color: var(--bitkit-colors-eggplant);
-    background-color: var(--bitkit-colors-grape-5);
-    color: var(--bitkit-colors-gray-1);
+    border-color: var(--color-eggplant);
+    background-color: var(--color-grape--5);
+    color: var(--color-gray--1);
   }
 
   &::before {
-    background-image: linear-gradient(to bottom, var(--bitkit-colors-white), var(--bitkit-colors-gray-1));
+    background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
   }
 
   &::after {
@@ -154,22 +154,22 @@
 .Button--level-tertiary {
   border-color: transparent;
   background-color: transparent;
-  color: var(--bitkit-colors-grape-3);
+  color: var(--color-grape--3);
 
   &:disabled,
   &[disabled] {
-    color: var(--bitkit-colors-gray-5);
+    color: var(--color-gray--5);
   }
 
   &:hover:not(:disabled),
   &:hover:not([disabled]) {
-    background-color: var(--bitkit-colors-grape-1);
+    background-color: var(--color-grape--1);
   }
 
   &:active:not(:disabled),
   &:active:not([disabled]) {
-    background-color: var(--bitkit-colors-grape-5);
-    color: var(--bitkit-colors-gray-1);
+    background-color: var(--color-grape--5);
+    color: var(--color-gray--1);
   }
 }
 
@@ -180,7 +180,7 @@
 
   &:active {
     border-color: #D4093C;
-    background-color: var(--bitkit-colors-red-5);
+    background-color: var(--color-red--5);
   }
 
   &::before {
@@ -194,22 +194,22 @@
 
 .Button--variant-danger.Button--level-secondary:not(:disabled),
 .Button--variant-danger.Button--level-secondary:not([disabled]) {
-  border-color: var(--bitkit-colors-gray-3);
-  background-color: var(--bitkit-colors-red-1);
-  color: var(--bitkit-colors-red-3);
+  border-color: var(--color-gray--3);
+  background-color: var(--color-red--1);
+  color: var(--color-red--3);
 
   &:hover {
-    border-color: var(--bitkit-colors-red-2);
+    border-color: var(--color-red--2);
   }
 
   &:active {
     border-color: #D4093C;
-    background-color: var(--bitkit-colors-red-5);
-    color: var(--bitkit-colors-gray-1);
+    background-color: var(--color-red--5);
+    color: var(--color-gray--1);
   }
 
   &::before {
-    background-image: linear-gradient(to bottom, var(--bitkit-colors-white), var(--bitkit-colors-gray-1));
+    background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
   }
 
   &::after {

package/src/Button/Button.test.tsx

@@ -5,50 +5,26 @@ import Button from './Button';
 
 describe('Button', () => {
   test('default template', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button>Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button>Content</Button>))).toMatchSnapshot();
   });
 
   test('borderless', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button borderless>Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button borderless>Content</Button>))).toMatchSnapshot();
   });
 
   test('fullWidth', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button fullWidth>Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button fullWidth>Content</Button>))).toMatchSnapshot();
   });
 
   test('level', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button level="primary">Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button level="primary">Content</Button>))).toMatchSnapshot();
   });
 
   test('size', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button size="small">Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button size="small">Content</Button>))).toMatchSnapshot();
   });
 
   test('variant', () => {
-    expect(
-      shallowToJson(shallow(
-        <Button variant="danger">Content</Button>
-      ))
-    ).toMatchSnapshot();
+    expect(shallowToJson(shallow(<Button variant="danger">Content</Button>))).toMatchSnapshot();
   });
 });

package/src/Button/Button.tsx

@@ -33,30 +33,17 @@ export interface Props extends FlexProps {
 
 /** Standard Button component */
 const Button: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    borderless,
-    fullWidth,
-    level,
-    size,
-    variant,
-    ...rest
-  } = props;
+  const { borderless, fullWidth, level, size, variant, ...rest } = props;
 
   const gap = size === 'small' ? 'x1' : 'x2';
-  const classes = classnames('Button',
-    `Button--level-${level}`,
-    `Button--size-${size}`, {
-      'Button--borderless': borderless,
-      'Button--full-width': fullWidth,
-      [`Button--variant-${variant}`]: variant,
-    });
+  const classes = classnames('Button', `Button--level-${level}`, `Button--size-${size}`, {
+    'Button--borderless': borderless,
+    'Button--full-width': fullWidth,
+    [`Button--variant-${variant}`]: variant,
+  });
 
   return (
-    <Flex Component="button" { ...rest }
-        alignChildren="middle"
-        className={ classes }
-        direction="horizontal"
-        gap={ gap } />
+    <Flex Component="button" {...rest} alignChildren="middle" className={classes} direction="horizontal" gap={gap} />
   );
 };
 

package/src/Button/Buttons.test.tsx

@@ -7,31 +7,37 @@ import Buttons from './Buttons';
 describe('Buttons', () => {
   test('default template', () => {
     expect(
-      shallowToJson(shallow(
-        <Buttons>
-          <Button>Content</Button>
-        </Buttons>
-      ))
+      shallowToJson(
+        shallow(
+          <Buttons>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 
   test('fullWidth', () => {
     expect(
-      shallowToJson(shallow(
-        <Buttons fullWidth>
-          <Button>Content</Button>
-        </Buttons>
-      ))
+      shallowToJson(
+        shallow(
+          <Buttons fullWidth>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 
   test('joined', () => {
     expect(
-      shallowToJson(shallow(
-        <Buttons joined>
-          <Button>Content</Button>
-        </Buttons>
-      ))
+      shallowToJson(
+        shallow(
+          <Buttons joined>
+            <Button>Content</Button>
+          </Buttons>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 });

package/src/Button/Buttons.tsx

@@ -5,6 +5,7 @@ import Flex, { Props as FlexProps } from '../Flex/Flex';
 export interface Props extends FlexProps {
   /** */
   fullWidth?: boolean;
+  gap?: FlexProps['gap'];
   /** Connects any child components, when not provided they will be spaced out a little bit. */
   joined?: boolean;
 }
@@ -17,10 +18,12 @@ const Buttons: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Flex { ...rest }
-        className={ classes }
-        direction={ fullWidth ? 'vertical' : 'horizontal' }
-        gap={ joined && !fullWidth ? undefined : gap } />
+    <Flex
+      {...rest}
+      className={classes}
+      direction={fullWidth ? 'vertical' : 'horizontal'}
+      gap={joined && !fullWidth ? undefined : gap}
+    />
   );
 };
 

package/src/Button/ColorButton.css

@@ -38,44 +38,44 @@
   font-size: var(--font-size--4);
 }
 
-.ColorButton--bitkit-colors-blue {
-  color: var(--bitkit-colors-blue-4);
+.ColorButton--color-blue {
+  color: var(--color-blue--4);
 
-  &:hover { background-color: rgba(var(--rgb-blue-2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-blue-2), 0.3); }
+  &:hover { background-color: rgba(var(--rgb-blue--2), 0.15); }
+  &:active { background-color: rgba(var(--rgb-blue--2), 0.3); }
 }
 
-.ColorButton--bitkit-colors-grape {
-  color: var(--bitkit-colors-eggplant);
+.ColorButton--color-grape {
+  color: var(--color-eggplant);
 
-  &:hover { background-color: rgba(var(--rgb-grape-2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-grape-2), 0.3); }
+  &:hover { background-color: rgba(var(--rgb-grape--2), 0.15); }
+  &:active { background-color: rgba(var(--rgb-grape--2), 0.3); }
 }
 
-.ColorButton--bitkit-colors-green {
-  color: var(--bitkit-colors-green-4);
+.ColorButton--color-green {
+  color: var(--color-green--4);
 
-  &:hover { background-color: rgba(var(--rgb-green-2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-green-2), 0.3); }
+  &:hover { background-color: rgba(var(--rgb-green--2), 0.15); }
+  &:active { background-color: rgba(var(--rgb-green--2), 0.3); }
 }
 
-.ColorButton--bitkit-colors-red {
-  color: var(--bitkit-colors-red-4);
+.ColorButton--color-red {
+  color: var(--color-red--4);
 
-  &:hover { background-color: rgba(var(--rgb-red-2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-red-2), 0.3); }
+  &:hover { background-color: rgba(var(--rgb-red--2), 0.15); }
+  &:active { background-color: rgba(var(--rgb-red--2), 0.3); }
 }
 
-.ColorButton--bitkit-colors-white {
-  color: var(--bitkit-colors-white);
+.ColorButton--color-white {
+  color: var(--color-white);
 
   &:hover { background-color: rgba(var(--rgb-white), 0.15); }
   &:active { background-color: rgba(var(--rgb-white), 0.3); }
 }
 
-.ColorButton--bitkit-colors-yellow {
-  color: var(--bitkit-colors-yellow-5);
+.ColorButton--color-yellow {
+  color: var(--color-yellow--5);
 
-  &:hover { background-color: rgba(var(--rgb-yellow-2), 0.15); }
-  &:active { background-color: rgba(var(--rgb-yellow-2), 0.3); }
+  &:hover { background-color: rgba(var(--rgb-yellow--2), 0.15); }
+  &:active { background-color: rgba(var(--rgb-yellow--2), 0.3); }
 }

package/src/Button/ColorButton.test.tsx

@@ -6,9 +6,13 @@ import ColorButton from './ColorButton';
 describe('ColorButton', () => {
   test('default template', () => {
     expect(
-      shallowToJson(shallow(
-        <ColorButton color="blue" size="small">Content</ColorButton>
-      ))
+      shallowToJson(
+        shallow(
+          <ColorButton color="blue" size="small">
+            Content
+          </ColorButton>,
+        ),
+      ),
     ).toMatchSnapshot();
   });
 });

package/src/Button/ColorButton.tsx

@@ -19,22 +19,12 @@ export interface Props extends FlexProps {
  *
  */
 const ColorButton: React.FunctionComponent<Props> = (props: Props) => {
-  const {
-    color,
-    size,
-    ...rest
-  } = props;
+  const { color, size, ...rest } = props;
 
-  const classes = classnames('ColorButton',
-    `ColorButton--bitkit-colors-${color}`,
-    `ColorButton--size-${size}`);
+  const classes = classnames('ColorButton', `ColorButton--color-${color}`, `ColorButton--size-${size}`);
 
   return (
-    <Flex Component="button" { ...rest }
-        alignChildren="middle"
-        className={ classes }
-        direction="horizontal"
-        gap="x1" />
+    <Flex Component="button" {...rest} alignChildren="middle" className={classes} direction="horizontal" gap="x1" />
   );
 };
 

package/src/Button/__snapshots__/ColorButton.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`ColorButton default template 1`] = `
 <Flex
   Component="button"
   alignChildren="middle"
-  className="ColorButton ColorButton--bitkit-colors-blue ColorButton--size-small"
+  className="ColorButton ColorButton--color-blue ColorButton--size-small"
   direction="horizontal"
   gap="x1"
 >

package/src/ButtonWithDropdown/ButtonWithDropdown.tsx

@@ -1,31 +1,31 @@
 import * as React from 'react';
 import {
-    Button,
-    ButtonProps,
-    DropdownMenu,
-    DropdownMenuItem,
-    DropdownMenuItemProps,
-    Icon,
-    Placement,
-    PlacementManager,
-    PlacementProps,
-    PlacementReference,
-    } from '@bitrise/bitkit';
+  Button,
+  ButtonProps,
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuItemProps,
+  Icon,
+  Placement,
+  PlacementManager,
+  PlacementProps,
+  PlacementReference,
+} from '@bitrise/bitkit';
 
 export interface ItemProps extends DropdownMenuItemProps {
-    component?: string;
-    disabled?: boolean;
-    href?: string;
-    target?: string;
-    text: string;
+  component?: string;
+  disabled?: boolean;
+  href?: string;
+  target?: string;
+  text: string;
 }
 
 export interface Props {
-    buttonProps?: ButtonProps;
-    children?: React.ReactElement | React.ReactNodeArray;
-    dropdownWidth?: string;
-    items: ItemProps[];
-    placementProps?: PlacementProps;
+  buttonProps?: ButtonProps;
+  children?: React.ReactElement | React.ReactNodeArray;
+  dropdownWidth?: string;
+  items: ItemProps[];
+  placementProps?: PlacementProps;
 }
 
 const ButtonWithDropdown = ({
@@ -40,38 +40,40 @@ const ButtonWithDropdown = ({
   return (
     <PlacementManager>
       <PlacementReference>
-        { ({ ref }) => (
-          <Button innerRef={ ref } onClick={ () => setVisible(true) } { ...buttonProps }>
-            { children }
+        {({ ref }) => (
+          <Button innerRef={ref} onClick={() => setVisible(true)} {...buttonProps}>
+            {children}
             <Icon name="ChevronDown" />
           </Button>
-        ) }
+        )}
       </PlacementReference>
-      { !buttonProps.disabled && (
+      {!buttonProps.disabled && (
         <Placement
-            disableMargin="left-right"
-            onClose={ () => setVisible(false) }
-            placement="bottom-end"
-            visible={ visible }
-            { ...placementProps }>
-          { () => (
-            <DropdownMenu width={ dropdownWidth } withArrow>
-              { items.map(({ component, disabled, href, icon, onClick, target, text }) => (
+          disableMargin="left-right"
+          onClose={() => setVisible(false)}
+          placement="bottom-end"
+          visible={visible}
+          {...placementProps}
+        >
+          {() => (
+            <DropdownMenu width={dropdownWidth} withArrow>
+              {items.map(({ component, disabled, href, icon, onClick, target, text }) => (
                 <DropdownMenuItem
-                    Component={ component || 'div' }
-                    disabled={ disabled }
-                    href={ href }
-                    icon={ icon }
-                    key={ text }
-                    onClick={ onClick }
-                    target={ target }>
-                  { text }
+                  Component={component || 'div'}
+                  disabled={disabled}
+                  href={href}
+                  icon={icon}
+                  key={text}
+                  onClick={onClick}
+                  target={target}
+                >
+                  {text}
                 </DropdownMenuItem>
-              )) }
+              ))}
             </DropdownMenu>
-          ) }
+          )}
         </Placement>
-      ) }
+      )}
     </PlacementManager>
   );
 };

package/src/Card/Card.css

@@ -1,7 +1,7 @@
 .Card {
-  border: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border: 0.0625rem solid var(--color-gray--2);
   overflow: hidden;
 }
 
-.Card--direction-horizontal .Card__divider { border-right: 0.0625rem solid var(--bitkit-colors-gray-2); }
-.Card--direction-vertical .Card__divider { border-top: 0.0625rem solid var(--bitkit-colors-gray-2); }
+.Card--direction-horizontal .Card__divider { border-right: 0.0625rem solid var(--color-gray--2); }
+.Card--direction-vertical .Card__divider { border-top: 0.0625rem solid var(--color-gray--2); }

package/src/Card/Card.tsx

@@ -22,11 +22,13 @@ const Card: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Flex { ...rest }
-        backgroundColor={ backgroundColor }
-        borderRadius={ borderRadius }
-        className={ classes }
-        direction={ direction } />
+    <Flex
+      {...rest}
+      backgroundColor={backgroundColor}
+      borderRadius={borderRadius}
+      className={classes}
+      direction={direction}
+    />
   );
 };
 

package/src/Card/CardButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Button, { Props as ButtonProps } from '../Button/Button';
 
-export interface Props extends ButtonProps {}
+export type Props = ButtonProps;
 
 /**
  * The content that goes inside a Card. This is the component
@@ -9,9 +9,7 @@ export interface Props extends ButtonProps {}
  * with the CardDivider.
  */
 const CardButton: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Button { ...props } borderless />
-  );
+  return <Button {...props} borderless />;
 };
 
 export default CardButton;

package/src/Card/CardContent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 /**
  * The content that goes inside a Card. This is the component
@@ -9,9 +9,7 @@ export interface Props extends FlexProps {}
  * with the CardDivider.
  */
 const CardContent: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } className="Card__content" />
-  );
+  return <Flex {...props} className="Card__content" />;
 };
 
 export default CardContent;

package/src/Card/CardDivider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 /**
  * Dividers that can be used to separate CardContents. Can be used
@@ -9,9 +9,7 @@ export interface Props extends FlexProps {}
  * component.
  */
 const CardDivider: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } className="Card__divider" />
-  );
+  return <Flex {...props} className="Card__divider" />;
 };
 
 export default CardDivider;