From e9c52bff570fcad29c86335c6f77293b9b3da138 Mon Sep 17 00:00:00 2001
From: RC <rc.chandru@gmail.com>
Date: Sun, 6 May 2018 12:43:08 -0700
Subject: [PATCH] fix: Allow lanes and cards to be dropped in their respective
 container groups

https://github.com/rcdexta/react-trello/issues/30
---
 .storybook/preview-head.html  | 5 +++++
 src/components/Lane.js        | 8 ++++++--
 src/styles/Base.js            | 2 +-
 stories/BoardStyling.story.js | 2 +-
 stories/data/drag-drop.json   | 5 +++--
 5 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 .storybook/preview-head.html

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 000000000..0c2c0fdab
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,5 @@
+<style type="text/css">
+    body {
+        font: 14px/18px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/Lane.js b/src/components/Lane.js
index dedc6f065..c07af0485 100644
--- a/src/components/Lane.js
+++ b/src/components/Lane.js
@@ -128,6 +128,10 @@ class Lane extends Component {
     handleDragStart && handleDragStart(payload.id, payload.laneId)
   }
 
+  shouldAcceptDrop = (sourceContainerOptions) => {
+    return this.props.droppable && sourceContainerOptions.groupName === 'TrelloLane'
+  }
+
   onDragEnd = (laneId, result) => {
     const {handleDragEnd} = this.props
     const {addedIndex, payload} = result
@@ -150,7 +154,6 @@ class Lane extends Component {
       tagStyle,
       cardStyle,
       draggable,
-      droppable,
       cards,
       id
     } = this.props
@@ -181,12 +184,13 @@ class Lane extends Component {
     return (
       <ScrollableLane innerRef={this.laneDidMount} isDraggingOver={isDraggingOver}>
         <Container
+          orientation="vertical"
           groupName="TrelloLane"
           onDragStart={this.onDragStart}
           onDrop={e => this.onDragEnd(id, e)}
           onDragEnter={() => this.setState({isDraggingOver: true})}
           onDragLeave={() => this.setState({isDraggingOver: false})}
-          shouldAcceptDrop={() => droppable}
+          shouldAcceptDrop={this.shouldAcceptDrop}
           getChildPayload={index => this.props.getCardDetails(id, index)}>
           {cardList}
         </Container>
diff --git a/src/styles/Base.js b/src/styles/Base.js
index 8dc607007..fe1e7d532 100644
--- a/src/styles/Base.js
+++ b/src/styles/Base.js
@@ -17,7 +17,6 @@ export const BoardDiv = styled.div`
   background-color: #23719f;
   overflow-y: hidden;
   padding: 5px;
-  font: 14px/18px 'Helvetica Neue', Arial, Helvetica, sans-serif;
   color: #393939;
   display: flex;
   flex-direction: row;
@@ -120,6 +119,7 @@ export const CardRightContent = styled(RightContent)`
 export const Detail = styled.div`
   font-size: 12px;
   color: #4d4d4d;
+  white-space: normal;
 `
 
 export const Footer = styled.div`
diff --git a/stories/BoardStyling.story.js b/stories/BoardStyling.story.js
index d4a202bcd..9b8255783 100644
--- a/stories/BoardStyling.story.js
+++ b/stories/BoardStyling.story.js
@@ -11,6 +11,6 @@ const data = require('./data/base.json')
 storiesOf('Advanced Features', module).add(
   'Board Styling',
   withInfo('Change the background and other css styles for the board container')(() =>
-    <Board data={data} style={{padding: '30px 20px'}} className='boardContainer' />
+    <Board data={data} style={{padding: '30px 20px', fontFamily: 'Verdana'}} className='boardContainer' />
   )
 )
diff --git a/stories/data/drag-drop.json b/stories/data/drag-drop.json
index 644d15c0a..c35409981 100644
--- a/stories/data/drag-drop.json
+++ b/stories/data/drag-drop.json
@@ -46,9 +46,10 @@
       ]
     },
     {
-      "id": "BLOCKED",
-      "title": "Blocked (Droppable)",
+      "id": "COMPLETED",
+      "title": "Completed (Droppable)",
       "label": "0/0",
+      "style": {"width": 280},
       "cards": []
     }
   ]