@bitrise/bitkit 10.1.0-alpha-breadcrumb.3 → 10.2.1

package/src/Old/Button/Button.css

@@ -1,249 +0,0 @@
-:root {
-  --Button--border-small: 0.0625rem;
-  --Button--border-medium: 0.0625rem;
-  --Button--border-large: 0.125rem;
-  --Button--padding-small-vertical: calc(var(--size--x1) - var(--Button--border-small));
-  --Button--padding-small-horizontal: var(--size--x3);
-  --Button--padding-medium-vertical: calc(var(--size--x3) - var(--Button--border-medium));
-  --Button--padding-medium-horizontal: var(--size--x4);
-  --Button--padding-large-vertical: var(--size--x4);
-  --Button--padding-large-horizontal: var(--size--x6);
-  --Button--line-height: var(--size--x6);
-}
-
-.Button {
-  border: 0 solid transparent;
-  background-color: transparent;
-  line-height: var(--Button--line-height);
-  transition-property: border-color, background-color, color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Button:hover {
-  cursor: pointer;
-}
-
-.Button:disabled,
-.Button[disabled] {
-  cursor: not-allowed;
-}
-
-.Button--full-width {
-  width: 100%;
-}
-
-.Button--size-small {
-  padding: var(--Button--padding-small-vertical) var(--Button--padding-small-horizontal);
-  border-width: var(--Button--border-small);
-  border-radius: var(--size--x1);
-  font-size: var(--fontSizes-2);
-}
-
-.Button--size-medium {
-  padding: var(--Button--padding-medium-vertical) var(--Button--padding-medium-horizontal);
-  border-width: var(--Button--border-medium);
-  border-radius: var(--size--x1);
-  font-size: var(--fontSizes-3);
-}
-
-.Button--size-large {
-  padding: var(--Button--padding-large-vertical) var(--Button--padding-large-horizontal);
-  border-width: var(--Button--border-large);
-  border-radius: 0.375rem;
-  font-size: var(--fontSizes-4);
-}
-
-.Button--borderless {
-  border: none;
-  border-radius: 0;
-}
-
-/* stylelint-disable no-descending-specificity */
-.Button--level-primary,
-.Button--level-secondary {
-  position: relative;
-  overflow: hidden;
-  z-index: 0;
-}
-
-.Button--level-primary::before,
-.Button--level-primary::after,
-.Button--level-secondary::before,
-.Button--level-secondary::after {
-  content: '';
-  position: absolute;
-  top: -0.125rem;
-  right: -0.125rem;
-  bottom: -0.125rem;
-  left: -0.125rem;
-  z-index: -1;
-  transition-property: opacity;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Button--level-primary:disabled::before,
-.Button--level-primary:hover:not(:disabled)::before,
-.Button--level-primary[disabled]::before,
-.Button--level-primary:hover:not([disabled])::before,
-.Button--level-secondary:disabled::before,
-.Button--level-secondary:hover:not(:disabled)::before,
-.Button--level-secondary[disabled]::before,
-.Button--level-secondary:hover:not([disabled])::before {
-  opacity: 0;
-}
-
-.Button--level-primary:hover:not(:disabled)::after,
-.Button--level-primary:hover:not([disabled])::after,
-.Button--level-secondary:hover:not(:disabled)::after,
-.Button--level-secondary:hover:not([disabled])::after {
-  opacity: 1;
-}
-
-.Button--level-primary:disabled::after,
-.Button--level-primary:active:not(:disabled)::after,
-.Button--level-primary[disabled]::after,
-.Button--level-primary:active:not([disabled])::after,
-.Button--level-secondary:disabled::after,
-.Button--level-secondary:active:not(:disabled)::after,
-.Button--level-secondary[disabled]::after,
-.Button--level-secondary:active:not([disabled])::after {
-  opacity: 0;
-}
-
-.Button--level-primary {
-  border-color: var(--color-eggplant);
-  background-color: var(--color-grape--5);
-  color: var(--color-gray--1);
-  font-weight: var(--font-weight--bold);
-}
-
-.Button--level-primary:disabled,
-.Button--level-primary[disabled] {
-  border-color: var(--color-gray--5);
-  background-image: linear-gradient(to bottom, var(--color-gray--4), var(--color-gray--5));
-}
-
-.Button--level-primary::before {
-  opacity: 1;
-  background-image: linear-gradient(to bottom, #6C0EB2, #450674);
-}
-
-.Button--level-primary::after {
-  opacity: 0;
-  background-image: linear-gradient(to bottom, #50167B, #3D125D);
-}
-
-.Button--level-secondary {
-  border-color: var(--color-gray--3);
-  background-color: var(--color-gray--2);
-  color: var(--color-grape--5);
-}
-
-.Button--level-secondary:disabled,
-.Button--level-secondary[disabled] {
-  border-color: var(--color-gray--3);
-  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-  color: var(--color-gray--5);
-}
-
-.Button--level-secondary:active:not(:disabled) {
-  border-color: var(--color-eggplant);
-  background-color: var(--color-grape--5);
-  color: var(--color-gray--1);
-}
-
-.Button--level-secondary::before {
-  opacity: 1;
-  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-}
-
-.Button--level-secondary::after {
-  content: none;
-  opacity: 0;
-}
-
-.Button--level-tertiary {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--color-grape--3);
-}
-
-.Button--level-tertiary:disabled,
-.Button--level-tertiary[disabled] {
-  color: var(--color-gray--5);
-}
-
-.Button--level-tertiary:hover:not(:disabled),
-.Button--level-tertiary:hover:not([disabled]) {
-  background-color: var(--color-grape--1);
-}
-
-.Button--level-tertiary:active:not(:disabled),
-.Button--level-tertiary:active:not([disabled]) {
-  background-color: var(--color-grape--5);
-  color: var(--color-gray--1);
-}
-
-.Button--variant-danger.Button--level-primary:not(:disabled),
-.Button--variant-danger.Button--level-primary:not([disabled]) {
-  border-color: #D4093C;
-  background-color: #C90032;
-}
-
-.Button--variant-danger.Button--level-primary:not(:disabled):active,
-.Button--variant-danger.Button--level-primary:not([disabled]):active {
-  border-color: #D4093C;
-  background-color: var(--color-red--5);
-}
-
-.Button--variant-danger.Button--level-primary:not(:disabled)::before,
-.Button--variant-danger.Button--level-primary:not([disabled])::before {
-  background-image: linear-gradient(to bottom, #FF2158, #E41447);
-}
-
-.Button--variant-danger.Button--level-primary:not(:disabled)::after,
-.Button--variant-danger.Button--level-primary:not([disabled])::after {
-  content: none;
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled),
-.Button--variant-danger.Button--level-secondary:not([disabled]) {
-  border-color: var(--color-gray--3);
-  background-color: var(--color-red--1);
-  color: var(--color-red--3);
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled):hover,
-.Button--variant-danger.Button--level-secondary:not([disabled]):hover {
-  border-color: var(--color-red--2);
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled):active,
-.Button--variant-danger.Button--level-secondary:not([disabled]):active {
-  border-color: #D4093C;
-  background-color: var(--color-red--5);
-  color: var(--color-gray--1);
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled)::before,
-.Button--variant-danger.Button--level-secondary:not([disabled])::before {
-  background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray--1));
-}
-
-.Button--variant-danger.Button--level-secondary:not(:disabled)::after,
-.Button--variant-danger.Button--level-secondary:not([disabled])::after {
-  content: none;
-}
-
-.Buttons--joined .Button:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.Buttons--joined .Button:not(:last-child) {
-  border-right: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}

package/src/Old/Button/Button.test.tsx

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

package/src/Old/Button/Button.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import './Button.css';
-import ButtonSize from './ButtonSize';
-
-export interface Props extends FlexProps {
-  /**
-   * Removes the borders from the Button, useful for when used inside a w
-   * rapping container with custom borders
-   */
-  borderless?: boolean;
-  /**
-   * Allows the Button to fill the container space rather than shrinking
-   * down to the content
-   */
-  fullWidth?: boolean;
-  /** Sets the visual importance of the Button. */
-  level?: 'primary' | 'secondary' | 'tertiary';
-  /**
-   * Sets the size of the Button. Small allows the Button to fit
-   * into smaller spaces, while large will help the button stand
-   * out on a page with lots of space.
-   */
-  size?: ButtonSize;
-  /**
-   * Variant is another prop that changes the styles to indicate it's usage.
-   * For example "danger" is to let the user know this button performs a
-   * potentionally dangerous action.
-   */
-  variant?: 'danger';
-}
-
-/** Standard Button component */
-const Button: React.FunctionComponent<Props> = (props: Props) => {
-  const { borderless, className, fullWidth, level, size, variant, ...rest } = props;
-
-  const gap = size === 'small' ? 'x1' : 'x2';
-  const classes = classnames(className, '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} />
-  );
-};
-
-Button.defaultProps = {
-  level: 'secondary',
-  size: 'medium',
-};
-
-export default Button;

package/src/Old/Button/ButtonSize.ts

@@ -1,3 +0,0 @@
-type ButtonSize = 'small' | 'medium' | 'large';
-
-export default ButtonSize;

package/src/Old/Button/Buttons.test.tsx

@@ -1,42 +0,0 @@
-import { shallow } from 'enzyme';
-import { shallowToJson } from 'enzyme-to-json';
-import Button from './Button';
-import Buttons from './Buttons';
-
-describe('Buttons', () => {
-  test('default template', () => {
-    expect(
-      shallowToJson(
-        shallow(
-          <Buttons>
-            <Button>Content</Button>
-          </Buttons>,
-        ),
-      ),
-    ).toMatchSnapshot();
-  });
-
-  test('fullWidth', () => {
-    expect(
-      shallowToJson(
-        shallow(
-          <Buttons fullWidth>
-            <Button>Content</Button>
-          </Buttons>,
-        ),
-      ),
-    ).toMatchSnapshot();
-  });
-
-  test('joined', () => {
-    expect(
-      shallowToJson(
-        shallow(
-          <Buttons joined>
-            <Button>Content</Button>
-          </Buttons>,
-        ),
-      ),
-    ).toMatchSnapshot();
-  });
-});

package/src/Old/Button/Buttons.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-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;
-}
-
-/** Parent component to any multiples of Buttons. */
-const Buttons: React.FunctionComponent<Props> = (props: Props) => {
-  const { fullWidth, gap, joined, ...rest } = props;
-  const classes = classnames('Buttons', {
-    'Buttons--joined': joined,
-  });
-
-  return (
-    <Flex
-      {...rest}
-      className={classes}
-      direction={fullWidth ? 'vertical' : 'horizontal'}
-      gap={joined && !fullWidth ? undefined : gap}
-    />
-  );
-};
-
-Buttons.defaultProps = {
-  gap: 'x2',
-};
-
-export default Buttons;

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

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button borderless 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-medium Button--borderless"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;
-
-exports[`Button default template 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-medium"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;
-
-exports[`Button fullWidth 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-medium Button--full-width"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;
-
-exports[`Button level 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-primary Button--size-medium"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;
-
-exports[`Button size 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-small"
-  direction="horizontal"
-  gap="x1"
->
-  Content
-</Flex>
-`;
-
-exports[`Button variant 1`] = `
-<Flex
-  Component="button"
-  alignChildren="middle"
-  className="Button Button--level-secondary Button--size-medium Button--variant-danger"
-  direction="horizontal"
-  gap="x2"
->
-  Content
-</Flex>
-`;

package/src/Old/Button/__snapshots__/Buttons.test.tsx.snap

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Buttons default template 1`] = `
-<Flex
-  className="Buttons"
-  direction="horizontal"
-  gap="x2"
->
-  <Button
-    level="secondary"
-    size="medium"
-  >
-    Content
-  </Button>
-</Flex>
-`;
-
-exports[`Buttons fullWidth 1`] = `
-<Flex
-  className="Buttons"
-  direction="vertical"
-  gap="x2"
->
-  <Button
-    level="secondary"
-    size="medium"
-  >
-    Content
-  </Button>
-</Flex>
-`;
-
-exports[`Buttons joined 1`] = `
-<Flex
-  className="Buttons Buttons--joined"
-  direction="horizontal"
->
-  <Button
-    level="secondary"
-    size="medium"
-  >
-    Content
-  </Button>
-</Flex>
-`;

package/src/Old/ExternalLink/ExternalLink.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import Flex from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import Link, { Props as LinkProps } from '../Link/Link';
-
-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>
-
-        <Flex>
-          <Icon name="OpenInBrowser" />
-        </Flex>
-      </Flex>
-    </Link>
-  );
-};
-
-export default ExternalLink;

package/src/Old/Hamburger/Hamburger.css

@@ -1,55 +0,0 @@
-:root {
-  --Hamburger--bar-height: 0.125rem;
-}
-
-.Hamburger {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.Hamburger::before,
-.Hamburger::after,
-.Hamburger--bar,
-.Hamburger--bar::before {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: var(--Hamburger--bar-height);
-  transform: translateY(-50%);
-  border-radius: var(--Hamburger--bar-height);
-  background-color: currentColor;
-  transition-property: opacity, transform;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.Hamburger::before,
-.Hamburger::after,
-.Hamburger--bar::before {
-  content: '';
-}
-
-.Hamburger::before { transform: translateY(-300%); }
-.Hamburger::after { transform: translateY(200%); }
-
-.Hamburger--bar::before {
-  opacity: 0;
-}
-
-.Hamburger--active::before,
-.Hamburger--active::after {
-  transform: translateY(-50%);
-  opacity: 0;
-}
-
-.Hamburger--active .Hamburger--bar {
-  transform: translateY(-50%) rotate(45deg);
-}
-
-.Hamburger--active .Hamburger--bar::before {
-  transform: translateY(-50%) rotate(-90deg);
-  opacity: 1;
-}

package/src/Old/Hamburger/Hamburger.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './Hamburger.css';
-
-export interface Props extends BaseProps {
-  /** Sets the active state of the icon. */
-  active?: boolean;
-  /** Sets the size of the icon */
-  size?: string;
-}
-
-/**
- * An animating Hamburger icon, ideal for those mobile menus.
- */
-const Hamburger: React.FunctionComponent<Props> = (props: Props) => {
-  const { active, size, ...rest } = props;
-  const classes = classnames('Hamburger', {
-    'Hamburger--active': active,
-  });
-
-  return (
-    <Base {...rest} className={classes} height={size} width={size}>
-      <div className="Hamburger--bar" />
-    </Base>
-  );
-};
-
-Hamburger.defaultProps = {
-  size: '1.5rem',
-};
-
-export default Hamburger;

package/src/Old/Icon/Icon.css

@@ -1,4 +0,0 @@
-.Icon {
-  display: block;
-  fill: currentColor;
-}

package/src/Old/Icon/Icon.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-import { IconMap } from './tsx';
-import type { TypeIconName } from './tsx';
-import './Icon.css';
-
-export type { TypeIconName };
-
-export interface Props extends BaseProps {
-  /** Name of the Icon to display */
-  name: TypeIconName;
-  /** Any CSS unit sizing for the Icon */
-  size?: string;
-}
-
-/** Iconography component that output as crisp SVG icon. */
-const Icon: React.FunctionComponent<Props> = (props: Props) => {
-  const { name, size, ...rest } = props;
-  const IconSVG = IconMap[name];
-
-  return (
-    <Base {...rest} Component="svg" className="Icon" height={size} viewBox="0 0 24 24" width={size}>
-      <IconSVG height="100%" width="100%" />
-    </Base>
-  );
-};
-
-Icon.defaultProps = {
-  size: '1.5rem',
-};
-
-export default Icon;