From 17ec2092da7ffff87cacdbe523941a204068dbf5 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Sun, 13 Jun 2021 18:14:58 +0530
Subject: [PATCH 1/4] :coffin: Remove search functionality.

---
 src/components/Transfer/Transfer.stories.tsx |  2 +-
 src/components/Transfer/Transfer.tsx         | 58 +++++++-------------
 2 files changed, 20 insertions(+), 40 deletions(-)

diff --git a/src/components/Transfer/Transfer.stories.tsx b/src/components/Transfer/Transfer.stories.tsx
index 7065b25..d13175f 100644
--- a/src/components/Transfer/Transfer.stories.tsx
+++ b/src/components/Transfer/Transfer.stories.tsx
@@ -17,7 +17,7 @@ export const Basic: Story<TransferProps<string>> = (args) => {
 
   return (
     <Transfer
-      data={() => ['Bruce', 'Clark', 'Arthur', 'Diana', 'Banner', 'Stark', 'Steve']}
+      data={['Bruce', 'Clark', 'Arthur', 'Diana', 'Banner', 'Stark', 'Steve']}
       values={values}
       onChange={update}
       listDisplayProp={(e) => e}
diff --git a/src/components/Transfer/Transfer.tsx b/src/components/Transfer/Transfer.tsx
index 7855f55..5590f18 100644
--- a/src/components/Transfer/Transfer.tsx
+++ b/src/components/Transfer/Transfer.tsx
@@ -10,15 +10,13 @@ import { SurfaceProps } from '../../typings/surface';
 export interface TransferProps<T> extends SurfaceProps {
   listDisplayProp: (arg: T) => React.ReactNode;
   uniqueIdentifier: (arg: T) => string;
-  data?: (search: string) => Promise<T[]> | T[];
+  data?: T[];
   displayValue?: (value: T) => string;
-  searchValue?: (value: T) => string;
   onChange?: (values: T[]) => void;
   values?: T[];
 }
 
 interface State<T> {
-  search: string;
   data: T[];
   selectedLeft: T[];
   selectedRight: T[];
@@ -31,7 +29,6 @@ export class Transfer<T> extends React.Component<TransferProps<T>, State<T>> {
     super(props);
 
     this.state = {
-      search: '',
       data: [],
       open: false,
       loading: false,
@@ -46,24 +43,9 @@ export class Transfer<T> extends React.Component<TransferProps<T>, State<T>> {
   };
 
   componentDidMount() {
-    this.fetchData();
+    this.setState({ data: this.props.data });
   }
 
-  fetchData = async () => {
-    const { data } = this.props;
-    const { search } = this.state;
-
-    let items = data(search);
-
-    if (!Array.isArray(items)) {
-      this.setState({ loading: true });
-      items = await items;
-      this.setState({ loading: false });
-    }
-
-    this.setState({ data: items });
-  };
-
   isItemMoved = (current: T) => {
     const { uniqueIdentifier, values } = this.props;
 
@@ -99,28 +81,26 @@ export class Transfer<T> extends React.Component<TransferProps<T>, State<T>> {
   };
 
   displayList = () => {
-    const { data, search, loading, selectedLeft } = this.state;
-    const { listDisplayProp, uniqueIdentifier, searchValue } = this.props;
+    const { data, loading, selectedLeft } = this.state;
+    const { listDisplayProp, uniqueIdentifier } = this.props;
 
     return (
       <Skeleton
         isLoading={loading}
         render={() => (
           <List style={{ maxHeight: '300px', overflowY: 'auto' }} border={this.props.border}>
-            {data
-              .filter((v) => searchValue(v).toLowerCase().includes(search))
-              .map(
-                (v) =>
-                  !this.isItemMoved(v) && (
-                    <ListItem
-                      key={uniqueIdentifier(v)}
-                      selected={this.isItemSelected(v, selectedLeft)}
-                      onClick={() => this.makeSelection(v, 'selectedLeft')}
-                    >
-                      {listDisplayProp(v)}
-                    </ListItem>
-                  ),
-              )}
+            {data?.map(
+              (v) =>
+                !this.isItemMoved(v) && (
+                  <ListItem
+                    key={uniqueIdentifier(v)}
+                    selected={this.isItemSelected(v, selectedLeft)}
+                    onClick={() => this.makeSelection(v, 'selectedLeft')}
+                  >
+                    {listDisplayProp(v)}
+                  </ListItem>
+                ),
+            )}
           </List>
         )}
       />
@@ -133,7 +113,7 @@ export class Transfer<T> extends React.Component<TransferProps<T>, State<T>> {
 
     return (
       <List style={{ maxHeight: '300px', overflowY: 'auto' }} border={this.props.border}>
-        {values.map((v) => (
+        {values?.map((v) => (
           <ListItem
             key={uniqueIdentifier(v)}
             selected={this.isItemSelected(v, selectedRight)}
@@ -166,7 +146,7 @@ export class Transfer<T> extends React.Component<TransferProps<T>, State<T>> {
       <Card elevation={elevation} margin={margin} padding={padding} border={border} style={{ minWidth: '500px' }}>
         <Row alignItems="center">
           <Col span={10} alignSelf="stretch">
-            <CardHeader subtitle={`${data.length} item(s)`} />
+            <CardHeader subtitle={`${data?.length} item(s)`} />
             {this.displayList()}
           </Col>
           <Col span={4}>
@@ -188,7 +168,7 @@ export class Transfer<T> extends React.Component<TransferProps<T>, State<T>> {
             />
           </Col>
           <Col span={10} alignSelf="stretch">
-            <CardHeader subtitle={`${this.props.values.length} item(s)`} />
+            <CardHeader subtitle={`${this.props.values?.length} item(s)`} />
             {this.displayValue()}
           </Col>
         </Row>

From d1527774a438b7240e35e443f2b72eed421085c9 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 16 Jun 2021 02:48:12 +0530
Subject: [PATCH 2/4] :bug: Fix transfer storybook bug.

---
 src/components/Transfer/Transfer.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Transfer/Transfer.stories.tsx b/src/components/Transfer/Transfer.stories.tsx
index d13175f..3231162 100644
--- a/src/components/Transfer/Transfer.stories.tsx
+++ b/src/components/Transfer/Transfer.stories.tsx
@@ -17,12 +17,12 @@ export const Basic: Story<TransferProps<string>> = (args) => {
 
   return (
     <Transfer
+      {...args}
       data={['Bruce', 'Clark', 'Arthur', 'Diana', 'Banner', 'Stark', 'Steve']}
       values={values}
       onChange={update}
       listDisplayProp={(e) => e}
       uniqueIdentifier={(e) => e}
-      {...args}
     />
   );
 };

From dee9c6f8293b58c6c20e068287c00bbf10128e49 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 16 Jun 2021 02:50:50 +0530
Subject: [PATCH 3/4] :lipstick: Change transfer to functional component.

---
 src/components/Transfer/Transfer.tsx | 191 +++++++++++----------------
 1 file changed, 74 insertions(+), 117 deletions(-)

diff --git a/src/components/Transfer/Transfer.tsx b/src/components/Transfer/Transfer.tsx
index 5590f18..814daaf 100644
--- a/src/components/Transfer/Transfer.tsx
+++ b/src/components/Transfer/Transfer.tsx
@@ -1,123 +1,81 @@
-import * as React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Row, Col } from '../Grid';
 import { List, ListItem } from '../List';
 import { Button } from '../Button';
 import { CardHeader, Card } from '../Card';
 import { MdKeyboardArrowRight, MdKeyboardArrowLeft } from 'react-icons/md';
-import { Skeleton } from '../Loading';
 import { SurfaceProps } from '../../typings/surface';
 
 export interface TransferProps<T> extends SurfaceProps {
   listDisplayProp: (arg: T) => React.ReactNode;
   uniqueIdentifier: (arg: T) => string;
   data?: T[];
-  displayValue?: (value: T) => string;
   onChange?: (values: T[]) => void;
   values?: T[];
 }
 
-interface State<T> {
-  data: T[];
-  selectedLeft: T[];
-  selectedRight: T[];
-  open: boolean;
-  loading: boolean;
-}
-
-export class Transfer<T> extends React.Component<TransferProps<T>, State<T>> {
-  constructor(props: TransferProps<T>) {
-    super(props);
-
-    this.state = {
-      data: [],
-      open: false,
-      loading: false,
-      selectedRight: [],
-      selectedLeft: [],
-    };
-  }
-
-  static defaultProps = {
-    searchValue: (e) => String(e),
-    elevation: 0,
-  };
+export function Transfer<T>(props: TransferProps<T>) {
+  const { listDisplayProp, uniqueIdentifier, onChange, values } = props;
 
-  componentDidMount() {
-    this.setState({ data: this.props.data });
-  }
+  const [data, updateData] = useState<T[]>([]);
+  const [selectedLeft, updateSelectedLeft] = useState<T[]>([]);
+  const [selectedRight, updateSelectedRight] = useState<T[]>([]);
 
-  isItemMoved = (current: T) => {
-    const { uniqueIdentifier, values } = this.props;
+  useEffect(() => {
+    updateData(props.data);
+  });
 
+  const isItemMoved = (current: T) => {
     if (!values) {
       return false;
     }
-
     return !!values.find((v) => uniqueIdentifier(v) === uniqueIdentifier(current));
   };
 
-  isItemSelected = (current: T, selections: T[]) => {
-    const { uniqueIdentifier } = this.props;
-
+  const isItemSelected = (current: T, selections: T[]) => {
     if (!selections) {
       return false;
     }
-
     return !!selections.find((v) => uniqueIdentifier(v) === uniqueIdentifier(current));
   };
 
-  makeSelection = (current: T, key: 'selectedRight' | 'selectedLeft') => {
-    const { uniqueIdentifier } = this.props;
-
-    let selections = this.state[key];
-
-    if (this.isItemSelected(current, selections)) {
+  const makeSelection = (current: T, key: 'selectedRight' | 'selectedLeft') => {
+    let selections: T[] = key === 'selectedLeft' ? selectedLeft : selectedRight;
+    if (isItemSelected(current, selections)) {
       selections = selections.filter((v) => uniqueIdentifier(v) !== uniqueIdentifier(current));
     } else {
       selections.push(current);
     }
-    const state = { ...this.state, [key]: selections };
-    this.setState(state);
+    key === 'selectedLeft' ? updateSelectedLeft([...selections]) : updateSelectedRight([...selections]);
   };
 
-  displayList = () => {
-    const { data, loading, selectedLeft } = this.state;
-    const { listDisplayProp, uniqueIdentifier } = this.props;
-
+  const displayList = () => {
     return (
-      <Skeleton
-        isLoading={loading}
-        render={() => (
-          <List style={{ maxHeight: '300px', overflowY: 'auto' }} border={this.props.border}>
-            {data?.map(
-              (v) =>
-                !this.isItemMoved(v) && (
-                  <ListItem
-                    key={uniqueIdentifier(v)}
-                    selected={this.isItemSelected(v, selectedLeft)}
-                    onClick={() => this.makeSelection(v, 'selectedLeft')}
-                  >
-                    {listDisplayProp(v)}
-                  </ListItem>
-                ),
-            )}
-          </List>
+      <List style={{ maxHeight: '300px', overflowY: 'auto' }} border={props.border}>
+        {data?.map(
+          (v) =>
+            !isItemMoved(v) && (
+              <ListItem
+                key={uniqueIdentifier(v)}
+                selected={isItemSelected(v, selectedLeft)}
+                onClick={() => makeSelection(v, 'selectedLeft')}
+              >
+                {listDisplayProp(v)}
+              </ListItem>
+            ),
         )}
-      />
+      </List>
     );
   };
 
-  displayValue = () => {
-    const { selectedRight } = this.state;
-    const { listDisplayProp, uniqueIdentifier, values } = this.props;
-
+  const displayValue = () => {
     return (
-      <List style={{ maxHeight: '300px', overflowY: 'auto' }} border={this.props.border}>
+      <List style={{ maxHeight: '300px', overflowY: 'auto' }} border={props.border}>
         {values?.map((v) => (
           <ListItem
             key={uniqueIdentifier(v)}
-            selected={this.isItemSelected(v, selectedRight)}
-            onClick={() => this.makeSelection(v, 'selectedRight')}
+            selected={isItemSelected(v, selectedRight)}
+            onClick={() => makeSelection(v, 'selectedRight')}
           >
             {listDisplayProp(v)}
           </ListItem>
@@ -126,53 +84,52 @@ export class Transfer<T> extends React.Component<TransferProps<T>, State<T>> {
     );
   };
 
-  transfer = (to: 'right' | 'left') => {
-    const { onChange, values, uniqueIdentifier } = this.props;
-    const { selectedLeft, selectedRight } = this.state;
+  const transfer = (to: 'right' | 'left') => {
     if (to === 'right') {
       onChange([...values, ...selectedLeft]);
-      this.setState({ selectedLeft: [] });
+      updateSelectedLeft([]);
+      console.log(values);
       return;
     }
-
     onChange(values.filter((v) => !selectedRight.find((sr) => uniqueIdentifier(sr) === uniqueIdentifier(v))));
-    this.setState({ selectedRight: [] });
+    updateSelectedRight([]);
   };
 
-  render() {
-    const { selectedLeft, selectedRight, data } = this.state;
-    const { padding = { xs: 10, sm: 15, md: 24 }, margin, border, elevation } = this.props;
-    return (
-      <Card elevation={elevation} margin={margin} padding={padding} border={border} style={{ minWidth: '500px' }}>
-        <Row alignItems="center">
-          <Col span={10} alignSelf="stretch">
-            <CardHeader subtitle={`${data?.length} item(s)`} />
-            {this.displayList()}
-          </Col>
-          <Col span={4}>
-            <Button
-              displayBlock
-              flat
-              disabled={!selectedLeft.length}
-              icon={<MdKeyboardArrowRight />}
-              type="primary"
-              onClick={() => this.transfer('right')}
-            />
-            <Button
-              displayBlock
-              flat
-              disabled={!selectedRight.length}
-              icon={<MdKeyboardArrowLeft />}
-              type="primary"
-              onClick={() => this.transfer('left')}
-            />
-          </Col>
-          <Col span={10} alignSelf="stretch">
-            <CardHeader subtitle={`${this.props.values?.length} item(s)`} />
-            {this.displayValue()}
-          </Col>
-        </Row>
-      </Card>
-    );
-  }
+  const { padding = { xs: 10, sm: 15, md: 24 }, margin, border, elevation } = props;
+  return (
+    <Card elevation={elevation} margin={margin} padding={padding} border={border} style={{ minWidth: '500px' }}>
+      <Row alignItems="center">
+        <Col span={10} alignSelf="stretch">
+          <CardHeader subtitle={`${data?.length} item(s)`} />
+          {displayList()}
+        </Col>
+        <Col span={4}>
+          <Button
+            displayBlock
+            flat
+            disabled={!selectedLeft.length}
+            icon={<MdKeyboardArrowRight />}
+            type="primary"
+            onClick={() => transfer('right')}
+          />
+          <Button
+            displayBlock
+            flat
+            disabled={!selectedRight.length}
+            icon={<MdKeyboardArrowLeft />}
+            type="primary"
+            onClick={() => transfer('left')}
+          />
+        </Col>
+        <Col span={10} alignSelf="stretch">
+          <CardHeader subtitle={`${values?.length} item(s)`} />
+          {displayValue()}
+        </Col>
+      </Row>
+    </Card>
+  );
 }
+
+Transfer.defaultProps = {
+  elevation: 0,
+};

From c0b8423a4a4b6532909a255429445c10ded6f3a2 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 16 Jun 2021 16:49:33 +0530
Subject: [PATCH 4/4] :tada: Add test case for Transfer. * Minor bug fix in
 transfer.

---
 .../components/Transfer/Transfer.spec.tsx     | 168 ++++++++++++++++++
 src/components/Transfer/Transfer.tsx          |  36 ++--
 2 files changed, 186 insertions(+), 18 deletions(-)
 create mode 100644 __tests__/components/Transfer/Transfer.spec.tsx

diff --git a/__tests__/components/Transfer/Transfer.spec.tsx b/__tests__/components/Transfer/Transfer.spec.tsx
new file mode 100644
index 0000000..6275cfb
--- /dev/null
+++ b/__tests__/components/Transfer/Transfer.spec.tsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import { Transfer } from '../../../src/components/Transfer';
+
+import '@testing-library/jest-dom';
+import { act, fireEvent, render } from '@testing-library/react';
+
+const CreateTransfer = () => {
+  const [values, update] = React.useState(['Banner', 'Stark', 'Steve']);
+
+  return (
+    <Transfer
+      data={['Bruce', 'Clark', 'Arthur', 'Diana', 'Banner', 'Stark', 'Steve']}
+      values={values}
+      onChange={update}
+      listDisplayProp={(e) => e}
+      uniqueIdentifier={(e) => e}
+    />
+  );
+};
+
+describe('Transfer', () => {
+  it('Should render a transfer', () => {
+    render(<CreateTransfer />);
+
+    const transfer = document.querySelector('.sha-el-transfer');
+    expect(transfer).toHaveStyle(`
+      min-width: 500px;
+    `);
+
+    const listColumn = transfer.querySelector('.list-column');
+    const listHeader = listColumn.querySelector('span');
+    expect(listHeader.innerHTML).toBe('4 item(s)');
+    const lists = listColumn.querySelectorAll('li');
+    expect(lists.length).toBe(4);
+
+    const buttonColumn = transfer.querySelector('.button-column');
+
+    const toRightButton = buttonColumn.querySelectorAll('button')[0];
+    expect(toRightButton.querySelector('svg').innerHTML).toContain('M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'); // Path for MdKeyboardArrowRight
+
+    const toLeftButton = buttonColumn.querySelectorAll('button')[1];
+    expect(toLeftButton.querySelector('svg').innerHTML).toContain('M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z'); // Path for MdKeyboardArrowLeft
+
+    const valueColumn = transfer.querySelector('.value-column');
+    const valueHeader = valueColumn.querySelector('span');
+    expect(valueHeader.innerHTML).toBe('3 item(s)');
+    const values = valueColumn.querySelectorAll('li');
+    expect(values.length).toBe(3);
+  });
+
+  it('Should transfer items to right', () => {
+    render(<CreateTransfer />);
+
+    let listColumn = document.querySelector('.list-column');
+    let lists = listColumn.querySelectorAll('li');
+    act(() => {
+      fireEvent.click(lists[1]);
+    });
+
+    const buttonColumn = document.querySelector('.button-column');
+    const toRightButton = buttonColumn.querySelectorAll('button')[0];
+    act(() => {
+      fireEvent.click(toRightButton);
+    });
+
+    listColumn = document.querySelector('.list-column');
+    lists = listColumn.querySelectorAll('li');
+    expect(lists.length).toBe(3);
+
+    const valueColumn = document.querySelector('.value-column');
+    const values = valueColumn.querySelectorAll('li');
+    expect(values.length).toBe(4);
+  });
+
+  it('Should transfer multiple items to right', () => {
+    render(<CreateTransfer />);
+
+    let listColumn = document.querySelector('.list-column');
+    let lists = listColumn.querySelectorAll('li');
+    act(() => {
+      fireEvent.click(lists[0]);
+      fireEvent.click(lists[1]);
+    });
+
+    const buttonColumn = document.querySelector('.button-column');
+    const toRightButton = buttonColumn.querySelectorAll('button')[0];
+    act(() => {
+      fireEvent.click(toRightButton);
+    });
+
+    listColumn = document.querySelector('.list-column');
+    lists = listColumn.querySelectorAll('li');
+    expect(lists.length).toBe(2);
+
+    const valueColumn = document.querySelector('.value-column');
+    const values = valueColumn.querySelectorAll('li');
+    expect(values.length).toBe(5);
+  });
+
+  it('Should trasfer items to left', () => {
+    render(<CreateTransfer />);
+
+    let valueColumn = document.querySelector('.value-column');
+    let values = valueColumn.querySelectorAll('li');
+    act(() => {
+      fireEvent.click(values[0]);
+    });
+
+    const buttonColumn = document.querySelector('.button-column');
+    const toLeftButton = buttonColumn.querySelectorAll('button')[1];
+    act(() => {
+      fireEvent.click(toLeftButton);
+    });
+
+    valueColumn = document.querySelector('.value-column');
+    values = valueColumn.querySelectorAll('li');
+    expect(values.length).toBe(2);
+
+    const listColumn = document.querySelector('.list-column');
+    const lists = listColumn.querySelectorAll('li');
+    expect(lists.length).toBe(5);
+  });
+
+  it('Should transfer multiple items to left', () => {
+    render(<CreateTransfer />);
+
+    let valueColumn = document.querySelector('.value-column');
+    let values = valueColumn.querySelectorAll('li');
+    act(() => {
+      fireEvent.click(values[0]);
+      fireEvent.click(values[1]);
+    });
+
+    const buttonColumn = document.querySelector('.button-column');
+    const toLeftButton = buttonColumn.querySelectorAll('button')[1];
+    act(() => {
+      fireEvent.click(toLeftButton);
+    });
+
+    valueColumn = document.querySelector('.value-column');
+    values = valueColumn.querySelectorAll('li');
+    expect(values.length).toBe(1);
+
+    const listColumn = document.querySelector('.list-column');
+    const lists = listColumn.querySelectorAll('li');
+    expect(lists.length).toBe(6);
+  });
+
+  it('Should select and unselect an item', () => {
+    render(<CreateTransfer />);
+
+    let listColumn = document.querySelector('.list-column');
+    let lists = listColumn.querySelectorAll('li');
+    act(() => {
+      fireEvent.click(lists[1]);
+    });
+
+    listColumn = document.querySelector('.list-column');
+    lists = listColumn.querySelectorAll('li');
+    act(() => {
+      fireEvent.click(lists[1]);
+    });
+
+    const buttonColumn = document.querySelector('.button-column');
+    const toRightButton = buttonColumn.querySelectorAll('button')[0];
+    expect(toRightButton.disabled).toBeTruthy();
+  });
+});
diff --git a/src/components/Transfer/Transfer.tsx b/src/components/Transfer/Transfer.tsx
index 814daaf..68a0b55 100644
--- a/src/components/Transfer/Transfer.tsx
+++ b/src/components/Transfer/Transfer.tsx
@@ -9,9 +9,9 @@ import { SurfaceProps } from '../../typings/surface';
 export interface TransferProps<T> extends SurfaceProps {
   listDisplayProp: (arg: T) => React.ReactNode;
   uniqueIdentifier: (arg: T) => string;
-  data?: T[];
-  onChange?: (values: T[]) => void;
-  values?: T[];
+  data: T[];
+  onChange: (values: T[]) => void;
+  values: T[];
 }
 
 export function Transfer<T>(props: TransferProps<T>) {
@@ -26,16 +26,10 @@ export function Transfer<T>(props: TransferProps<T>) {
   });
 
   const isItemMoved = (current: T) => {
-    if (!values) {
-      return false;
-    }
     return !!values.find((v) => uniqueIdentifier(v) === uniqueIdentifier(current));
   };
 
   const isItemSelected = (current: T, selections: T[]) => {
-    if (!selections) {
-      return false;
-    }
     return !!selections.find((v) => uniqueIdentifier(v) === uniqueIdentifier(current));
   };
 
@@ -52,7 +46,7 @@ export function Transfer<T>(props: TransferProps<T>) {
   const displayList = () => {
     return (
       <List style={{ maxHeight: '300px', overflowY: 'auto' }} border={props.border}>
-        {data?.map(
+        {data.map(
           (v) =>
             !isItemMoved(v) && (
               <ListItem
@@ -71,7 +65,7 @@ export function Transfer<T>(props: TransferProps<T>) {
   const displayValue = () => {
     return (
       <List style={{ maxHeight: '300px', overflowY: 'auto' }} border={props.border}>
-        {values?.map((v) => (
+        {values.map((v) => (
           <ListItem
             key={uniqueIdentifier(v)}
             selected={isItemSelected(v, selectedRight)}
@@ -88,7 +82,6 @@ export function Transfer<T>(props: TransferProps<T>) {
     if (to === 'right') {
       onChange([...values, ...selectedLeft]);
       updateSelectedLeft([]);
-      console.log(values);
       return;
     }
     onChange(values.filter((v) => !selectedRight.find((sr) => uniqueIdentifier(sr) === uniqueIdentifier(v))));
@@ -97,13 +90,20 @@ export function Transfer<T>(props: TransferProps<T>) {
 
   const { padding = { xs: 10, sm: 15, md: 24 }, margin, border, elevation } = props;
   return (
-    <Card elevation={elevation} margin={margin} padding={padding} border={border} style={{ minWidth: '500px' }}>
+    <Card
+      elevation={elevation}
+      margin={margin}
+      padding={padding}
+      border={border}
+      style={{ minWidth: '500px' }}
+      className="sha-el-transfer"
+    >
       <Row alignItems="center">
-        <Col span={10} alignSelf="stretch">
-          <CardHeader subtitle={`${data?.length} item(s)`} />
+        <Col span={10} alignSelf="stretch" className="list-column">
+          <CardHeader subtitle={`${data.length - values.length} item(s)`} />
           {displayList()}
         </Col>
-        <Col span={4}>
+        <Col span={4} className="button-column">
           <Button
             displayBlock
             flat
@@ -121,8 +121,8 @@ export function Transfer<T>(props: TransferProps<T>) {
             onClick={() => transfer('left')}
           />
         </Col>
-        <Col span={10} alignSelf="stretch">
-          <CardHeader subtitle={`${values?.length} item(s)`} />
+        <Col span={10} alignSelf="stretch" className="value-column">
+          <CardHeader subtitle={`${values.length} item(s)`} />
           {displayValue()}
         </Col>
       </Row>