Add base form component (#2)

* Checkpoint #0
dbollinger · Apr 23, 2020 · 5ff200e · 5ff200e
1 parent da16ff5
commit 5ff200e
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 5 deletions.
diff --git a/app/components/registration-form.hbs b/app/components/registration-form.hbs
@@ -0,0 +1,16 @@
+<div class="registration-form">
+  <div class="registration-form__info">
+    <h3>Sign up for Cats Weekly™️</h3>
+    <p>Just fill in the information below and we'll keep you up to date with all the latest and greatest news about
+      cats.</p>
+  </div>
+  <div class="registration-form__fields">
+    <input placeholder="First Name" />
+    <input placeholder="Last Name" />
+    <input placeholder="Email Address" />
+    <input placeholder="How many cats do you own?" />
+  </div>
+  <div class="registration-form__actions">
+    <button {{on "click" (fn this.handleSubmit)}}>Sign up</button>
+  </div>
+</div>
diff --git a/app/components/registration-form.js b/app/components/registration-form.js
@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { RegistrationSchema } from '../validators/registration-form';
+
+export default class RegistrationFormComponent extends Component {
+  constructor() {
+    super(...arguments);
+    this.formSchema = RegistrationSchema;
+  }
+
+  @action
+  async handleSubmit(evt) {
+    // eslint-disable-next-line
+    console.log(evt);
+  }
+}
diff --git a/app/index.html b/app/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>A11y Form</title>
+    <!-- <title>A11y Form</title> -->
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -1,3 +1,2 @@
-body {
-  font-family: 'Roboto', sans-serif;
-}
+@import './app/main';
+@import './components/main';
diff --git a/app/styles/app/_main.scss b/app/styles/app/_main.scss
@@ -0,0 +1 @@
+@import './theme.scss';
diff --git a/app/styles/app/theme.scss b/app/styles/app/theme.scss
@@ -0,0 +1,3 @@
+body {
+  font-family: 'Roboto', sans-serif;
+}
diff --git a/app/styles/components/_main.scss b/app/styles/components/_main.scss
@@ -0,0 +1 @@
+@import './registration-form.scss';
diff --git a/app/styles/components/registration-form.scss b/app/styles/components/registration-form.scss
@@ -0,0 +1,58 @@
+$border-color: #ddd;
+$button-background-color: #ff3d3d;
+$button-text-color: white;
+$focus-ring-color: #b1c2de;
+
+// Workshop Exercise Styles
+
+.registration-form input {
+}
+
+.registration-form button {
+  background: $button-background-color;
+  color: $button-text-color;
+}
+
+.registration-form input:focus,
+.registration-form button:focus {
+  outline: 3px solid $focus-ring-color;
+}
+
+// End Workshop Exercise Styles
+
+
+// Layout Styles
+// These should not need to be adjusted for the workshop.
+
+.registration-form {
+  margin: 0 auto;
+  max-width: 36rem;
+  padding: 0 1rem 1rem 1rem;
+  border: 1px solid $border-color;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+}
+
+.registration-form__fields {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.registration-form__fields input {
+  font-size: 1rem;
+  border-radius: 3px;
+  appearance: none;
+  border: 1px solid $border-color;
+  padding: 0.375rem 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.registration-form__actions button {
+  font-size: 1rem;
+  border-radius: 3px;
+  border: none;
+  padding: 0.375rem 0.5rem;
+  width: 100%;
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,2 +1,2 @@
 <h1>Ember a11y Form Workshop</h1>
-{{outlet}}
+<RegistrationForm />
diff --git a/app/validators/registration-form.js b/app/validators/registration-form.js
@@ -0,0 +1,8 @@
+import * as yup from 'yup';
+
+export const RegistrationSchema = yup.object().shape({
+  firstName: yup.string().required().label('First Name'),
+  lastName: yup.string().required().label('Last Name'),
+  emailAddress: yup.string().email().required().label('Last Name'),
+  catsOwned: yup.number().required().label('Number of cats you own')
+});
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  },
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/tests/acceptance/visit-registration-page-test.js b/tests/acceptance/visit-registration-page-test.js
@@ -0,0 +1,16 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+// import a11yAudit from 'ember-a11y-testing/test-support/audit';
+
+module('Acceptance | visit registration page', function(hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /', async function(assert) {
+    await visit('/');
+
+    assert.equal(currentURL(), '/');
+
+    // await a11yAudit();
+  });
+});
diff --git a/tests/integration/components/registration-form-test.js b/tests/integration/components/registration-form-test.js
@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+// import a11yAudit from 'ember-a11y-testing/test-support/audit';
+
+module('Integration | Component | registration-form', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<RegistrationForm />`);
+
+    assert.dom(this.element).exists();
+
+    // await a11yAudit(this.element);
+  });
+});