From ee40522c5b7224697c320692188899db14eb0b3e Mon Sep 17 00:00:00 2001
From: Daniel Rotter <daniel.rotter@gmail.com>
Date: Wed, 12 Feb 2020 17:19:02 +0100
Subject: [PATCH] Extract MultiAutoComplete.Item to separate Chip component to
 reuse as List filter

---
 .../Item.js => Chip/Chip.js}                  | 14 +++++-----
 .../Resources/js/components/Chip/README.md    | 28 +++++++++++++++++++
 .../item.scss => Chip/chip.scss}              | 11 ++++----
 .../Resources/js/components/Chip/index.js     |  4 +++
 .../Item.test.js => Chip/tests/Chip.test.js}  |  8 +++---
 .../tests/__snapshots__/Chip.test.js.snap}    |  4 +--
 .../MultiAutoComplete/MultiAutoComplete.js    |  6 ++--
 .../tests/MultiAutoComplete.test.js           |  4 +--
 .../MultiAutoComplete.test.js.snap            |  8 +++---
 .../MultiAutoComplete.test.js.snap            |  8 +++---
 10 files changed, 64 insertions(+), 31 deletions(-)
 rename src/Sulu/Bundle/AdminBundle/Resources/js/components/{MultiAutoComplete/Item.js => Chip/Chip.js} (66%)
 create mode 100644 src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/README.md
 rename src/Sulu/Bundle/AdminBundle/Resources/js/components/{MultiAutoComplete/item.scss => Chip/chip.scss} (58%)
 create mode 100644 src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/index.js
 rename src/Sulu/Bundle/AdminBundle/Resources/js/components/{MultiAutoComplete/tests/Item.test.js => Chip/tests/Chip.test.js} (59%)
 rename src/Sulu/Bundle/AdminBundle/Resources/js/components/{MultiAutoComplete/tests/__snapshots__/Item.test.js.snap => Chip/tests/__snapshots__/Chip.test.js.snap} (89%)

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/Item.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/Chip.js
similarity index 66%
rename from src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/Item.js
rename to src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/Chip.js
index ca234dc72e5..b64c101f245 100644
--- a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/Item.js
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/Chip.js
@@ -2,7 +2,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import Icon from '../../components/Icon';
-import itemStyles from './item.scss';
+import chipStyles from './chip.scss';
 
 type Props = {|
     children: string,
@@ -11,7 +11,7 @@ type Props = {|
     value: Object,
 |};
 
-export default class Item extends React.Component<Props> {
+export default class Chip extends React.Component<Props> {
     static defaultProps = {
         disabled: false,
     };
@@ -24,17 +24,17 @@ export default class Item extends React.Component<Props> {
     render() {
         const {children, disabled} = this.props;
 
-        const itemClass = classNames(
-            itemStyles.item,
+        const chipClass = classNames(
+            chipStyles.chip,
             {
-                [itemStyles.disabled]: disabled,
+                [chipStyles.disabled]: disabled,
             }
         );
 
         return (
-            <div className={itemClass}>
+            <div className={chipClass}>
                 {children}
-                {!disabled && <Icon className={itemStyles.icon} name="su-times" onClick={this.handleDelete} />}
+                {!disabled && <Icon className={chipStyles.icon} name="su-times" onClick={this.handleDelete} />}
             </div>
         );
     }
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/README.md b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/README.md
new file mode 100644
index 00000000000..24cd16b8ab0
--- /dev/null
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/README.md
@@ -0,0 +1,28 @@
+Chips are compact elements that represent an attribute in its used context. It can e.g. be used to display tags in a tag
+selection or can indicate that a list is filtered.
+
+```javascript
+<div style={{backgroundColor: 'white', padding: '10px'}}>
+    <Chip>Tag 1</Chip>
+</div>
+```
+
+Chips can also be displayed in a disabled state:
+
+```javascript
+<div style={{backgroundColor: 'white', padding: '10px'}}>
+    <Chip disabled={true}>Tag 2</Chip>
+</div>
+```
+
+They also accept a `onDelete` callback, which will render an `Icon` the user can click:
+
+```javascript
+const handleDelete = (value) => {
+    alert('Delete the chip with the value ' + value);
+};
+
+<div style={{backgroundColor: 'white', padding: '10px'}}>
+    <Chip onDelete={handleDelete} value={9}>Remove me!</Chip>
+</div>
+```
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/item.scss b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/chip.scss
similarity index 58%
rename from src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/item.scss
rename to src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/chip.scss
index 522bf084e4b..bde54fd8ea5 100644
--- a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/item.scss
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/chip.scss
@@ -1,11 +1,12 @@
 @import '../../containers/Application/colors.scss';
 
-$itemBackgroundColor: $wildSand;
-$itemDisabledBackgroundColor: $silver;
+$chipBackgroundColor: $wildSand;
+$chipDisabledBackgroundColor: $silver;
 
-.item {
-    background-color: $itemBackgroundColor;
+.chip {
+    background-color: $chipBackgroundColor;
     border-radius: 3px;
+    display: inline-block;
     font-size: 12px;
     line-height: 18px;
     height: 18px;
@@ -18,6 +19,6 @@ $itemDisabledBackgroundColor: $silver;
     }
 
     &.disabled {
-        background-color: $itemDisabledBackgroundColor;
+        background-color: $chipDisabledBackgroundColor;
     }
 }
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/index.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/index.js
new file mode 100644
index 00000000000..20c72cc3529
--- /dev/null
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/index.js
@@ -0,0 +1,4 @@
+// @flow
+import Chip from './Chip';
+
+export default Chip;
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/Item.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/tests/Chip.test.js
similarity index 59%
rename from src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/Item.test.js
rename to src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/tests/Chip.test.js
index 85244e98edc..959be30901d 100644
--- a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/Item.test.js
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/tests/Chip.test.js
@@ -1,20 +1,20 @@
 // @flow
 import React from 'react';
 import {render, shallow} from 'enzyme';
-import Item from '../Item';
+import Chip from '../Chip';
 
 test('Should render item with children', () => {
-    expect(render(<Item onDelete={jest.fn()} value={{}}>Name</Item>)).toMatchSnapshot();
+    expect(render(<Chip onDelete={jest.fn()} value={{}}>Name</Chip>)).toMatchSnapshot();
 });
 
 test('Should render item without icon in disabled state', () => {
-    expect(render(<Item disabled={true} onDelete={jest.fn()} value={{}}>Name</Item>)).toMatchSnapshot();
+    expect(render(<Chip disabled={true} onDelete={jest.fn()} value={{}}>Name</Chip>)).toMatchSnapshot();
 });
 
 test('Should call onDelete callback when the times icon is clicked', () => {
     const deleteSpy = jest.fn();
     const value = {name: 'Test'};
-    const item = shallow(<Item onDelete={deleteSpy} value={value}>Test</Item>);
+    const item = shallow(<Chip onDelete={deleteSpy} value={value}>Test</Chip>);
 
     item.find('Icon').simulate('click');
 
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/__snapshots__/Item.test.js.snap b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/tests/__snapshots__/Chip.test.js.snap
similarity index 89%
rename from src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/__snapshots__/Item.test.js.snap
rename to src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/tests/__snapshots__/Chip.test.js.snap
index 0c204de5b84..97ec116fb50 100644
--- a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/__snapshots__/Item.test.js.snap
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/tests/__snapshots__/Chip.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Should render item with children 1`] = `
 <div
-  class="item"
+  class="chip"
 >
   Name
   <span
@@ -16,7 +16,7 @@ exports[`Should render item with children 1`] = `
 
 exports[`Should render item without icon in disabled state 1`] = `
 <div
-  class="item disabled"
+  class="chip disabled"
 >
   Name
 </div>
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/MultiAutoComplete.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/MultiAutoComplete.js
index 1622293983d..82782134286 100644
--- a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/MultiAutoComplete.js
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/MultiAutoComplete.js
@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import Icon from '../Icon';
 import Loader from '../Loader';
 import AutoCompletePopover from '../AutoCompletePopover';
-import Item from './Item';
+import Chip from '../Chip';
 import multiAutoCompleteStyles from './multiAutoComplete.scss';
 
 type Props = {|
@@ -182,14 +182,14 @@ class MultiAutoComplete extends React.Component<Props> {
                     </div>
                     <div className={multiAutoCompleteStyles.items}>
                         {value.map((item) => (
-                            <Item
+                            <Chip
                                 disabled={disabled}
                                 key={item[idProperty]}
                                 onDelete={this.handleDelete}
                                 value={item}
                             >
                                 {item[displayProperty]}
-                            </Item>
+                            </Chip>
                         ))}
                         <input
                             className={inputClass}
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/MultiAutoComplete.test.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/MultiAutoComplete.test.js
index 18271ab8c06..c7a1676ddd3 100644
--- a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/MultiAutoComplete.test.js
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/MultiAutoComplete.test.js
@@ -82,7 +82,7 @@ test('Render the MultiAutoComplete with open suggestions list', () => {
     multiAutoComplete.instance().inputValue = 'test';
     multiAutoComplete.update();
 
-    expect(multiAutoComplete.find('.item').text()).toEqual('Test');
+    expect(multiAutoComplete.find('.chip').text()).toEqual('Test');
     expect(pretty(document.body ? document.body.innerHTML : '')).toMatchSnapshot();
 });
 
@@ -143,7 +143,7 @@ test('Clicking on delete icon of a suggestion should call the onChange callback
         />
     );
 
-    multiAutoComplete.find('Item').at(1).find('Icon').simulate('click');
+    multiAutoComplete.find('Chip').at(1).find('Icon').simulate('click');
 
     expect(changeSpy).toHaveBeenCalledWith([value[0]]);
 });
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/__snapshots__/MultiAutoComplete.test.js.snap b/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/__snapshots__/MultiAutoComplete.test.js.snap
index 103d26af5dc..38834995f8d 100644
--- a/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/__snapshots__/MultiAutoComplete.test.js.snap
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/__snapshots__/MultiAutoComplete.test.js.snap
@@ -16,7 +16,7 @@ exports[`MultiAutoComplete should render 1`] = `
     class="items"
   >
     <div
-      class="item"
+      class="chip"
     >
       Test
       <span
@@ -27,7 +27,7 @@ exports[`MultiAutoComplete should render 1`] = `
       />
     </div>
     <div
-      class="item"
+      class="chip"
     >
       Test 2
       <span
@@ -61,12 +61,12 @@ exports[`MultiAutoComplete should render in disabled state 1`] = `
     class="items"
   >
     <div
-      class="item disabled"
+      class="chip disabled"
     >
       Test
     </div>
     <div
-      class="item disabled"
+      class="chip disabled"
     >
       Test 2
     </div>
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/containers/MultiAutoComplete/tests/__snapshots__/MultiAutoComplete.test.js.snap b/src/Sulu/Bundle/AdminBundle/Resources/js/containers/MultiAutoComplete/tests/__snapshots__/MultiAutoComplete.test.js.snap
index 27f5342b0f9..5e433923683 100644
--- a/src/Sulu/Bundle/AdminBundle/Resources/js/containers/MultiAutoComplete/tests/__snapshots__/MultiAutoComplete.test.js.snap
+++ b/src/Sulu/Bundle/AdminBundle/Resources/js/containers/MultiAutoComplete/tests/__snapshots__/MultiAutoComplete.test.js.snap
@@ -16,12 +16,12 @@ exports[`Render in disabled state 1`] = `
     class="items"
   >
     <div
-      class="item disabled"
+      class="chip disabled"
     >
       James Bond
     </div>
     <div
-      class="item disabled"
+      class="chip disabled"
     >
       John Doe
     </div>
@@ -80,7 +80,7 @@ exports[`Render with given value 1`] = `
     class="items"
   >
     <div
-      class="item"
+      class="chip"
     >
       James Bond
       <span
@@ -91,7 +91,7 @@ exports[`Render with given value 1`] = `
       />
     </div>
     <div
-      class="item"
+      class="chip"
     >
       John Doe
       <span