console: migrate AlertBox component to typescript (#4721)

console/src/components/UIKit/atoms/AlertBox/AlertBox.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-import {
-  flexbox,
-  color,
-  border,
-  typography,
-  layout,
-  space,
-  shadow,
-} from 'styled-system';
-
-export const StyledAlertBox = styled.div`
-  ${flexbox};
-  ${color}
-  ${border}
-  ${typography}
-  ${layout}
-  ${space}
-  ${shadow}
-
-  /* Alert type text */
-  span {
-    text-transform: capitalize;
-  }
-`;

console/src/components/UIKit/atoms/AlertBox/AlertBox.ts

@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+import {
+  flexbox,
+  color,
+  border,
+  typography,
+  layout,
+  space,
+  shadow,
+  FlexboxProps,
+  ColorProps,
+  BorderProps,
+  TypographyProps,
+  LayoutProps,
+  SpaceProps,
+  ShadowProps,
+} from 'styled-system';
+
+import { BoxProps, Box } from '../Box';
+
+interface StyledAlertBoxOwnProps
+  extends FlexboxProps,
+    ColorProps,
+    BorderProps,
+    TypographyProps,
+    LayoutProps,
+    SpaceProps,
+    ShadowProps {}
+
+export interface StyledAlertBoxProps extends StyledAlertBoxOwnProps, BoxProps {}
+
+export const StyledAlertBox = styled(Box)<StyledAlertBoxProps>`
+  ${flexbox};
+  ${color}
+  ${border}
+  ${typography}
+  ${layout}
+  ${space}
+  ${shadow}
+
+  /* Alert type text */
+  span {
+    text-transform: capitalize;
+  }
+`;

console/src/components/UIKit/atoms/AlertBox/index.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 
-import { theme } from '../../theme';
-import { Icon } from '../Icon';
-import { StyledAlertBox } from './AlertBox';
+import { theme, Theme } from '../../theme';
+import { Icon, IconProps } from '../Icon';
+import { StyledAlertBox, StyledAlertBoxProps } from './AlertBox';
 import { Text } from '../Typography';
 
 const alertBoxWidth = 866;
 
-export const AlertBox = props => {
+export interface AlertBoxProps
+  extends IconProps,
+    Omit<StyledAlertBoxProps, 'size'> {
+  type: keyof Theme['alertBox'];
+}
+
+export const AlertBox: React.FC<AlertBoxProps> = props => {
   const { children, type } = props;
 
   const backgroundColorValue = theme.alertBox[type]

console/src/components/UIKit/atoms/Icon/index.tsx

@@ -112,8 +112,8 @@ const iconReferenceMap = {
 };
 
 export type IconProps = {
-  pointer: boolean;
-  size: number;
+  pointer?: boolean;
+  size?: number;
   type: keyof Theme['icon'];
 };
 

console/src/components/UIKit/atoms/Typography/index.tsx

@@ -16,14 +16,17 @@ Heading.defaultProps = {
  *  fontSize: 'explain'
  *  fontWeight: 'bold'
  */
+
 export type TextProps = {
-  type: keyof Theme['lineHeights'];
-  fontWeight: keyof Theme['fontWeights'];
-  fontSize: keyof Theme['fontSizes'];
-  mb: keyof Theme['space'];
-  mt: keyof Theme['space'];
-  mr: keyof Theme['space'];
-  ml: keyof Theme['space'];
+  type?: keyof Theme['lineHeights'];
+  fontWeight?: keyof Theme['fontWeights'];
+  fontSize?: keyof Theme['fontSizes'];
+  mb?: keyof Theme['space'];
+  mt?: keyof Theme['space'];
+  mr?: keyof Theme['space'];
+  ml?: keyof Theme['space'];
+  pl?: keyof Theme['space'];
+  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
 };
 
 export const Text: React.FC<TextProps> = props => {
@@ -64,6 +67,9 @@ Text.defaultProps = {
   mt: 'zero',
   mr: 'zero',
   ml: 'zero',
+  pl: 'zero',
+  fontWeight: 'normal',
+  fontSize: 'p',
 };
 
 type TextLinkProps = {