feat(bordered-panel-title): Add a React component for the new Panel B…

…asic Alt
pivotal-cf · Apr 7, 2015 · d5a435a · d5a435a
1 parent 11ba90a
commit d5a435a
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 4 deletions.
diff --git a/src/pivotal-ui/components/panels.scss b/src/pivotal-ui/components/panels.scss
@@ -122,10 +122,10 @@ Basic alternate panels are panels with a border and shadow. You can have a panel
 
 .panel-basic-alt {
   border: $panel-basic-alt-border;
-  border-radius: 5px;
+  border-radius: $panel-basic-alt-border-radius;
   @include background-clip-fix;
   border-bottom: $panel-basic-alt-border-bottom;
-  background-color: white;
+  background-color: $panel-basic-alt-background;
 }
 
 /*doc
@@ -735,6 +735,29 @@ parent: panel_react
 <UI.BasicPanel>
   Basic Panel
 </UI.BasicPanel>
+
+<UI.BasicPanel title='Basic Title'>
+  Basic Panel
+</UI.BasicPanel>
+```
+*/
+
+
+/*doc
+---
+title: Basic Panel Alt
+name: panel_basic_alt_react
+parent: panel_react
+---
+
+```react_example_table
+<UI.BasicPanelAlt>
+  Basic Panel
+</UI.BasicPanelAlt>
+
+<UI.BasicPanelAlt title='Basic Alt Title'>
+  Basic Panel
+</UI.BasicPanelAlt>
 ```
 */
 

diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -1019,8 +1019,10 @@ $panel-info-heading-bg:       $state-info-bg !default;
 
 // Panel Basic Alt
 // -------------------------
+$panel-basic-alt-background:      white;
 $panel-basic-alt-border:          1px solid rgba(0,0,0,.1);
 $panel-basic-alt-border-bottom:   2px solid rgba(0,0,0,.1);
+$panel-basic-alt-border-radius:   5px;
 
 // Panel Titles
 // -------------------------

diff --git a/src/pivotal-ui/javascripts/components.js b/src/pivotal-ui/javascripts/components.js
@@ -56,6 +56,7 @@ module.exports = {
   ClickablePanel: require('./panels.jsx').ClickablePanel,
   ClickableAltPanel: require('./panels.jsx').ClickableAltPanel,
   BasicPanel: require('./panels.jsx').BasicPanel,
+  BasicPanelAlt: require('./panels.jsx').BasicPanelAlt,
   ShadowPanel: require('./panels.jsx').ShadowPanel,
   HighlightPanel: require('./panels.jsx').HighlightPanel,
 

diff --git a/src/pivotal-ui/javascripts/panels.jsx b/src/pivotal-ui/javascripts/panels.jsx
@@ -9,7 +9,8 @@ var Panel = React.createClass({
   mixins: [PanelMixin],
 
   propTypes: {
-    type: React.PropTypes.string
+    type: React.PropTypes.string,
+    title: React.PropTypes.string
   },
 
   render: function () {
@@ -19,6 +20,17 @@ var Panel = React.createClass({
         bodyClasses = _.compact(['panel-body', padding]),
         style = {};
 
+    var title;
+    if (this.props.title && this.props.title.length > 0) {
+      title = (
+        <div className="panel-header">
+          <h5 className="panel-title-alt">{ this.props.title }</h5>
+        </div>
+      );
+    } else {
+      title = '';
+    }
+
     if (scrollable) {
       classes.push(['panel-scrollable']);
 
@@ -29,6 +41,7 @@ var Panel = React.createClass({
 
     return (
       <div {...other} className={classes.join(" ")} style={style}>
+        { title }
         <div className={bodyClasses.join(" ")}>
           {children}
         </div>
@@ -51,6 +64,13 @@ var BasicPanel = React.createClass({
   }
 });
 
+var BasicPanelAlt = React.createClass({
+  mixins: [PanelMixin],
+  render: function () {
+    return <Panel {...this.props} type="panel-basic-alt" />;
+  }
+});
+
 var ClickablePanel = React.createClass({
   mixins: [PanelMixin],
   render: function () {
@@ -87,13 +107,13 @@ var HighlightPanel = React.createClass({
   }
 });
 
-
 module.exports = {
   Panel: Panel,
   ClickablePanel: ClickablePanel,
   ClickableAltPanel: ClickableAltPanel,
   SimplePanel: SimplePanel,
   BasicPanel: BasicPanel,
+  BasicPanelAlt: BasicPanelAlt,
   ShadowPanel: ShadowPanel,
   HighlightPanel: HighlightPanel
 };
diff --git a/test/javascripts/panels_spec.js b/test/javascripts/panels_spec.js
@@ -43,6 +43,22 @@ describe('Panel', function() {
     });
   });
 
+  describe("when a title is provided", function() {
+    beforeEach(function() {
+      React.render(
+        Panel({
+          children: 'Sup',
+          title: 'This is a title'
+        }),
+        this.node
+      );
+    });
+
+    it("sets the title to the panel", function() {
+      expect($('#container .panel .panel-header .panel-title-alt')).toContainText('This is a title');
+    });
+  });
+
   describe("when a className is provided", function() {
     beforeEach(function() {
       React.render(