UIDS-24 implement review comments

Author: Rachel Roppolo

.eslintrc

@@ -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,

package.json

@@ -7,9 +7,7 @@
     "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",
     "uuid": "^7.0.2"
   },
@@ -37,6 +35,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",
@@ -68,6 +70,8 @@
     "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/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/navbar.scss

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

scss/theme.scss

@@ -1,7 +1,6 @@
+@import './box_shadow';
 @import './lists';
+@import './navbar';
 @import './palette';
 @import './typography';
 @import './z_stack';
-
-$ui-navbar-height: 3rem;
-$ui-navbar-height-mobile: $ui-navbar-height;

spec/Flash/Flash.test.jsx

@@ -7,14 +7,14 @@ 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');
+    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');
+    expect(props.className).toContain('Flash');
+    expect(props.className).toContain('Flash--no-header');
   });
 });

spec/Flash/useFlash.test.js

@@ -40,7 +40,7 @@ describe('useFlash', () => {
     }]);
 
     act(() => {
-      result.current.dismissMessage('1234');
+      result.current.dismissMessage(GENERATED_UUID);
     });
 
     expect(result.current.messages).toEqual([]);

spec/Flash/withFlash.test.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { act } from '@testing-library/react-hooks';
 import { create } from 'react-test-renderer';
 
@@ -12,12 +12,7 @@ jest.mock('react-transition-group', () => (
   }
 ));
 
-// eslint-disable-next-line react/prefer-stateless-function
-class WrappedComponent extends Component {
-  render() {
-    return <div />;
-  }
-}
+const WrappedComponent = () => <div />;
 
 describe('test withFlash', () => {
   test('it can create a new flash message', async () => {
@@ -26,7 +21,6 @@ describe('test withFlash', () => {
     const flash = create(<ComponentWithFlash />);
     const component = flash.root.findByType(WrappedComponent);
 
-
     act(() => {
       component.props.setFlashMessage(MessageTypes.SUCCESS, newMessage);
     });

spec/__snapshots__/Storyshots.test.js.snap

@@ -65,6 +65,58 @@ exports[`Storyshots Design System/Card all cards 1`] = `
 </div>
 `;
 
+exports[`Storyshots Design System/Flash Flash Message 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="container Flash"
+  />
+  <div>
+    <p>
+      Click the button to see a flash message.  Use the knobs to try different types!
+    </p>
+    <button
+      className="btn btn-primary"
+      onClick={[Function]}
+      type="button"
+    >
+      Submit
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Design System/Flash flash message 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="container flash"
+  />
+  <div>
+    <p>
+      Click the button to see a flash message.  Use the knobs to try different types!
+    </p>
+    <button
+      className="btn btn-primary"
+      onClick={[Function]}
+      type="button"
+    >
+      Submit
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Design System/Form Control Label Radio 1`] = `
 <div
   style={

src/Flash/fade_transition/FadeTransition.jsx renamed to src/FadeTransition/FadeTransition.jsx

@@ -5,8 +5,7 @@ import { CSSTransition } from 'react-transition-group';
 import './FadeTransition.scss';
 
 const FadeTransition = ({ children, ...props }) => (
-  /* eslint-disable-next-line react/jsx-props-no-spreading */
-  <CSSTransition {...props} classNames="fade-transition" timeout={{ enter: 300, exit: 200 }}>
+  <CSSTransition {...props} classNames="FadeTransition" timeout={{ enter: 300, exit: 200 }}>
     {children}
   </CSSTransition>
 );