🎉 Initial commit

Pushedskydiver · Sep 22, 2018 · e27507d · e27507d
commit e27507d
Show file tree

Hide file tree

Showing 46 changed files with 8,452 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,20 @@
+# dependencies
+node_modules
+
+# testing
+/coverage
+
+# production
+build
+
+# misc
+[Tt]humbs.db
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "eslint.options": {
+    "configFile": "./_config/eslint.json"
+  }
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,20 @@
+# Colour Contrast Checker
+
+## CLI Commands
+
+``` bash
+# install dependencies
+yarn
+
+# serve with hot reload at localhost:3000
+yarn start
+
+# build for production with minification
+yarn build
+
+# test the production build locally
+yarn serve
+
+# run tests with jest and preact-render-spy 
+yarn test
+```
diff --git a/_config/eslint.json b/_config/eslint.json
@@ -0,0 +1,23 @@
+{
+  "extends": "eslint-config-synacor",
+  "env": {
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "brace-style": "off",
+    "indent": [
+      1,
+      2
+    ],
+    "react/jsx-indent-props": "off",
+    "react/jsx-max-props-per-line": "off"
+  },
+  "globals": {
+    "document": true,
+    "window": true,
+    "localStorage": true,
+    "sessionStorage": true,
+    "expect": true
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "colour-contrast-checker",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "1.1.5",
+    "styled-components": "^3.4.9"
+  },
+  "devDependencies": {
+    "eslint": "^5.6.0",
+    "eslint-config-synacor": "^3.0.3",
+    "eslint-plugin-react": "^7.11.1"
+  },
+  "eslintConfig": {
+    "extends": "eslint-config-synacor"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "serve": "npm run build && serve -s build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="favicons/favicon-70x70.png"/>
+            <square150x150logo src="favicons/favicon-150x150.png"/>
+            <wide310x150logo src="favicons/favicon-310x150.png"/>
+            <square310x310logo src="favicons/favicon-310x310.png"/>
+            <TileColor>#ffe66d</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png
diff --git a/public/favicons/favicon-144x144.png b/public/favicons/favicon-144x144.png
diff --git a/public/favicons/favicon-150x150.png b/public/favicons/favicon-150x150.png
diff --git a/public/favicons/favicon-192x192.png b/public/favicons/favicon-192x192.png
diff --git a/public/favicons/favicon-256x256.png b/public/favicons/favicon-256x256.png
diff --git a/public/favicons/favicon-310x150.png b/public/favicons/favicon-310x150.png
diff --git a/public/favicons/favicon-310x310.png b/public/favicons/favicon-310x310.png
diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png
diff --git a/public/favicons/favicon-48x48.png b/public/favicons/favicon-48x48.png
diff --git a/public/favicons/favicon-512x512.png b/public/favicons/favicon-512x512.png
diff --git a/public/favicons/favicon-70x70.png b/public/favicons/favicon-70x70.png
diff --git a/public/favicons/favicon-72x72.png b/public/favicons/favicon-72x72.png
diff --git a/public/favicons/favicon-96x96.png b/public/favicons/favicon-96x96.png
diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico
diff --git a/public/favicons/safari-pinned-tab.svg b/public/favicons/safari-pinned-tab.svg
diff --git a/public/fonts/avenir-next-variable.woff2 b/public/fonts/avenir-next-variable.woff2
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- META TAGS  -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width= device-width, minimum-scale=1, user-scalable=yes, initial-scale=1, viewport-fit=cover">
+    <meta name="robots" content="index, follow, noodp">
+    <meta name="description" content="Check the contrast between different colour combinations against WCAG standards">
+
+    <!-- PAGE TITLE -->
+    <title>Colour Contrast Checker</title>
+
+    <!-- FACEBOOK & LINKEDIN -->
+    <meta property="og:url" content="">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Colour Contrast Checker">
+    <meta property="og:image" content="">
+    <meta property="og:description" content="Check the contrast between different colour combinations against WCAG standards">
+    <meta property="og:site_name" content="Colour Contrast Checker">
+    <meta property="og:locale" content="en_GB">
+
+    <!-- TWITTER -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@AlexMClapperton">
+    <meta name="twitter:creator" content="@AlexMClapperton">
+    <meta name="twitter:url" content="">
+    <meta name="twitter:title" content="Colour Contrast Checker">
+    <meta name="twitter:description" content="Check the contrast between different colour combinations against WCAG standards">
+    <meta name="twitter:image" content="">
+
+    <!-- PRELOAD FILES -->
+    <link rel="preload" href="%PUBLIC_URL%/fonts/avenir-next-variable.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="%PUBLIC_URL%/fonts/nunito-vf-variable.woff2" as="font" type="font/woff2" crossorigin>
+
+    <!-- FAVICONS -->
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/favicon-48x48.png" sizes="48x48">
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/favicon-72x72.png" sizes="72x72">
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/favicon-144x144.png" sizes="144x144">
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/favicons/favicon-256x256.png" sizes="256x256">
+
+    <!-- Apple Icons -->
+    <meta name="apple-mobile-web-app-title" content="Match Finder">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicons/apple-touch-icon.png">
+    <link rel="mask-icon" href="%PUBLIC_URL%/favicons/safari-pinned-tab.svg" color="#222222">
+
+    <!-- MS Tile Icons -->
+    <meta name="application-name" content="Bayer Imitation Game">
+    <meta name="msapplication-TileColor" content="#fff">
+    <meta name="msapplication-square70x70logo" content="%PUBLIC_URL%/favicons/favicon-70x70.png">
+    <meta name="msapplication-TileImage" content="%PUBLIC_URL%/favicons/favicon-144x144.png">
+    <meta name="msapplication-square150x150logo" content="%PUBLIC_URL%/favicons/favicon-150x150.png">
+    <meta name="msapplication-wide310x150logo" content="%PUBLIC_URL%/favicons/favicon-310x150.png">
+    <meta name="msapplication-square310x310logo" content="%PUBLIC_URL%/favicons/favicon-310x310.png">
+    <meta name="msapplication-tooltip" content="Bayer Imitation Game">
+    <meta name="msapplication-config" content="<%= htmlWebpackPlugin.files.publicPath%>assets/browserconfig.xml">
+    <meta name="theme-color" content="#ffe66d">
+
+    <!-- MANIFEST -->
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
+
+    <style>
+      @font-face {
+        font-family: 'Avenir Next';
+        src: url('%PUBLIC_URL%/fonts/avenir-next-variable.woff2') format('woff2-variations'), url('%PUBLIC_URL%/fonts/avenir-next-variable.woff2') format('woff2');
+        font-display: swap;
+      }
+
+      @font-face {
+        font-family: 'Nunito VF';
+        src: url('%PUBLIC_URL%/fonts/nunito-vf-variable.woff2') format('woff2-variations'), url('%PUBLIC_URL%/fonts/nunito-vf-variable.woff2') format('woff2');
+        font-display: swap;
+      }
+    </style>
+
+    <noscript>
+      <style>
+        *,
+        *:before,
+        *:after {
+          box-sizing: border-box;
+          font-weight: inherit;
+        }
+
+        html,
+        body {
+          height: 100%;
+        }
+
+        body {
+          background-color: #fff;
+          color: rgba(17, 17, 17, 0.85);
+          font-family: "Avenir Next", sans-serif;
+          font-variation-settings: "wght"400;
+          font-weight: normal;
+          line-height: 1.7;
+          text-rendering: optimizeLegibility;
+          -webkit-font-smoothing: antialiased;
+          margin: 0px;
+        }
+
+        h1 {
+          font-family: 'Nunito VF', sans-serif;
+          font-size: calc(1.875em + 0.5vw);
+          font-variation-settings: "wght"400;
+          line-height: 1.3;
+          margin: 0px 0px 18px;
+        }
+
+        p {
+          font-family: 'Avenir Next', sans-serif;
+          margin-top: 0;
+          margin-bottom: 12px;
+        }
+
+        .wrapper {
+          position: relative;
+          z-index: 1;
+          min-height: 100%;
+          display: flex;
+          flex-direction: column;
+          -webkit-box-pack: center;
+          justify-content: center;
+          -webkit-box-align: center;
+          align-items: center;
+          animation: beshPa 0.5s ease-in-out 1s 1 normal forwards running;
+          overflow: hidden;
+        }
+
+        .container {
+          position: relative;
+          width: 100%;
+          max-width: 1240px;
+          z-index: 2;
+          padding: 25px 15px;
+          margin: 0px auto;
+        }
+
+        @media screen and (min-width: 23.4375em) {
+          .container {
+            padding-right: 5vw;
+            padding-left: 5vw;
+          }
+        }
+      </style>
+    </noscript>
+  </head>
+  <body>
+    <noscript>
+      <div class="wrapper">
+        <div class="container">
+          <h1>Oops! No JavaScript</h1>
+          <p>It looks like you have JavaScript turned off on your browser.</p>
+          <p>Please turn on JavaScript in order to use this app.</p>
+        </div>
+      </div>
+    </noscript>
+    <div id="main"></div>
+  </body>
+</html>
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,42 @@
+{
+  "name": "Colour Contrast Checker",
+  "short_name": "CC Checker",
+  "description": "Find all premier league matches of the season for your favourite team",
+  "start_url": "/?utm_source=homescreen",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#fff",
+  "theme_color": "#38003c",
+  "icons": [
+    {
+      "src": "favicons/favicon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/favicon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/favicon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/favicon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/favicon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "favicons/favicon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/components/01-Atoms/Copy/Copy.styles.js b/src/components/01-Atoms/Copy/Copy.styles.js
@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+
+const Copy = styled.span`
+  display: inline-block;
+  max-width: 575px;
+
+  ${props => props.normal && css`
+    font-size: 1em;
+  `}
+
+  ${props => props.large && css`
+    font-size: 14pt;
+  `}
+`;
+
+export default Copy;
diff --git a/src/components/01-Atoms/Grade/Grade.styles.js b/src/components/01-Atoms/Grade/Grade.styles.js
@@ -0,0 +1,15 @@
+import styled, { css } from 'styled-components';
+import { typography } from '../../../styles/settings.typography.styles';
+import { minWidth } from '../../../styles/settings.breakpoints.styles';
+
+const Grade = styled.span`
+  display: inline-block;
+  font-size: ${typography.heading.size.regular};
+  font-weight: ${typography.weight.medium};
+
+  ${minWidth('768', () => css`
+    font-size: ${typography.heading.size.medium};
+  `)}
+`;
+
+export default Grade;