✨ feat: Initial commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.circleci/config.yml

@@ -0,0 +1,32 @@
+# Javascript Node CircleCI 2.0 configuration file
+#
+# Check https://circleci.com/docs/2.0/language-javascript/ for more details
+#
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:10.15
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+            - v1-dependencies-{{ checksum "package.json" }}
+            # fallback to using the latest cache if no exact match is found
+            - v1-dependencies-
+
+      - run: npm i
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: npm test
+      - run: npm run lint

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  extends: [
+    'eslint-config-airbnb-base'
+  ],
+  parserOptions: {
+    parser: 'babel-eslint',
+  }
+};

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -0,0 +1,16 @@
+# Safe focus
+[![CircleCI](https://circleci.com/gh/sparkbox/safe-focus/tree/master.svg?style=svg)](https://circleci.com/gh/sparkbox/safe-focus/tree/master)
+
+Safe Focus is a utility file to add a custom outline style for all selectable components.
+
+## Usage
+Require the package in your project and init the default import.
+```
+import safeFocus from '@sparkbox/safe-focus';
+
+safeFocus();
+```
+
+#### Important
+Safe Focus does not come pre-transpiled. Please be sure to import it into a file that is run through a transpiler, like Babel.
+

index.js

@@ -0,0 +1,3 @@
+import initSafeFocus from './lib/safe-focus';
+
+export default initSafeFocus;

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: 'jest-environment-jsdom-sixteen',
+};

lib/safe-focus.js

@@ -0,0 +1,41 @@
+export const safeFocusClass = 'safe-focus';
+const cutsTheMustard = () => !!document.documentElement.classList;
+let htmlEl;
+
+/**
+ *  Assign the HTML element after the init function has run.
+ *  @return {undefined}
+ */
+const assignHtml = () => {
+  htmlEl = document.documentElement;
+};
+
+/**
+ *  Add class to key off of for showing focus outlines
+ *  @return {undefined}
+ */
+const activateSafeFocus = () => {
+  htmlEl.classList.add(safeFocusClass);
+};
+
+/**
+ *  Remove class to key off of for showing focus outlines
+ *  @return {undefined}
+ */
+const deactivateSafeFocus = () => {
+  htmlEl.classList.remove(safeFocusClass);
+};
+
+/**
+ *  Bind events for adding & removing class to key off of for showing focus outlines
+ *  @return {undefined}
+ */
+export default () => {
+  assignHtml();
+  if (cutsTheMustard()) {
+    htmlEl.classList.remove(safeFocusClass);
+
+    document.addEventListener('mousedown', deactivateSafeFocus);
+    document.addEventListener('keydown', activateSafeFocus);
+  }
+};

lib/safe-focus.spec.js

@@ -0,0 +1,30 @@
+import { JSDOM } from 'jsdom';
+import safeFocus, { safeFocusClass } from './safe-focus';
+
+describe('Safe Focus', () => {
+  const createNewMockDom = () => { global.document = (new JSDOM()).window; };
+  const getDocument = () => global.document;
+  const getDocumentElement = () => getDocument().documentElement;
+  const hasSafeFocusClass = () => getDocumentElement().classList.contains(safeFocusClass);
+  const dispatchKeydown = () => { getDocument().dispatchEvent(new window.KeyboardEvent('keydown')); };
+  const dispatchMouseDown = () => { getDocument().dispatchEvent(new window.MouseEvent('mousedown')); };
+
+  beforeEach(() => {
+    createNewMockDom();
+    safeFocus();
+  });
+
+  it('doesn\'t include the safe focus class on load', () => {
+    expect(hasSafeFocusClass()).toBe(false);
+  });
+
+  it('adds the safe focus class on keydown', () => {
+    dispatchKeydown();
+    expect(hasSafeFocusClass()).toBe(true);
+  });
+
+  it('removes the safe focus class on mousedown', () => {
+    dispatchMouseDown();
+    expect(hasSafeFocusClass()).toBe(false);
+  });
+});