@bitrise/bitkit 10.3.0-alpha-cleanup.2 → 10.4.0

package/src/Old/Dropdown/DropdownButton.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Button, { ButtonProps } from '../../Components/Button/Button';
-
-export type Props = Omit<ButtonProps, 'level'>;
-
-/**
- * A Button under the hood, but set up with a
- * standard prop configuration for a Dropdown.
- */
-const DropdownButton: React.FunctionComponent<Props> = (props: Props) => {
-  return <Button width="100%" variant="secondary" rightIconName="ChevronDown" {...props} />;
-};
-
-export default DropdownButton;

package/src/Old/Dropdown/DropdownMenus.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import PlacementArea, { Props as PlacementAreaProps } from '../Placement/PlacementArea';
-
-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" />;
-};
-
-export default DropdownMenus;

package/src/Old/Image/Image.css

@@ -1,4 +0,0 @@
-.Image {
-  display: block;
-  max-width: 100%;
-}

package/src/Old/Image/Image.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './Image.css';
-
-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" />;
-};
-
-export default Image;

package/src/Old/List/List.css

@@ -1,3 +0,0 @@
-.List {
-  padding-left: var(--size--x4);
-}

package/src/Old/List/List.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './List.css';
-
-export type Props = BaseProps;
-
-/**
- * Standard unordered list component.
- */
-const List: React.FunctionComponent<Props> = (props: Props) => {
-  return <Base {...props} Component="ul" className="List" />;
-};
-
-export default List;

package/src/Old/List/ListItem.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import Base, { Props as BaseProps } from '../Base/Base';
-
-export type Props = BaseProps;
-
-/**
- * Standard list item component.
- */
-const ListItem: React.FunctionComponent<Props> = (props: Props) => {
-  return <Base {...props} Component="li" className="List__item" />;
-};
-
-export default ListItem;

package/src/Old/Portal/Portal.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { createPortal } from 'react-dom';
-
-export interface Props {
-  children: React.ReactNode;
-  element: Element;
-}
-
-const Portal: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, element } = props;
-
-  return createPortal(children, element);
-};
-
-export default Portal;

package/src/Old/RadioButton/RadioButton.css

@@ -1,46 +0,0 @@
-:root {
-  --Checkbox--size: var(--size--x6);
-}
-
-.RadioButton__input {
-  position: absolute;
-  opacity: 0;
-  z-index: -1;
-}
-
-.RadioButton__indicator {
-  width: var(--Checkbox--size);
-  height: var(--Checkbox--size);
-  border: 0.0625rem solid var(--color-gray--3);
-  border-radius: 50%;
-  box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--color-white);
-  cursor: pointer;
-  transition-property: border-color, box-shadow, background-color, color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.RadioButton__circle {
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  background-color: transparent;
-  transition-property: background-color;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.RadioButton__input:disabled + .RadioButton__indicator {
-  background-color: var(--color-gray--2);
-  cursor: default;
-}
-
-.RadioButton__input:focus + .RadioButton__indicator {
-  border-color: var(--color-grape--3);
-  box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
-}
-
-.RadioButton__input:checked + .RadioButton__indicator .RadioButton__circle {
-  background-color: var(--color-eggplant);
-}

package/src/Old/RadioButton/RadioButton.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import Flex from '../Flex/Flex';
-import './RadioButton.css';
-
-export type Props = React.InputHTMLAttributes<HTMLInputElement>;
-
-/**
- * Run-of-the-mill RadioButton component.
- */
-const RadioButton: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, ...rest } = props;
-
-  return (
-    <Flex Component="label" alignChildrenVertical="middle" className="RadioButton" direction="horizontal" gap="x2">
-      <Flex>
-        <input {...rest} className="RadioButton__input" type="radio" />
-        <Flex alignChildren="middle" className="RadioButton__indicator" direction="horizontal">
-          <span className="RadioButton__circle" />
-        </Flex>
-      </Flex>
-
-      {children && <Flex textColor="purple.10">{children}</Flex>}
-    </Flex>
-  );
-};
-
-export default RadioButton;

package/src/Old/Ribbon/Ribbon.css

@@ -1,34 +0,0 @@
-.Ribbon {
-  border: solid transparent;
-  border-width: 0.0625rem 0;
-}
-
-.Ribbon--type-alert {
-  border-color: var(--color-red--3);
-  background-color: var(--color-red--1);
-  color: var(--color-red--4);
-}
-
-.Ribbon--type-inform {
-  border-color: var(--color-blue--2);
-  background-color: var(--color-blue--1);
-  color: var(--color-blue--4);
-}
-
-.Ribbon--type-progress {
-  border-color: var(--color-grape--2);
-  background-color: var(--color-grape--1);
-  color: var(--color-eggplant);
-}
-
-.Ribbon--type-success {
-  border-color: var(--color-green--2);
-  background-color: var(--color-green--1);
-  color: var(--color-green--5);
-}
-
-.Ribbon--type-warning {
-  border-color: var(--color-yellow--3);
-  background-color: var(--color-yellow--1);
-  color: var(--color-yellow--5);
-}

package/src/Old/Ribbon/Ribbon.tsx

@@ -1,50 +0,0 @@
-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 './Ribbon.css';
-import Base from '../Base/Base';
-
-type TypeRibbonType = 'alert' | 'inform' | 'progress' | 'success' | 'warning';
-
-export interface Props extends FlexProps {
-  /**
-   * A callback to remove the ribbon, that when provided will
-   * render a clickable cross, that when clicked will call the given
-   * function.
-   */
-  onRemove?: (e: React.SyntheticEvent) => void;
-  /**
-   * The type of the ribbon that affects the styling.
-   */
-  type: TypeRibbonType;
-}
-
-/**
- * Ribbon component used to inform the user of something system wide important message.
- */
-const Ribbon: React.FunctionComponent<Props> = (props: Props) => {
-  const { children, type, onRemove, ...rest } = props;
-
-  const classes = classnames('Ribbon', `Ribbon--type-${type}`);
-
-  return (
-    <Flex {...rest} className={classes} direction="horizontal" gap="x2" paddingHorizontal="x6" paddingVertical="x4">
-      {onRemove && <Base width="1.5rem" />}
-      <Flex grow initial="none">
-        {children}
-      </Flex>
-      {onRemove && (
-        <Flex>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link as="button" onClick={onRemove}>
-            <Icon name="CloseSmall" />
-          </Link>
-        </Flex>
-      )}
-    </Flex>
-  );
-};
-
-export default Ribbon;

package/src/Old/Status/Status404.tsx

@@ -1,43 +0,0 @@
-import * as React from 'react';
-import { useMediaQuery } from '../hooks';
-import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Image from '../Image/Image';
-import Text from '../../Components/Text/Text';
-
-export type Props = FlexProps;
-
-/**
- * A composite component used as a placeholder page for when there
- * is a 404 page cannot be found error.
- */
-const Status404: React.FunctionComponent<Props> = (props: Props) => {
-  const match = useMediaQuery(['65rem']);
-
-  return (
-    <Flex {...props}>
-      <Flex
-        alignChildren="middle"
-        direction={match('65rem') ? 'horizontal' : 'vertical'}
-        gap={match('65rem') ? 'x8' : 'x4'}
-        paddingHorizontal="x6"
-      >
-        <Text align="center" size="7" fontWeight="bold">
-          404
-        </Text>
-        <Text align="center" size="6" fontWeight="bold">
-          The coordinates you are looking for do not exist
-        </Text>
-      </Flex>
-
-      <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"
-        />
-      </Flex>
-    </Flex>
-  );
-};
-
-export default Status404;