From 60393eac306959eca58f5e4066647ab598531820 Mon Sep 17 00:00:00 2001
From: marcJV <marc.vandehey@gmail.com>
Date: Thu, 5 Nov 2020 10:09:52 -0600
Subject: [PATCH] fix(dragndrop): fixed expand icon

---
 .../HierarchyList.story.storyshot             | 465 ------------------
 src/components/List/ListItem/ListItem.jsx     |   5 +
 .../List/ListItem/ListItem.story.jsx          |   1 +
 .../List/ListItem/ListItem.test.jsx           |   2 +
 .../List/ListItem/ListItemWrapper.jsx         |  78 +--
 src/components/List/ListItem/_list-item.scss  |   5 +-
 .../List/SimpleList/SimpleList.test.jsx       |  21 +-
 .../__snapshots__/SimpleList.story.storyshot  | 330 -------------
 8 files changed, 66 insertions(+), 841 deletions(-)

diff --git a/src/components/List/HierarchyList/__snapshots__/HierarchyList.story.storyshot b/src/components/List/HierarchyList/__snapshots__/HierarchyList.story.storyshot
index 092ee1afbf..2d6d7b5709 100644
--- a/src/components/List/HierarchyList/__snapshots__/HierarchyList.story.storyshot
+++ b/src/components/List/HierarchyList/__snapshots__/HierarchyList.story.storyshot
@@ -1311,37 +1311,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -1419,37 +1388,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -1527,37 +1465,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -1635,37 +1542,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -1743,37 +1619,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -1851,37 +1696,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -1943,37 +1757,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -2035,37 +1818,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -2127,37 +1879,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -2219,37 +1940,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -2311,37 +2001,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -2403,37 +2062,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -2495,37 +2123,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -2587,37 +2184,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -2679,37 +2245,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-nested"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "100%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "33%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
diff --git a/src/components/List/ListItem/ListItem.jsx b/src/components/List/ListItem/ListItem.jsx
index 078ac40f35..b6158d2dbc 100644
--- a/src/components/List/ListItem/ListItem.jsx
+++ b/src/components/List/ListItem/ListItem.jsx
@@ -28,6 +28,7 @@ const ListItemPropTypes = {
   isSelectable: PropTypes.bool,
   disabled: PropTypes.bool,
   onSelect: PropTypes.func,
+  renderDropTargets: PropTypes.bool,
   selected: PropTypes.bool,
   expanded: PropTypes.bool,
   value: PropTypes.string.isRequired,
@@ -70,6 +71,7 @@ const ListItemDefaultProps = {
   isSelectable: false,
   disabled: false,
   onSelect: () => {},
+  renderDropTargets: false,
   selected: false,
   expanded: false,
   secondaryValue: null,
@@ -100,6 +102,7 @@ const ListItem = ({
   value,
   secondaryValue,
   rowActions,
+  renderDropTargets,
   icon,
   iconPosition, // or "right"
   onItemMoved,
@@ -195,6 +198,7 @@ const ListItem = ({
         onItemMoved,
         itemWillMove,
         disabled,
+        renderDropTargets,
       }}>
       {renderDragPreview()}
       {dragIcon()}
@@ -310,6 +314,7 @@ const ds = DragSource(ItemType, cardSource, (connect, monitor) => ({
   connectDragSource: connect.dragSource(),
   connectDragPreview: connect.dragPreview(),
   isDragging: monitor.isDragging(),
+  renderDropTargets: monitor.getItemType() !== null, // render drop targets if anything is dragging
 }));
 
 ListItem.propTypes = ListItemPropTypes;
diff --git a/src/components/List/ListItem/ListItem.story.jsx b/src/components/List/ListItem/ListItem.story.jsx
index ebbe976cfe..18c76a2a14 100644
--- a/src/components/List/ListItem/ListItem.story.jsx
+++ b/src/components/List/ListItem/ListItem.story.jsx
@@ -18,6 +18,7 @@ const dndProps = {
   index: 0,
   dragPreviewText: '',
   isDragging: false,
+  renderDropTargets: false,
   onItemMoved: identity,
   itemWillMove: identity,
 };
diff --git a/src/components/List/ListItem/ListItem.test.jsx b/src/components/List/ListItem/ListItem.test.jsx
index 55525abe9a..456dd25d11 100644
--- a/src/components/List/ListItem/ListItem.test.jsx
+++ b/src/components/List/ListItem/ListItem.test.jsx
@@ -211,6 +211,7 @@ describe('ListItem', () => {
       id: '1',
       value: 'test',
       editingStyle: 'single-nesting',
+      renderDropTargets: true,
     };
 
     const Wrapped = wrapInTestContext(UnconnectedListItem, listItemProps);
@@ -228,6 +229,7 @@ describe('ListItem', () => {
       value: 'test',
       editingStyle: 'single',
       index: '0',
+      renderDropTargets: true,
     };
 
     const Wrapped = wrapInTestContext(UnconnectedListItem, listItemProps);
diff --git a/src/components/List/ListItem/ListItemWrapper.jsx b/src/components/List/ListItem/ListItemWrapper.jsx
index 6a5ea8066d..a02e6c33d0 100644
--- a/src/components/List/ListItem/ListItemWrapper.jsx
+++ b/src/components/List/ListItem/ListItemWrapper.jsx
@@ -19,6 +19,7 @@ const ListItemWrapper = ({
   onSelect,
   selected,
   isDragging,
+  renderDropTargets,
   isLargeRow,
   children,
   connectDragSource,
@@ -68,7 +69,7 @@ const ListItemWrapper = ({
         className={classnames(
           `${iotPrefix}--list-item-editable--drag-container`,
           {
-            [`${iotPrefix}--list-item-editable-dragging`]: isDragging,
+            [`${iotPrefix}--list-item-editable--dragging`]: isDragging,
           }
         )}
         ref={(instance) => {
@@ -76,48 +77,46 @@ const ListItemWrapper = ({
             connectDragSource(instance);
           }
         }}>
-        <div
-          className={classnames(
-            `${iotPrefix}--list-item-editable--drop-targets`,
+        {renderDropTargets && (
+          <div
+            className={classnames(
+              `${iotPrefix}--list-item-editable--drop-targets`,
+              {
+                [`${iotPrefix}--list-item__large`]: isLargeRow,
+              }
+            )}>
             {
-              [`${iotPrefix}--list-item__large`]: isLargeRow,
-            }
-          )}>
-          {
-            // Renders Nested location only if nesting is allowed
-
-            canNest ? (
-              <ListTarget
-                id={id}
-                isDragging={isDragging}
-                targetPosition={DropLocation.Nested}
-                targetSize={TargetSize.Full}
-                itemWillMove={itemWillMove}
-                onItemMoved={onItemMoved}
-              />
-            ) : null
-          }
+              // Renders Nested location only if nesting is allowed
 
-          <ListTarget
-            id={id}
-            isDragging={isDragging}
-            targetPosition={DropLocation.Above}
-            itemWillMove={itemWillMove}
-            targetSize={canNest ? TargetSize.Third : TargetSize.Half}
-            onItemMoved={onItemMoved}
-          />
+              canNest ? (
+                <ListTarget
+                  id={id}
+                  targetPosition={DropLocation.Nested}
+                  targetSize={TargetSize.Full}
+                  itemWillMove={itemWillMove}
+                  onItemMoved={onItemMoved}
+                />
+              ) : null
+            }
 
-          <ListTarget
-            id={id}
-            isDragging={isDragging}
-            targetPosition={DropLocation.Below}
-            itemWillMove={itemWillMove}
-            targetOverride={expanded ? DropLocation.Nested : null} // If item is expanded then the bottom target will nest
-            targetSize={canNest ? TargetSize.Third : TargetSize.Half}
-            onItemMoved={onItemMoved}
-          />
-        </div>
+            <ListTarget
+              id={id}
+              targetPosition={DropLocation.Above}
+              itemWillMove={itemWillMove}
+              targetSize={canNest ? TargetSize.Third : TargetSize.Half}
+              onItemMoved={onItemMoved}
+            />
 
+            <ListTarget
+              id={id}
+              targetPosition={DropLocation.Below}
+              itemWillMove={itemWillMove}
+              targetOverride={expanded ? DropLocation.Nested : null} // If item is expanded then the bottom target will nest
+              targetSize={canNest ? TargetSize.Third : TargetSize.Half}
+              onItemMoved={onItemMoved}
+            />
+          </div>
+        )}
         {body}
       </div>
     );
@@ -140,6 +139,7 @@ const ListItemWrapperProps = {
   isSelectable: PropTypes.bool.isRequired,
   isDragging: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
+  renderDropTargets: PropTypes.bool.isRequired,
   selected: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
   onItemMoved: PropTypes.func.isRequired,
diff --git a/src/components/List/ListItem/_list-item.scss b/src/components/List/ListItem/_list-item.scss
index afff5dbe6a..0283c307c3 100644
--- a/src/components/List/ListItem/_list-item.scss
+++ b/src/components/List/ListItem/_list-item.scss
@@ -16,6 +16,8 @@
     }
 
     &:active {
+      background: $hover-ui;
+
       cursor: grabbing;
     }
   }
@@ -73,7 +75,7 @@
     z-index: -100;
   }
 
-  &-dragging {
+  &--dragging {
     background: $hover-ui;
     cursor: grabbing;
   }
@@ -85,7 +87,6 @@
 }
 
 .#{$iot-prefix}--list-item {
-  background: $ui-01;
   border-bottom: 1px solid $ui-03;
   display: flex;
   height: rem(40px);
diff --git a/src/components/List/SimpleList/SimpleList.test.jsx b/src/components/List/SimpleList/SimpleList.test.jsx
index 87c881ad02..321789af57 100644
--- a/src/components/List/SimpleList/SimpleList.test.jsx
+++ b/src/components/List/SimpleList/SimpleList.test.jsx
@@ -211,7 +211,7 @@ describe('SimpleList', () => {
 
   it('SimpleList reorder', () => {
     let newData = null;
-    render(
+    const { rerender } = render(
       <SimpleList
         title="Simple list"
         items={getListItems(5)}
@@ -228,15 +228,26 @@ describe('SimpleList', () => {
     expect(firstItem).toBeInTheDocument();
     expect(listItems.length).toEqual(5);
 
-    const targets = within(listItems[1]).getAllByTestId('list-target');
-
-    expect(targets.length).toEqual(2);
-
     fireEvent.dragStart(firstItem, {
       dataTransfer: {
         dropEffect: 'move',
       },
     });
+
+    rerender(
+      <SimpleList
+        title="Simple list"
+        items={getListItems(5)}
+        editingStyle={EditingStyle.Multiple}
+        onListUpdated={(newList) => {
+          newData = newList;
+        }}
+      />
+    );
+
+    const targets = within(listItems[1]).getAllByTestId('list-target');
+    expect(targets.length).toEqual(2);
+
     fireEvent.dragEnter(targets[1], {
       dataTransfer: {
         dropEffect: 'move',
diff --git a/src/components/List/SimpleList/__snapshots__/SimpleList.story.storyshot b/src/components/List/SimpleList/__snapshots__/SimpleList.story.storyshot
index 46e0be3804..6091d10276 100644
--- a/src/components/List/SimpleList/__snapshots__/SimpleList.story.storyshot
+++ b/src/components/List/SimpleList/__snapshots__/SimpleList.story.storyshot
@@ -6422,28 +6422,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -6497,28 +6475,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -6572,28 +6528,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -6647,28 +6581,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -6722,28 +6634,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -6797,28 +6687,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -6872,28 +6740,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -6947,28 +6793,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -7022,28 +6846,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -7097,28 +6899,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -7172,28 +6952,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -7247,28 +7005,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -7322,28 +7058,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -7397,28 +7111,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >
@@ -7472,28 +7164,6 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper
               className="iot--list-item-editable--drag-container"
               role="listitem"
             >
-              <div
-                className="iot--list-item-editable--drop-targets"
-              >
-                <div
-                  className="iot--list-item-editable--drop-target-above"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-                <div
-                  className="iot--list-item-editable--drop-target-below"
-                  data-testid="list-target"
-                  style={
-                    Object {
-                      "height": "50%",
-                    }
-                  }
-                />
-              </div>
               <div
                 className="iot--list-item iot--list-item-editable"
               >