feat(design): footer component

gatsby-config.js

@@ -3,6 +3,10 @@ module.exports = {
     title: `česko.digital`,
     description: `Skrz jedničky a nuly měníme Česko k lepšímu`,
     author: `@ceskodigital`,
+    ecomail: {
+      listID: '2',
+      accID: '2bb287d15897fe2f9d89c882af9a3a8b',
+    },
   },
   plugins: [
     // Docs: https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/

package.json

@@ -35,9 +35,11 @@
     "gatsby-plugin-typescript": "^2.4.13",
     "gatsby-source-filesystem": "^2.3.18",
     "gatsby-transformer-sharp": "^2.5.10",
+    "polished": "^4.0.3",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",
+    "rebass": "^4.0.7",
     "styled-components": "^5.2.1"
   },
   "devDependencies": {

src/components/layout/footer/index.tsx

@@ -1,14 +1,103 @@
+import { graphql, useStaticQuery } from 'gatsby'
 import React, { useContext } from 'react'
-import Section from '../section'
 import { ThemeContext } from 'styled-components'
+import { Button } from '../../buttons'
+import { Link } from '../../links'
+import Section from '../section'
 import * as S from './styles'
 
 const Footer: React.FC = () => {
   const theme = useContext(ThemeContext)
+  const { listID, accID } = useStaticQuery<{
+    site: { siteMetadata: { ecomail: { listID: string; accID: string } } }
+  }>(graphql`
+    query EcomailQuery {
+      site {
+        siteMetadata {
+          ecomail {
+            listID
+            accID
+          }
+        }
+      }
+    }
+  `).site.siteMetadata.ecomail
+
+  const t = {
+    headings: {
+      ceskoDigital: 'Česko.Digital',
+      online: 'Online',
+      newsletter: 'Newsletter',
+    },
+    info: {
+      projects: ['Projekty', '#'],
+      blog: ['Blog', '#'],
+      loginToSlack: ['Přihlásit se do Slacku', '#'],
+      submitProject: ['Zadat projekt', '#'],
+      contribute: ['Přispět', '#'],
+    },
+    social: {
+      facebook: ['Facebook', '#'],
+      twitter: ['Twitter', '#'],
+      github: ['GitHub', '#'],
+      slack: ['Slack', '#'],
+    },
+    newsletter: {
+      note:
+        'Chcete vědět, na čem pracujeme? Jednou za měsíc shrneme, co se v komunitě událo a co chystáme.',
+      inputPlaceholder: 'Zadejte e-mail',
+      subscribe: 'Odebírat',
+    },
+    footnote: 'cesko.digital © 2020, Tento web používa cookies ¯_(ツ)_/¯',
+  }
 
   return (
     <Section as={'footer'} backgroundColor={theme.colors.darkGrey}>
-      <S.Content verticalPadding={40}>Footer</S.Content>
+      <S.Outer>
+        <S.Container>
+          <S.Info>
+            <S.InfoBlock>
+              <S.Heading>{t.headings.ceskoDigital}</S.Heading>
+              <S.Links>
+                {Object.values(t.info).map(([name, url], i) => (
+                  <div key={i}>
+                    <Link to={url}>{name}</Link>
+                  </div>
+                ))}
+              </S.Links>
+            </S.InfoBlock>
+            <S.InfoBlock>
+              <S.Heading>{t.headings.online}</S.Heading>
+              <S.Links>
+                {Object.values(t.social).map(([name, url], i) => (
+                  <div key={i}>
+                    <Link to={url} key={i} target="_blank">
+                      {name}
+                    </Link>
+                  </div>
+                ))}
+              </S.Links>
+            </S.InfoBlock>
+          </S.Info>
+          <S.Newsletter>
+            <S.Heading>{t.headings.newsletter}</S.Heading>
+            <S.NewsletterInfo>{t.newsletter.note}</S.NewsletterInfo>
+            <S.NewsletterForm
+              action={`https://ceskodigital.ecomailapp.cz/public/subscribe/${listID}/${accID}`}
+              method="POST"
+            >
+              <S.NewsletterInput
+                name="email"
+                placeholder={t.newsletter.inputPlaceholder}
+              />
+              <S.NewsletterButton>
+                <Button>{t.newsletter.subscribe}</Button>
+              </S.NewsletterButton>
+            </S.NewsletterForm>
+          </S.Newsletter>
+          <S.Note>{t.footnote}</S.Note>
+        </S.Container>
+      </S.Outer>
     </Section>
   )
 }

src/components/layout/footer/styles.ts

@@ -1,6 +1,152 @@
+import rgba from 'polished/lib/color/rgba'
 import styled from 'styled-components'
-import SectionContent from '../section-content'
 
-export const Content = styled(SectionContent)`
-  color: ${({ theme }) => theme.colors.white};
+// based on https://github.com/limitlessloop/flex-gap-polyfill
+const flexGapPolyfill = (gap: number): string => `
+  --fgp-gap-container: calc(var(--fgp-gap-parent, 0px) - ${gap}px) !important;
+  --fgp-gap: var(--fgp-gap-container);
+  margin-top: var(--fgp-gap);
+  margin-right: var(--fgp-gap);
+  > * {
+    --fgp-gap-parent: ${gap}px !important;
+    --fgp-gap-item: ${gap}px !important;
+    --fgp-gap: var(--fgp-gap-item) !important;
+    margin-top: var(--fgp-gap);
+    margin-right: var(--fgp-gap);
+  }
+`
+
+export const Outer = styled.div`
+  margin: 0 auto;
+  padding: ${(props) => props.theme.space.xl}px
+    ${(props) => props.theme.space.md}px ${(props) => props.theme.space.lg}px
+    ${(props) => props.theme.space.md}px;
+  max-width: ${(props) => props.theme.contentSize}px;
+  box-sizing: content-box;
+`
+
+export const Container = styled.section`
+  margin: ${(props) => props.theme.space.base}px auto
+    ${(props) => props.theme.space.base}px 0;
+  max-width: calc(100% - 76px);
+  color: ${(props) => props.theme.colors.white};
+
+  background-image: url('assets/czechia-map-arrows.png');
+  background-repeat: no-repeat;
+  background-position: left ${(props) => props.theme.space.md}px bottom -${(props) => props.theme.space.lg}px;
+  background-size: 608px 336px;
+
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+    background-image: url('assets/[email protected]');
+  }
+
+  display: grid;
+  grid-gap: ${(props) => props.theme.space.lg}px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: minmax(460px, auto) auto;
+  grid-template-areas:
+    'info newsletter'
+    'info note';
+
+  @media (max-width: ${(props) => props.theme.breakpoints.lg}) {
+    padding: ${(props) => props.theme.space.lg}px;
+    max-width: 100%;
+
+    background-position: bottom ${(props) => props.theme.space.xl}px right -${(props) => props.theme.space.xl}px;
+
+    grid-template-rows: auto;
+    grid-template-columns: auto;
+    grid-template-areas: 'info' 'newsletter' 'note';
+  }
+`
+
+export const Info = styled.section`
+  grid-area: info;
+
+  display: flex;
+  ${(props) => flexGapPolyfill(props.theme.space.lg)}
+  @media (max-width: ${(props) => props.theme.breakpoints.sm}) {
+    flex-direction: column;
+    ${(props) => flexGapPolyfill(props.theme.space.md)}
+  }
+`
+
+export const InfoBlock = styled.div`
+  flex: 1;
+`
+
+export const Newsletter = styled.section`
+  grid-area: newsletter;
+
+  background-image: url('assets/footer-mail.svg');
+  background-position: top right;
+  background-repeat: no-repeat;
+
+  @media (min-width: ${(props) =>
+      props.theme.breakpoints.md}) and (max-width: ${(props) =>
+      props.theme.breakpoints.lg}) {
+    background-image: none;
+  }
+`
+
+export const NewsletterInfo = styled.strong`
+  max-width: 480px;
+  display: inline-block;
+  font-size: ${(props) => props.theme.fontSizes.xl}px;
+  line-height: ${(props) => props.theme.lineHeights.heading};
+  margin-bottom: ${(props) => props.theme.space.lg}px;
+`
+
+export const NewsletterForm = styled.form`
+  display: flex;
+`
+
+export const NewsletterInput = styled.input`
+  width: 100%;
+  max-width: 316px;
+  background: ${(props) => rgba(props.theme.colors.white, 0.15)};
+  border: 0;
+  border-radius: ${(props) => props.theme.borderRadius.base}px;
+  padding: ${(props) => props.theme.space.base * 1.5}px
+    ${(props) => props.theme.space.base * 2.5}px;
+  color: ${(props) => rgba(props.theme.colors.white, 0.8)};
+  font-size: ${(props) => props.theme.fontSizes.base}px;
+  outline: 0;
+  font-family: ${(props) => props.theme.fonts.body};
+  line-height: ${(props) => props.theme.lineHeights.body};
+
+  ::placeholder,
+  ::-webkit-input-placeholder {
+    color: ${(props) => rgba(props.theme.colors.white, 0.8)};
+  }
+  :-ms-input-placeholder {
+    color: ${(props) => rgba(props.theme.colors.white, 0.8)};
+  }
+`
+
+export const NewsletterButton = styled.div`
+  margin-left: ${(props) => props.theme.space.md * 1.5}px;
+`
+
+export const Heading = styled.h4`
+  font-size: ${(props) => props.theme.fontSizes.md}px;
+  line-height: ${(props) => props.theme.lineHeights.heading};
+  margin-bottom: ${(props) => props.theme.space.lg}px;
+`
+
+export const Note = styled.section`
+  font-size: ${(props) => props.theme.fontSizes.small}px;
+  grid-area: note;
+  opacity: 0.5;
+`
+
+export const Links = styled.div`
+  display: flex;
+  flex-direction: column;
+  ${(props) => flexGapPolyfill(props.theme.space.md)}
+
+  > div > * {
+    flex: 0;
+    color: ${(props) => props.theme.colors.white};
+  }
 `

src/theme/default/index.ts

@@ -34,7 +34,7 @@ export const defaultTheme: DefaultTheme = {
 
     yellow: '#FFF6A3',
   },
-  contentSize: 1140,
+  contentSize: 1160,
   space: {
     none: 0,
     small: 4,

tsconfig.json

@@ -2,7 +2,7 @@
   "compileOnSave": false,
   "compilerOptions": {
     "module": "commonjs",
-    "target": "es5",
+    "target": "ESNext",
     "jsx": "react",
     "lib": ["dom", "es2015"],
     "baseUrl": "src",