UIDS-163 updates Alert component, changes Flash into Toast component (#175)

updates Alert component, changes Flash into Toast component, general ui updates, and directory changes

Author: jasonbasuil

scss/elevations.scss

@@ -0,0 +1,6 @@
+$ux-elevations-00:  0rem 0rem 0rem rgba(0, 0, 0, 0.1);
+$ux-elevations-01:  0rem 0.06rem 0.12rem rgba(0, 0, 0, 0.1);
+$ux-elevations-02:  0rem 0.13rem 0.3rem rgba(0, 0, 0, 0.1);
+$ux-elevations-03:  0rem 0.3rem 0.5rem rgba(0, 0, 0, 0.1);
+$ux-elevations-04:  0rem 0.4rem 0.8rem rgba(0, 0, 0, 0.1);
+$ux-elevations-05:  0rem 0.5rem 1rem rgba(0, 0, 0, 0.1);

scss/spacing.scss

@@ -0,0 +1,7 @@
+$ux-spacing-01: 0.25rem;
+$ux-spacing-02: 0.5rem;
+$ux-spacing-03: 0.75rem;
+$ux-spacing-04: 1rem;
+$ux-spacing-05: 1.5rem;
+$ux-spacing-06: 2rem;
+$ux-spacing-07: 3rem;

scss/theme.scss

@@ -2,8 +2,11 @@
 @import './box_shadow';
 @import './buttons';
 @import './colors';
+@import './elevations';
 @import './inputs';
 @import './lists';
 @import './navbar';
+@import './spacing';
 @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 { Toast } from 'src/Toast';
+
+describe('Toast', () => {
+  test('no header classes', () => {
+    const { props } = create(<Toast header messages={[]} />).toJSON();
+
+    expect(props.className).toContain('Toast');
+    expect(props.className).not.toContain('Toast--no-header');
+  });
+
+  test('header classes', () => {
+    const { props } = create(<Toast header={false} messages={[]} />).toJSON();
+
+    expect(props.className).toContain('Toast');
+    expect(props.className).toContain('Toast--no-header');
+  });
+});

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test withToast it can create a new Toast message 1`] = `
+Array [
+  <div
+    className="Alert Alert-success"
+  >
+    <div
+      className="Alert__icon"
+    >
+      <svg
+        aria-hidden="true"
+        className="svg-inline--fa fa-check-circle fa-w-16 "
+        data-icon="check-circle"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        style={Object {}}
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+          fill="currentColor"
+          style={Object {}}
+        />
+      </svg>
+    </div>
+    <div
+      className="Alert__content"
+    >
+      This is just a test...
+    </div>
+    <div
+      className="Alert__close"
+    >
+      <button
+        className="close"
+        onClick={[Function]}
+        type="button"
+      >
+        ×
+      </button>
+    </div>
+  </div>,
+  <div />,
+]
+`;

spec/Flash/withFlash.test.jsx

@@ -1,5 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks';
-import { MessageTypes, useFlash } from 'src/Flash';
+import { MessageTypes } from 'src/Alert';
+import { useToast } from 'src/Toast';
 
 const GENERATED_UUID = '1234';
 
@@ -9,10 +10,10 @@ jest.mock('uuid', () => (
   }
 ));
 
-describe('useFlash', () => {
+describe('useToast', () => {
   test('can set a new message', () => {
     const newMessage = 'I want to say something!';
-    const { result } = renderHook(() => useFlash());
+    const { result } = renderHook(() => useToast());
 
     act(() => {
       result.current.setMessage(MessageTypes.SUCCESS, newMessage);
@@ -27,7 +28,7 @@ describe('useFlash', () => {
 
   test('can dismiss an existing message', () => {
     const newMessage = 'I want to say something else!';
-    const { result } = renderHook(() => useFlash());
+    const { result } = renderHook(() => useToast());
 
     act(() => {
       result.current.setMessage(MessageTypes.SUCCESS, newMessage);
@@ -48,7 +49,7 @@ describe('useFlash', () => {
 
   test('can set two messages', () => {
     const newMessages = ['I want to say', 'so many things'];
-    const { result } = renderHook(() => useFlash());
+    const { result } = renderHook(() => useToast());
 
     newMessages.forEach(
       (message) => {
@@ -76,7 +77,7 @@ describe('useFlash', () => {
         }),
     );
 
-    const { result } = renderHook(() => useFlash(messages));
+    const { result } = renderHook(() => useToast(messages));
     expect(result.current.messages.length).toEqual(2);
 
     act(() => {

spec/Toast/Toast.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { act } from '@testing-library/react-hooks';
+import { create } from 'react-test-renderer';
+
+import { MessageTypes } from 'src/Alert';
+import { withToast } from 'src/Toast';
+
+jest.mock('react-transition-group', () => (
+  {
+    CSSTransition: ({ children }) => children,
+    TransitionGroup: ({ children }) => children,
+  }
+));
+
+const WrappedComponent = () => <div />;
+
+describe('test withToast', () => {
+  test('it can create a new Toast message', async () => {
+    const newMessage = 'This is just a test...';
+    const ComponentWithToast = withToast(WrappedComponent);
+    const toast = create(<ComponentWithToast />);
+    const component = toast.root.findByType(WrappedComponent);
+
+    act(() => {
+      component.props.setToastMessage(MessageTypes.SUCCESS, newMessage);
+    });
+
+    expect(toast).toMatchSnapshot();
+  });
+});