feat(Browser): Allow tagStyle to be passed at board level affecting s…

…tyling for all tags
rcdexta · Apr 7, 2017 · f1c48e8 · f1c48e8
1 parent 8df8be1
commit f1c48e8
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 538 deletions.
diff --git a/dist/index.js b/dist/index.js
@@ -206,6 +206,7 @@ var BoardContainer = function (_Component) {
               otherProps = _objectWithoutProperties(lane, ['id']);
 
           var _props = _this2.props,
+              tagStyle = _props.tagStyle,
               draggable = _props.draggable,
               handleDragStart = _props.handleDragStart,
               handleDragEnd = _props.handleDragEnd,
@@ -215,7 +216,7 @@ var BoardContainer = function (_Component) {
 
           return _react2.default.createElement(_Lane2.default, _extends({ key: '' + id,
             id: id
-          }, otherProps, { draggable: draggable, handleDragStart: handleDragStart, handleDragEnd: handleDragEnd, onCardClick: onCardClick, onLaneScroll: onLaneScroll, laneSortFunction: laneSortFunction }));
+          }, otherProps, { tagStyle: tagStyle, draggable: draggable, handleDragStart: handleDragStart, handleDragEnd: handleDragEnd, onCardClick: onCardClick, onLaneScroll: onLaneScroll, laneSortFunction: laneSortFunction }));
         })
       );
     }
@@ -296,6 +297,8 @@ var Card = function (_Component) {
   _createClass(Card, [{
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
           id = _props.id,
           title = _props.title,
@@ -337,7 +340,7 @@ var Card = function (_Component) {
             _Base.Footer,
             null,
             tags.map(function (tag) {
-              return _react2.default.createElement(_Tag2.default, tag);
+              return _react2.default.createElement(_Tag2.default, _extends({ key: tag.title }, tag, { tagStyle: _this2.props.tagStyle }));
             })
           )
         )
@@ -558,6 +561,7 @@ var Lane = function (_Component) {
               handleDragEnd: _this.props.handleDragEnd,
               title: card.title,
               tags: card.tags,
+              tagStyle: _this.props.tagStyle,
               moveCard: _this.moveCard,
               removeCard: _this.removeCard,
               label: card.label,
@@ -702,6 +706,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
@@ -712,6 +718,8 @@ var _Base = require('../styles/Base');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -733,12 +741,14 @@ var Tag = function (_Component) {
       var _props = this.props,
           title = _props.title,
           color = _props.color,
-          bgcolor = _props.bgcolor;
+          bgcolor = _props.bgcolor,
+          tagStyle = _props.tagStyle,
+          otherProps = _objectWithoutProperties(_props, ['title', 'color', 'bgcolor', 'tagStyle']);
 
-      var style = { color: color || 'white', backgroundColor: bgcolor || 'orange' };
+      var style = _extends({ color: color || 'white', backgroundColor: bgcolor || 'orange' }, tagStyle);
       return _react2.default.createElement(
         _Base.TagSpan,
-        { style: style },
+        _extends({ style: style }, otherProps),
         title
       );
     }
@@ -949,7 +959,7 @@ var _templateObject = _taggedTemplateLiteral(['\n  background-color: #23719F;\n
     _templateObject10 = _taggedTemplateLiteral(['\n  font-size: 10px;\n'], ['\n  font-size: 10px;\n']),
     _templateObject11 = _taggedTemplateLiteral(['\n  font-size: 12px;\n  color: #4d4d4d;\n'], ['\n  font-size: 12px;\n  color: #4d4d4d;\n']),
     _templateObject12 = _taggedTemplateLiteral(['\n  border-top: 1px solid #eee;\n  padding-top: 6px;\n  text-align: right;\n   display: flex;\n   justify-content: flex-end;\n   flex-direction: row;\n   flex-wrap: wrap;\n'], ['\n  border-top: 1px solid #eee;\n  padding-top: 6px;\n  text-align: right;\n   display: flex;\n   justify-content: flex-end;\n   flex-direction: row;\n   flex-wrap: wrap;\n']),
-    _templateObject13 = _taggedTemplateLiteral(['\n  padding: 2px 5px;\n  font-size: 90%;\n  border-radius: 3px;\n  margin: 2px 5px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 35%;\n'], ['\n  padding: 2px 5px;\n  font-size: 90%;\n  border-radius: 3px;\n  margin: 2px 5px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 35%;\n']);
+    _templateObject13 = _taggedTemplateLiteral(['\n  padding: 2px 3px;\n  font-size: 80%;\n  border-radius: 3px;\n  margin: 2px 5px;\n  font-size: 70%; \n'], ['\n  padding: 2px 3px;\n  font-size: 80%;\n  border-radius: 3px;\n  margin: 2px 5px;\n  font-size: 70%; \n']);
 
 var _styledComponents = require('styled-components');
 

diff --git a/package.json b/package.json
@@ -40,11 +40,10 @@
   },
   "homepage": "https://github.com/rcdexta/react-trello",
   "devDependencies": {
-    "@kadira/react-storybook-addon-info": "^3.3.0",
-    "@kadira/storybook": "^2.32.1",
-    "@kadira/storybook-addon-actions": "^1.1.1",
-    "@kadira/storybook-addon-knobs": "^1.7.0",
-    "@kadira/storybook-addon-options": "^1.0.1",
+    "@kadira/react-storybook-addon-info": "^3.4.0",
+    "@kadira/storybook": "^2.35.3",
+    "@kadira/storybook-addon-actions": "^1.1.3",
+    "@kadira/storybook-addon-options": "^1.0.2",
     "autoprefixer": "^6.5.3",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",

diff --git a/src/components/BoardContainer.js b/src/components/BoardContainer.js
@@ -51,11 +51,11 @@ class BoardContainer extends Component {
       {
         data.lanes.map((lane) => {
           const {id, ...otherProps} = lane
-          const {draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction} = this.props
+          const {tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction} = this.props
           return <Lane key={`${id}`}
             id={id}
             {...otherProps}
-            {...{draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction}}
+            {...{tagStyle, draggable, handleDragStart, handleDragEnd, onCardClick, onLaneScroll, laneSortFunction}}
           />
         })}
     </BoardDiv>

diff --git a/src/components/Card.js b/src/components/Card.js
@@ -21,7 +21,7 @@ class Card extends Component {
             </CardHeader>
             <Detail>{description}</Detail>
             {tags && <Footer>
-              {tags.map((tag) => <Tag {...tag} />)}
+              {tags.map((tag) => <Tag key={tag.title} {...tag} tagStyle={this.props.tagStyle} />)}
             </Footer>
             }
           </CardWrapper>

diff --git a/src/components/Lane.js b/src/components/Lane.js
@@ -92,6 +92,7 @@ class Lane extends Component {
                 handleDragEnd={this.props.handleDragEnd}
                 title={card.title}
                 tags={card.tags}
+                tagStyle={this.props.tagStyle}
                 moveCard={this.moveCard}
                 removeCard={this.removeCard}
                 label={card.label}

diff --git a/src/components/Tag.js b/src/components/Tag.js
@@ -4,9 +4,9 @@ import {TagSpan} from '../styles/Base'
 export default class Tag extends Component {
 
   render () {
-    const {title, color, bgcolor} = this.props
-    const style = {color: color || 'white', backgroundColor: bgcolor || 'orange'}
-    return <TagSpan style={style}>{title}</TagSpan>
+    const {title, color, bgcolor, tagStyle, ...otherProps} = this.props
+    const style = {color: color || 'white', backgroundColor: bgcolor || 'orange', ...tagStyle}
+    return <TagSpan style={style} {...otherProps}>{title}</TagSpan>
   }
 
 }

diff --git a/src/styles/Base.js b/src/styles/Base.js
@@ -96,12 +96,9 @@ export const Footer = styled.div`
 `
 
 export const TagSpan = styled.span`
-  padding: 2px 5px;
-  font-size: 90%;
+  padding: 2px 3px;
+  font-size: 80%;
   border-radius: 3px;
   margin: 2px 5px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  max-width: 35%;
+  font-size: 70%; 
 `
diff --git a/stories/Tags.story.js b/stories/Tags.story.js
@@ -18,10 +18,10 @@ storiesOf('react-trello', module)
                    {title: 'Tech Debt', color: 'white', bgcolor: '#0079BF'},
                    {title: 'Very long tag that is', color: 'white', bgcolor: '#61BD4F'},
               {title: 'One more', color: 'white', bgcolor: '#61BD4F'}]},
-            {id: 'Card2', title: 'Card2', description: 'bar card', metadata: 'bar', tags: [{title: 'Low', color: 'white', bgcolor: 'orange'}]}]
+            {id: 'Card2', title: 'Card2', description: 'bar card', metadata: 'bar', tags: [{title: 'Low'}]}]
         }]
       }
 
-      return <Board data={data}/>
+      return <Board data={data} tagStyle={{fontSize: '80%'}}/>
     }
   )