aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/website/ts/@next/components/icon.tsx10
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx2
-rw-r--r--packages/website/ts/@next/components/slider/slider.tsx2
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>