Extract MultiAutoComplete.Item to separate Chip component to reuse as…

… List filter

src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/Item.js → 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>
         );
     }

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>
+```

src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/item.scss → 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;
     }
 }

src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/index.js

@@ -0,0 +1,4 @@
+// @flow
+import Chip from './Chip';
+
+export default Chip;

src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/Item.test.js → 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');
 

src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiAutoComplete/tests/__snapshots__/Item.test.js.snap → 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>

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}

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]]);
 });

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>

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