Update contrast checker to use iro

app/components/contrast-checker.hbs

@@ -61,19 +61,39 @@
     </div>
   </div>
 
-  <div class="color-pickers-container flex justify-between mt-4">
+  <div
+    class="bg-menu color-pickers-container flex justify-between mt-4 p-4 w-full"
+  >
     <div class="background-color-picker-container mr-2 w-full">
       <div
         class="background-color-picker"
         {{did-insert this.initBackgroundColorPicker}}
       ></div>
+
+      <Input
+        data-test-bg-input
+        class="bg-main rounded mt-2 w-full"
+        type="text"
+        value={{this.backgroundColor}}
+        {{on "blur" this.setBgColor}}
+        {{on "keypress" this.enterPress}}
+      />
     </div>
 
     <div class="foreground-color-picker-container ml-2 w-full">
       <div
         class="foreground-color-picker ml-1"
         {{did-insert this.initForegroundColorPicker}}
       ></div>
+
+      <Input
+        data-test-fg-input
+        class="bg-main rounded mt-2 w-full"
+        type="text"
+        value={{this.foregroundColor}}
+        {{on "blur" this.setFgColor}}
+        {{on "keypress" this.enterPress}}
+      />
     </div>
   </div>
 </div>

app/components/contrast-checker.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
-import Pickr from '@simonwep/pickr';
+import iro from '@jaames/iro';
 import { hex, score } from 'wcag-contrast';
 
 export default class ContrastChecker extends Component {
@@ -18,85 +18,84 @@ export default class ContrastChecker extends Component {
 
   @action
   initBackgroundColorPicker(element) {
-    this.bgPickr = new Pickr({
-      el: element,
-      container: element,
-      default: this.backgroundColor,
-      comparison: false,
-      inline: true,
-      useAsButton: true,
-
-      showAlways: true,
-      theme: 'nano',
-
-      components: {
-        // Main components
-        preview: false,
-        opacity: false,
-        hue: true,
-
-        // Input / output Options
-        interaction: {
-          hex: false,
-          rgba: false,
-          hsla: false,
-          hsva: false,
-          cmyk: false,
-          input: true,
-          clear: false,
-          save: false
+    this.bgPickr = new iro.ColorPicker(element, {
+      colors: [this.backgroundColor],
+      layout: [
+        {
+          component: iro.ui.Box,
+          options: {}
+        },
+        {
+          component: iro.ui.Slider,
+          options: {
+            sliderType: 'hue'
+          }
         }
-      }
+      ],
+      width: 140
     });
 
-    this.onBgChange = (color) => {
+    this.onBgChange = color => {
       if (color) {
-        this.backgroundColor = color.toHEXA().toString();
+        this.backgroundColor = color.hexString;
       }
     };
 
-    this.bgPickr.on('change', this.onBgChange);
+    this.bgPickr.on('color:change', this.onBgChange);
   }
 
   @action
   initForegroundColorPicker(element) {
-    this.fgPickr = new Pickr({
-      el: element,
-      container: element,
-      comparison: false,
-      default: this.foregroundColor,
-      inline: true,
-      useAsButton: true,
-
-      showAlways: true,
-      theme: 'nano',
-
-      components: {
-        // Main components
-        preview: false,
-        opacity: false,
-        hue: true,
-
-        // Input / output Options
-        interaction: {
-          hex: false,
-          rgba: false,
-          hsla: false,
-          hsva: false,
-          cmyk: false,
-          input: true,
-          clear: false,
-          save: false
+    this.fgPickr = new iro.ColorPicker(element, {
+      colors: [this.foregroundColor],
+      layout: [
+        {
+          component: iro.ui.Box,
+          options: {}
+        },
+        {
+          component: iro.ui.Slider,
+          options: {
+            sliderType: 'hue'
+          }
         }
-      }
+      ],
+      width: 140
     });
 
-    this.onFgChange = (color) => {
+    this.onFgChange = color => {
       if (color) {
-        this.foregroundColor = color.toHEXA().toString();
+        this.foregroundColor = color.hexString;
       }
     };
 
-    this.fgPickr.on('change', this.onFgChange);
+    this.fgPickr.on('color:change', this.onFgChange);
+  }
+
+  @action
+  enterPress(event) {
+    if (event.keyCode === 13) {
+      event.target.blur();
+    }
+  }
+
+  @action
+  setBgColor(ev) {
+    try {
+      this.bgPickr.setColors([ev.target.value], 0);
+      this.backgroundColor = this.bgPickr.color.hexString;
+    } catch (err) {
+      // TODO: maybe mention the color is invalid here?
+    }
+  }
+
+  @action
+  setFgColor(ev) {
+    try {
+      this.fgPickr.setColors([ev.target.value], 0);
+      this.foregroundColor = this.fgPickr.color.hexString;
+    } catch (err) {
+      // TODO: maybe mention the color is invalid here?
+    }
   }
 }

app/components/settings-menu.hbs

@@ -1,4 +1,4 @@
-<div class="font-normal text-sm w-full" data-test-settings-menu>
+<div class="font-normal text-main-text text-sm w-full" data-test-settings-menu>
   <div class="p-1 pb-4">
     <div>
       <Input
@@ -20,8 +20,11 @@
     </div>
   </div>
 
-  <div class="border-b border-t p-1 pb-4 pt-3" data-test-settings-select-theme>
-    App theme:
+  <div class="p-1 pb-4 pt-3" data-test-settings-select-theme>
+    <h6 class="font-semibold mb-2 text-heading">
+      App theme:
+    </h6>
+
     <PowerSelect
       @dropdownClass="bg-menu max-w-md text-alt text-xs"
       @triggerClass="bg-menu max-w-md text-alt text-xs"
@@ -34,9 +37,9 @@
     </PowerSelect>
   </div>
 
-  <div class="border-b p-1 pb-4 pt-4">
+  <div class="p-1 pb-4 pt-4">
     <button
-      class="bg-menu pb-1 pl-2 pr-2 pt-1 rounded"
+      class="btn btn-primary pb-1 pl-2 pr-2 pt-1"
       type="button"
       {{on "click" @checkForUpdates}}
     >
@@ -45,7 +48,9 @@
   </div>
 
   <div class="p-1">
-    About:
+    <h6 class="font-semibold text-heading">
+      About:
+    </h6>
 
     <p class="mt-2">
       Version: {{this.version}}
@@ -55,7 +60,7 @@
       Copyright © 2020 Ship Shape Consulting LLC. All rights reserved.
     </p>
 
-    <p class="mt-2">
+    <p class="font-semibold mt-2">
       <a href {{on "click" this.visitWebsite}}>
         https://swach.io/
       </a>

app/styles/main.scss

@@ -220,14 +220,6 @@ button {
   }
 }
 
-.pcr-app[data-theme='nano'] {
-  @apply bg-menu overflow-hidden rounded-lg w-full;
-
-  .pcr-result {
-    @apply bg-main text-alt;
-  }
-}
-
 .ember-popover-inner > div {
   @apply h-full w-full;
 }

app/styles/variables.scss

@@ -13,6 +13,7 @@ body.light {
   --btn-text-secondary: #505768;
   --disabled-color: #a4acc6;
   --drop-icon: #0e1c2a;
+  --heading-color: #697088;
   --main-color: #e7e7ed;
   --menu-color: #ffffff;
   --menu-text-color: #697088;
@@ -32,6 +33,7 @@ body.dark {
   --btn-text-secondary: #d8dff4;
   --disabled-color: #5e6078;
   --drop-icon: #ffffff;
+  --heading-color: #a9acd3;
   --main-color: #0e0f1f;
   --menu-color: #222336;
   --menu-text-color: #a9acd3;

app/templates/palettes.hbs

@@ -30,7 +30,7 @@
 </div>
 
 <div class="flex items-center justify-between mt-4 p-1 pb-2 pt-2 w-full">
-  <h2 class="text-lg">
+  <h2 class="text-lg text-heading">
     Palettes
   </h2>
 

app/templates/settings.hbs

@@ -7,7 +7,7 @@
 </button>
 
 <div class="p-4 w-full">
-  <h1 class="font-bold p-1 text-lg">
+  <h1 class="font-bold p-1 text-heading text-lg">
     Preferences
   </h1>
 

ember-cli-build.js

@@ -25,7 +25,5 @@ module.exports = function(defaults) {
     }
   });
 
-  app.import('node_modules/@simonwep/pickr/dist/themes/nano.min.css');
-
   return app.toTree();
 };

package.json

@@ -38,13 +38,13 @@
     "@orbit/jsonapi": "^0.16.4",
     "@sentry/browser": "^5.13.2",
     "@sentry/integrations": "^5.13.2",
-    "@simonwep/pickr": "^1.5.1",
     "babel-eslint": "^10.1.0",
     "babel-preset-env": "^1.7.0",
     "broccoli-asset-rev": "^3.0.0",
     "color-name-list": "^5.4.1",
     "ember-animated": "^0.10.0",
     "ember-auto-import": "^1.5.3",
+    "ember-box": "^0.1.0",
     "ember-cli": "~3.16.0",
     "ember-cli-app-version": "^3.2.0",
     "ember-cli-babel": "^7.18.0",

tailwind.config.js

@@ -10,6 +10,7 @@ module.exports = {
         'btn-bg-secondary-hover': 'var(--btn-bg-secondary-hover)',
         'btn-text-primary': 'var(--btn-text-primary)',
         'btn-text-secondary': 'var(--btn-text-secondary)',
+        'heading': 'var(--heading-color)',
         main: 'var(--main-color)',
         menu: 'var(--menu-color)',
         'menu-text': 'var(--menu-text-color)',

tests/acceptance/contrast-test.js

@@ -1,5 +1,5 @@
 import { module, test } from 'qunit';
-import { fillIn, visit, currentURL } from '@ember/test-helpers';
+import { fillIn, triggerKeyEvent, visit, currentURL } from '@ember/test-helpers';
 import { setupApplicationTest } from 'ember-qunit';
 import seedOrbit from '../orbit/seed';
 import { waitForAll } from '../helpers';
@@ -24,7 +24,8 @@ module('Acceptance | contrast', function(hooks) {
   test('updates score when failing background value added', async function(assert) {
     await waitForAll();
 
-    await fillIn('.pcr-result', '#504F4F');
+    await fillIn('[data-test-bg-input]', '#504F4F');
+    await triggerKeyEvent('[data-test-bg-input]', 'keypress', 13);
 
     await waitForAll();
 

tests/integration/components/contrast-checker-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { fillIn, render } from '@ember/test-helpers';
+import { fillIn, triggerKeyEvent, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { waitForAll } from '../../helpers';
 
@@ -12,8 +12,10 @@ module('Integration | Component | contrast-checker', function(hooks) {
 
     await waitForAll();
 
-    await fillIn('.background-color-picker-container .pcr-result', '#004747');
-    await fillIn('.foreground-color-picker-container .pcr-result', '#005A2A');
+    await fillIn('[data-test-bg-input]', '#004747');
+    await triggerKeyEvent('[data-test-bg-input]', 'keypress', 13);
+    await fillIn('[data-test-fg-input]', '#005A2A');
+    await triggerKeyEvent('[data-test-fg-input]', 'keypress', 13);
 
     await waitForAll();
 
@@ -23,7 +25,8 @@ module('Integration | Component | contrast-checker', function(hooks) {
       .dom('[data-test-contrast-preview]')
       .hasStyle({ backgroundColor: 'rgb(0, 71, 71)', color: 'rgb(0, 90, 42)' });
 
-    await fillIn('.foreground-color-picker-container .pcr-result', '#00A24B');
+    await fillIn('[data-test-fg-input]', '#00A24B');
+    await triggerKeyEvent('[data-test-fg-input]', 'keypress', 13);
 
     await waitForAll();
 
@@ -34,7 +37,8 @@ module('Integration | Component | contrast-checker', function(hooks) {
       color: 'rgb(0, 162, 75)'
     });
 
-    await fillIn('.foreground-color-picker-container .pcr-result', '#00CE60');
+    await fillIn('[data-test-fg-input]', '#00CE60');
+    await triggerKeyEvent('[data-test-fg-input]', 'keypress', 13);
 
     await waitForAll();
 
@@ -45,7 +49,8 @@ module('Integration | Component | contrast-checker', function(hooks) {
       color: 'rgb(0, 206, 96)'
     });
 
-    await fillIn('.foreground-color-picker-container .pcr-result', '#FFFFFF');
+    await fillIn('[data-test-fg-input]', '#FFFFFF');
+    await triggerKeyEvent('[data-test-fg-input]', 'keypress', 13);
 
     await waitForAll();