fix(Styling with classnames): All component styles can be overridden with css classnames. Also, exam

#123

Author: rcdexta

README.md

@@ -146,6 +146,13 @@ eventBus.publish({type: 'UPDATE_LANES', lanes: newLaneData})
 
 The first event in the above example will move the card `Buy Milk` from the planned lane to completed lane. We expect that this library can be wired to a backend push api that can alter the state of the board in realtime.
 
+### Styling
+
+There are two ways to apply styles to the library components including `Board`, `Lane` or `Card`:
+
+* Use the predefined css classnames attached to these elements that go by `.react-trello-lane`, `.react-trello-card`, `.react-trello-board`
+* You can also pass custom style attributes as part of data. Refer to the storybook for examples
+
 ### Custom Card Styling
 
 You can completely customize the look-and-feel of each card in any lane by passing in a custom component as child to the Board as seen below:

src/components/Board.js

@@ -23,7 +23,7 @@ export default class Board extends Component {
   render() {
     return (
       <Provider store={this.store}>
-        <BoardContainer {...this.props} id={this.id}/>
+        <BoardContainer className="react-trello-board" {...this.props} id={this.id}/>
       </Provider>
     )
   }

src/components/Card.js

@@ -36,6 +36,7 @@ class Card extends Component {
     const style = customCardLayout ? {...cardStyle, padding: 0} : cardStyle
     return (
       <MovableCardWrapper
+        className="react-trello-card"
         key={id}
         data-id={id}
         style={{

src/components/Lane.js

@@ -246,7 +246,7 @@ class Lane extends Component {
     const {loading, isDraggingOver} = this.state
     const {id, onLaneClick, ...otherProps} = this.props
     return (
-      <Section {...otherProps} key={id} onClick={() => onLaneClick && onLaneClick(id)} draggable={false}>
+      <Section {...otherProps} key={id} onClick={() => onLaneClick && onLaneClick(id)} draggable={false} className="react-trello-lane">
         {this.renderHeader()}
         {this.renderDragContainer(isDraggingOver)}
         {loading && <Loader />}

src/styles/Base.js

@@ -108,12 +108,14 @@ export const CardWrapper = styled.article`
 export const MovableCardWrapper = styled(CardWrapper)`
   &:hover {
     background-color: #f0f0f0;
+    color: #000
   }
 `
 
 export const CardHeader = styled(Header)`
   border-bottom: 1px solid #eee;
   padding-bottom: 6px;
+  color: #000;
 `
 
 export const CardTitle = styled(Title)`

stories/BoardStyling.story.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import {withInfo} from '@storybook/addon-info'
+import {storiesOf} from '@storybook/react'
+
+import Board from '../src'
+
+import './board.css'
+
+const data = require('./data/base.json')
+
+storiesOf('Styling', module).add(
+  'Board Styling',
+  withInfo('Change the background and other css styles for the board container')(() => (
+    <Board data={data} style={{padding: '30px 20px', fontFamily: 'Verdana'}} className="boardContainer" />
+  ))
+)
+
+const dataWithLaneStyles = {
+  lanes: [
+    {
+      id: 'PLANNED',
+      title: 'Planned Tasks',
+      label: '20/70',
+      style: {width: 280, backgroundColor: '#3179ba', color: '#fff', boxShadow: '2px 2px 4px 0px rgba(0,0,0,0.75)'},
+      cards: [
+        {
+          id: 'Milk',
+          title: 'Buy milk',
+          label: '15 mins',
+          description: '2 Gallons of milk at the Deli store'
+        },
+        {
+          id: 'Plan2',
+          title: 'Dispose Garbage',
+          label: '10 mins',
+          description: 'Sort out recyclable and waste as needed'
+        }
+      ]
+    }
+  ]
+}
+
+storiesOf('Styling', module).add(
+  'Lane Styling',
+  withInfo('Change the look and feel of the lane')(() => <Board data={dataWithLaneStyles} style={{backgroundColor: '#eee'}} />)
+)

stories/CustomLaneStyling.story.js stories/CustomLaneTemplates.story.jsstories/CustomLaneStyling.story.js renamed to stories/CustomLaneTemplates.story.js

@@ -1,16 +1,16 @@
 import './Base.story'
+import './DragDrop.story'
 import './Pagination.story'
 import './Interactions.story'
 import './Sort.story'
 import './Realtime.story'
-import './DragDrop.story'
 import './CollapsibleLanes.story'
 import './PaginationAndEvents.story'
 import './Tags.story'
 import './CustomCardStyling.story'
 import './CustomCardWithDrag.story'
-import './CustomLaneStyling.story'
-import './BoardStyling.story'
+import './CustomLaneTemplates.story'
+import './Styling.story'
 import './AsyncLoad.story'
 import './RestrictedLanes.story'
 import './EditableBoard.story'