From 4f4f1f1ef9e20b6c926dea1df76c3048642d871c Mon Sep 17 00:00:00 2001
From: 3p1cPh4r40h <russaz09@hotmail.com>
Date: Thu, 18 Nov 2021 21:58:25 -0500
Subject: [PATCH 1/3] CEM-2596 Draggable Row

A draggable row based on the 'MiddleCanvas' component logic for reordering 'Draggable' items.
---
 .../DraggableRow/DraggableRow.stories.tsx     |  23 +++
 src/Containers/DraggableRow/DraggableRow.tsx  |  22 +++
 .../DraggableRow/DraggableRowTypes.tsx        |  31 ++++
 .../DroppableContainerContents.tsx            |  27 ++++
 .../DraggableRow/DroppableElement.tsx         | 121 +++++++++++++++
 src/Containers/DraggableRow/Template.tsx      | 139 ++++++++++++++++++
 src/Containers/index.ts                       |   1 +
 7 files changed, 364 insertions(+)
 create mode 100644 src/Containers/DraggableRow/DraggableRow.stories.tsx
 create mode 100644 src/Containers/DraggableRow/DraggableRow.tsx
 create mode 100644 src/Containers/DraggableRow/DraggableRowTypes.tsx
 create mode 100644 src/Containers/DraggableRow/DroppableContainerContents.tsx
 create mode 100644 src/Containers/DraggableRow/DroppableElement.tsx
 create mode 100644 src/Containers/DraggableRow/Template.tsx

diff --git a/src/Containers/DraggableRow/DraggableRow.stories.tsx b/src/Containers/DraggableRow/DraggableRow.stories.tsx
new file mode 100644
index 00000000..1a2ef24d
--- /dev/null
+++ b/src/Containers/DraggableRow/DraggableRow.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { DraggableRow, DraggableRowProps } from '../../index';
+import { createStoryTitle } from '../../Constants';
+
+export default {
+    title: createStoryTitle('Draggable Row'),
+    component: DraggableRow,
+    args: {
+        templatePrefills: {
+            TEMPLATE_ITEM: {
+                caption: 'This is a template caption.'
+            },
+            TEMPLATE_ITEM2: {
+                caption: 'This is another template caption.'
+            },
+        },
+    },
+} as Meta;
+
+export const Basic: Story<DraggableRowProps> = (args) => (
+    <DraggableRow {...args} />
+);
\ No newline at end of file
diff --git a/src/Containers/DraggableRow/DraggableRow.tsx b/src/Containers/DraggableRow/DraggableRow.tsx
new file mode 100644
index 00000000..1e314695
--- /dev/null
+++ b/src/Containers/DraggableRow/DraggableRow.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Template } from './Template';
+import { ITemplatePrefill } from './DraggableRowTypes';
+
+export interface DraggableRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    /*Template of a draggable element that can be reordered*/
+    templatePrefills: ITemplatePrefill;
+}
+
+export const DraggableRow: React.FC<DraggableRowProps> = ({
+    templatePrefills,
+    ...props
+}): React.ReactElement => {
+
+    return (
+        <div {...props}>
+            <Template
+                templatePrefills={templatePrefills}
+            />
+        </div>
+    );
+};
diff --git a/src/Containers/DraggableRow/DraggableRowTypes.tsx b/src/Containers/DraggableRow/DraggableRowTypes.tsx
new file mode 100644
index 00000000..b9beb7e7
--- /dev/null
+++ b/src/Containers/DraggableRow/DraggableRowTypes.tsx
@@ -0,0 +1,31 @@
+export interface ITemplatePrefill {
+    caption: string;
+}
+
+const NO_OF_ITEMS_DELETED = 1;
+const REMOVE_NO_ITEMS = 0;
+
+/**
+ * Reorders the draggable elements in a list
+ * @param {any} list - list of objects to reorder: should add a typing sequence
+ * @param {number} startIndex - index of where the element originates from
+ * @param {number} endIndex - index of where the element will be placed
+ */
+export function reorder(
+    list: ITemplatePrefill[],
+    startIndex: number,
+    endIndex: number,
+): ITemplatePrefill[];
+
+export function reorder(
+    list: string[][],
+    startIndex: number,
+    endIndex: number,
+): string[][];
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function reorder(list: any, startIndex: number, endIndex: number): any {
+    const [removed] = list.splice(startIndex, NO_OF_ITEMS_DELETED);
+    list.splice(endIndex, REMOVE_NO_ITEMS, removed);
+    return list;
+}
\ No newline at end of file
diff --git a/src/Containers/DraggableRow/DroppableContainerContents.tsx b/src/Containers/DraggableRow/DroppableContainerContents.tsx
new file mode 100644
index 00000000..3a1f0c4c
--- /dev/null
+++ b/src/Containers/DraggableRow/DroppableContainerContents.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import { flex } from '../../Utils/Mixins';
+
+export interface DroppableContainerContentsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /*A possible array of strings to be contained in element*/
+    droppableLabel: string[];
+}
+
+export const DroppableContainerContents: React.FC<DroppableContainerContentsProps> = ({
+    droppableLabel,
+    ...props
+}): React.ReactElement => (
+    <Wrapper {...props}>
+        {droppableLabel.map((label) => (
+            <div key={label}>{label}</div>
+        ))}
+    </Wrapper>
+);
+
+const Wrapper = styled.div`
+    ${flex('space-between')};
+    div:only-child {
+        margin: 0 auto;
+    }
+    padding: 10px;
+`;
diff --git a/src/Containers/DraggableRow/DroppableElement.tsx b/src/Containers/DraggableRow/DroppableElement.tsx
new file mode 100644
index 00000000..8ff88846
--- /dev/null
+++ b/src/Containers/DraggableRow/DroppableElement.tsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import {
+    DragDropContext,
+    Droppable,
+    DroppableProvided,
+    Draggable,
+    DraggableProvided,
+    DraggableStateSnapshot,
+    DropResult,
+} from 'react-beautiful-dnd';
+import { reorder } from './DraggableRowTypes';
+import { DroppableContainerContents } from './DroppableContainerContents';
+import { media } from '../../Utils/Mixins';
+
+const FIRST_LABEL = 0;
+
+export interface DroppableElementProps extends React.HTMLAttributes<HTMLDivElement> {
+    /*Array of labels and positions*/
+    droppableLabels: string[][];
+}
+
+export const DroppableElement: React.FC<DroppableElementProps> = ({
+    droppableLabels,
+    ...props
+}): React.ReactElement => {
+    const [items, setItems] = useState(droppableLabels);
+
+    /**
+     * Handles the draggable elements when dragged - required function
+     * @param {DropResult} result - react-beautiful-dnd object that gives access to source and destination ids
+     */
+    const onDrag = (result: DropResult): void => {
+        const { source, destination } = result;
+
+        if (!destination) return;
+
+        const reorderedList = reorder(items, source.index, destination.index);
+        setItems(reorderedList);
+    };
+
+    const renderDraggableComponent = () =>
+        droppableLabels.map((droppableLabel, index) => (
+            <Draggable
+                key={droppableLabel[FIRST_LABEL]}
+                draggableId={droppableLabel[FIRST_LABEL]}
+                index={index}
+            >
+                {(
+                    providedDraggable: DraggableProvided,
+                    snapshotDraggable: DraggableStateSnapshot,
+                ) => (
+                    <div
+                        ref={providedDraggable.innerRef}
+                        {...providedDraggable.draggableProps}
+                        {...providedDraggable.dragHandleProps}
+                        style={providedDraggable.draggableProps.style}
+                    >
+                        <DroppableContainer
+                            isDragging={snapshotDraggable.isDragging}
+                        >
+                            <DroppableContainerContents
+                                droppableLabel={droppableLabel}
+                            />
+                        </DroppableContainer>
+                    </div>
+                )}
+            </Draggable>
+        ));
+
+    return (
+        <div {...props}>
+            <DragDropContext onDragEnd={onDrag}>
+                <Droppable droppableId="templateDroppable">
+                    {(provided: DroppableProvided) => (
+                        <div
+                            ref={provided.innerRef}
+                            {...provided.droppableProps}
+                        >
+                            {renderDraggableComponent()}
+                            {provided.placeholder}
+                        </div>
+                    )}
+                </Droppable>
+            </DragDropContext>
+        </div>
+    );
+};
+
+interface DroppableContainerProps {
+    isDragging?: boolean;
+    isColumn?: boolean;
+}
+
+const DroppableContainer = styled.div<DroppableContainerProps>`
+    border-radius: 4px;
+    margin: 15px;
+    padding: 10px 0 0 0;
+    height: 40px;
+    text-align: left;
+    ${media(
+        'phone',
+        `
+        height: 60px;
+    `,
+    )};
+    ${({ theme, isDragging }): string => `
+        border: ${
+    isDragging
+        ? `solid 1px ${theme.colors.text}`
+        : theme.colors.background
+};
+        background-color: ${theme.colors.input.default};
+        color: ${theme.colors.text}
+    `};
+    ${({ theme }) =>`
+        background-color: ${theme.colors.background};
+        padding-top: 0;
+        height: 10px;
+    `};
+`;
diff --git a/src/Containers/DraggableRow/Template.tsx b/src/Containers/DraggableRow/Template.tsx
new file mode 100644
index 00000000..e63a173a
--- /dev/null
+++ b/src/Containers/DraggableRow/Template.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ReOrderDotsVertical } from '@styled-icons/fluentui-system-filled/ReOrderDotsVertical';
+import {
+    DragDropContext,
+    Droppable,
+    DroppableProvided,
+    Draggable,
+    DraggableProvided,
+    DraggableStateSnapshot,
+    DropResult,
+} from 'react-beautiful-dnd';
+import { ITemplatePrefill, reorder } from './DraggableRowTypes';
+import { DroppableElement } from './DroppableElement';
+import { MainInterface, ResponsiveInterface } from '../../Utils/BaseStyles';
+import { scroll, media } from '../../Utils/Mixins';
+
+export interface TemplateProps extends MainInterface, ResponsiveInterface {
+    /*Managable template that holds information for each element of the draggable row (by default a caption)*/
+    templatePrefills: ITemplatePrefill;
+}
+
+export const Template: React.FC<TemplateProps> = ({
+    templatePrefills,
+    ...props
+}): React.ReactElement => {
+    const [items, setItems] = useState<ITemplatePrefill[]>(
+        Object.values(templatePrefills),
+    );
+
+    /**
+     * Handles the draggable elements when dragged - required function
+     * @param {DropResult} result - react-beautiful-dnd object that gives access to source and destination ids
+     */
+    const onDrag = (result: DropResult): void => {
+        const { source, destination } = result;
+
+        if (!destination) return;
+
+        const reorderedList = reorder(items, source.index, destination.index);
+        setItems(reorderedList);
+    };
+
+
+    const renderDraggableComponent = () =>
+        Object.values(items).map((templatePrefill, index) => (
+            <Draggable
+                key={templatePrefill.caption}
+                draggableId={templatePrefill.caption}
+                index={index}
+            >
+                {(
+                    providedDraggable: DraggableProvided,
+                    snapshotDraggable: DraggableStateSnapshot,
+                ) => (
+                    <DraggableWrapper
+                        ref={providedDraggable.innerRef}
+                        style={providedDraggable.draggableProps.style}
+                        isDragging={snapshotDraggable.isDragging}
+                        {...providedDraggable.draggableProps}
+                    >
+                        <Header>
+                            <div {...providedDraggable.dragHandleProps}>
+                                <Dots as={ReOrderDotsVertical} />
+                            </div>
+                            {templatePrefill.caption}
+                        </Header>
+                        {DroppableElement}
+                    </DraggableWrapper>
+                )}
+            </Draggable>
+        ));
+
+    return (
+        <Wrapper {...props}>
+            <DragDropContext onDragEnd={onDrag}>
+                <Droppable droppableId="templateDroppable">
+                    {(provided: DroppableProvided) => (
+                        <div
+                            ref={provided.innerRef}
+                            {...provided.droppableProps}
+                        >
+                            {renderDraggableComponent()}
+                            {provided.placeholder}
+                        </div>
+                    )}
+                </Droppable>
+            </DragDropContext>
+        </Wrapper>
+    );
+};
+
+const Wrapper = styled.div`
+    ${scroll};
+    width: 30%;
+    ${media(
+        'tablet',
+        `
+        width: 100%
+    `,
+    )};
+    ${({ theme }): string => `
+        font-size: ${theme.font.size.small};
+        background-color: ${theme.colors.background};
+        padding: ${'10px 0 2px 0'};
+    `};
+    font-weight: bold;
+    line-height: 1.25;
+    margin: 3vh 0;
+    padding: auto;
+`;
+
+interface DraggableWrapperProps {
+    isDragging?: boolean;
+}
+
+const DraggableWrapper = styled.div<DraggableWrapperProps>`
+    border-radius: 5px;
+    ${({ theme, isDragging }): string => `
+        background-color: ${
+            isDragging ? theme.colors.border : theme.colors.background
+        };
+    `};
+`;
+
+const Header = styled.div`
+    border-radius: 5px;
+    padding-top: 2px;
+    display: flex;
+    ${({ theme }): string => `
+        font-size: ${theme.font.size.small};
+    `};
+`;
+
+const Dots = styled.svg`
+    height: 20px;
+    padding-right: 5px;
+    padding-bottom: 1px;
+`;
diff --git a/src/Containers/index.ts b/src/Containers/index.ts
index b8dd5e6e..cb10e379 100644
--- a/src/Containers/index.ts
+++ b/src/Containers/index.ts
@@ -82,3 +82,4 @@ export * from './HighlightedText/HighlightedText';
 export * from './NotificationBubble/NotificationBubble';
 export * from './TagGroup/TagGroup';
 export * from './Analytics/Analytics';
+export * from './DraggableRow/DraggableRow';
\ No newline at end of file

From d51f84e90546cef0363ff1af4a39328f170fb418 Mon Sep 17 00:00:00 2001
From: 3p1cPh4r40h <russaz09@hotmail.com>
Date: Wed, 24 Nov 2021 12:52:12 -0500
Subject: [PATCH 2/3] Removed two unnecessary files

DroppableContainerContents and DroppableElement were both left over from adapting the Middle Canvas and were not used in the draggable row.
---
 .../DroppableContainerContents.tsx            |  27 ----
 .../DraggableRow/DroppableElement.tsx         | 121 ------------------
 2 files changed, 148 deletions(-)
 delete mode 100644 src/Containers/DraggableRow/DroppableContainerContents.tsx
 delete mode 100644 src/Containers/DraggableRow/DroppableElement.tsx

diff --git a/src/Containers/DraggableRow/DroppableContainerContents.tsx b/src/Containers/DraggableRow/DroppableContainerContents.tsx
deleted file mode 100644
index 3a1f0c4c..00000000
--- a/src/Containers/DraggableRow/DroppableContainerContents.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { flex } from '../../Utils/Mixins';
-
-export interface DroppableContainerContentsProps extends React.HTMLAttributes<HTMLDivElement> {
-    /*A possible array of strings to be contained in element*/
-    droppableLabel: string[];
-}
-
-export const DroppableContainerContents: React.FC<DroppableContainerContentsProps> = ({
-    droppableLabel,
-    ...props
-}): React.ReactElement => (
-    <Wrapper {...props}>
-        {droppableLabel.map((label) => (
-            <div key={label}>{label}</div>
-        ))}
-    </Wrapper>
-);
-
-const Wrapper = styled.div`
-    ${flex('space-between')};
-    div:only-child {
-        margin: 0 auto;
-    }
-    padding: 10px;
-`;
diff --git a/src/Containers/DraggableRow/DroppableElement.tsx b/src/Containers/DraggableRow/DroppableElement.tsx
deleted file mode 100644
index 8ff88846..00000000
--- a/src/Containers/DraggableRow/DroppableElement.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import {
-    DragDropContext,
-    Droppable,
-    DroppableProvided,
-    Draggable,
-    DraggableProvided,
-    DraggableStateSnapshot,
-    DropResult,
-} from 'react-beautiful-dnd';
-import { reorder } from './DraggableRowTypes';
-import { DroppableContainerContents } from './DroppableContainerContents';
-import { media } from '../../Utils/Mixins';
-
-const FIRST_LABEL = 0;
-
-export interface DroppableElementProps extends React.HTMLAttributes<HTMLDivElement> {
-    /*Array of labels and positions*/
-    droppableLabels: string[][];
-}
-
-export const DroppableElement: React.FC<DroppableElementProps> = ({
-    droppableLabels,
-    ...props
-}): React.ReactElement => {
-    const [items, setItems] = useState(droppableLabels);
-
-    /**
-     * Handles the draggable elements when dragged - required function
-     * @param {DropResult} result - react-beautiful-dnd object that gives access to source and destination ids
-     */
-    const onDrag = (result: DropResult): void => {
-        const { source, destination } = result;
-
-        if (!destination) return;
-
-        const reorderedList = reorder(items, source.index, destination.index);
-        setItems(reorderedList);
-    };
-
-    const renderDraggableComponent = () =>
-        droppableLabels.map((droppableLabel, index) => (
-            <Draggable
-                key={droppableLabel[FIRST_LABEL]}
-                draggableId={droppableLabel[FIRST_LABEL]}
-                index={index}
-            >
-                {(
-                    providedDraggable: DraggableProvided,
-                    snapshotDraggable: DraggableStateSnapshot,
-                ) => (
-                    <div
-                        ref={providedDraggable.innerRef}
-                        {...providedDraggable.draggableProps}
-                        {...providedDraggable.dragHandleProps}
-                        style={providedDraggable.draggableProps.style}
-                    >
-                        <DroppableContainer
-                            isDragging={snapshotDraggable.isDragging}
-                        >
-                            <DroppableContainerContents
-                                droppableLabel={droppableLabel}
-                            />
-                        </DroppableContainer>
-                    </div>
-                )}
-            </Draggable>
-        ));
-
-    return (
-        <div {...props}>
-            <DragDropContext onDragEnd={onDrag}>
-                <Droppable droppableId="templateDroppable">
-                    {(provided: DroppableProvided) => (
-                        <div
-                            ref={provided.innerRef}
-                            {...provided.droppableProps}
-                        >
-                            {renderDraggableComponent()}
-                            {provided.placeholder}
-                        </div>
-                    )}
-                </Droppable>
-            </DragDropContext>
-        </div>
-    );
-};
-
-interface DroppableContainerProps {
-    isDragging?: boolean;
-    isColumn?: boolean;
-}
-
-const DroppableContainer = styled.div<DroppableContainerProps>`
-    border-radius: 4px;
-    margin: 15px;
-    padding: 10px 0 0 0;
-    height: 40px;
-    text-align: left;
-    ${media(
-        'phone',
-        `
-        height: 60px;
-    `,
-    )};
-    ${({ theme, isDragging }): string => `
-        border: ${
-    isDragging
-        ? `solid 1px ${theme.colors.text}`
-        : theme.colors.background
-};
-        background-color: ${theme.colors.input.default};
-        color: ${theme.colors.text}
-    `};
-    ${({ theme }) =>`
-        background-color: ${theme.colors.background};
-        padding-top: 0;
-        height: 10px;
-    `};
-`;

From 6ed4e72900661b01a0ff75a8d00cf522c29ca59a Mon Sep 17 00:00:00 2001
From: 3p1cPh4r40h <russaz09@hotmail.com>
Date: Wed, 24 Nov 2021 13:21:02 -0500
Subject: [PATCH 3/3] Added a draggable boolean

Added a draggable boolean to the element which allows for dragging to be turned on or off.
---
 .../DraggableRow/DraggableRow.stories.tsx     |   1 +
 src/Containers/DraggableRow/DraggableRow.tsx  |   5 +-
 src/Containers/DraggableRow/Template.tsx      | 123 +++++++++---------
 3 files changed, 69 insertions(+), 60 deletions(-)

diff --git a/src/Containers/DraggableRow/DraggableRow.stories.tsx b/src/Containers/DraggableRow/DraggableRow.stories.tsx
index 1a2ef24d..ac856859 100644
--- a/src/Containers/DraggableRow/DraggableRow.stories.tsx
+++ b/src/Containers/DraggableRow/DraggableRow.stories.tsx
@@ -7,6 +7,7 @@ export default {
     title: createStoryTitle('Draggable Row'),
     component: DraggableRow,
     args: {
+        draggable: true,
         templatePrefills: {
             TEMPLATE_ITEM: {
                 caption: 'This is a template caption.'
diff --git a/src/Containers/DraggableRow/DraggableRow.tsx b/src/Containers/DraggableRow/DraggableRow.tsx
index 1e314695..f427a481 100644
--- a/src/Containers/DraggableRow/DraggableRow.tsx
+++ b/src/Containers/DraggableRow/DraggableRow.tsx
@@ -4,11 +4,13 @@ import { ITemplatePrefill } from './DraggableRowTypes';
 
 export interface DraggableRowProps extends React.HTMLAttributes<HTMLDivElement> {
     /*Template of a draggable element that can be reordered*/
-    templatePrefills: ITemplatePrefill;
+    templatePrefills: ITemplatePrefill[];
+    draggable?: boolean;
 }
 
 export const DraggableRow: React.FC<DraggableRowProps> = ({
     templatePrefills,
+    draggable = true,
     ...props
 }): React.ReactElement => {
 
@@ -16,6 +18,7 @@ export const DraggableRow: React.FC<DraggableRowProps> = ({
         <div {...props}>
             <Template
                 templatePrefills={templatePrefills}
+                draggable={draggable}
             />
         </div>
     );
diff --git a/src/Containers/DraggableRow/Template.tsx b/src/Containers/DraggableRow/Template.tsx
index e63a173a..872a4775 100644
--- a/src/Containers/DraggableRow/Template.tsx
+++ b/src/Containers/DraggableRow/Template.tsx
@@ -11,17 +11,17 @@ import {
     DropResult,
 } from 'react-beautiful-dnd';
 import { ITemplatePrefill, reorder } from './DraggableRowTypes';
-import { DroppableElement } from './DroppableElement';
-import { MainInterface, ResponsiveInterface } from '../../Utils/BaseStyles';
-import { scroll, media } from '../../Utils/Mixins';
 
-export interface TemplateProps extends MainInterface, ResponsiveInterface {
+export interface TemplateProps extends React.HTMLAttributes<HTMLDivElement> {
     /*Managable template that holds information for each element of the draggable row (by default a caption)*/
-    templatePrefills: ITemplatePrefill;
+    templatePrefills: ITemplatePrefill[];
+    /*Boolean that toggles if items are draggable or not*/
+    draggable: boolean;
 }
 
 export const Template: React.FC<TemplateProps> = ({
     templatePrefills,
+    draggable,
     ...props
 }): React.ReactElement => {
     const [items, setItems] = useState<ITemplatePrefill[]>(
@@ -41,73 +41,78 @@ export const Template: React.FC<TemplateProps> = ({
         setItems(reorderedList);
     };
 
+    
 
-    const renderDraggableComponent = () =>
-        Object.values(items).map((templatePrefill, index) => (
+    const renderDraggableComponent = (drag:boolean) =>
+        Object.values(items).map((templatePrefill, index) => {
+            const {caption} = templatePrefill;
+            return (
             <Draggable
-                key={templatePrefill.caption}
-                draggableId={templatePrefill.caption}
-                index={index}
-            >
+                key={caption}
+                draggableId={caption}
+                index={index}>
+
                 {(
                     providedDraggable: DraggableProvided,
                     snapshotDraggable: DraggableStateSnapshot,
-                ) => (
-                    <DraggableWrapper
-                        ref={providedDraggable.innerRef}
-                        style={providedDraggable.draggableProps.style}
-                        isDragging={snapshotDraggable.isDragging}
-                        {...providedDraggable.draggableProps}
-                    >
-                        <Header>
-                            <div {...providedDraggable.dragHandleProps}>
-                                <Dots as={ReOrderDotsVertical} />
-                            </div>
-                            {templatePrefill.caption}
-                        </Header>
-                        {DroppableElement}
-                    </DraggableWrapper>
-                )}
+                ) => {
+                    const {innerRef, draggableProps, dragHandleProps} = providedDraggable;
+                    return (
+                        <DraggableWrapper
+                            ref={innerRef}
+                            style={draggableProps.style}
+                            isDragging={snapshotDraggable.isDragging}
+                            {...draggableProps}>
+                            <Header>
+                                {
+                                    drag
+                                    ? <div {...dragHandleProps}> <Icon as={ReOrderDotsVertical} /> </div>
+                                    : <div> <Icon as={ReOrderDotsVertical} /> </div>
+                                }
+                                {caption}
+                            </Header>
+                        </DraggableWrapper>
+                    )}
+                }
             </Draggable>
-        ));
+            )
+        });
 
     return (
-        <Wrapper {...props}>
-            <DragDropContext onDragEnd={onDrag}>
-                <Droppable droppableId="templateDroppable">
-                    {(provided: DroppableProvided) => (
-                        <div
-                            ref={provided.innerRef}
-                            {...provided.droppableProps}
-                        >
-                            {renderDraggableComponent()}
-                            {provided.placeholder}
-                        </div>
-                    )}
-                </Droppable>
-            </DragDropContext>
-        </Wrapper>
+        <ListWrapper>
+            <ElementWrapper {...props}>
+                <DragDropContext onDragEnd={onDrag}>
+                    <Droppable droppableId="templateDroppable">
+                        {(
+                            provided: DroppableProvided,
+                        ) => {
+                            const {innerRef, droppableProps, placeholder} = provided
+                            return (
+                                <div ref={innerRef} {...droppableProps}>
+                                    {renderDraggableComponent(draggable)}
+                                    {placeholder}
+                                </div>
+                            )}
+                        }
+                    </Droppable>
+                </DragDropContext>
+            </ElementWrapper>
+        </ListWrapper>
     );
 };
 
-const Wrapper = styled.div`
-    ${scroll};
-    width: 30%;
-    ${media(
-        'tablet',
-        `
-        width: 100%
-    `,
-    )};
+const ListWrapper = styled.div`
+    width: 100%;
+    margin: 10px;
+`;
+
+const ElementWrapper = styled.div`
+    width: 100%;
+    font-weight: bold;    
     ${({ theme }): string => `
         font-size: ${theme.font.size.small};
         background-color: ${theme.colors.background};
-        padding: ${'10px 0 2px 0'};
     `};
-    font-weight: bold;
-    line-height: 1.25;
-    margin: 3vh 0;
-    padding: auto;
 `;
 
 interface DraggableWrapperProps {
@@ -125,15 +130,15 @@ const DraggableWrapper = styled.div<DraggableWrapperProps>`
 
 const Header = styled.div`
     border-radius: 5px;
-    padding-top: 2px;
     display: flex;
     ${({ theme }): string => `
         font-size: ${theme.font.size.small};
     `};
 `;
 
-const Dots = styled.svg`
+const Icon = styled.svg`
     height: 20px;
     padding-right: 5px;
     padding-bottom: 1px;
 `;
+ 
\ No newline at end of file