UIDS-27 Add CopyToClipboard Popper and TrackedButton components

Author: rsaris

.eslintrc

@@ -17,7 +17,7 @@
         "browser": true
       },
       "parser": "babel-eslint",
-      "plugins": [ "babel", "react" ],
+      "plugins": [ "babel", "react", "react-hooks" ],
       "rules": {
         "babel/semi": 2,
         "import/prefer-default-export": 0,
@@ -33,9 +33,7 @@
         "no-alert": 0,
         "react/destructuring-assignment": 0,
         "react/forbid-prop-types": 0,
-        "react/jsx-props-no-spreading": [2, {
-          "html": "ignore"
-        }],
+        "react/jsx-props-no-spreading": 0,
         "react/jsx-no-target-blank": 1,
         "react/jsx-no-undef": 0,
         "react/jsx-one-expression-per-line": 0,
@@ -102,6 +100,8 @@
           "requiredFirst": false,
           "sortShapeProp": true
         }],
+        "react-hooks/exhaustive-deps": "warn",
+        "react-hooks/rules-of-hooks": "error",
         "semi": 0
       },
     }

.gitignore

@@ -21,6 +21,9 @@ lib
 .env.test.local
 .env.production.local
 
+# Ignore Jetbrains IDE settings
+/.idea
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

package.json

@@ -2,14 +2,21 @@
   "name": "ui-design-system",
   "version": "1.0.3",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-regular-svg-icons": "^5.12.1",
+    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/react-fontawesome": "^0.1.9",
     "bootstrap": "^4.3.1",
     "classnames": "^2.2.6",
     "node-sass": "^4.13.1",
     "polished": "^3.4.2",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
     "react-bootstrap": "^1.0.0-beta.16",
-    "react-dom": "^16.12.0"
+    "react-transition-group": "^4.3.0",
+    "react-copy-to-clipboard": "^5.0.2",
+    "react-popper": "^1.3.7",
+    "react-tracking": "^7.3.0",
+    "uuid": "^7.0.2"
   },
   "scripts": {
     "build": "NODE_ENV=production babel src --out-dir lib --copy-files",
@@ -35,6 +42,10 @@
       "last 1 safari version"
     ]
   },
+  "peerDependencies": {
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.8.4",
@@ -51,6 +62,7 @@
     "@storybook/addons": "^5.3.13",
     "@storybook/react": "^5.3.13",
     "@storybook/storybook-deployer": "^2.8.1",
+    "@testing-library/react-hooks": "^3.2.1",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -63,7 +75,10 @@
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^2.5.1",
     "eslint-utils": "^1.4.3",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "react-test-renderer": "^16.12.0",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3"

scss/borders.scss

@@ -0,0 +1 @@
+$ux-border-radius: 0.25rem;

scss/box_shadow.scss

@@ -0,0 +1,9 @@
+$ux-navbar-shadow-color: rgba( 0, 0, 0, 0.26 );
+
+$ux-box-shadow: 0 2px 5px $ux-navbar-shadow-color;
+$ux-box-shadow-light: 0 1px 1px $ux-navbar-shadow-color;
+
+$ux-box-shadow-card: 0 2px 4px rgba(0,0,0,0.1);
+
+$ux-box-shadow-top: 0 -2px 5px $ux-navbar-shadow-color;
+$ux-box-shadow-top-light: 0 -1px 1px $ux-navbar-shadow-color;

scss/buttons.scss

@@ -0,0 +1,9 @@
+@import './palette';
+
+.btn-link--neutral {
+  color: $ux-gray-500;
+
+  &:hover {
+    color: $ux-gray-700;
+  }
+}

scss/navbar.scss

@@ -0,0 +1,2 @@
+$ui-navbar-height: 3rem;
+$ui-navbar-height-mobile: $ui-navbar-height;

scss/theme.scss

@@ -1,4 +1,7 @@
+@import './box_shadow';
+@import './buttons';
 @import './lists';
+@import './navbar';
 @import './palette';
 @import './typography';
 @import './z_stack';

spec/Flash/Flash.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { create } from 'react-test-renderer';
+
+import Flash from '../../src/Flash/Flash';
+
+describe('Flash', () => {
+  test('no header classes', () => {
+    const { props } = create(<Flash header messages={[]} />).toJSON();
+
+    expect(props.className).toContain('Flash');
+    expect(props.className).not.toContain('Flash--no-header');
+  });
+
+  test('header classes', () => {
+    const { props } = create(<Flash header={false} messages={[]} />).toJSON();
+
+    expect(props.className).toContain('Flash');
+    expect(props.className).toContain('Flash--no-header');
+  });
+});

spec/Flash/__snapshots__/withFlash.test.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test withFlash it can create a new flash message 1`] = `
+Array [
+  <div
+    className="alert alert-success"
+  >
+    <button
+      className="close"
+      onClick={[Function]}
+      type="button"
+    >
+      ×
+    </button>
+    This is just a test...
+  </div>,
+  <div />,
+]
+`;