@bitrise/bitkit 10.1.0 → 10.2.2

package/package.json

@@ -1,29 +1,16 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.1.0",
+  "version": "10.2.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
-    "build": "yarn build:lib && yarn build:site",
-    "build:docs": "ts-node ./scripts/build-docs",
     "build:icons": "ts-node ./scripts/build-icons.ts",
-    "build:lib": "rm -rf ./lib && yarn build:lib:cjs && yarn build:lib:esn",
-    "build:lib:esn": "tsc -p src -m esnext -t esnext --outDir lib/esn",
-    "build:lib:cjs": "tsc -p src --outDir lib/cjs",
-    "build:prepare": "rm -rf ./dist && mkdir dist && cp site/index.html dist && ln -s index.html dist/404.html",
-    "build:site": "yarn build:prepare && yarn build:docs && yarn tsc:site && yarn build:site:esbuild",
-    "tsc:site": "tsc --noEmit -p site/tsconfig.json",
-    "build:site:esbuild": "esbuild --bundle site/index.tsx --outdir=dist --target=esnext --loader:.woff2=file --loader:.woff=file --minify --sourcemap",
     "commitlint": "commitlint",
-    "lint": "yarn lint:js",
-    "lint:js": "eslint src/**/*.tsx",
+    "lint": "eslint src/**/*.tsx",
     "semantic-release": "semantic-release",
-    "serve": "superstatic ./dist --port 4001 -c superstatic.json",
-    "start": "yarn build:prepare && concurrently \"yarn start:docs\" \"yarn start:esbuild\" \"yarn serve\"",
-    "start:esbuild": "esbuild --bundle site/index.tsx --watch --outdir=dist --target=esnext --loader:.woff2=file --loader:.woff=file",
-    "start:docs": "ts-node ./scripts/build-docs-watch",
+    "start": "yarn storybook",
     "test": "jest ./src",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -33,15 +20,14 @@
     "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.2.1",
+    "@chakra-ui/react": "^2.2.4",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
-    "framer-motion": "^6.3.15",
-    "luxon": "^2.4.0",
+    "framer-motion": "^6.5.1",
+    "luxon": "^2.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0"
@@ -51,13 +37,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.5",
-    "@babel/parser": "^7.18.5",
+    "@babel/core": "^7.18.9",
+    "@babel/parser": "^7.18.9",
     "@bitrise/eslint-plugin": "^2.2.0",
-    "@chakra-ui/cli": "^2.1.0",
+    "@chakra-ui/cli": "^2.1.2",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
-    "@google-cloud/storage": "^5.19.4",
+    "@google-cloud/storage": "^5.20.5",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -71,63 +57,43 @@
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.9",
-    "@svgr/cli": "^6.2.1",
-    "@svgr/core": "^6.2.1",
+    "@svgr/core": "^6.3.0",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
-    "@types/fscreen": "^1.0.1",
-    "@types/jest": "^27.5.1",
-    "@types/lodash.sample": "^4.2.7",
-    "@types/lodash.shuffle": "^4.2.7",
-    "@types/luxon": "^2.3.2",
-    "@types/prismjs": "^1.26.0",
-    "@types/react": "18.0.14",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-router": "^5.1.18",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/jest": "^27.5.2",
+    "@types/luxon": "^2.4.0",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios": "^0.27.2",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
-    "concurrently": "^7.2.2",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "esbuild": "^0.14.47",
-    "eslint": "^8.18.0",
+    "eslint": "^8.20.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^26.6.0",
     "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-prettier": "^4.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.5.13",
+    "eslint-plugin-storybook": "^0.6.1",
     "eslint-plugin-testing-library": "^5.5.1",
-    "fscreen": "^1.2.0",
     "glob": "^8.0.3",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jsdom": "^19.0.0",
-    "lodash.sample": "^4.2.1",
-    "lodash.shuffle": "^4.2.0",
-    "node-watch": "^0.7.3",
     "prettier": "^2.7.1",
-    "prismjs": "^1.28.0",
-    "react": "^18.2.0",
-    "react-docgen": "5.4.2",
-    "react-dom": "^18.2.0",
-    "react-router": "^5.3.1",
-    "react-router-dom": "^5.3.1",
     "recast": "^0.21.1",
     "semantic-release": "^19.0.3",
-    "superstatic": "^8.0.0",
     "ts-jest": "^27.1.5",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0"
@@ -153,7 +119,7 @@
   },
   "resolutions": {
     "**/ast-types": "npm:@gkz/ast-types",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "@types/react": "17.0.40"
   }
 }

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbLink from './BreadcrumbLink';
+
+export default {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  subcomponents: { BreadcrumbLink },
+} as ComponentMeta<typeof Breadcrumb>;
+
+const Template: ComponentStory<typeof Breadcrumb> = (props) => (
+  <Breadcrumb {...props}>
+    <BreadcrumbLink
+      avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+      href="#"
+    >
+      Bitrise #Core
+    </BreadcrumbLink>
+    <BreadcrumbLink avatarName="Bitkit" href="#">
+      bitkit
+    </BreadcrumbLink>
+    <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>
+  </Breadcrumb>
+);
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  hasSeparatorAfterLast: false,
+  hasSeparatorBeforeFirst: false,
+};

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -0,0 +1,25 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const BreadcrumbTheme: SystemStyleObject = {
+  baseStyle: {
+    container: {
+      '> ol': {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    link: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8',
+      '[aria-current]': {
+        color: 'red',
+      },
+    },
+    separator: {
+      display: 'flex',
+    },
+  },
+};
+
+export default BreadcrumbTheme;

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,51 @@
+import { Children } from 'react';
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbProps as ChakraBreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  forwardRef,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
+import Icon, { TypeIconName } from '../Icon/Icon';
+
+export interface BreadcrumbProps extends ChakraBreadcrumbProps {
+  hasSeparatorAfterLast?: boolean;
+  hasSeparatorBeforeFirst?: boolean;
+  separatorIconName?: TypeIconName;
+}
+
+/**
+ * Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
+ */
+const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
+  const { children, hasSeparatorAfterLast, hasSeparatorBeforeFirst, separatorIconName, ...rest } = props;
+  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+
+  const childrenCount = Children.count(children);
+  const items = Children.map(children, (child, index) => {
+    return (
+      <BreadcrumbItem>
+        {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator marginLeft="0" />}
+        {child}
+        {hasSeparatorAfterLast && index === childrenCount - 1 && <BreadcrumbSeparator />}
+      </BreadcrumbItem>
+    );
+  });
+
+  const defaultIconName = isMobile ? 'ChevronLeft' : 'ChevronRight';
+  const properties = {
+    separator: <Icon name={separatorIconName || defaultIconName} color="neutral.70" size="16" />,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumb {...properties} ref={ref}>
+      {items}
+    </ChakraBreadcrumb>
+  );
+});
+
+Breadcrumb.defaultProps = {};
+
+export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -0,0 +1,34 @@
+import {
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
+  forwardRef,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
+import Avatar from '../Avatar/Avatar';
+
+export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
+  avatarName?: string;
+  avatarUrl?: string;
+}
+
+const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
+  const { avatarName, avatarUrl, children, isCurrentPage, ...rest } = props;
+  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+
+  const properties: ChakraBreadcrumbLinkProps = {
+    color: isCurrentPage ? 'neutral.40' : 'inherit',
+    isCurrentPage,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
+      {!isMobile && (avatarName || avatarUrl) && (
+        <Avatar name={avatarName || children?.toString()} src={avatarUrl} borderRadius="4" />
+      )}
+      {children}
+    </ChakraBreadcrumbLink>
+  );
+});
+
+export default BreadcrumbLink;

package/src/Components/Tabs/Tab.tsx

@@ -1,6 +1,4 @@
 import {
-  Badge as ChakraBadge,
-  BadgeProps as ChakraBadgeProps,
   Button,
   Tab as ChakraTab,
   TabProps as ChakraTabProps,
@@ -8,28 +6,8 @@ import {
   useMultiStyleConfig,
   useTab,
 } from '@chakra-ui/react';
-import Icon from '../../Old/Icon/Icon';
-import { TypeIconName } from '../../Old/Icon/tsx';
-
-// TODO: separated component
-interface BadgeProps extends ChakraBadgeProps {
-  backgroundColor?: ChakraBadgeProps['backgroundColor'];
-  children?: number | string;
-  color?: ChakraBadgeProps['color'];
-}
-
-const Badge = (props: BadgeProps) => {
-  const properties: ChakraBadgeProps = {
-    ...props,
-    borderRadius: '4',
-    fontSize: '1',
-    lineHeight: '1',
-    paddingY: '3px',
-    paddingX: '8',
-    textTransform: 'uppercase',
-  };
-  return <ChakraBadge {...properties} />;
-};
+import Badge, { BadgeProps } from '../Badge/Badge';
+import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface TabProps extends ChakraTabProps {
   badge?: BadgeProps;

package/src/Old/DatePicker/DatePicker.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { DateTime } from 'luxon';
 import { ReferenceChildrenProps } from 'react-popper';
 import { useMediaQuery, useSyncedStateAndProps } from '../hooks';
-import Button from '../Button/Button';
-import Buttons from '../Button/Buttons';
+import Button from '../../Components/Button/Button';
+import ButtonGroup from '../../Components/ButtonGroup/ButtonGroup';
 import { Props as FlexProps } from '../Flex/Flex';
 import Placement from '../Placement/Placement';
 import PlacementArea from '../Placement/PlacementArea';
@@ -175,15 +175,15 @@ const DatePicker: React.FunctionComponent<Props> = (props: Props) => {
               )}
             </PlacementArea>
 
-            <Buttons alignChildren="end" margin="x2" paddingHorizontal="x8">
-              <Button level="secondary" onClick={handleClose} size="small">
+            <ButtonGroup alignItems="flex-end" marginY="8" paddingX="32">
+              <Button variant="secondary" onClick={handleClose} size="small">
                 Cancel
               </Button>
 
-              <Button level="primary" onClick={handleApply} size="small">
+              <Button onClick={handleApply} size="small">
                 Apply
               </Button>
-            </Buttons>
+            </ButtonGroup>
           </PlacementArea>
         )}
       </Placement>

package/src/Old/DatePicker/DatePickerMonth.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { DateTime, Info } from 'luxon';
 import Base, { Props as BaseProps } from '../Base/Base';
 import Flex from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import Link from '../Link/Link';
-import Text from '../Text/Text';
+import Icon from '../../Components/Icon/Icon';
+import Link from '../../Components/Link/Link';
+import Text from '../../Components/Text/Text';
 import DatePickerGrid from './DatePickerGrid';
 import DatePickerDay from './DatePickerDay';
 
@@ -40,18 +40,18 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
       <Flex alignChildren="middle" direction="horizontal" gap="x4" margin="x4" paddingHorizontal="x12">
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link onClick={onPreviousMonth}>
+          <Link as="button" onClick={onPreviousMonth}>
             <Icon name="ChevronLeft" />
           </Link>
         </Flex>
 
         <Flex grow>
-          <Text align="middle">{viewDate.toFormat('MMMM yyyy')}</Text>
+          <Text align="center">{viewDate.toFormat('MMMM yyyy')}</Text>
         </Flex>
 
         <Flex>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link onClick={onNextMonth}>
+          <Link as="button" onClick={onNextMonth}>
             <Icon name="ChevronRight" />
           </Link>
         </Flex>
@@ -59,7 +59,7 @@ const DatePickerMonth: React.FunctionComponent<Props> = (props: Props) => {
 
       <DatePickerGrid margin="x1">
         {daysOfTheWeek.map((day) => (
-          <Text align="middle" key={day} paddingVertical="x4" size="2" textColor="neutral.70" uppercase>
+          <Text textAlign="center" key={day} paddingY="16" size="2" color="neutral.70" textTransform="uppercase">
             {day}
           </Text>
         ))}

package/src/Old/Dropdown/Dropdown.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Placement from '../Placement/Placement';
 import PlacementManager from '../Placement/PlacementManager';
 import PlacementReference from '../Placement/PlacementReference';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 import DropdownButton, { Props as DropdownButtonProps } from './DropdownButton';
 import DropdownMenu from './DropdownMenu';
 import DropdownMenuItem from './DropdownMenuItem';
@@ -58,16 +58,14 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <PlacementManager>
       <PlacementReference>
-        {({ ref }) => (
+        {() => (
           <DropdownButton
             {...rest}
-            alignChildrenHorizontal="start"
-            innerRef={ref}
             onClick={() => {
               setVisible(!visible);
             }}
           >
-            <Text ellipsis>{children}</Text>
+            <Text hasEllipsis>{children}</Text>
           </DropdownButton>
         )}
       </PlacementReference>

package/src/Old/Dropdown/DropdownButton.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import Button, { Props as ButtonProps } from '../Button/Button';
-import Flex from '../Flex/Flex';
-import Icon from '../Icon/Icon';
+import Button, { ButtonProps } from '../../Components/Button/Button';
 
 export type Props = Omit<ButtonProps, 'level'>;
 
@@ -10,19 +8,7 @@ export type Props = Omit<ButtonProps, 'level'>;
  * standard prop configuration for a Dropdown.
  */
 const DropdownButton: React.FunctionComponent<Props> = (props: Props) => {
-  const { children } = props;
-
-  return (
-    <Button type="button" {...props} alignChildrenHorizontal="start" fullWidth gap="x4" level="secondary">
-      <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2" grow shrink>
-        {children}
-      </Flex>
-
-      <Flex>
-        <Icon name="ChevronDown" />
-      </Flex>
-    </Button>
-  );
+  return <Button width="100%" variant="secondary" rightIconName="ChevronDown" {...props} />;
 };
 
 export default DropdownButton;

package/src/Old/Dropdown/DropdownMenuItem.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Icon from '../Icon/Icon';
-import { TypeIconName } from '../Icon/tsx';
+import Icon, { TypeIconName } from '../../Components/Icon/Icon';
 import Visibility from '../Visibility/Visibility';
 
 export interface Props extends FlexProps {

package/src/Old/Dropdown/DropdownMenuItemGroup.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
-import Text from '../Text/Text';
+import Text from '../../Components/Text/Text';
 
 export interface Props extends FlexProps {
   text: string;
@@ -9,7 +9,7 @@ export interface Props extends FlexProps {
 
 const DropdownMenuItemGroup: React.FunctionComponent<Props> = ({ text, children, className, ...rest }: Props) => (
   <Flex className={classnames('DropdownMenu__group', className)} {...rest}>
-    <Text className="DropdownMenu__group-text" size="2" textColor="neutral.50">
+    <Text className="DropdownMenu__group-text" size="2" color="neutral.50">
       {text}
     </Text>
     {children}

package/src/Old/Input/InputLabel.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react';
-import Text, { Props as TextProps } from '../Text/Text';
+import Text, { TextProps } from '../../Components/Text/Text';
 
-export type Props = TextProps;
+export type Props = {
+  htmlFor?: string | undefined;
+} & TextProps;
 
 /**
  * Provides specific styling for a label that accompanies an
  * input.
  */
 const InputLabel: React.FunctionComponent<Props> = (props: Props) => {
-  return <Text {...props} Component="label" margin="x1" size="3" textColor="purple.10" weight="bold" />;
+  return <Text {...props} as="label" marginY="4" size="3" color="purple.10" fontWeight="bold" />;
 };
 
 export default InputLabel;

package/src/Old/Notification/Notification.tsx

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

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

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

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 '../Icon/Icon';
-import Link from '../Link/Link';
+import Icon from '../../Components/Icon/Icon';
+import Link from '../../Components/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 clickable onClick={onRemove}>
-            <Icon name="CloseSmall" size="1.5rem" />
+          <Link as="button" onClick={onRemove}>
+            <Icon name="CloseSmall" />
           </Link>
         </Flex>
       )}

package/src/Old/Status/Status500.tsx

@@ -1,8 +1,8 @@
 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 '../Text/Text';
+import Image from '../../Components/Image/Image';
+import Text from '../../Components/Text/Text';
 
 export type Props = FlexProps;
 
@@ -20,19 +20,19 @@ const Status500: React.FunctionComponent<Props> = (props: Props) => {
         direction={match('65rem') ? 'horizontal' : 'vertical'}
         gap={match('65rem') ? 'x8' : 'x4'}
       >
-        <Text align="middle" size="7" weight="bold">
+        <Text align="center" size="7" fontWeight="bold">
           500
         </Text>
-        <Text align="middle" size="2" uppercase weight="bold">
+        <Text align="center" size="2" textTransform="uppercase" fontWeight="bold">
           Something went wrong
         </Text>
       </Flex>
 
-      <Text align="middle" letterSpacing="x2" margin="x5" size="4">
+      <Text align="center" letterSpacing="8" marginY="20" size="4">
         Everything is under control, we will be back soon. Until then keep refreshing your browser.
       </Text>
 
-      <Image margin="x16" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
+      <Image marginY="64" src="https://bitrise-bitkit.s3.us-east-2.amazonaws.com/assets/Status500.svg" />
     </Flex>
   );
 };