From d0d0103bb52cbc032a3b3ea2a2ff5edbf67b0d19 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 17 Sep 2018 09:56:59 -0700
Subject: Add Modal component

---
 ui/app/components/modal/modal-content/index.js     |  1 +
 ui/app/components/modal/modal-content/index.scss   | 19 +++++++++++++++++
 .../modal/modal-content/modal-content.component.js | 24 ++++++++++++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 ui/app/components/modal/modal-content/index.js
 create mode 100644 ui/app/components/modal/modal-content/index.scss
 create mode 100644 ui/app/components/modal/modal-content/modal-content.component.js

(limited to 'ui/app/components/modal/modal-content')

diff --git a/ui/app/components/modal/modal-content/index.js b/ui/app/components/modal/modal-content/index.js
new file mode 100644
index 000000000..733cfb3b8
--- /dev/null
+++ b/ui/app/components/modal/modal-content/index.js
@@ -0,0 +1 @@
+export { default } from './modal-content.component'
diff --git a/ui/app/components/modal/modal-content/index.scss b/ui/app/components/modal/modal-content/index.scss
new file mode 100644
index 000000000..560505b84
--- /dev/null
+++ b/ui/app/components/modal/modal-content/index.scss
@@ -0,0 +1,19 @@
+.modal-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    padding: 16px 0;
+    text-align: center;
+  }
+
+  &__description {
+    text-align: center;
+    font-size: .875rem;
+  }
+}
diff --git a/ui/app/components/modal/modal-content/modal-content.component.js b/ui/app/components/modal/modal-content/modal-content.component.js
new file mode 100644
index 000000000..8beb854e0
--- /dev/null
+++ b/ui/app/components/modal/modal-content/modal-content.component.js
@@ -0,0 +1,24 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+
+export default class ModalContent extends PureComponent {
+  static propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+  }
+
+  render () {
+    const { title, description } = this.props
+
+    return (
+      <div className="modal-content">
+        <div className="modal-content__title">
+          { title }
+        </div>
+        <div className="modal-content__description">
+          { description }
+        </div>
+      </div>
+    )
+  }
+}
-- 
cgit 


From 2cfdc95eebc3e0a878017090f22e5136cff709a6 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Wed, 19 Sep 2018 14:30:52 -0700
Subject: Add unit tests

---
 .../modal/modal-content/modal-content.component.js | 20 +++++++---
 .../tests/modal-content.component.test.js          | 44 ++++++++++++++++++++++
 2 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 ui/app/components/modal/modal-content/tests/modal-content.component.test.js

(limited to 'ui/app/components/modal/modal-content')

diff --git a/ui/app/components/modal/modal-content/modal-content.component.js b/ui/app/components/modal/modal-content/modal-content.component.js
index 8beb854e0..ecec0ee5b 100644
--- a/ui/app/components/modal/modal-content/modal-content.component.js
+++ b/ui/app/components/modal/modal-content/modal-content.component.js
@@ -12,12 +12,20 @@ export default class ModalContent extends PureComponent {
 
     return (
       <div className="modal-content">
-        <div className="modal-content__title">
-          { title }
-        </div>
-        <div className="modal-content__description">
-          { description }
-        </div>
+        {
+          title && (
+            <div className="modal-content__title">
+              { title }
+            </div>
+          )
+        }
+        {
+          description && (
+            <div className="modal-content__description">
+              { description }
+            </div>
+          )
+        }
       </div>
     )
   }
diff --git a/ui/app/components/modal/modal-content/tests/modal-content.component.test.js b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
new file mode 100644
index 000000000..17af09f45
--- /dev/null
+++ b/ui/app/components/modal/modal-content/tests/modal-content.component.test.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import ModalContent from '../modal-content.component'
+
+describe('ModalContent Component', () => {
+  it('should render a title', () => {
+    const wrapper = shallow(
+      <ModalContent
+        title="Modal Title"
+      />
+    )
+
+    assert.equal(wrapper.find('.modal-content__title').length, 1)
+    assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title')
+    assert.equal(wrapper.find('.modal-content__description').length, 0)
+  })
+
+  it('should render a description', () => {
+    const wrapper = shallow(
+      <ModalContent
+        description="Modal Description"
+      />
+    )
+
+    assert.equal(wrapper.find('.modal-content__title').length, 0)
+    assert.equal(wrapper.find('.modal-content__description').length, 1)
+    assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description')
+  })
+
+  it('should render both a title and a description', () => {
+    const wrapper = shallow(
+      <ModalContent
+        title="Modal Title"
+        description="Modal Description"
+      />
+    )
+
+    assert.equal(wrapper.find('.modal-content__title').length, 1)
+    assert.equal(wrapper.find('.modal-content__title').text(), 'Modal Title')
+    assert.equal(wrapper.find('.modal-content__description').length, 1)
+    assert.equal(wrapper.find('.modal-content__description').text(), 'Modal Description')
+  })
+})
-- 
cgit