From 5a500feb06b4be57138d6423fccf7428e57c85cf Mon Sep 17 00:00:00 2001
From: Chris Manciero <christopher.manciero@sap.com>
Date: Tue, 6 Nov 2018 13:48:20 -0500
Subject: [PATCH 1/7] init Multi Input component

---
 src/MultiInput/MultiInput.Component.js | 100 ++++++++++++++
 src/MultiInput/MultiInput.js           | 173 +++++++++++++++++++++++++
 src/Routes.js                          |   2 +
 src/index.js                           |   2 +
 4 files changed, 277 insertions(+)
 create mode 100644 src/MultiInput/MultiInput.Component.js
 create mode 100644 src/MultiInput/MultiInput.js

diff --git a/src/MultiInput/MultiInput.Component.js b/src/MultiInput/MultiInput.Component.js
new file mode 100644
index 000000000..c62a16c34
--- /dev/null
+++ b/src/MultiInput/MultiInput.Component.js
@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import {
+  DocsTile,
+  DocsText,
+  Separator,
+  Header,
+  Description,
+  Import,
+  Properties
+} from '../';
+import { MultiInput } from './MultiInput';
+
+export class MultiInputComponent extends Component {
+  data = [
+    'Apple',
+    'Apricot',
+    'Acai',
+    'African Moringa',
+    'Bearberry',
+    'Bilberry',
+    'Blood orange',
+    'Barbadine',
+    'Barbados cherry',
+    'Balsam Apple',
+    'Chokeberry',
+    'Cranberry',
+    'Cupuacu'
+  ];
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: [],
+      tags: ['Apple']
+    };
+  }
+
+  performTagsUpdate = aTags => {
+    console.log(aTags);
+  };
+
+  multiInputCode = `<MultiInput
+  data={this.data}
+  onTagsUpdate={this.performTagsUpdate}
+  placeHolder="Select a Fruit"
+/>`;
+
+  render() {
+    return (
+      <div>
+        <Header>Multi Input</Header>
+        <Description />
+        <Import module="MultiInput" path="/fundamental-react/src/" />
+
+        <Separator />
+
+        <Properties
+          type="Inputs"
+          properties={[
+            {
+              name: 'data',
+              description:
+                'Array (Required) - Collection of items to display in the list.'
+            },
+            {
+              name: 'placeHolder',
+              description:
+                'String - The text to use as placeholder when no text is entered.'
+            },
+            {
+              name: 'onTagsUpdate',
+              description:
+                'Func - Method to fire on add or remove of tag. Component returns array of tags selected.'
+            }
+          ]}
+        />
+
+        <Separator />
+
+        <h2>Default</h2>
+        <Description>
+          A text input when on focus will show list of items to select.
+        </Description>
+        <DocsTile>
+          <div>
+            <MultiInput
+              data={this.data}
+              onTagsUpdate={this.performTagsUpdate}
+              placeHolder="Select a Fruit"
+            />
+          </div>
+        </DocsTile>
+        <DocsText>{this.multiInputCode}</DocsText>
+
+        <Separator />
+      </div>
+    );
+  }
+}
diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js
new file mode 100644
index 000000000..b32c0798d
--- /dev/null
+++ b/src/MultiInput/MultiInput.js
@@ -0,0 +1,173 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export class MultiInput extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      bShowList: false,
+      tags: []
+    };
+  }
+
+  // create tags to display in dropdown list
+  createTagList = data => {
+    return data && data.length > 0 ? (
+      data.map((item, index) => (
+        <li key={index}>
+          <label htmlFor={index} className="fd-menu__item">
+            <input
+              type="checkbox"
+              className="fd-checkbox"
+              id={index}
+              value={item}
+              onChange={this.updateSelectedTags}
+              checked={this.isChecked(item)}
+            />
+            {item}
+          </label>
+        </li>
+      ))
+    ) : (
+      <li>
+        <label className="fd-menu__item">No results found</label>
+      </li>
+    );
+  };
+
+  // create tag elements to display below input box
+  createTags = tags => {
+    return this.state.tags.map((tag, index) => (
+      <span
+        key={index}
+        className="fd-token"
+        role="button"
+        onClick={this.removeTag}
+      >
+        {tag}
+      </span>
+    ));
+  };
+
+  // add/remove tag to tag collection
+  updateSelectedTags = event => {
+    const tag = event.target.value || event.target.innerText;
+
+    if (tag) {
+      if (this.state.tags.indexOf(tag) === -1) {
+        this.setState(
+          prevState => {
+            const tags = prevState.tags;
+            tags.push(tag);
+
+            return { tags: tags };
+          },
+          () => this.props.onTagsUpdate(this.state.tags)
+        );
+      } else {
+        this.setState(
+          prevState => {
+            let tags = prevState.tags.filter(item => {
+              return item.toLowerCase() !== tag.toLowerCase();
+            });
+
+            return { tags: tags };
+          },
+          () => this.props.onTagsUpdate(this.state.tags)
+        );
+      }
+    }
+  };
+
+  // check to see if tag is should be checked in list
+  isChecked = tag => {
+    if (this.state.tags.indexOf(tag) === -1) {
+      return false;
+    } else {
+      return true;
+    }
+  };
+
+  // remove/close tag
+  removeTag = event => {
+    const tag = event.target.value || event.target.innerText;
+
+    this.setState(
+      prevState => {
+        let tags = prevState.tags.filter(item => {
+          return item.toLowerCase() !== tag.toLowerCase();
+        });
+
+        return { tags: tags };
+      },
+      () => this.props.onTagsUpdate(this.state.tags)
+    );
+  };
+
+  // show/hide tag list drop down
+  showHideTagList = () => {
+    this.setState(prevState => {
+      return { bShowList: !prevState.bShowList };
+    });
+  };
+
+  render() {
+    const { placeHolder, data } = this.props;
+
+    return (
+      <div className="fd-multi-input">
+        <div className="fd-multi-input-field">
+          <div className="fd-popover">
+            <div className="fd-popover__control">
+              <div
+                className="fd-combobox-control"
+                aria-label="Image label"
+                aria-expanded={this.state.bShowList}
+                aria-haspopup="true"
+              >
+                <div className="fd-input-group fd-input-group--after">
+                  <input
+                    type="text"
+                    className="fd-input"
+                    placeholder={placeHolder}
+                    onClick={this.showHideTagList}
+                  />
+                  <span
+                    className="fd-input-group__addon fd-input-group__addon--after
+                            fd-input-group__addon--button"
+                  >
+                    <button
+                      className=" fd-button--light sap-icon--navigation-down-arrow"
+                      onClick={this.showHideTagList}
+                    />
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div
+              className="fd-popover__body fd-popover__body--no-arrow"
+              aria-hidden={!this.state.bShowList}
+            >
+              <nav className="fd-menu">
+                <ul className="fd-menu__list">{this.createTagList(data)}</ul>
+              </nav>
+            </div>
+          </div>
+        </div>
+
+        {this.state.tags ? (
+          <div className="fd-multi-input-tags">{this.createTags()}</div>
+        ) : (
+          ''
+        )}
+      </div>
+    );
+  }
+}
+
+MultiInput.propTypes = {
+  placeHolder: PropTypes.string,
+  data: PropTypes.array.isRequired,
+  onTagsUpdate: PropTypes.func
+};
diff --git a/src/Routes.js b/src/Routes.js
index f049f4bad..a167876d2 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -19,6 +19,7 @@ import { ListGroupComponent } from './ListGroup/ListGroup.Component';
 import { MegaMenuComponent } from './MegaMenu/MegaMenu.Component';
 import { MenuComponent } from './Menu/Menu.Component';
 import { ModalComponent } from './Modal/Modal.Component';
+import { MultiInputComponent } from './MultiInput/MultiInput.Component';
 import { PaginationComponent } from './Pagination/Pagination.Component'
 import { PopoverComponent } from './Popover/Popover.Component';
 import { SearchInputComponent } from './SearchInput/SearchInput.Component';
@@ -53,6 +54,7 @@ export default class Routes extends Component {
                 { url: '/megaMenu', name: 'Mega Menu', component: MegaMenuComponent },
                 { url: '/menu', name: 'Menu', component: MenuComponent },
                 { url: '/modal', name: 'Modal', component: ModalComponent },
+                { url: '/multiInput', name: 'Multi Input', component: MultiInputComponent },
                 { url: '/pagination', name: 'Pagination', component: PaginationComponent },
                 { url: '/popover', name: 'Popover', component: PopoverComponent },
                 { url: '/searchInput', name: 'Search Input', component: SearchInputComponent },
diff --git a/src/index.js b/src/index.js
index 26d734015..3da6d137b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -38,6 +38,7 @@ import { ListGroup, ListGroupItem, ListGroupItemActions, ListGroupItemCheckbox }
 import { MegaMenu, MegaMenuList, MegaMenuGroup } from '../src/MegaMenu/MegaMenu';
 import { Menu, MenuList, MenuItem, MenuGroup } from '../src/Menu/Menu';
 import { Modal } from '../src/Modal/Modal';
+import { MultiInput } from '../src/MultiInput/MultiInput';
 import { Pagination } from '../src/Pagination/Pagination';
 import { Popover, PopoverControl, PopoverBody } from '../src/Popover/Popover';
 import { SearchInput } from '../src/SearchInput/SearchInput';
@@ -119,6 +120,7 @@ export {
     MenuItem,
     MenuGroup,
     Modal,
+    MultiInput,
     Popover,
     PopoverControl,
     PopoverBody,

From 3b070e5551a37b45eacce2dab8f0845f52aba0a0 Mon Sep 17 00:00:00 2001
From: Chris Manciero <christopher.manciero@sap.com>
Date: Tue, 6 Nov 2018 13:51:36 -0500
Subject: [PATCH 2/7] remove unused property

---
 src/MultiInput/MultiInput.Component.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/MultiInput/MultiInput.Component.js b/src/MultiInput/MultiInput.Component.js
index c62a16c34..360577106 100644
--- a/src/MultiInput/MultiInput.Component.js
+++ b/src/MultiInput/MultiInput.Component.js
@@ -31,8 +31,7 @@ export class MultiInputComponent extends Component {
     super(props);
 
     this.state = {
-      data: [],
-      tags: ['Apple']
+      data: []
     };
   }
 

From 687a23c44ec2d98b05d5bb48f13acfa75c851e6f Mon Sep 17 00:00:00 2001
From: Chris Manciero <christopher.manciero@sap.com>
Date: Tue, 6 Nov 2018 14:13:07 -0500
Subject: [PATCH 3/7] add compact style property

---
 src/MultiInput/MultiInput.Component.js | 31 ++++++++++++++++++++++++++
 src/MultiInput/MultiInput.js           | 15 +++++++++----
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/src/MultiInput/MultiInput.Component.js b/src/MultiInput/MultiInput.Component.js
index 360577106..966efdb6e 100644
--- a/src/MultiInput/MultiInput.Component.js
+++ b/src/MultiInput/MultiInput.Component.js
@@ -45,6 +45,13 @@ export class MultiInputComponent extends Component {
   placeHolder="Select a Fruit"
 />`;
 
+  multiInputCompactCode = `<MultiInput
+data={this.data}
+onTagsUpdate={this.performTagsUpdate}
+placeHolder="Select a Fruit"
+compact={true}
+/>`;
+
   render() {
     return (
       <div>
@@ -71,6 +78,11 @@ export class MultiInputComponent extends Component {
               name: 'onTagsUpdate',
               description:
                 'Func - Method to fire on add or remove of tag. Component returns array of tags selected.'
+            },
+            {
+              name: 'compact',
+              description:
+                'Bool - true: display compact style, false: default style'
             }
           ]}
         />
@@ -93,6 +105,25 @@ export class MultiInputComponent extends Component {
         <DocsText>{this.multiInputCode}</DocsText>
 
         <Separator />
+
+        <h2>Compact Style</h2>
+        <Description>
+          A text input when on focus will show list of items to select, but with
+          a compact input box.
+        </Description>
+        <DocsTile>
+          <div>
+            <MultiInput
+              data={this.data}
+              onTagsUpdate={this.performTagsUpdate}
+              placeHolder="Select a Fruit"
+              compact={true}
+            />
+          </div>
+        </DocsTile>
+        <DocsText>{this.multiInputCompactCode}</DocsText>
+
+        <Separator />
       </div>
     );
   }
diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js
index b32c0798d..1338156e5 100644
--- a/src/MultiInput/MultiInput.js
+++ b/src/MultiInput/MultiInput.js
@@ -113,7 +113,13 @@ export class MultiInput extends Component {
   };
 
   render() {
-    const { placeHolder, data } = this.props;
+    const { placeHolder, data, compact } = this.props;
+
+    const inputGroupClassNames = `fd-input-group fd-input-group--after${
+      compact ? ' fd-input-group--compact' : ''
+    }`;
+
+    const inputClassNames = `fd-input${compact ? ' fd-input--compact' : ''}`;
 
     return (
       <div className="fd-multi-input">
@@ -126,10 +132,10 @@ export class MultiInput extends Component {
                 aria-expanded={this.state.bShowList}
                 aria-haspopup="true"
               >
-                <div className="fd-input-group fd-input-group--after">
+                <div className={inputGroupClassNames}>
                   <input
                     type="text"
-                    className="fd-input"
+                    className={inputClassNames}
                     placeholder={placeHolder}
                     onClick={this.showHideTagList}
                   />
@@ -169,5 +175,6 @@ export class MultiInput extends Component {
 MultiInput.propTypes = {
   placeHolder: PropTypes.string,
   data: PropTypes.array.isRequired,
-  onTagsUpdate: PropTypes.func
+  onTagsUpdate: PropTypes.func,
+  compact: PropTypes.boolean
 };

From cd93b23d7e633c6f96ad0b3be0d6829058397684 Mon Sep 17 00:00:00 2001
From: Chris Manciero <christopher.manciero@sap.com>
Date: Tue, 6 Nov 2018 15:14:42 -0500
Subject: [PATCH 4/7] update sample code

---
 src/MultiInput/MultiInput.Component.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/MultiInput/MultiInput.Component.js b/src/MultiInput/MultiInput.Component.js
index 966efdb6e..e48335b20 100644
--- a/src/MultiInput/MultiInput.Component.js
+++ b/src/MultiInput/MultiInput.Component.js
@@ -46,10 +46,10 @@ export class MultiInputComponent extends Component {
 />`;
 
   multiInputCompactCode = `<MultiInput
-data={this.data}
-onTagsUpdate={this.performTagsUpdate}
-placeHolder="Select a Fruit"
-compact={true}
+  data={this.data}
+  onTagsUpdate={this.performTagsUpdate}
+  placeHolder="Select a Fruit"
+  compact={true}
 />`;
 
   render() {

From 713526a9d1b5820b8226f2ed1c4dc6efa2bb936e Mon Sep 17 00:00:00 2001
From: Chris Manciero <christopher.manciero@sap.com>
Date: Wed, 7 Nov 2018 08:21:37 -0500
Subject: [PATCH 5/7] change compact prop type

---
 src/MultiInput/MultiInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/MultiInput/MultiInput.js b/src/MultiInput/MultiInput.js
index 1338156e5..ee321716b 100644
--- a/src/MultiInput/MultiInput.js
+++ b/src/MultiInput/MultiInput.js
@@ -176,5 +176,5 @@ MultiInput.propTypes = {
   placeHolder: PropTypes.string,
   data: PropTypes.array.isRequired,
   onTagsUpdate: PropTypes.func,
-  compact: PropTypes.boolean
+  compact: PropTypes.bool
 };

From b18db88d6065bb74122e285d1977add890127ed7 Mon Sep 17 00:00:00 2001
From: Chris Manciero <christopher.manciero@sap.com>
Date: Wed, 7 Nov 2018 09:45:17 -0500
Subject: [PATCH 6/7] update modal component to have show property

---
 src/Modal/Modal.Component.js | 154 +++++++++++++++++------------------
 src/Modal/Modal.js           |   4 +
 2 files changed, 80 insertions(+), 78 deletions(-)

diff --git a/src/Modal/Modal.Component.js b/src/Modal/Modal.Component.js
index 609401518..b4317e121 100644
--- a/src/Modal/Modal.Component.js
+++ b/src/Modal/Modal.Component.js
@@ -25,7 +25,7 @@ export class ModalComponent extends Component {
     this.txtEmailRef = React.createRef();
   }
 
-  informationModalCode = `<Modal title="Product Added" onClose={this.showHideModal}>
+  informationModalCode = `<Modal show={this.state.bShowInfoModal} title="Product Added" onClose={this.showHideModal}>
   <div>
     <b>The new product have been added to your catalog.</b>
     <br />
@@ -39,7 +39,7 @@ export class ModalComponent extends Component {
   </div>
 </Modal>`;
 
-  confirmationModalCode = `<Modal title="Delete" 
+  confirmationModalCode = `<Modal show={this.state.bShowComfirmModal} title="Delete" 
   onClose={this.showHideConfirmModal}
   actions={
     <React.Fragment>
@@ -59,7 +59,7 @@ export class ModalComponent extends Component {
   </div>
 </Modal>`;
 
-  formModalCode = `<Modal title="Invite user" 
+  formModalCode = `<Modal show={this.state.bShowFormModal} title="Invite user" 
   onClose={this.showHideFormModal}
   actions={
     <React.Fragment>
@@ -162,6 +162,10 @@ export class ModalComponent extends Component {
         <Properties
           type="Inputs"
           properties={[
+            {
+              name: 'show',
+              description: 'Bool - true: show modal, false: hide modal'
+            },
             {
               name: 'title',
               description: 'String (required) - Title for modal dialog box'
@@ -183,23 +187,23 @@ export class ModalComponent extends Component {
         </Description>
         <DocsTile>
           <button onClick={this.showHideModal}>Show Information Modal</button>
-          {this.state.bShowInfoModal ? (
-            <Modal title="Product Added" onClose={this.showHideModal}>
-              <div>
-                <b>The new product have been added to your catalog.</b>
-                <br />
-                <br />
-                Automatic Product ID: <b>PD-3465334</b>
-                <br />
-                <br />
-                Expiration date: <b>13/03/2018</b>
-                <br />
-                <br />
-              </div>
-            </Modal>
-          ) : (
-            ''
-          )}
+          <Modal
+            show={this.state.bShowInfoModal}
+            title="Product Added"
+            onClose={this.showHideModal}
+          >
+            <div>
+              <b>The new product have been added to your catalog.</b>
+              <br />
+              <br />
+              Automatic Product ID: <b>PD-3465334</b>
+              <br />
+              <br />
+              Expiration date: <b>13/03/2018</b>
+              <br />
+              <br />
+            </div>
+          </Modal>
         </DocsTile>
         <DocsText>{this.informationModalCode}</DocsText>
         <Separator />
@@ -214,31 +218,28 @@ export class ModalComponent extends Component {
           <button onClick={this.showHideConfirmModal}>
             Show Confirmation Modal
           </button>
-          {this.state.bShowComfirmModal ? (
-            <Modal
-              title="Delete"
-              onClose={this.showHideConfirmModal}
-              actions={
-                <React.Fragment>
-                  <Button
-                    type="secondary"
-                    onclick={() => this.showHideConfirmModal('No Way')}
-                  >
-                    No Way
-                  </Button>
-                  <Button onclick={() => this.showHideConfirmModal('Sure')}>
-                    Sure
-                  </Button>
-                </React.Fragment>
-              }
-            >
-              <div>
-                Do you want to delete item <b>X</b>?
-              </div>
-            </Modal>
-          ) : (
-            ''
-          )}
+          <Modal
+            show={this.state.bShowComfirmModal}
+            title="Delete"
+            onClose={this.showHideConfirmModal}
+            actions={
+              <React.Fragment>
+                <Button
+                  type="secondary"
+                  onclick={() => this.showHideConfirmModal('No Way')}
+                >
+                  No Way
+                </Button>
+                <Button onclick={() => this.showHideConfirmModal('Sure')}>
+                  Sure
+                </Button>
+              </React.Fragment>
+            }
+          >
+            <div>
+              Do you want to delete item <b>X</b>?
+            </div>
+          </Modal>
         </DocsTile>
         <DocsText>{this.confirmationModalCode}</DocsText>
         <Separator />
@@ -250,40 +251,37 @@ export class ModalComponent extends Component {
         </Description>
         <DocsTile>
           <button onClick={this.showHideFormModal}>Show Form Modal</button>
-          {this.state.bShowFormModal ? (
-            <Modal
-              title="Invite user"
-              onClose={this.showHideFormModal}
-              actions={
-                <React.Fragment>
-                  <Button
-                    type="secondary"
-                    onclick={() => this.showHideFormModal('Cancel')}
-                  >
-                    Cancel
-                  </Button>
-                  <Button onclick={() => this.showHideFormModal('Invite')}>
-                    Invite
-                  </Button>
-                </React.Fragment>
-              }
-            >
-              <div className="fd-form__group">
-                <div className="fd-form__item">
-                  <label className="fd-form__label is-required">Email</label>
-                  <input
-                    className="fd-form__control"
-                    type="text"
-                    value={this.state.emailAddress}
-                    onChange={this.updateEmailAddress}
-                    ref={this.txtEmailRef}
-                  />
-                </div>
+          <Modal
+            show={this.state.bShowFormModal}
+            title="Invite user"
+            onClose={this.showHideFormModal}
+            actions={
+              <React.Fragment>
+                <Button
+                  type="secondary"
+                  onclick={() => this.showHideFormModal('Cancel')}
+                >
+                  Cancel
+                </Button>
+                <Button onclick={() => this.showHideFormModal('Invite')}>
+                  Invite
+                </Button>
+              </React.Fragment>
+            }
+          >
+            <div className="fd-form__group">
+              <div className="fd-form__item">
+                <label className="fd-form__label is-required">Email</label>
+                <input
+                  className="fd-form__control"
+                  type="text"
+                  value={this.state.emailAddress}
+                  onChange={this.updateEmailAddress}
+                  ref={this.txtEmailRef}
+                />
               </div>
-            </Modal>
-          ) : (
-            ''
-          )}
+            </div>
+          </Modal>
         </DocsTile>
         <DocsText>{this.formModalCode}</DocsText>
         <Separator />
diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js
index e1afac02a..5df6fd8b8 100644
--- a/src/Modal/Modal.js
+++ b/src/Modal/Modal.js
@@ -28,6 +28,9 @@ export class Modal extends Component {
   }
 
   render() {
+    if (!this.props.show) {
+      return null;
+    }
     const { children, title, actions } = this.props;
 
     return ReactDOM.createPortal(
@@ -61,5 +64,6 @@ export class Modal extends Component {
 }
 
 Modal.propTypes = {
+  show: PropTypes.bool,
   title: PropTypes.string.isRequired
 };

From 557e9d689bed715b09cc1bf7b2f606e359d2f043 Mon Sep 17 00:00:00 2001
From: Chris Manciero <christopher.manciero@sap.com>
Date: Wed, 7 Nov 2018 13:11:48 -0500
Subject: [PATCH 7/7] update documentation for Modal

---
 src/Modal/Modal.Component.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Modal/Modal.Component.js b/src/Modal/Modal.Component.js
index b4317e121..59f4a3f15 100644
--- a/src/Modal/Modal.Component.js
+++ b/src/Modal/Modal.Component.js
@@ -154,6 +154,10 @@ export class ModalComponent extends Component {
           The modal is a container generally displayed in response to an action.
           It is used for short forms, confirmation messages or to display
           contextual information that does not require a page.
+          <br />
+          To display the Modal control, pass a boolean value to the "show"
+          property of the component. It is recommended to store this value as a
+          state property in the Parent control.
         </Description>
         <Import module="Modal" path="/fundamental-react/src/" />
 
@@ -164,7 +168,7 @@ export class ModalComponent extends Component {
           properties={[
             {
               name: 'show',
-              description: 'Bool - true: show modal, false: hide modal'
+              description: 'Bool - true: show modal, false: hide modal.'
             },
             {
               name: 'title',