UIDS-24 implement review comments

.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 → 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>
 );

src/Flash/fade_transition/FadeTransition.scss → src/FadeTransition/FadeTransition.scss

@@ -1,16 +1,16 @@
-.fade-transition-enter {
+.FadeTransition-enter {
   opacity: 0.01;
 
-  &.fade-transition-enter-active {
+  &.FadeTransition-enter-active {
     opacity: 1;
     transition: opacity 300ms ease-in;
   }
 }
 
-.fade-transition-exit {
+.FadeTransition-exit {
   opacity: 1;
 
-  &.fade-transition-exit-active {
+  &.FadeTransition-exit-active {
     opacity: 0.01;
     transition: opacity 200ms ease-in;
   }

src/Flash/Flash.jsx

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 import classNames from 'classnames';
 
-import FadeTransition from './fade_transition/FadeTransition';
+import FadeTransition from '../FadeTransition/FadeTransition';
 import FlashMessage from './FlashMessage';
 
 import './Flash.scss';
 
 export default function Flash(props) {
   const groupClassNames = classNames(
     'container',
-    'flash',
-    { 'flash--no-header': !props.header },
+    'Flash',
+    { 'Flash--no-header': !props.header },
   );
 
   return (

src/Flash/Flash.scss

@@ -2,26 +2,15 @@
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/alert';
+
 @import '../../scss/theme';
 
 $top-padding: 1.25rem;
 // Flash colors
 $ux-flash-error: $ux-red-100;
 $ux-flash-error-border: $ux-red-200;
 
-$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;
-
-// This zindex is between the header (zindex-fixed) and the modal backdrop (zindex-modal-backdrop)
-$z-index-flash: 1045;
-
-.flash {
+.Flash {
   position: fixed;
   top: $top-padding + $ui-navbar-height;
   left: 50%;

src/Flash/FlashMessage.jsx

@@ -18,6 +18,7 @@ const flashMessageClassName = (type) => {
 
 export default function FlashMessage(props) {
   const handleDismissMessage = () => props.onDismiss(props.id);
+
   return (
     <div className={flashMessageClassName(props.type)}>
       <button

src/Flash/useFlash.js

@@ -28,10 +28,10 @@ const useFlash = (initialMessages = []) => {
   };
 
   return {
-    messages,
     clearMessages,
-    setMessage,
     dismissMessage,
+    messages,
+    setMessage,
   };
 };
 

src/Flash/withFlash.jsx

@@ -8,22 +8,27 @@ export const withFlashPropTypes = {
   setFlashMessage: PropTypes.func,
 };
 
-export default function withFlash(WrappedComponent) {
-  return (props) => {
-    const { messages, setMessage, dismissMessage } = useFlash();
+const WithFlash = ({ WrappedComponent, ...props }) => {
+  const { messages, setMessage, dismissMessage } = useFlash();
+
+  return (
+    <>
+      <Flash
+        messages={messages}
+        onFlashClosed={dismissMessage}
+      />
+      <WrappedComponent
+        setFlashMessage={setMessage}
+        {...props}
+      />
+    </>
+  );
+};
 
-    return (
-      <>
-        <Flash
-          messages={messages}
-          onFlashClosed={dismissMessage}
-        />
-        <WrappedComponent
-          setFlashMessage={setMessage}
-          /* eslint-disable-next-line react/jsx-props-no-spreading */
-          {...props}
-        />
-      </>
-    );
-  };
+WithFlash.propTypes = {
+  WrappedComponent: PropTypes.func.isRequired,
+};
+
+export default function withFlash(WrappedComponent) {
+  return (props) => <WithFlash WrappedComponent={WrappedComponent} {...props} />;
 }

src/index.js

@@ -6,10 +6,13 @@ import InputLabel from './InputLabel/InputLabel';
 import Pill from './Pill/Pill';
 import RadioButton from './RadioButton/RadioButton';
 import RadioButtonGroup from './RadioButtonGroup/RadioButtonGroup';
-import { withFlash, MessageTypes, withFlashPropTypes } from './Flash';
+import {
+ Flash, MessageTypes, withFlash, withFlashPropTypes, useFlash,
+} from './Flash';
 
 export {
   Card,
+  Flash,
   Form,
   FormControlLabel,
   FormGroup,
@@ -18,6 +21,7 @@ export {
   Pill,
   RadioButton,
   RadioButtonGroup,
+  useFlash,
   withFlash,
   withFlashPropTypes,
 };

stories/Flash.stories.jsx

@@ -3,6 +3,8 @@ import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs, text, radios } from '@storybook/addon-knobs';
 import { withPadding } from './decorators';
 
+import '../scss/global.scss';
+
 import { withFlash, MessageTypes, withFlashPropTypes } from '../src/Flash';
 
 let DummyComponent = ({ type, message, setFlashMessage }) => (
@@ -14,17 +16,13 @@ let DummyComponent = ({ type, message, setFlashMessage }) => (
 DummyComponent.propTypes = withFlashPropTypes;
 DummyComponent = withFlash(DummyComponent);
 
-export const flashStory = () => (
+export const FlashMessage = () => (
   <DummyComponent
     type={radios('Message Type', MessageTypes, MessageTypes.SUCCESS)}
     message={text('Message', 'Your action was a success!')}
   />
 );
 
-flashStory.story = {
-  name: 'flash message',
-};
-
 export default {
   title: 'Design System/Flash',
   component: withFlash,