From 4ec0e8837e087d060008287d755f3ba661bc654b Mon Sep 17 00:00:00 2001
From: Boima Konuwa <boima.konuwa@cision.com>
Date: Mon, 3 Aug 2020 12:30:19 -0400
Subject: [PATCH 1/3] refactor: Convert EasyPill component to typescript

---
 src/components/EasyPill/EasyPill.module.css   |  4 +
 .../{EasyPill.test.js => EasyPill.test.tsx}   | 18 ++++-
 .../EasyPill/{index.js => EasyPill.tsx}       | 77 ++++++++++---------
 src/components/EasyPill/index.ts              |  1 +
 src/index.ts                                  |  2 +-
 5 files changed, 62 insertions(+), 40 deletions(-)
 create mode 100644 src/components/EasyPill/EasyPill.module.css
 rename src/components/EasyPill/{EasyPill.test.js => EasyPill.test.tsx} (84%)
 rename src/components/EasyPill/{index.js => EasyPill.tsx} (61%)
 create mode 100644 src/components/EasyPill/index.ts

diff --git a/src/components/EasyPill/EasyPill.module.css b/src/components/EasyPill/EasyPill.module.css
new file mode 100644
index 00000000..805883e8
--- /dev/null
+++ b/src/components/EasyPill/EasyPill.module.css
@@ -0,0 +1,4 @@
+.dropdownDeleteIcon {
+  align-self: center;
+  margin-right: var(--rvr-space-md);
+}
\ No newline at end of file
diff --git a/src/components/EasyPill/EasyPill.test.js b/src/components/EasyPill/EasyPill.test.tsx
similarity index 84%
rename from src/components/EasyPill/EasyPill.test.js
rename to src/components/EasyPill/EasyPill.test.tsx
index 96a2b8c9..36ef80f9 100644
--- a/src/components/EasyPill/EasyPill.test.js
+++ b/src/components/EasyPill/EasyPill.test.tsx
@@ -2,17 +2,29 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 
 import Pill from '../Pill';
-import EasyPill from './';
+import EasyPill from '.';
 
 describe('EasyPill', () => {
+  const defaultActions = [
+    {
+      label: 'myAction',
+      onClick: () => {},
+    },
+  ];
   it('renders', () => {
-    shallow(<EasyPill onDelete={() => {}}>EasyPill</EasyPill>);
+    shallow(
+      <EasyPill actions={defaultActions} onDelete={() => {}}>
+        EasyPill
+      </EasyPill>
+    );
   });
 
   describe('with children', () => {
     it('renders its children', () => {
       const wrapper = mount(
-        <EasyPill onDelete={() => {}}>EasyPill 1</EasyPill>
+        <EasyPill actions={defaultActions} onDelete={() => {}}>
+          EasyPill 1
+        </EasyPill>
       );
 
       expect(wrapper.children()).toHaveLength(1);
diff --git a/src/components/EasyPill/index.js b/src/components/EasyPill/EasyPill.tsx
similarity index 61%
rename from src/components/EasyPill/index.js
rename to src/components/EasyPill/EasyPill.tsx
index 100f6ddd..1d3996bb 100644
--- a/src/components/EasyPill/index.js
+++ b/src/components/EasyPill/EasyPill.tsx
@@ -1,13 +1,36 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import Media from '../Media';
 import EasyDropdown from '../EasyDropdown';
 import Icon from '../Icon';
 import Pill from '../Pill';
+import styles from './EasyPill.module.css';
 
-const EasyPillDropdown = ({ actions, onDelete }) => {
-  if (!actions.length) {
+type EasyPillActions = {
+  children?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  group?: string;
+};
+
+interface EasyPillProps {
+  actions: EasyPillActions[];
+  checked?: boolean;
+  children: React.ReactNode;
+  onClick?: () => void;
+  onDelete?: (...args) => void;
+}
+
+interface EasyPillDropdownProps {
+  actions: EasyPillActions[];
+  onDelete?: (...args) => void;
+}
+
+const EasyPillDropdown: React.FC<EasyPillDropdownProps> = ({
+  actions,
+  onDelete = () => {},
+}) => {
+  if (!actions?.length) {
     return null;
   }
 
@@ -19,7 +42,7 @@ const EasyPillDropdown = ({ actions, onDelete }) => {
       label: 'Delete',
       children: (
         <Media>
-          <Media.Item mr="md" alignSelf="center">
+          <Media.Item className={styles.dropdownDeleteIcon}>
             <Icon
               height={16}
               name="trash"
@@ -40,6 +63,11 @@ const EasyPillDropdown = ({ actions, onDelete }) => {
       menuProps={{ position: 'bottomLeft' }}
       menuItems={menuItems}
       defaultIsOpen={false}
+      disabled={false}
+      isOpen={false}
+      onToggle={() => {}}
+      toggleProps={{}}
+      className=""
     >
       {/* The onClick action is handled by EasyDropdown */}
       <div role="button" tabIndex={0}>
@@ -49,19 +77,24 @@ const EasyPillDropdown = ({ actions, onDelete }) => {
   );
 };
 
-export const EasyPill = ({ actions, children, onDelete, ...passedProps }) => {
+export const EasyPill: React.FC<EasyPillProps> = ({
+  actions,
+  children,
+  onDelete,
+  ...passedProps
+}) => {
   return (
     <Pill {...passedProps}>
       {children}
       {passedProps.checked &&
-        (actions.length ? (
-          <Pill.Addon onClick={e => e.stopPropagation()}>
+        (actions?.length ? (
+          <Pill.Addon onClick={(e) => e.stopPropagation()}>
             <EasyPillDropdown actions={actions} onDelete={onDelete} />
           </Pill.Addon>
         ) : (
           onDelete && (
             <Pill.Addon
-              onClick={e => {
+              onClick={(e) => {
                 e.stopPropagation();
                 onDelete(e);
               }}
@@ -74,32 +107,4 @@ export const EasyPill = ({ actions, children, onDelete, ...passedProps }) => {
   );
 };
 
-EasyPill.propTypes = {
-  actions: PropTypes.arrayOf(
-    PropTypes.shape({
-      children: PropTypes.node,
-      label: PropTypes.string.isRequired,
-      onClick: PropTypes.func.isRequired,
-    })
-  ),
-  checked: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  onDelete: PropTypes.func,
-};
-
-EasyPill.defaultProps = {
-  actions: [],
-  checked: false,
-  onDelete: null,
-};
-
-EasyPillDropdown.propTypes = {
-  actions: EasyPill.propTypes.actions.isRequired,
-  onDelete: EasyPill.propTypes.onDelete,
-};
-
-EasyPillDropdown.defaultProps = {
-  onDelete: EasyPill.defaultProps.onDelete,
-};
-
 export default EasyPill;
diff --git a/src/components/EasyPill/index.ts b/src/components/EasyPill/index.ts
new file mode 100644
index 00000000..e07a4c3e
--- /dev/null
+++ b/src/components/EasyPill/index.ts
@@ -0,0 +1 @@
+export { default } from './EasyPill';
diff --git a/src/index.ts b/src/index.ts
index 297b931a..fded128a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,7 +14,7 @@ export { default as Collapse } from './components/Collapse';
 export { default as DeletablePill } from './components/DeletablePill';
 export { default as Dropdown } from './components/Dropdown';
 export { default as EasyDropdown } from './components/EasyDropdown';
-export { default as EasyPill } from './components/EasyPill';
+export { default as EasyPill } from './components/EasyPill/EasyPill';
 export { default as ExpansionPanel } from './components/ExpansionPanel';
 export { default as Grid } from './components/Grid';
 export { default as Icon, iconsMap } from './components/Icon';

From dde30268d27f0e20efcef57bd5a82d43fc3f504c Mon Sep 17 00:00:00 2001
From: Boima Konuwa <boima.konuwa@cision.com>
Date: Tue, 4 Aug 2020 09:29:22 -0400
Subject: [PATCH 2/3] make actions prop in EasyPill optional

---
 src/components/EasyPill/EasyPill.test.tsx | 16 ++--------------
 src/components/EasyPill/EasyPill.tsx      |  2 +-
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/components/EasyPill/EasyPill.test.tsx b/src/components/EasyPill/EasyPill.test.tsx
index 36ef80f9..63fbeaf9 100644
--- a/src/components/EasyPill/EasyPill.test.tsx
+++ b/src/components/EasyPill/EasyPill.test.tsx
@@ -5,26 +5,14 @@ import Pill from '../Pill';
 import EasyPill from '.';
 
 describe('EasyPill', () => {
-  const defaultActions = [
-    {
-      label: 'myAction',
-      onClick: () => {},
-    },
-  ];
   it('renders', () => {
-    shallow(
-      <EasyPill actions={defaultActions} onDelete={() => {}}>
-        EasyPill
-      </EasyPill>
-    );
+    shallow(<EasyPill onDelete={() => {}}>EasyPill</EasyPill>);
   });
 
   describe('with children', () => {
     it('renders its children', () => {
       const wrapper = mount(
-        <EasyPill actions={defaultActions} onDelete={() => {}}>
-          EasyPill 1
-        </EasyPill>
+        <EasyPill onDelete={() => {}}>EasyPill 1</EasyPill>
       );
 
       expect(wrapper.children()).toHaveLength(1);
diff --git a/src/components/EasyPill/EasyPill.tsx b/src/components/EasyPill/EasyPill.tsx
index 1d3996bb..1a8203d3 100644
--- a/src/components/EasyPill/EasyPill.tsx
+++ b/src/components/EasyPill/EasyPill.tsx
@@ -14,7 +14,7 @@ type EasyPillActions = {
 };
 
 interface EasyPillProps {
-  actions: EasyPillActions[];
+  actions?: EasyPillActions[];
   checked?: boolean;
   children: React.ReactNode;
   onClick?: () => void;

From 820ac3047c0ceb186d41f25879c93b421494b087 Mon Sep 17 00:00:00 2001
From: Boima Konuwa <boima.konuwa@cision.com>
Date: Wed, 5 Aug 2020 09:09:56 -0400
Subject: [PATCH 3/3] Removed onClick prop from EasyPillProps interface.
 cleaned up code based on review comments.

---
 src/components/EasyPill/EasyPill.module.css | 2 +-
 src/components/EasyPill/EasyPill.test.tsx   | 2 --
 src/components/EasyPill/EasyPill.tsx        | 7 +++----
 src/index.ts                                | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/EasyPill/EasyPill.module.css b/src/components/EasyPill/EasyPill.module.css
index 805883e8..05d6bd35 100644
--- a/src/components/EasyPill/EasyPill.module.css
+++ b/src/components/EasyPill/EasyPill.module.css
@@ -1,4 +1,4 @@
 .dropdownDeleteIcon {
   align-self: center;
   margin-right: var(--rvr-space-md);
-}
\ No newline at end of file
+}
diff --git a/src/components/EasyPill/EasyPill.test.tsx b/src/components/EasyPill/EasyPill.test.tsx
index 63fbeaf9..d9446ced 100644
--- a/src/components/EasyPill/EasyPill.test.tsx
+++ b/src/components/EasyPill/EasyPill.test.tsx
@@ -35,7 +35,6 @@ describe('EasyPill', () => {
                 onClick: () => {},
               },
             ]}
-            onClick={() => {}}
           >
             EasyPill 1
           </EasyPill>
@@ -62,7 +61,6 @@ describe('EasyPill', () => {
               },
             ]}
             checked
-            onClick={() => {}}
           >
             EasyPill 1
           </EasyPill>
diff --git a/src/components/EasyPill/EasyPill.tsx b/src/components/EasyPill/EasyPill.tsx
index 1a8203d3..eafc0ae3 100644
--- a/src/components/EasyPill/EasyPill.tsx
+++ b/src/components/EasyPill/EasyPill.tsx
@@ -4,20 +4,19 @@ import Media from '../Media';
 import EasyDropdown from '../EasyDropdown';
 import Icon from '../Icon';
 import Pill from '../Pill';
+import { PillProps } from '../Pill/Pill';
 import styles from './EasyPill.module.css';
 
 type EasyPillActions = {
   children?: React.ReactNode;
   label: string;
-  onClick: () => void;
+  onClick: Function;
   group?: string;
 };
 
-interface EasyPillProps {
+interface EasyPillProps extends PillProps {
   actions?: EasyPillActions[];
-  checked?: boolean;
   children: React.ReactNode;
-  onClick?: () => void;
   onDelete?: (...args) => void;
 }
 
diff --git a/src/index.ts b/src/index.ts
index fded128a..297b931a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,7 +14,7 @@ export { default as Collapse } from './components/Collapse';
 export { default as DeletablePill } from './components/DeletablePill';
 export { default as Dropdown } from './components/Dropdown';
 export { default as EasyDropdown } from './components/EasyDropdown';
-export { default as EasyPill } from './components/EasyPill/EasyPill';
+export { default as EasyPill } from './components/EasyPill';
 export { default as ExpansionPanel } from './components/ExpansionPanel';
 export { default as Grid } from './components/Grid';
 export { default as Icon, iconsMap } from './components/Icon';