diff options
| -rw-r--r-- | packages/website/ts/@next/components/footer.tsx | 126 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 3 |
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; `; |