@bitrise/bitkit 10.1.0-alpha-chakra.3 → 10.1.0-alpha-breadcrumb.2

package/src/Old/Link/Link.css

@@ -0,0 +1,44 @@
+.Link {
+  color: inherit;
+  transition-property: color;
+  transition-duration: var(--transition-duration--fast);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.Link--underline {
+  text-decoration: underline;
+}
+
+.Link--color-grape-3 {
+  color: var(--color-grape--3);
+}
+
+.Link--color-grape-3:hover { color: var(--color-grape--4); }
+
+.Link--color-grape-5 {
+  color: var(--color-grape--5);
+}
+
+.Link--color-grape-5:hover { color: var(--color-grape--3); }
+
+.Link--color-gray-1 {
+  color: var(--color-gray--1);
+}
+
+.Link--color-gray-1:hover { color: var(--color-gray--2); }
+
+.Link--color-gray-5 {
+  color: var(--color-gray--5);
+}
+
+.Link--color-gray-5:hover { color: var(--color-gray--6); }
+
+.Link--color-white {
+  color: var(--color-white);
+}
+
+.Link--color-white:hover { color: var(--color-gray--1); }
+
+.Link:focus-visible {
+  box-shadow: none;
+}

package/src/Old/Link/Link.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Base, { Props as BaseProps } from '../Base/Base';
+import './Link.css';
+
+export type TypeLinkColor = 'purple.50' | 'purple.10' | 'neutral.95' | 'neutral.70' | 'neutral.100';
+
+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 */
+  underline?: boolean;
+}
+
+/** Styled link component */
+const Link: React.FunctionComponent<Props> = (props: Props) => {
+  const { className, color, underline, ...rest } = props;
+  const classes = classnames(className, 'Link', `Link--color-${color}`, {
+    'Link--underline': underline,
+  });
+
+  return <Base {...rest} className={classes} />;
+};
+
+Link.defaultProps = {
+  Component: 'a',
+};
+
+export default Link;

package/src/Old/Modal/Modal.css

@@ -0,0 +1,67 @@
+
+@keyframes ModalFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes ModalFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.Body--modal-open { overflow: hidden; }
+
+.Modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: var(--color-overlay--black);
+  overflow: auto;
+  z-index: var(--z-index-Modal);
+  animation-name: ModalFadeOut;
+  animation-duration: var(--transition-duration--fast);
+  animation-fill-mode: forwards;
+  animation-timing-function: var(--transition-timing-function);
+}
+
+.Modal__content {
+  max-width: 100%;
+  animation-duration: var(--transition-duration--fast);
+  animation-fill-mode: forwards;
+  animation-timing-function: var(--transition-timing-function);
+}
+
+.Modal__content,
+.Modal__content:first-child,
+.Modal__content:last-child {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.Modal--visible {
+  animation-name: ModalFadeIn;
+}
+
+.Modal--visible .Modal__content {
+  animation-duration: var(--transition-duration-base);
+}
+
+.ModalHeader {
+  position: relative;
+}
+
+.ModalHeader__progress,
+.ModalHeader--with-separator::before {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.ModalHeader--with-separator::before {
+  content: '';
+  height: var(--size--x1);
+  background: linear-gradient(90deg, var(--color-grape--1) -28.36%, var(--color-grape--2) 100%);
+}

package/src/Old/Modal/Modal.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { useEventListener } from '../hooks';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import Portal from '../Portal/Portal';
+import { TypeColors } from '../Base/Base';
+import { ModalContext } from './ModalContext';
+import './Modal.css';
+
+const { useEffect, useState } = React;
+
+const enableScroll = () => document.body.classList.remove('Body--modal-open');
+const disableScroll = () => document.body.classList.add('Body--modal-open');
+
+export interface Props extends FlexProps {
+  /**
+   * Background color of the dialog box
+   */
+  backgroundColor?: TypeColors;
+  /**
+   * Flag to set the initial height of the dialog box to
+   * the full height available.
+   */
+  fullHeight?: boolean;
+  /**
+   * Callback that is called when clicking on the overlay
+   * area, useful for dismissing the modal.
+   */
+  onClose?: () => void;
+  /**
+   * Flag that controls the rendering and visibility of the
+   * modal to the user.
+   */
+  visible: boolean;
+  /**
+   * Width of the dialog box.
+   */
+  width: string;
+}
+
+/**
+ * Modal component with overlay for interupting a user with
+ * an important message or question.
+ */
+const Modal: React.FunctionComponent<Props> = (props: Props) => {
+  const { backgroundColor, children, fullHeight, onClose, visible, width, ...rest } = props;
+
+  const [modalElement, setModalElement] = useState<HTMLElement | null>(null);
+  const [render, setRender] = useState(visible);
+
+  const classes = classnames('Modal', {
+    'Modal--visible': visible,
+  });
+
+  const handleClick = (event: React.SyntheticEvent) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+  };
+
+  useEffect(() => {
+    if (visible) {
+      setRender(true);
+      disableScroll();
+    } else {
+      enableScroll();
+    }
+  }, [visible]);
+
+  useEventListener(
+    modalElement,
+    'animationend',
+    () => {
+      if (!visible) {
+        setRender(false);
+        setModalElement(null);
+      }
+    },
+    [visible],
+  );
+
+  if (!render) {
+    return null;
+  }
+
+  return (
+    <Portal element={document.body}>
+      <Flex
+        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}
+        >
+          {/* eslint-disable-next-line react/jsx-no-constructed-context-values */}
+          <ModalContext.Provider value={{ modalElement, onClose }}>{children}</ModalContext.Provider>
+        </Flex>
+      </Flex>
+    </Portal>
+  );
+};
+
+Modal.defaultProps = {
+  backgroundColor: 'neutral.100',
+};
+
+export default Modal;

package/src/Old/Modal/ModalBody.tsx

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

package/src/Old/Modal/ModalHeader.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import { Icon } from '@bitrise/bitkit';
+import Link from '../Link/Link';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import { ModalContext } from './ModalContext';
+
+const { useContext } = React;
+
+export interface Props extends FlexProps {
+  gap?: FlexProps['gap'];
+  padding?: FlexProps['padding'];
+  /**
+   * Flag to toggle the gradient separator
+   */
+  withSeparator?: boolean;
+}
+
+/**
+ * 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 { onClose } = useContext(ModalContext);
+
+  const classes = classnames('ModalHeader', {
+    'ModalHeader--with-separator': withSeparator,
+  });
+
+  return (
+    <Flex {...rest} className={classes} direction="horizontal">
+      <Flex grow initial="none" paddingHorizontal={paddingHorizontal} paddingVertical={paddingVertical}>
+        {children}
+      </Flex>
+      <Flex padding="x4">
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <Link clickable color="purple.10" onClick={onClose}>
+          <Icon name="CloseSmall" />
+        </Link>
+      </Flex>
+    </Flex>
+  );
+};
+
+ModalHeader.defaultProps = {
+  gap: 'x2',
+  padding: 'x6',
+};
+
+export default ModalHeader;

package/src/Old/Modal/ModalHeaderProgress.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import ProgressBar from '../Progress/ProgressBar';
+
+export interface Props extends FlexProps {
+  /** A number between 0 and 1 that represents the progress to display */
+  progress: number;
+}
+
+/**
+ * ModalHeader progress bar
+ */
+const ModalHeaderProgress: React.FunctionComponent<Props> = (props: Props) => {
+  const { progress, ...rest } = props;
+
+  return (
+    <Flex {...rest} className="ModalHeader__progress">
+      <ProgressBar foregroundColor="purple.40" height="4px" progress={progress} />
+    </Flex>
+  );
+};
+
+export default ModalHeaderProgress;

package/src/Old/Modal/ModalTitle.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Text, { Props as TextProps } from '../Text/Text';
+
+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="purple.10" weight="bold" />;
+};
+
+export default ModalTitle;

package/src/Old/Notification/Notification.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon, { TypeIconName } from '../../Components/Icon/Icon';
-import Link from '../../Components/Link/Link';
+import Icon from '../Icon/Icon';
+import { TypeIconName } from '../Icon/tsx';
+import Link from '../Link/Link';
 import ProgressSpinner from '../Progress/ProgressSpinner';
 import './Notification.css';
 
@@ -57,7 +58,7 @@ const Notification: React.FunctionComponent<Props> = (props: Props) => {
       {onRemove && (
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link as="button" onClick={onRemove}>
+          <Link clickable onClick={onRemove}>
             <Icon name="CloseSmall" />
           </Link>
         </Flex>

package/src/Old/Notification/__snapshots__/Notification.test.tsx.snap

@@ -9,8 +9,9 @@ exports[`Notification default icon can be overridden 1`] = `
   padding="x3"
 >
   <Flex>
-    <ForwardRef
+    <Icon
       name="Bell"
+      size="1.5rem"
     />
   </Flex>
   <Flex
@@ -31,8 +32,9 @@ exports[`Notification default template 1`] = `
   padding="x3"
 >
   <Flex>
-    <ForwardRef
+    <Icon
       name="ErrorGeneral"
+      size="1.5rem"
     />
   </Flex>
   <Flex
@@ -53,8 +55,9 @@ exports[`Notification with onRemove has a close icon 1`] = `
   padding="x3"
 >
   <Flex>
-    <ForwardRef
+    <Icon
       name="ErrorGeneral"
+      size="1.5rem"
     />
   </Flex>
   <Flex
@@ -64,15 +67,16 @@ exports[`Notification with onRemove has a close icon 1`] = `
     Content
   </Flex>
   <Flex>
-    <ForwardRef
-      as="button"
-      isUnderlined={false}
+    <Link
+      Component="a"
+      clickable={true}
       onClick={[Function]}
     >
-      <ForwardRef
+      <Icon
         name="CloseSmall"
+        size="1.5rem"
       />
-    </ForwardRef>
+    </Link>
   </Flex>
 </Flex>
 `;

package/src/Old/Progress/ProgressBitbot.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Props as BaseProps } from '../Base/Base';
-import Text from '../../Components/Text/Text';
+import Text from '../Text/Text';
 
 export interface Props extends BaseProps {
   /**
@@ -62,7 +62,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
   const { content, size, ...rest } = props;
 
   return (
-    <Text {...rest} align="center">
+    <Text {...rest} align="middle">
       <svg fill="currentColor" height={size} viewBox="0 0 24 24" width={size}>
         <g fill="currentColor" fillRule="evenodd" stroke="none" strokeWidth="1">
           <path d={dot0}>
@@ -159,7 +159,7 @@ const ProgressBitbot: React.FunctionComponent<Props> = (props: Props) => {
       </svg>
 
       {content && (
-        <Text align="center" letterSpacing="20" size="1" textTransform="uppercase">
+        <Text align="middle" letterSpacing="x5" size="1" uppercase>
           {content}
         </Text>
       )}

package/src/Old/Progress/ProgressButtonContent.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Base from '../Base/Base';
+import Visibility from '../Visibility/Visibility';
+import ButtonSize from '../Button/ButtonSize';
+import ProgressSpinner from './ProgressSpinner';
+
+export interface Props {
+  progressing: boolean;
+  children: React.ReactNode;
+  size?: ButtonSize;
+}
+
+/**
+ * A progress indicator action button that is useful
+ * to provide inline feedback that after a user action,
+ * something is happening.
+ */
+const ProgressButtonContent: React.FunctionComponent<Props> = (props: Props) => {
+  const { children, progressing, size } = props;
+  const gap = size === 'small' ? 'x1' : 'x2';
+
+  return (
+    <Base container>
+      <Visibility alignChildren="middle" direction="horizontal" gap={gap} visible={!progressing}>
+        {children}
+      </Visibility>
+
+      <Visibility absolute="center" visible={progressing}>
+        {progressing && <ProgressSpinner size="1.5rem" />}
+      </Visibility>
+    </Base>
+  );
+};
+
+export default ProgressButtonContent;

package/src/Old/Ribbon/Ribbon.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../../Components/Icon/Icon';
-import Link from '../../Components/Link/Link';
+import Icon from '../Icon/Icon';
+import Link from '../Link/Link';
 import './Ribbon.css';
 import Base from '../Base/Base';
 
@@ -38,8 +38,8 @@ const Ribbon: React.FunctionComponent<Props> = (props: Props) => {
       {onRemove && (
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link as="button" onClick={onRemove}>
-            <Icon name="CloseSmall" />
+          <Link clickable onClick={onRemove}>
+            <Icon name="CloseSmall" size="1.5rem" />
           </Link>
         </Flex>
       )}

package/src/Old/Sidebar/Sidebar.css

@@ -0,0 +1,125 @@
+/* stylelint-disable no-descending-specificity */
+
+.Sidebar__header,
+.Sidebar__menu {
+  border-bottom-width: 0.0625rem;
+  border-bottom-style: solid;
+}
+
+.Sidebar__menu:first-child {
+  border-top-width: 0.0625rem;
+  border-top-style: solid;
+}
+
+.Sidebar__header {
+  padding: var(--size--x4) var(--size--x6);
+}
+
+.Sidebar__menu-item {
+  position: relative;
+  overflow: hidden;
+  z-index: 0;
+}
+
+.Sidebar__menu-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: var(--size--x1);
+  opacity: 0;
+  border-radius: 0 var(--size--x1) var(--size--x1) 0;
+  background-color: var(--color-aqua--3);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration--slow);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.Sidebar__menu-item-link {
+  position: relative;
+  padding: var(--size--x4) var(--size--x6);
+  cursor: pointer;
+}
+
+.Sidebar__menu-item-link::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--size--x2);
+  z-index: -1;
+  transition-property: transform, border-radius, background-color;
+  transition-duration: var(--transition-duration--base);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.Sidebar__menu-item--active::before,
+.Sidebar__menu-item--active:hover::before {
+  opacity: 1;
+}
+
+.Sidebar__menu-item--active .Sidebar__menu-item-link::before,
+.Sidebar__menu-item--active:hover .Sidebar__menu-item-link::before {
+  transform: scale(1.2);
+  border-radius: 0;
+}
+
+.Sidebar__sub-menu-item {
+  padding: var(--size--x2) var(--size--x6);
+  border-top-width: 0.0625rem;
+  border-top-style: solid;
+  cursor: pointer;
+  transition-property: background-color;
+  transition-duration: var(--transition-duration--base);
+  transition-timing-function: var(--transition-timing-function);
+}
+
+.Sidebar--theme-dark {
+  background-color: var(--color-grape--5);
+  color: var(--color-gray--1);
+}
+
+.Sidebar--theme-dark .Sidebar__header,
+.Sidebar--theme-dark .Sidebar__menu {
+  border-bottom-color: var(--color-grape--4);
+}
+
+.Sidebar--theme-dark .Sidebar__menu:first-child {
+  border-top-color: var(--color-grape--4);
+}
+
+.Sidebar--theme-dark .Sidebar__sub-menu-item {
+  border-top-color: var(--color-grape--5);
+}
+
+.Sidebar--theme-light {
+  background-color: var(--color-white);
+  color: var(--color-grape-5);
+}
+
+.Sidebar--theme-light .Sidebar__header,
+.Sidebar--theme-light .Sidebar__menu {
+  border-bottom-color: var(--color-gray--2);
+}
+
+.Sidebar--theme-light .Sidebar__menu:first-child {
+  border-top-color: var(--color-gray--2);
+}
+
+.Sidebar--theme-light .Sidebar__sub-menu-item,
+.Sidebar--theme-light .Sidebar__menu-item--active .Sidebar__menu-item-link::before,
+.Sidebar--theme-light .Sidebar__menu-item:hover .Sidebar__menu-item-link::before {
+  background-color: var(--color-gray--1);
+}
+
+.Sidebar--theme-light .Sidebar__sub-menu-item {
+  border-top-color: var(--color-gray--2);
+}
+
+.Sidebar--theme-light .Sidebar__sub-menu-item--active,
+.Sidebar--theme-light .Sidebar__sub-menu-item:hover {
+  background-color: var(--color-gray--2);
+}

package/src/Old/Sidebar/Sidebar.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import './Sidebar.css';
+
+export interface Props extends FlexProps {
+  theme?: 'dark' | 'light';
+}
+
+/**
+ * A full sidebar navigation component that can include a combination
+ * of top level and sub menus.
+ */
+const Sidebar: React.FunctionComponent<Props> = (props: Props) => {
+  const { theme, ...rest } = props;
+  const classes = classnames('Sidebar', `Sidebar--theme-${theme}`);
+
+  return <Flex className={classes} grow {...rest} />;
+};
+
+Sidebar.defaultProps = {
+  theme: 'dark',
+};
+
+export default Sidebar;

package/src/Old/Sidebar/SidebarHeader.tsx

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