Contactus accessibility, container id, import header, change form's label position

Author: marcoacierno

src/components/contact-us/index.js

@@ -7,22 +7,20 @@ import './index.css';
 
 export default props => {
   return (
-    <Container className="ContactUs" size="medium">
+    <Container className="ContactUs" size="small" id="contactus">
       <h1>Contact us</h1>
-      <Container size="small">
-        <p>
-          If you like{' '}
-          <span role="img" aria-label="pizza">
-            🍕
-          </span>{' '}
-          and{' '}
-          <span role="img" aria-label="python">
-            🐍
-          </span>
-          , get in touch! We are always looking for new places!
-        </p>
-        <Form />
-      </Container>
+      <p>
+        If you like{' '}
+        <span role="img" aria-label="pizza">
+          🍕
+        </span>{' '}
+        and{' '}
+        <span role="img" aria-label="python">
+          🐍
+        </span>
+        , get in touch! We are always looking for new places!
+      </p>
+      <Form />
     </Container>
   );
 };

src/components/container/index.js

@@ -4,10 +4,13 @@ import classnames from 'classnames';
 import './index.css';
 
 export default props => {
-  const { size, children, className } = props;
+  const { size, children, id, className } = props;
 
   return (
-    <div className={classnames('Container', `Container--${size}`, className)}>
+    <div
+      className={classnames('Container', `Container--${size}`, className)}
+      id={id}
+    >
       {children}
     </div>
   );

src/components/header/index.css

@@ -0,0 +1,96 @@
+.Header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+
+  .Container {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 1rem;
+
+    @media (--tablet) {
+      flex-direction: row;
+    }
+  }
+
+  &--logo {
+    width: 10rem;
+    height: 10rem;
+  }
+
+  &--links {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-direction: column;
+    margin-top: 1rem;
+    letter-spacing: 0.1em;
+
+    @media (--mobile) {
+      flex-direction: row;
+      flex-wrap: nowrap;
+    }
+
+    @media (--tablet) {
+      margin-top: 0;
+    }
+
+    li {
+      font-family: var(--font-name--paragraph);
+      font-weight: 700;
+
+      a {
+        display: block;
+        padding: 0.4rem;
+        color: var(--white);
+        user-select: none;
+        background: linear-gradient(
+            to top,
+            var(--white) 0.2rem,
+            transparent 0.2rem
+          )
+          no-repeat center;
+        background-size: 0% 100%;
+        transition: background-size 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+        &:hover,
+        &:active {
+          background-size: 100% 100%;
+        }
+      }
+
+      & + li {
+        margin-top: 2rem;
+
+        @media (--mobile) {
+          margin-top: 0;
+          margin-left: 2rem;
+        }
+      }
+
+      &:last-child {
+        perspective: 24rem;
+
+        a {
+          padding: 1rem 2.4rem;
+          border: 1px solid var(--white);
+          border-radius: 10rem;
+          background: var(--white);
+          color: var(--primary-color);
+          transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
+            box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+          &:hover,
+          &:active {
+            transform: translateZ(2.6rem) rotateX(-12deg) rotateY(-10deg);
+            box-shadow: 0.6rem 0.4rem 2.4rem -0.8rem rgba(25, 0, 0, 0.5);
+          }
+        }
+      }
+    }
+  }
+}

src/components/header/index.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+
+import Container from '../container';
+import Logo from '../logo';
+
+import './index.css';
+
+export default class Header extends Component {
+  onNavClick(e) {
+    e.preventDefault();
+
+    const target = e.target;
+    const destinationId = target.getAttribute('data-destination');
+    const destinationDom = window.document.querySelector(`#${destinationId}`);
+
+    if (!destinationDom) {
+      return;
+    }
+
+    window.scrollTo({
+      top: destinationDom.offsetTop,
+      behavior: 'smooth',
+    });
+  }
+
+  render() {
+    return (
+      <div className="Header">
+        <Container size="large">
+          <Logo />
+          <ul className="Header--links">
+            <li>
+              <a
+                onClick={this.onNavClick}
+                href="#past-events"
+                data-destination="past-events"
+              >
+                Past events
+              </a>
+            </li>
+            <li>
+              <a
+                onClick={this.onNavClick}
+                href="#contactus"
+                data-destination="contactus"
+              >
+                Contact us
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://hamburg.python.pizza?ref=global-header"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Hamburg
+              </a>
+            </li>
+          </ul>
+        </Container>
+      </div>
+    );
+  }
+}

src/components/logo/index.css

@@ -0,0 +1,4 @@
+.Logo {
+  width: 10rem;
+  height: 10rem;
+}

src/components/logo/index.js

@@ -27,7 +27,7 @@ export default props => {
   );
 
   return (
-    <Container className="PastEvents" size="large">
+    <Container className="PastEvents" size="large" id="past-events">
       <h1>Our past events</h1>
 
       <div className="PastEvents--list">

src/components/past-events/index.js

@@ -2,13 +2,15 @@ import React from 'react';
 
 import Layout from '../components/layout';
 import SEO from '../components/seo';
+import Header from '../components/header';
 import Hero from '../components/hero';
 import PastEvents from '../components/past-events';
 import ContactUs from '../components/contact-us';
 
 export default props => (
   <Layout>
     <SEO title="Home" />
+    <Header />
     <Hero />
     <PastEvents />
     <ContactUs />