Initial app migration

.babelrc

@@ -0,0 +1,7 @@
+{
+    "plugins": ["@emotion/babel-plugin", "babel-plugin-transform-glob-import"],
+    "presets": ["@babel/preset-env", "@babel/preset-react"],
+    "targets": {
+        "node": 9
+    }
+}

.github/workflows/node.js.yml

@@ -0,0 +1,39 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Get yarn cache directory path
+      id: yarn-cache-dir-path
+      run: echo "::set-output name=dir::$(yarn cache dir)"
+
+    - uses: actions/cache@v2
+      id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+      with:
+        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
+    - name: Install modules
+      run: yarn
+    - name: Run unit tests
+      run: yarn test
+    - name: Run Cypress component tests
+      run: yarn test:components:ci
+    - name: Run Cypress tests
+      run: yarn test:ci

.parcelrc

@@ -0,0 +1,11 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.mp4": ["@parcel/transformer-raw"],
+        "*.{js,mjs,jsx,cjs,ts,tsx}": [
+        "@parcel/transformer-js",
+        "@parcel/transformer-react-refresh-wrap"
+        ]
+    },
+    "resolvers": ["@parcel/resolver-glob", "..."]
+}

App.js

@@ -0,0 +1,44 @@
+import React from "react"
+import { Router } from "@reach/router"
+import "./global-styles/variables.scss"
+import "./global-styles/styles.scss"
+import Header from "components/header"
+import HomePage from "components/page-home"
+import AboutPage from "components/page-about"
+import CareersPage from "components/page-careers"
+import TripIdeasPage from "components/page-trip-ideas"
+import ListingsPage from "components/page-listings"
+import Listing from "components/page-listing-detail"
+import EventsPage from "components/page-events"
+import PassesPage from "components/page-passes"
+import SubmitListingPage from "components/page-submit-listing"
+import HikesPage from "components/page-adventures-hikes"
+
+import imgFooterLogo from "images/icons/footer-logo.svg"
+
+export function App() {
+	return <>
+		<Header />
+		<div id="main">
+			<Router>
+				<HomePage path="/" />
+				<AboutPage path="/about" />
+				<CareersPage path="/careers" />
+				<ListingsPage path="/listings" />
+				<Listing path="/listing/:id" />
+				<SubmitListingPage path="/submit-listing" />
+				<EventsPage path="/events" />
+				<PassesPage path="/passes" />
+				<HikesPage path="/adventures-hikes" />
+				<TripIdeasPage path="/trip-ideas" />
+			</Router>
+		</div>
+		<div id="footer">
+			<div className="layout">
+				<div id="footer-logo">
+					<img src={imgFooterLogo} />
+				</div>
+			</div>
+		</div>
+	</>
+}

components/__tests__/button-submit.test.js

@@ -0,0 +1,40 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { render, screen, fireEvent, getByText, getByLabelText } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+
+import ButtonSubmit from "../button-submit"
+
+describe('ButtonSubmit', () =>{
+    it('labels the button', () => {
+        const textFixture = "Send it!"
+        const { getByLabelText } = render(<ButtonSubmit buttonName={textFixture} />)
+
+        const buttonText = getByLabelText(textFixture)
+
+        expect(buttonText).toBeInTheDocument()
+    })
+    xit('can be reached with the keyboard', () => {
+        render(<ButtonSubmit buttonName="Chuck it" />)
+        const button = screen.getByTestId('btn-submit')
+
+        userEvent.tab()
+        expect(button).toHaveFocus()
+    })
+    it('can be operated with the keyboard and assistive tech', () => {
+        let clicked = false
+        render(<ButtonSubmit buttonName="Fling it" onClick={()=> { clicked = true }} />)
+
+        const button = screen.getByRole('button')
+
+        button.focus()
+
+        userEvent.keyboard('{enter}')
+
+        expect(clicked).toBe(true)
+    })
+})

components/__tests__/icon.test.js

@@ -0,0 +1,27 @@
+/**
+ * @jest-environment jsdom
+ */
+
+ import React from 'react'
+ import { render, getByRole, getByLabelText } from '@testing-library/react'
+ import '@testing-library/jest-dom'
+ import userEvent from '@testing-library/user-event'
+
+ import Icon from "../icon"
+
+ describe('Icon', () =>{
+     it('labels the icon', () => {
+        const nameFixture = "dock"
+        const { getByLabelText } = render(<Icon name={nameFixture} />)
+
+        const iconText = getByLabelText(nameFixture)
+
+        expect(iconText).toBeInTheDocument()
+     })
+     it('has an image role', () => {
+        const {getByRole} = render(<Icon name="wifi" />)
+
+        const icon = getByRole('img')
+
+     })
+})

components/button-submit.js

@@ -0,0 +1,16 @@
+import React from "react"
+
+const ButtonSubmit = ({buttonName, onClick}) => {
+    return (
+        <button
+            aria-label={buttonName}
+            className="btn-submit btn-lookingglass"
+            data-testid="btn-submit"
+            onClick={(event) => { onClick(event)}}
+        >
+            <span className="icon-lookingglass-white"></span>
+        </button>
+    )
+}
+
+export default ButtonSubmit