fix: Allow lanes and cards to be dropped in their respective container groups

#30

Author: rcdexta

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style type="text/css">
+    body {
+        font: 14px/18px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    }
+</style>

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>

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`

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' />
   )
 )

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": []
     }
   ]