Styles for contact form

Author: Salma Alam-Naylor

apps/fretonator-web/src/app/common/footer/footer.component.html

@@ -57,7 +57,8 @@ <h6 class="footer__sectionTitle">Who made this?</h6>
       <p class="footer__copy footer__copy--right">I'm a musician and software engineer in Manchester, UK. My goal with
         the Fretonator is to crowdsource feedback and ideas to create the ultimate guitar learning hub that's simple,
         easy and enjoyable to use.</p>
-      <p class="footer__copy footer__copy--right">Feedback/request form coming soon.</p>
+      <a [routerLink]="['/', 'contact']"
+         class="footer__copy footer__copy--right footer__copy--link">Submit your feedback</a>
       <p class="footer__copy footer__copy--right">The Fretonator is free and always will be!</p>
       <a href="https://www.buymeacoffee.com/fretonator"
          rel="nofollow noopener noreferrer"

apps/fretonator-web/src/app/common/footer/footer.component.scss

@@ -61,6 +61,7 @@
   flex-direction: column;
   justify-content: center;
   text-align: center;
+  margin-bottom: pxToRem($grid-unit * 2);
 
   @media screen and (min-width: $screen-med) {
     justify-content: flex-start;
@@ -76,6 +77,12 @@
   }
 }
 
+.footer__copy--link {
+  @include text_link();
+  color: var(--peach);
+  border-color: var(--peach);
+}
+
 .footer__sectionTitle {
   @include font_medium();
   font-size: pxToRem(18);

apps/fretonator-web/src/app/common/footer/footer.component.spec.ts

@@ -2,9 +2,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FooterComponent } from './footer.component';
 import { Component } from '@angular/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import { HeaderModule } from '../header/header.module';
 import { FooterModule } from './footer.module';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('FooterComponent', () => {
   @Component({
@@ -22,7 +21,7 @@ describe('FooterComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [FooterComponentSpec],
-      imports: [FooterModule]
+      imports: [FooterModule, RouterTestingModule]
     }).compileComponents();
   }));
 

apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap

@@ -89,6 +89,17 @@ exports[`HeaderComponent should match snapshot 1`] = `
           About
         </a>
       </li>
+      <li
+        class="header__linksItem"
+      >
+        <a
+          class="header__linksItemLink"
+          href="/contact"
+          routerlinkactive="header__linksItemLink--active"
+        >
+          Contact
+        </a>
+      </li>
       <li
         class="header__linksItem"
       >
@@ -98,7 +109,7 @@ exports[`HeaderComponent should match snapshot 1`] = `
           rel="nofollow noopener noreferrer"
           target="_blank"
         >
-          Support
+          Donate
         </a>
       </li>
     </ul>

apps/fretonator-web/src/app/common/svgs/tick/tick.component.html

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
+     class="svg">
+  <path
+    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
+</svg>

apps/fretonator-web/src/app/common/svgs/tick/tick.component.scss

@@ -0,0 +1,5 @@
+.svg {
+  flex: 1;
+  height: 100%;
+  fill: currentColor;
+}

apps/fretonator-web/src/app/common/svgs/tick/tick.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TickComponent } from './tick.component';
+
+describe('TickComponent', () => {
+  let component: TickComponent;
+  let fixture: ComponentFixture<TickComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TickComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TickComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/fretonator-web/src/app/common/svgs/tick/tick.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tick-svg',
+  templateUrl: './tick.component.html',
+  styleUrls: ['./tick.component.scss']
+})
+export class TickComponent {
+}

apps/fretonator-web/src/app/common/svgs/tick/tick.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TickComponent } from './tick.component';
+
+
+
+@NgModule({
+  declarations: [TickComponent],
+  exports: [
+    TickComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class TickModule { }

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.html

@@ -1,54 +1,85 @@
-<form [name]="formName"
-      data-netlify="true"
-      method="POST"
-      action="/contact/success"
-      netlify-honeypot="bot-field"
-      [formGroup]="form"
-      (ngSubmit)="onSubmit()">
-  <div>
-    <label for="name">
-      Name
+<div class="form__container" #scrollTargetContact>
+  <h1 class="form__title">Share the love <span role="img" aria-label="red heart emoji">❤️</span></h1>
+  <p class="form__copy">My goal with
+    the Fretonator is to crowdsource feedback and ideas to create the ultimate guitar learning hub that's simple,
+    easy and enjoyable to use.</p>
+  <p class="form__copy">Noticed a bug? Got an idea for a feature? Want to collaborate? Or just want to say hello? I'd
+    love to
+    hear from you. Send
+    me a message!</p>
+  <p class="form__copy form__copy--bold">Let's build the Fretonator together.</p>
+  <form [name]="formName"
+        data-netlify="true"
+        method="POST"
+        action="/contact/success"
+        netlify-honeypot="bot-field"
+        class="form"
+        [formGroup]="form"
+        (ngSubmit)="onSubmit()">
+    <label for="name" class="form__label">
+      Your name *
     </label>
-    <input id="name" name="Name" type="text" formControlName="name">
+    <div class="form__inputGroup">
+      <input id="name"
+             name="Name"
+             type="text"
+             formControlName="name"
+             class="form__input">
+      <span class="form__validIcon" *ngIf="name.valid">
+        <app-tick-svg></app-tick-svg>
+      </span>
+    </div>
     <ng-container *ngIf="name.touched">
-      <p *ngIf="name.errors?.required">Enter your name, yo!</p>
-      <p *ngIf="name.errors?.pattern">Please enter a valid name!</p>
-      <p *ngIf="name.errors?.maxlength">Come on, your name isn't actually {{name.errors?.maxlength.actualLength}}
+      <p class="form__error" *ngIf="name.errors?.required">Enter your name, yo! A fake one will do.</p>
+      <p class="form__error" *ngIf="name.errors?.pattern">Please enter a valid name that won't break the form!</p>
+      <p class="form__error" *ngIf="name.errors?.maxlength">Come on, your name isn't
+        actually {{name.errors?.maxlength.actualLength}}
         characters long!</p>
-      <pre>{{name.errors | json}}</pre>
     </ng-container>
-  </div>
-  <div>
-    <label for="email">
-      Email
+    <label for="email" class="form__label">
+      Your contact email
     </label>
-    <input id="email" name="Email" type="email" formControlName="email">
+    <div class="form__inputGroup">
+      <input id="email"
+             name="Email"
+             type="email"
+             formControlName="email"
+             class="form__input">
+      <span class="form__validIcon" *ngIf="email.value.length > 0 && email.valid">
+        <app-tick-svg></app-tick-svg>
+      </span>
+    </div>
     <ng-container *ngIf="email.touched">
-      <p *ngIf="email.errors?.email">An email address isn't required, but if you'd like me to reply to your message,
-        please enter a valid email address!</p>
-      <pre>{{email.errors | json}}</pre>
+      <p class="form__error" *ngIf="email.errors?.email">An email address isn't required, but if you'd like me to reply
+        to your message, please enter a valid one!</p>
     </ng-container>
 
-  </div>
-  <div>
-    <label for="message">
-      Message
+    <label for="message" class="form__label">
+      Your message *
     </label>
-    <textarea id="message" name="Message" formControlName="message"></textarea>
+    <div class="form__inputGroup">
+    <textarea id="message"
+              name="Message"
+              formControlName="message"
+              class="form__input form__input--textArea"></textarea>
+      <span class="form__validIcon form__validIcon--textArea" *ngIf="message.valid">
+        <app-tick-svg></app-tick-svg>
+      </span>
+    </div>
     <ng-container *ngIf="message.touched">
-      <p *ngIf="message.errors?.required">Go on, give me some feedback!</p>
-      <p *ngIf="message.errors?.minlength">Go on, give me some feedback!</p>
-      <pre>{{message.errors | json}}</pre>
+      <p class="form__error" *ngIf="message.errors?.required">Go on, give me some feedback!</p>
+      <p class="form__error" *ngIf="message.errors?.minlength">Come on, you can write more than that!</p>
     </ng-container>
 
-    <div>
+    <div class="form__honeypot">
       <label for="bot-field">Don't fill this out if you're human!</label>
       <input type="text" id="bot-field" name="bot-field" formControlName="honeypot">
-      <pre>{{honeypot.errors | json}}</pre>
     </div>
 
     <input type="submit" class="form__submit" formControlName="submit" aria-label="Submit Form"/>
-    <p *ngIf="formSubmitError">Oh no! Didn't work.</p>
-  </div>
+    <p class="form__error form__error--global" *ngIf="formSubmitError">Eeesh! Something went wrong when we tried to
+      submit the form. Please
+      try again.</p>
 
-</form>
+  </form>
+</div>