From e2410f4d3512303ccb213de19a717678eab2c022 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Mon, 21 Dec 2020 10:17:47 +0000
Subject: [PATCH 1/2] Rename root-level drag and drop element

---
 fronts-client/src/components/Clipboard.tsx    |  6 +--
 .../components/FrontsEdit/FrontContent.tsx    |  6 +--
 fronts-client/src/lib/dnd/Root.tsx            |  2 +-
 .../src/lib/dnd/__tests__/dnd.spec.tsx        | 42 +++++++++----------
 fronts-client/src/lib/dnd/index.ts            |  2 +-
 5 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/fronts-client/src/components/Clipboard.tsx b/fronts-client/src/components/Clipboard.tsx
index 04593f73d3b..fc4383074ea 100644
--- a/fronts-client/src/components/Clipboard.tsx
+++ b/fronts-client/src/components/Clipboard.tsx
@@ -1,7 +1,7 @@
 import { Dispatch } from 'types/Store';
 import React, { RefObject } from 'react';
 import { connect } from 'react-redux';
-import { Root, Move, PosSpec } from 'lib/dnd';
+import { DragAndDropRoot, Move, PosSpec } from 'lib/dnd';
 import type { State } from 'types/State';
 import { insertCardFromDropEvent } from 'util/collectionUtils';
 import {
@@ -168,7 +168,7 @@ class Clipboard extends React.Component<ClipboardProps> {
                     <ButtonLabel>Clear clipboard</ButtonLabel>
                   </ClearClipboardButton>
                 </ClipboardHeader>
-                <Root
+                <DragAndDropRoot
                   id="clipboard"
                   data-testid="clipboard"
                   style={{ display: 'flex', flex: 1 }}
@@ -227,7 +227,7 @@ class Clipboard extends React.Component<ClipboardProps> {
                       </>
                     )}
                   </ClipboardLevel>
-                </Root>
+                </DragAndDropRoot>
               </ClipboardBody>
             </StyledDragIntentContainer>
           </ClipboardWrapper>
diff --git a/fronts-client/src/components/FrontsEdit/FrontContent.tsx b/fronts-client/src/components/FrontsEdit/FrontContent.tsx
index 1adcc58248a..aac3fca3e04 100644
--- a/fronts-client/src/components/FrontsEdit/FrontContent.tsx
+++ b/fronts-client/src/components/FrontsEdit/FrontContent.tsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import sortBy from 'lodash/sortBy';
 import debounce from 'lodash/debounce';
 import { events } from 'services/GA';
-import { Root, PosSpec, Move } from 'lib/dnd';
+import { DragAndDropRoot, PosSpec, Move } from 'lib/dnd';
 import Collection from './Collection';
 import type { State } from 'types/State';
 import WithDimensions from 'components/util/WithDimensions';
@@ -202,7 +202,7 @@ class FrontContent extends React.Component<FrontProps, FrontState> {
       >
         <WithDimensions>
           {({ width }) => (
-            <Root id={this.props.id} data-testid={this.props.id}>
+            <DragAndDropRoot id={this.props.id} data-testid={this.props.id}>
               {front.collections.map((collectionId) => (
                 <CollectionContainer
                   key={collectionId}
@@ -244,7 +244,7 @@ class FrontContent extends React.Component<FrontProps, FrontState> {
                   />
                 </CollectionContainer>
               ))}
-            </Root>
+            </DragAndDropRoot>
           )}
         </WithDimensions>
       </FrontCollectionsContainer>
diff --git a/fronts-client/src/lib/dnd/Root.tsx b/fronts-client/src/lib/dnd/Root.tsx
index 176cbff53c9..ce30920db40 100644
--- a/fronts-client/src/lib/dnd/Root.tsx
+++ b/fronts-client/src/lib/dnd/Root.tsx
@@ -30,7 +30,7 @@ const RootContainer = styled.div`
   }
 `;
 
-export default class Root extends React.Component<Props, State> {
+export default class DragAndDropRoot extends React.Component<Props, State> {
   public state = { store: createStore() };
   private rootRef = React.createRef<HTMLDivElement>();
 
diff --git a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx
index 55db935f269..de5241f5822 100644
--- a/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx
+++ b/fronts-client/src/lib/dnd/__tests__/dnd.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
-import Root from '../Root';
+import DragAndDropRoot from '../Root';
 import Level from '../Level';
 
 const createDragEvent = (top: boolean) => {
@@ -64,7 +64,7 @@ describe('Curation', () => {
     let edit: any;
 
     setup(
-      <Root id="@@ROOT">
+      <DragAndDropRoot id="@@ROOT">
         <Level
           arr={[{ id: '1' }, { id: '2' }]}
           type="a"
@@ -103,7 +103,7 @@ describe('Curation', () => {
             );
           }}
         </Level>
-      </Root>
+      </DragAndDropRoot>
     );
 
     runDrag(nodeProps)(dropProps);
@@ -121,7 +121,7 @@ describe('Curation', () => {
     let edit: any;
 
     setup(
-      <Root id="@@ROOT">
+      <DragAndDropRoot id="@@ROOT">
         <Level
           arr={[{ id: '1' }, { id: '2' }]}
           type="a"
@@ -157,7 +157,7 @@ describe('Curation', () => {
             );
           }}
         </Level>
-      </Root>
+      </DragAndDropRoot>
     );
 
     runDrag(nodeProps)(dropProps);
@@ -177,7 +177,7 @@ describe('Curation', () => {
     let edit: any;
 
     setup(
-      <Root id="@@ROOT">
+      <DragAndDropRoot id="@@ROOT">
         <Level
           arr={[{ id: '1' }, { id: '2' }]}
           type="a"
@@ -214,7 +214,7 @@ describe('Curation', () => {
             );
           }}
         </Level>
-      </Root>
+      </DragAndDropRoot>
     );
 
     runDrag(nodeProps)(dropProps);
@@ -228,7 +228,7 @@ describe('Curation', () => {
     let to: any;
 
     setup(
-      <Root id="@@ROOT">
+      <DragAndDropRoot id="@@ROOT">
         <Level
           arr={[{ id: '2' }]}
           parentId="1"
@@ -260,7 +260,7 @@ describe('Curation', () => {
             </Level>
           )}
         </Level>
-      </Root>
+      </DragAndDropRoot>
     );
 
     const data = {
@@ -283,7 +283,7 @@ describe('Curation', () => {
     let edit;
 
     setup(
-      <Root id="@@ROOT">
+      <DragAndDropRoot id="@@ROOT">
         <Level
           arr={[{ id: '2' }]}
           type="a"
@@ -317,7 +317,7 @@ describe('Curation', () => {
             );
           }}
         </Level>
-      </Root>
+      </DragAndDropRoot>
     );
 
     runDrag(dragProps)(dropProps);
@@ -331,7 +331,7 @@ describe('Curation', () => {
     let edit: any;
 
     setup(
-      <Root id="@@ROOT">
+      <DragAndDropRoot id="@@ROOT">
         <Level
           parentType="root"
           parentId="root"
@@ -355,7 +355,7 @@ describe('Curation', () => {
             return false;
           }}
         </Level>
-      </Root>
+      </DragAndDropRoot>
     );
 
     runDrag(dragProps)(dropProps);
@@ -369,7 +369,7 @@ describe('Curation', () => {
     let edit: any;
 
     setup(
-      <Root id="@@ROOT">
+      <DragAndDropRoot id="@@ROOT">
         <Level
           arr={[{ id: '1' }]}
           parentType="root"
@@ -390,7 +390,7 @@ describe('Curation', () => {
             return null;
           }}
         </Level>
-      </Root>
+      </DragAndDropRoot>
     );
 
     runDrag(dragProps)(dropProps);
@@ -404,7 +404,7 @@ describe('Curation', () => {
     let edit: any;
 
     setup(
-      <Root id="@@ROOT">
+      <DragAndDropRoot id="@@ROOT">
         <Level
           arr={[{ id: '1' }]}
           parentType="root"
@@ -425,7 +425,7 @@ describe('Curation', () => {
             return null;
           }}
         </Level>
-      </Root>
+      </DragAndDropRoot>
     );
 
     runDrag(dragProps)(dropProps);
@@ -440,7 +440,7 @@ describe('Curation', () => {
 
     setup(
       <div>
-        <Root id="@@ROOT">
+        <DragAndDropRoot id="@@ROOT">
           <Level
             type="a"
             getId={({ id }) => id}
@@ -456,8 +456,8 @@ describe('Curation', () => {
               return null;
             }}
           </Level>
-        </Root>
-        <Root id="@@ROOT2">
+        </DragAndDropRoot>
+        <DragAndDropRoot id="@@ROOT2">
           <Level
             type="a"
             getId={({ id }) => id}
@@ -475,7 +475,7 @@ describe('Curation', () => {
           >
             {() => null}
           </Level>
-        </Root>
+        </DragAndDropRoot>
       </div>
     );
 
diff --git a/fronts-client/src/lib/dnd/index.ts b/fronts-client/src/lib/dnd/index.ts
index a859c2e2f49..90cd32f1bf7 100644
--- a/fronts-client/src/lib/dnd/index.ts
+++ b/fronts-client/src/lib/dnd/index.ts
@@ -1,4 +1,4 @@
-export { default as Root } from './Root';
+export { default as DragAndDropRoot } from './Root';
 export {
   default as Level,
   Move,

From 1a3c5930ce6f4e56f5195387a4c4db5a6b5cfb21 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Mon, 21 Dec 2020 10:37:38 +0000
Subject: [PATCH 2/2] Improve comments in WithDimensions component

---
 fronts-client/src/components/util/WithDimensions.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/fronts-client/src/components/util/WithDimensions.tsx b/fronts-client/src/components/util/WithDimensions.tsx
index ecedacdc641..603b1e378b1 100644
--- a/fronts-client/src/components/util/WithDimensions.tsx
+++ b/fronts-client/src/components/util/WithDimensions.tsx
@@ -13,12 +13,12 @@ interface Props {
 const initialState = { width: undefined, height: undefined } as Dimensions;
 
 /**
- * Supplies the dimensions of the given element to its children.
+ * Supplies the dimensions of the wrapper div provided by this component to its children.
  *
  * ```
- * <WithDimensions element={this.someHTMLElement}>
+ * <WithDimensions>
  *  {({ width, height }) => (
- *    <p>`The dimensions of the given element are ${width} x ${height}`</p>
+ *    <p>`The dimensions of the parent div element are ${width} x ${height}`</p>
  *  )
  * </WithDimensions>
  * ```