Type fixes

3 files changed, 8 insertions, 6 deletions

diff --git a/packages/website/ts/@next/components/icon.tsx b/packages/website/ts/@next/components/icon.tsx
index 04479e80a..d9632a3c7 100644
--- a/packages/website/ts/@next/components/icon.tsx
+++ b/packages/website/ts/@next/components/icon.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import Loadable from 'react-loadable';
 import styled from 'styled-components';
+
+import {Paragraph} from 'ts/@next/components/text';
 import {getCSSPadding, PaddingInterface} from 'ts/@next/constants/utilities';
 
 interface IconProps extends PaddingInterface {
-    name: string;
+    name?: string;
     component?: React.ReactNode;
     size?: 'small' | 'medium' | 'large' | 'hero' | number;
 }
@@ -13,7 +15,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
     if (props.name && !props.component) {
         const IconSVG = Loadable({
             loader: async () => import(/* webpackChunkName: "icon" */`ts/@next/icons/illustrations/${props.name}.svg`),
-            loading: () => 'Loading',
+            loading: () => <Paragraph>Loading</Paragraph>,
         });
 
         return (
@@ -34,7 +36,7 @@ export const Icon: React.FunctionComponent<IconProps> = (props: IconProps) => {
     return null;
 };
 
-export const InlineIconWrap = styled.div<IconProps>`
+export const InlineIconWrap = styled.div<PaddingInterface>`
     margin: ${props => getCSSPadding(props.margin)};
     display: flex;
     align-items: center;
@@ -46,7 +48,7 @@ export const InlineIconWrap = styled.div<IconProps>`
 `;
 
 const _getSize = (size: string | number = 'small'): string => {
-    if (isNaN(size)) {
+    if (typeof size === 'string') {
         return `var(--${size}Icon)`;
     }
 
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 7b89e7420..e68648192 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -45,7 +45,7 @@ export interface ColumnProps {
     maxWidth?: string;
 }
 
-export const Section = (props: SectionProps) => {
+export const Section: React.FunctionComponent<SectionProps> = (props: SectionProps) => {
     return (
         <SectionBase {...props}>
             <Wrap {...props}>
diff --git a/packages/website/ts/@next/components/slider/slider.tsx b/packages/website/ts/@next/components/slider/slider.tsx
index 111d03579..10bbbf609 100644
--- a/packages/website/ts/@next/components/slider/slider.tsx
+++ b/packages/website/ts/@next/components/slider/slider.tsx
@@ -30,7 +30,7 @@ export const Slide: React.StatelessComponent<SlideProps> = (props: SlideProps) =
     return (
         <StyledSlide>
             <SlideHead>
-                <Icon name={icon} size="large" margin="auto" />
+                <Icon name={icon} size="large" />
             </SlideHead>
             <SlideContent>
                 <Heading asElement="h4" size="small" marginBottom="15px">{heading}</Heading>