@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

package/src/Sidebar/Sidebar.css

@@ -29,7 +29,7 @@
     width: var(--size--x1);
     opacity: 0;
     border-radius: 0 var(--size--x1) var(--size--x1) 0;
-    background-color: var(--bitkit-colors-aqua-3);
+    background-color: var(--color-aqua--3);
     transition-property: opacity;
     transition-duration: var(--transition-duration--slow);
     transition-timing-function: var(--transition-timing-function);
@@ -79,16 +79,16 @@
 }
 
 .Sidebar--theme-dark {
-  background-color: var(--bitkit-colors-grape-5);
-  color: var(--bitkit-colors-gray-1);
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
 
   & .Sidebar__header,
   & .Sidebar__menu {
-    border-bottom-color: var(--bitkit-colors-grape-4);
+    border-bottom-color: var(--color-grape--4);
   }
 
   & .Sidebar__menu:first-child {
-    border-top-color: var(--bitkit-colors-grape-4);
+    border-top-color: var(--color-grape--4);
   }
 
   & .Sidebar__sub-menu-item,
@@ -98,7 +98,7 @@
   }
 
   & .Sidebar__sub-menu-item {
-    border-top-color: var(--bitkit-colors-grape-5);
+    border-top-color: var(--color-grape--5);
   }
 
   & .Sidebar__sub-menu-item--active,
@@ -108,30 +108,30 @@
 }
 
 .Sidebar--theme-light {
-  background-color: var(--bitkit-colors-white);
-  color: var(--bitkit-colors-grape-5);
+  background-color: var(--color-white);
+  color: var(--color-grape-5);
 
   & .Sidebar__header,
   & .Sidebar__menu {
-    border-bottom-color: var(--bitkit-colors-gray-2);
+    border-bottom-color: var(--color-gray--2);
   }
 
   & .Sidebar__menu:first-child {
-    border-top-color: var(--bitkit-colors-gray-2);
+    border-top-color: var(--color-gray--2);
   }
 
   & .Sidebar__sub-menu-item,
   & .Sidebar__menu-item--active .Sidebar__menu-item-link::before,
   & .Sidebar__menu-item:hover .Sidebar__menu-item-link::before {
-    background-color: var(--bitkit-colors-gray-1);
+    background-color: var(--color-gray--1);
   }
 
   & .Sidebar__sub-menu-item {
-    border-top-color: var(--bitkit-colors-gray-2);
+    border-top-color: var(--color-gray--2);
   }
 
   & .Sidebar__sub-menu-item--active,
   & .Sidebar__sub-menu-item:hover {
-    background-color: var(--bitkit-colors-gray-2);
+    background-color: var(--color-gray--2);
   }
 }

package/src/Sidebar/Sidebar.tsx

@@ -15,9 +15,7 @@ const Sidebar: React.FunctionComponent<Props> = (props: Props) => {
   const { theme, ...rest } = props;
   const classes = classnames('Sidebar', `Sidebar--theme-${theme}`);
 
-  return (
-    <Flex className={ classes } grow { ...rest } />
-  );
+  return <Flex className={classes} grow {...rest} />;
 };
 
 Sidebar.defaultProps = {

package/src/Sidebar/SidebarHeader.tsx

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

package/src/Sidebar/SidebarMenu.tsx

@@ -20,8 +20,9 @@ const SidebarMenu: React.FunctionComponent<Props> = (props: Props) => {
   const [hasSubMenu, setHasSubMenu] = useState(false);
 
   return (
-    <SidebarMenuContext.Provider value={ { active, hasSubMenu, setHasSubMenu } }>
-      <Base { ...rest } className="Sidebar__menu" />
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <SidebarMenuContext.Provider value={{ active, hasSubMenu, setHasSubMenu }}>
+      <Base {...rest} className="Sidebar__menu" />
     </SidebarMenuContext.Provider>
   );
 };

package/src/Sidebar/SidebarMenuItem.tsx

@@ -5,13 +5,14 @@ import dataAtIds from '../dataAtIds.json';
 import Base, { Props as BaseProps } from '../Base/Base';
 import Flex from '../Flex/Flex';
 import Icon from '../Icon/Icon';
-import { SidebarMenuContext } from './SidebarMenuContext';
 import Visibility from '../Visibility/Visibility';
 import VisibilityContainer from '../Visibility/VisibilityContainer';
+import { SidebarMenuContext } from './SidebarMenuContext';
 
 const { useContext } = React;
 
 export interface Props extends BaseProps {
+  Component?: BaseProps['Component'];
   /**
    * Name of an icon (from the Icon component) that should
    * appear next to the text.
@@ -31,29 +32,31 @@ const SidebarMenuItem: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Base className={ classes } padding="x1">
-      <VisibilityContainer { ...rest }
-          alignChildrenVertical="middle"
-          className="Sidebar__menu-item-link"
-          data-bitkit-at-id={ dataAtIds.SidebarMenuLink }
-          direction="horizontal"
-          enabled={ !active }
-          gap="x4">
-        { icon && (
+    <Base className={classes} padding="x1">
+      <VisibilityContainer
+        {...rest}
+        alignChildrenVertical="middle"
+        className="Sidebar__menu-item-link"
+        data-bitkit-at-id={dataAtIds.SidebarMenuLink}
+        direction="horizontal"
+        enabled={!active}
+        gap="x4"
+      >
+        {icon && (
           <Flex>
-            <Icon name={ icon } />
+            <Icon name={icon} />
           </Flex>
-        ) }
+        )}
 
         <Flex grow initial="none">
-          { children }
+          {children}
         </Flex>
 
-        { hasSubMenu && (
+        {hasSubMenu && (
           <Visibility>
             <Icon name="ChevronDown" />
           </Visibility>
-        ) }
+        )}
       </VisibilityContainer>
     </Base>
   );

package/src/Sidebar/SidebarSubMenu.tsx

@@ -4,7 +4,7 @@ import { SidebarMenuContext } from './SidebarMenuContext';
 
 const { useContext, useEffect } = React;
 
-export interface Props extends Omit<ExpandProps, 'expanded'> {}
+export type Props = Omit<ExpandProps, 'expanded'>;
 
 /**
  * Child of the SidebarMenu component that is used to insert an
@@ -24,8 +24,8 @@ const SidebarSubMenu: React.FunctionComponent<Props> = (props: Props) => {
   }, []);
 
   return (
-    <Expand { ...rest } className="Sidebar__sub-menu" expanded={ active }>
-      { children }
+    <Expand {...rest} className="Sidebar__sub-menu" expanded={active}>
+      {children}
     </Expand>
   );
 };

package/src/Sidebar/SidebarSubMenuItem.tsx

@@ -37,21 +37,21 @@ const SidebarSubMenuItem: React.FunctionComponent<Props> = (props: Props) => {
   };
 
   return (
-    <Flex { ...rest }
-        alignChildrenVertical="middle"
-        className={ classes }
-        direction="horizontal"
-        gap="x4"
-        onClick={ handleClick }>
-      { icon && (
+    <Flex
+      {...rest}
+      alignChildrenVertical="middle"
+      className={classes}
+      direction="horizontal"
+      gap="x4"
+      onClick={handleClick}
+    >
+      {icon && (
         <Flex>
-          <Icon name={ icon } textColor="grape-2" />
+          <Icon name={icon} textColor="grape-2" />
         </Flex>
-      ) }
+      )}
 
-      <Flex>
-        { children }
-      </Flex>
+      <Flex>{children}</Flex>
     </Flex>
   );
 };

package/src/Skeleton/Skeleton.css

@@ -16,11 +16,11 @@
     background:
       linear-gradient(
         to left,
-        rgba(var(--Skeleton--bitkit-colors), 0),
-        rgba(var(--Skeleton--bitkit-colors), 0.63) 35%,
-        rgba(var(--Skeleton--bitkit-colors), 1) 48%,
-        rgba(var(--Skeleton--bitkit-colors), 0.57) 55%,
-        rgba(var(--Skeleton--bitkit-colors), 0)
+        rgba(var(--Skeleton--color), 0),
+        rgba(var(--Skeleton--color), 0.63) 35%,
+        rgba(var(--Skeleton--color), 1) 48%,
+        rgba(var(--Skeleton--color), 0.57) 55%,
+        rgba(var(--Skeleton--color), 0)
       );
     pointer-events: none;
   }

package/src/Skeleton/Skeleton.tsx

@@ -23,11 +23,7 @@ const Skeleton: React.FunctionComponent<Props> = (props: Props) => {
     'Skeleton--active': active,
   });
 
-  return (
-    <Base { ...rest }
-        className={ classes }
-        style={ { '--Skeleton--bitkit-colors': rgb.toString() } } />
-  );
+  return <Base {...rest} className={classes} style={{ '--Skeleton--color': rgb.toString() }} />;
 };
 
 Skeleton.defaultProps = {

package/src/Skeleton/SkeletonBox.tsx

@@ -16,10 +16,7 @@ export interface Props extends BaseProps {
 const SkeletonBox: React.FunctionComponent<Props> = (props: Props) => {
   const { backgroundColor, ...rest } = props;
 
-  return (
-    <Base { ...rest }
-        backgroundColor={ backgroundColor } />
-  );
+  return <Base {...rest} backgroundColor={backgroundColor} />;
 };
 
 SkeletonBox.defaultProps = {

package/src/Status/Status404.tsx

@@ -4,7 +4,7 @@ import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Image from '../Image/Image';
 import Text from '../Text/Text';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 /**
  * A composite component used as a placeholder page for when there
@@ -14,12 +14,13 @@ const Status404: React.FunctionComponent<Props> = (props: Props) => {
   const match = useMediaQuery(['65rem']);
 
   return (
-    <Flex { ...props }>
+    <Flex {...props}>
       <Flex
-          alignChildren="middle"
-          direction={ match('65rem') ? 'horizontal' : 'vertical' }
-          gap={ match('65rem') ? 'x8' : 'x4' }
-          paddingHorizontal="x6">
+        alignChildren="middle"
+        direction={match('65rem') ? 'horizontal' : 'vertical'}
+        gap={match('65rem') ? 'x8' : 'x4'}
+        paddingHorizontal="x6"
+      >
         <Text align="middle" size="7" weight="bold">
           404
         </Text>
@@ -30,9 +31,10 @@ const Status404: React.FunctionComponent<Props> = (props: Props) => {
 
       <Flex container grow height="33.125rem" overflow="hidden">
         <Image
-            absolute="center"
-            height="530px"
-            src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status404.svg"/>
+          absolute="center"
+          height="530px"
+          src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status404.svg"
+        />
       </Flex>
     </Flex>
   );

package/src/Status/Status500.tsx

@@ -4,7 +4,7 @@ import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Image from '../Image/Image';
 import Text from '../Text/Text';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 /**
  * A composite component used as a placeholder page for when there
@@ -14,11 +14,12 @@ const Status500: React.FunctionComponent<Props> = (props: Props) => {
   const match = useMediaQuery(['65rem']);
 
   return (
-    <Flex { ...props } alignChildrenHorizontal="middle" direction="vertical" paddingHorizontal="x6">
+    <Flex {...props} alignChildrenHorizontal="middle" direction="vertical" paddingHorizontal="x6">
       <Flex
-          alignChildren="middle"
-          direction={ match('65rem') ? 'horizontal' : 'vertical' }
-          gap={ match('65rem') ? 'x8' : 'x4' }>
+        alignChildren="middle"
+        direction={match('65rem') ? 'horizontal' : 'vertical'}
+        gap={match('65rem') ? 'x8' : 'x4'}
+      >
         <Text align="middle" size="7" weight="bold">
           500
         </Text>

package/src/Table/Table.css

@@ -12,16 +12,16 @@
 }
 
 .Table__header-cell--sortable:hover {
-  color: var(--bitkit-colors-grape-3);
+  color: var(--color-grape--3);
   cursor: pointer;
 }
 
 .Table__row:not(:last-child) .Table__cell {
-  border-bottom: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-bottom: 0.0625rem solid var(--color-gray--2);
 }
 
 .Table__cell {
-  background-color: var(--bitkit-colors-white);
+  background-color: var(--color-white);
   transition-property: background-color, color;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -33,7 +33,7 @@
 }
 
 .Table__row--clickable:hover .Table__cell {
-  color: var(--bitkit-colors-grape-3);
+  color: var(--color-grape--3);
   cursor: pointer;
 }
 
@@ -63,7 +63,7 @@
 }
 
 .Table--type-flat .Table__header-row .Table__header-cell {
-  border-bottom: 0.0625rem solid var(--bitkit-colors-gray-2);
+  border-bottom: 0.0625rem solid var(--color-gray--2);
 }
 
 .Table--type-flat .Table__header-row:last-child .Table__header-cell {

package/src/Table/Table.tsx

@@ -18,11 +18,7 @@ const Table: React.FunctionComponent<Props> = (props: Props) => {
   const { type, ...rest } = props;
   const classes = classnames('Table', `Table--type-${type}`);
 
-  return (
-    <Base { ...rest }
-        Component="table"
-        className={ classes } />
-  );
+  return <Base {...rest} Component="table" className={classes} />;
 };
 
 Table.defaultProps = {

package/src/Table/TableBody.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import Base, { Props as BaseProps } from '../Base/Base';
 
-export interface Props extends BaseProps {}
+export type Props = BaseProps;
 
 /**
  * The body of the table that holds the TableRow components. Should be
  * a direct descendant of the Table component.
  */
 const TableBody: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Base { ...props }
-        Component="tbody"
-        className="Table__body" />
-  );
+  return <Base {...props} Component="tbody" className="Table__body" />;
 };
 
 export default TableBody;

package/src/Table/TableCell.tsx

@@ -17,12 +17,7 @@ const TableCell: React.FunctionComponent<Props> = (props: Props) => {
     'Table__cell--shrink': shrink,
   });
 
-  return (
-    <Text { ...rest }
-        Component="td"
-        className={ classes }
-        textColor="gray-7" />
-  );
+  return <Text {...rest} Component="td" className={classes} textColor="gray-7" />;
 };
 
 export default TableCell;

package/src/Table/TableHeader.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import Base, { Props as BaseProps } from '../Base/Base';
 
-export interface Props extends BaseProps {}
+export type Props = BaseProps;
 
 /**
  * The header of the table that holds the TableHeaderRow components. Should be
  * a direct descendant of the Table component.
  */
 const TableHeader: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Base { ...props }
-        Component="thead"
-        className="Table__header" />
-  );
+  return <Base {...props} Component="thead" className="Table__header" />;
 };
 
 export default TableHeader;

package/src/Table/TableHeaderCell.tsx

@@ -31,30 +31,29 @@ const TableHeaderCell: React.FunctionComponent<Props> = (props: Props) => {
   });
 
   return (
-    <Text { ...props }
-        Component="th"
-        className={ classes }>
+    <Text {...props} Component="th" className={classes}>
       <VisibilityContainer
-          alignChildrenHorizontal={ align }
-          alignChildrenVertical="middle"
-          direction="horizontal"
-          enabled={ !!sortable }
-          gap="x2">
-        <Flex>
-          { children }
-        </Flex>
+        alignChildrenHorizontal={align}
+        alignChildrenVertical="middle"
+        direction="horizontal"
+        enabled={!!sortable}
+        gap="x2"
+      >
+        <Flex>{children}</Flex>
 
-        { sortable && (
-          <Visibility visible={ sorted ? true : undefined }>
-            <Icon name={
-              (sorted === 'asc' && 'ArrowUp') ||
-              (sorted === 'desc' && 'ArrowDown') ||
-              (sortable === 'asc' && 'ArrowUp') ||
-              (sortable === 'desc' && 'ArrowDown') ||
-              'ArrowDown'
-            } />
+        {sortable && (
+          <Visibility visible={sorted ? true : undefined}>
+            <Icon
+              name={
+                (sorted === 'asc' && 'ArrowUp') ||
+                (sorted === 'desc' && 'ArrowDown') ||
+                (sortable === 'asc' && 'ArrowUp') ||
+                (sortable === 'desc' && 'ArrowDown') ||
+                'ArrowDown'
+              }
+            />
           </Visibility>
-        ) }
+        )}
       </VisibilityContainer>
     </Text>
   );

package/src/Table/TableHeaderRow.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import Base, { Props as BaseProps } from '../Base/Base';
 
-export interface Props extends BaseProps {}
+export type Props = BaseProps;
 
 /**
  * The header row that holds the TableHeaderCell components. Should be
  * a direct descendant of the TableHeader component.
  */
 const TableHeaderRow: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Base { ...props }
-        Component="tr"
-        className="Table__header-row" />
-  );
+  return <Base {...props} Component="tr" className="Table__header-row" />;
 };
 
 export default TableHeaderRow;

package/src/Table/TableRow.tsx

@@ -17,12 +17,7 @@ const TableRow: React.FunctionComponent<Props> = (props: Props) => {
     'Table__row--clickable': onClick,
   });
 
-  return (
-    <Base { ...rest }
-        Component="tr"
-        className={ classes }
-        onClick={ onClick } />
-  );
+  return <Base {...rest} Component="tr" className={classes} onClick={onClick} />;
 };
 
 export default TableRow;

package/src/Tabs/Tab.tsx

@@ -17,13 +17,7 @@ const Tab: React.FunctionComponent<Props> = (props: Props) => {
     'Tabs__tab--active': active,
   });
 
-  return (
-    <Text { ...rest }
-        className={ classes }
-        letterSpacing="x2"
-        uppercase
-        weight="bold" />
-  );
+  return <Text {...rest} className={classes} letterSpacing="x2" uppercase weight="bold" />;
 };
 
 export default Tab;

package/src/Tabs/Tabs.css

@@ -2,7 +2,7 @@
   position: relative;
   padding-top: var(--size--x3);
   padding-bottom: var(--size--x3);
-  color: var(--bitkit-colors-eggplant);
+  color: var(--color-eggplant);
   cursor: pointer;
 }
 
@@ -22,9 +22,9 @@
 }
 
 .Tabs__tab--active {
-  color: var(--bitkit-colors-grape-5);
+  color: var(--color-grape--5);
 
   &::before {
-    background-color: var(--bitkit-colors-aqua-3);
+    background-color: var(--color-aqua--3);
   }
 }

package/src/Tabs/Tabs.tsx

@@ -2,15 +2,13 @@ import * as React from 'react';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import './Tabs.css';
 
-export interface Props extends FlexProps {}
+export type Props = FlexProps;
 
 /**
  * Tabular navigation component, that holds the Tab components.
  */
 const Tabs: React.FunctionComponent<Props> = (props: Props) => {
-  return (
-    <Flex { ...props } direction="horizontal" />
-  );
+  return <Flex {...props} direction="horizontal" />;
 };
 
 Tabs.defaultProps = {

package/src/Text/Text.tsx

@@ -42,9 +42,7 @@ export interface Props extends BaseProps {
 }
 
 const InlineComponentMap = (props: Props) =>
-  (props.weight === 'bold' && 'strong') ||
-  (props.emphasis && 'em') ||
-  'span';
+  (props.weight === 'bold' && 'strong') || (props.emphasis && 'em') || 'span';
 
 /**
  * Generic text component that applies a wide variety of textual
@@ -83,11 +81,7 @@ const Text: React.FunctionComponent<Props> = (props: Props) => {
 
   const component = inline ? InlineComponentMap(props) : Component;
 
-  return (
-    <Base { ...rest }
-        Component={ component }
-        className={ classes } />
-  );
+  return <Base {...rest} Component={component} className={classes} />;
 };
 
 export default Text;