Adds more types to newLayout

1 files changed, 17 insertions, 6 deletions

diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index 7af2fb9f2..fc2bae46b 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -11,6 +11,15 @@ interface WrapProps extends FlexProps {
     isTextCentered?: boolean;
 }
 
+interface WrapGridProps {
+    isWrapped?: boolean;
+    isCentered?: boolean;
+}
+
+export interface WrapStickyProps {
+    offsetTop?: string;
+}
+
 interface SectionProps extends WrapProps {
     isPadded?: boolean;
     isFullWidth?: boolean;
@@ -21,6 +30,8 @@ interface SectionProps extends WrapProps {
 }
 
 interface ColumnProps {
+    width?: string;
+    maxWidth?: string;
     padding?: string;
 }
 
@@ -34,7 +45,7 @@ export const Section = (props: SectionProps) => {
     );
 };
 
-export const Column = styled.div`
+export const Column = styled.div<ColumnProps>`
     width: ${props => props.width};
     max-width: ${props => props.maxWidth};
     padding: ${props => props.padding};
@@ -45,7 +56,7 @@ export const Column = styled.div`
     }
 `;
 
-export const FlexWrap = styled.div`
+export const FlexWrap = styled.div<SectionProps>`
     padding: ${props => props.padding};
 
     @media (min-width: ${props => props.flexBreakpoint || '768px'}) {
@@ -54,12 +65,12 @@ export const FlexWrap = styled.div`
     }
 `;
 
-export const WrapSticky = styled.div`
+export const WrapSticky = styled.div<WrapStickyProps>`
     position: sticky;
     top: ${props => props.offsetTop || '60px'};
 `;
 
-const SectionBase = styled.section`
+const SectionBase = styled.section<SectionProps>`
     margin: 0 auto;
     padding: ${props => props.isPadded && '120px 0'};
     background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
@@ -69,14 +80,14 @@ const SectionBase = styled.section`
     }
 `;
 
-const Wrap = styled(FlexWrap)`
+const Wrap = styled(FlexWrap)<WrapProps>`
     width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
     max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
     margin: 0 auto;
     text-align: ${props => props.isTextCentered && 'center'};
 `;
 
-export const WrapGrid = styled(Wrap)`
+export const WrapGrid = styled(Wrap)<WrapGridProps>`
     display: flex;
     flex-wrap: ${props => props.isWrapped && `wrap`};
     justify-content: ${props => props.isCentered ? `center` : 'space-between'};