Refactors footer to use layout system

packages/website/ts/@next/components/footer.tsx

@@ -5,69 +5,18 @@ import styled from 'styled-components';
 import { colors } from 'ts/style/colors';
 
 import { Button } from './button';
-import { Container } from './container';
+import { Section, Wrap, Column } from './layout';
 import { Logo } from './logo';
 
 export interface FooterInterface {
 }
 
-export interface ColInterface {
-    width: string | number;
-}
-
 export interface LinkInterface {
     text: string;
     url: string;
     newWindow?: boolean;
 }
 
-export interface LinkRowInterface {
-    heading: string;
-    links: LinkInterface[];
-}
-
-const StyledFooter = styled.footer`
-    background-color: #181818;
-    margin-top: 3.529411765rem; // 60px
-`;
-
-const Inner = styled.div`
-    display: flex;
-    justify-content: space-between;
-    padding: 2.352941176rem 3.529411765rem; // 40px 60px
-    text-align: left;
-`;
-
-const Links = styled.div`
-    display: flex;
-    justify-content: space-between;
-`;
-
-const Col = styled.div<ColInterface>`
-    width: ${props => props.width};
-`;
-
-const Link = styled.a`
-    color: rgba(255, 255, 255, 0.5);
-    display: block;
-    font-size: 16px;
-    line-height: 20px;
-    transition: color 0.25s ease-in-out;
-    text-decoration: none;
-
-    &:hover {
-        color: rgba(255, 255, 255, 1);
-    }
-`;
-
-const RowHeading = styled.h1`
-    color: ${colors.white};
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 20px;
-    margin-bottom: 1.25em;
-`;
-
 const linkRows = [
     {
         heading: 'Products',
@@ -96,26 +45,57 @@ const linkRows = [
     },
 ];
 
-const LinkRow: React.StatelessComponent<LinkRowInterface> = ({heading, links}) => (
-    <Col width="33%">
-        <RowHeading>{heading}</RowHeading>
-        {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
-    </Col>
-)
-
 export const Footer: React.StatelessComponent<FooterInterface> = ({}) => (
-    <StyledFooter >
-        <Container removePadding={true}>
-            <Inner>
-                <Col width="32%">
-                    <Logo/>
-                </Col>
-                <Col width="46%">
-                    <Links>
-                        {_.map(linkRows, (row, index) => <LinkRow key={index} heading={row.heading} links={row.links} />)}
-                    </Links>
-                </Col>
-            </Inner>
-        </Container>
-    </StyledFooter>
+  <FooterWrap>
+    <Wrap>
+      <Column colWidth="1/2">
+        <Logo />
+      </Column>
+
+      <Column colWidth="1/2" noPadding>
+        <Wrap>
+          {_.map(linkRows, (row, index) => (
+            <Column colWidth="1/3" noPadding>
+              <RowHeading>
+                { row.heading }
+              </RowHeading>
+
+              <ul>
+                {_.map(row.links, (link, index) => (
+                  <li>
+                    <Link href={link.url}>
+                      { link.text }
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </Column>
+          ))}
+        </Wrap>
+      </Column>
+    </Wrap>
+  </FooterWrap>
 );
+
+const FooterWrap = Section.withComponent('footer');
+
+const RowHeading = styled.h3`
+    color: ${colors.white};
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    margin-bottom: 1.25em;
+`;
+
+const Link = styled.a`
+    color: rgba(255, 255, 255, 0.5);
+    display: block;
+    font-size: 16px;
+    line-height: 20px;
+    transition: color 0.25s ease-in-out;
+    text-decoration: none;
+
+    &:hover {
+        color: rgba(255, 255, 255, 1);
+    }
+`;

packages/website/ts/@next/components/layout.tsx

@@ -25,6 +25,7 @@ interface WrapProps {
 
 interface ColumnProps {
   colWidth?: '1/4' | '1/3' | '1/2' | '2/3',
+  noPadding?: any,
 }
 
 interface GetColWidthArgs {
@@ -82,6 +83,6 @@ export const Wrap = styled.div<WrapProps>`
 
 export const Column = styled.div<ColumnProps>`
   width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
-  padding: 30px;
+  padding: ${props => !props.noPadding && '30px'};
   border: 1px solid yellow;
 `;