Develop about jsx (#50)

* about.jsx refactor and squash
- css added in
- data/team.json along with images/team/*.png for people images using require.context for dynamic loading
- evcohen/eslint-plugin-jsx-a11y#339 used for letting eslint know that react-router Link is a11y-compliant
- images are converted to pngs, and resized down to 300pixels to save space where possible
- added tests for team.json and mocked require.context

* refactored tests and minor in src
now using chai's expect

* remove unnecessary global

package.json

@@ -47,15 +47,16 @@
     "collectCoverageFrom": [
       "src/app.{js,jsx}",
       "src/{containers,components,layouts}/**/*.{js,jsx}",
-      "src/redux/**/*.{js,jsx}"
+      "src/redux/**/*.{js,jsx}",
+      "!src/redux/*.{js,jsx}"
     ],
     "coverageDirectory": "./coverage/",
     "collectCoverage": true,
     "setupFiles": [
       "<rootDir>/config/polyfills.js",
-      "<rootDir>/tests/setupTests.js",
       "jest-localstorage-mock"
     ],
+    "setupTestFrameworkScriptFile": "<rootDir>/tests/setupTests.js",
     "testMatch": [
       "<rootDir>/(tests|src)/**/__tests__/**/*.js?(x)",
       "<rootDir>/(tests|src)/**/?(*.)(spec|test).js?(x)"
@@ -94,10 +95,21 @@
       "airbnb"
     ],
     "globals": {
-      "shallow": true,
+      "jestExpect": true,
       "mount": true,
+      "shallow": true,
       "spy": true,
       "stub": true
+    },
+    "rules": {
+      "jsx-a11y/anchor-is-valid": [
+        "error",
+        {
+          "components": [ "Link" ],
+          "specialLink": [ "to", "hrefLeft", "hrefRight" ],
+          "aspects": [ "noHref", "invalidHref", "preferButton" ]
+        }
+      ]
     }
   },
   "devDependencies": {
@@ -130,6 +142,7 @@
     "html-webpack-plugin": "^2.29.0",
     "jest": "^22.0.4",
     "jest-cli": "^22.0.4",
+    "jest-json-schema": "^1.2.0",
     "jest-localstorage-mock": "^2.1.0",
     "mocha": "^4.0.1",
     "node-sass": "^4.7.2",

public/fonts/LICENSE.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2017 The Inter UI Project Authors ([email protected])
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/app.jsx

@@ -6,14 +6,15 @@ import {
 } from 'react-router-dom';
 
 import './styles/app.css';
+import './styles/main.css';
 
+import Header from './components/header';
+import SearchBar from './components/search-bar';
 
-import Header from './layouts/header';
-import Main from './layouts/main';
-import About from './layouts/about';
-import Faqs from './layouts/faqs';
+import Main from './components/main';
+import About from './components/about';
+import Faqs from './components/faqs';
 
-import SearchBar from './components/search-bar';
 import Footer from './components/footer';
 
 // eslint-disable-next-line react/prefer-stateless-function
@@ -24,7 +25,7 @@ class App extends Component {
         <div className="App">
           <Header />
           <SearchBar />
-          <div className="body container">
+          <div className="body">
             <Switch>
               <Route exact path="/" component={Main} />
               <Route exact path="/about" component={About} />

src/components/about/index.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import OurStory from './our-story';
+import OurName from './our-name';
+import Team from './team';
+
+const About = () => (
+  <div className="about">
+    <div className="group-photo-container text-center">
+      <img className="img-responsive group-photo" src="/images/about-cover.png" alt="A group discussion about Signsfive" />
+    </div>
+    <div className="container">
+      <section className="container py-5 px-5">
+        <h3 className="tracked pb-2">
+          About SignsFive
+        </h3>
+        <p>
+          <strong>
+            Make the search and share for STE(A)M (Science, Technology,
+             Engineering, <em>Art</em>, Math) signs easier.
+          </strong>
+        </p>
+        <p>
+          In fields where new technologies and technical terms are always
+           emerging, SignsFive will be a place where d/Deaf/HoH, interpreters
+           and ASL students (and hearing users of ASL) can find signs for
+           STE(A)M terms and contribute to the growing collection.
+        </p>
+      </section>
+      <div className="row py-5">
+        <OurStory />
+        <OurName />
+      </div>
+      <header className="container">
+        <div className="py-5 px-5">
+          <h3 className="tracked text-center pb-2">
+            Meet the Team
+          </h3>
+        </div>
+      </header>
+      <div className="container">
+        <Team />
+      </div>
+    </div>
+  </div>
+);
+
+export default About;

src/components/about/member.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+
+export default class Member extends Component {
+  constructor(props) {
+    super(props);
+
+    // eslint-disable-next-line global-require
+    this.pathToMemberImage = require('../../lib/teamLoader').default;
+  }
+
+  render() {
+    const {
+      firstName,
+      lastName,
+      identity,
+      role,
+    } = this.props.data;
+
+    return (
+      <div className="col-3">
+        <img className="about-image rounded-circle" src={this.pathToMemberImage(`./${firstName}${lastName}.png`)} alt={`Profile Photography of ${firstName} ${lastName}`} />
+        <p className="text-center pt-3">
+          <strong>
+            {firstName} {lastName}
+          </strong>
+          <br />
+          <span className="badge badge-pill badge-secondary about-team--identity">
+            {identity}
+          </span>
+        </p>
+        <p className="text-center">
+          {role}
+        </p>
+      </div>
+    );
+  }
+}
+
+Member.propTypes = {
+  data: PropTypes.shape({
+    firstName: PropTypes.string.isRequired,
+    lastName: PropTypes.string.isRequired,
+    identity: PropTypes.string.isRequired,
+    role: PropTypes.string.isRequired,
+  }).isRequired,
+};

src/components/about/our-name.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const OurName = () => (
+  <div className="col-md-6">
+    <h3 className="tracked pb-2">
+      Our Name
+    </h3>
+    <p>
+      <strong>
+        You might be wondering, {'"What’s the story behind the name?"'}
+      </strong>
+    </p>
+    {/* <!-- TODO: Make icons accessible to screenreaders --> */}
+    <p>Short answer: <em>OpenSigns</em> has been taken by a sign shop. 👎</p>
+    <p>
+      But after weeks of exploring and bantering, we realized that the
+       number <em>five</em> had been a repetitive theme, referring both to
+      <a href="http://www.lifeprint.com/asl101/pages-layout/parameters.htm">
+        {'"Five Parameters of ASL"'}
+      </a>
+       and the five letters in STE(A)M. Most importantly, the sign for
+       SignsFive was too cool to pass. For the win!
+    </p>
+    <div className="pt-1">
+      <section className="bg-dark text-white text-center align-middle py-5">
+        GIF of SignsFive sign
+      </section>
+    </div>
+  </div>
+);
+
+export default OurName;

src/components/about/our-story.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const OurStory = () => (
+  <div className="col-md-6 px-5">
+    <h3 className="tracked pb-2">Our Story</h3>
+    <p>
+      <strong>
+        In early 2017, a group of deaf/hard-of-hearing/deafblind and
+         hearing professionals began meeting weekly at
+        <a href="https://chihacknight.org/">
+         ChiHackNight
+        </a>
+         to discuss what issues that haven’t been addressed well.
+      </strong>
+    </p>
+    <p>
+      As a developer/engineer, Jason Salerno shared that he had been frustrated that
+       the recurring problems for existing online/web sign language dictionaries for STE(A)M:
+    </p>
+    <ol>
+      <li>
+        Not active anymore because there are no more grants to support or admins have moved on
+      </li>
+      <li>
+        Not user-friendly nor mobile-friendly
+      </li>
+      <li>
+        Not fast enough to adds signs, especially in STE(A)M field where it’s ever changing
+      </li>
+    </ol>
+    <p>
+      Initially called OpenSigns, the group hatched SignsFive, a community-sourced open to
+       anyone in the sign language community to contribute, share and discuss STE(A)M signs.
+    </p>
+  </div>
+);
+
+export default OurStory;