aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/@next/components/footer.tsx126
-rw-r--r--packages/website/ts/@next/components/layout.tsx3
2 files changed, 55 insertions, 74 deletions
diff --git a/packages/website/ts/@next/components/footer.tsx b/packages/website/ts/@next/components/footer.tsx
index 155cdcb30..4c48f09f3 100644
--- a/packages/website/ts/@next/components/footer.tsx
+++ b/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);
+ }
+`;
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 78c814e5e..b0989224c 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/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;
`;