Merge pull request #71 from StratoDem/56-subheader-component

56 subheader component

CHANGELOG.md

@@ -2,7 +2,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## 2.9.0 - 2018-03-29
+## 2.10.0 - 2018-04-09
+### Added
+- Add Subheader Component
+
+## 2.9.0 - 2018-04-09
 ### Added
 - Add Paper Component
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sd-material-ui",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "StratoDem Analytics Dash implementation of material-ui components",
   "main": "lib/index.js",
   "repository": {

sd_material_ui/metadata.json

@@ -2439,7 +2439,7 @@
     }
   },
   "src/components/Paper/Paper.react.js": {
-    "description": "",
+    "description": "A Dash material-ui Paper component",
     "displayName": "Paper",
     "methods": [],
     "props": {
@@ -3310,6 +3310,46 @@
       }
     }
   },
+  "src/components/Subheader/Subheader.react.js": {
+    "description": "",
+    "displayName": "Subheader",
+    "methods": [],
+    "props": {
+      "children": {
+        "flowType": {
+          "name": "Node"
+        },
+        "required": false,
+        "description": "Node that will be placed inside the Subheader",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      },
+      "inset": {
+        "flowType": {
+          "name": "boolean"
+        },
+        "required": false,
+        "description": "If true, the Subheader will be indented",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "style": {
+        "flowType": {
+          "name": "Object"
+        },
+        "required": false,
+        "description": "Override the inline-styles of the root element",
+        "defaultValue": {
+          "value": "{}",
+          "computed": false
+        }
+      }
+    }
+  },
   "src/components/Toggle/Toggle.react.js": {
     "description": "",
     "displayName": "Toggle",

src/components/Subheader/Subheader.react.js

@@ -0,0 +1,45 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import MUISubheader from 'material-ui/Subheader';
+import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+type Props = {
+  /** Node that will be placed inside the Subheader */
+  children?: Node,
+  /** If true, the Subheader will be indented */
+  inset?: boolean,
+  /** Override the inline-styles of the root element */
+  style?: Object,
+};
+
+const defaultProps = {
+  children: null,
+  inset: false,
+  style: {},
+};
+
+export default class Subheader extends Component<Props> {
+  props: Props;
+
+  render() {
+    const {inset, style} = this.props;
+
+    return (
+      <div>
+        <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
+          <MUISubheader
+            inset={inset}
+            style={style}
+          >
+            {this.props.children}
+          </MUISubheader>
+        </MuiThemeProvider>
+      </div>);
+  }
+}
+
+Subheader.defaultProps = defaultProps;

src/components/Subheader/index.js

@@ -0,0 +1,3 @@
+import Subheader from "./Subheader.react.js";
+
+export default Subheader;

src/components/__tests__/Subheader.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import MuiSubheader from 'material-ui/Subheader';
+import Subheader from '../Subheader/Subheader.react';
+
+describe('Subheader', () => {
+  it('renders', () => {
+    const component = shallow(
+      <Subheader />);
+
+    expect(component).toBe.ok;
+  });
+
+  it('renders with children', () => {
+    const component = shallow(
+      <Subheader
+        children={['test-subheader']}
+      />);
+
+    expect(
+      component
+        .find(MuiSubheader)
+        .props().children[0])
+      .toEqual('test-subheader');
+  });
+
+  it('uses the styles provided', () => {
+    const component = shallow(
+      <Subheader
+        children={['test-subheader']}
+        inset={true}
+        style={{color: 'blue'}}
+      />);
+
+    expect(
+      component
+        .find(MuiSubheader)
+        .props().style)
+      .toEqual({color: 'blue'});
+
+    expect(
+      component
+        .find(MuiSubheader)
+        .props().inset)
+      .toEqual(true);
+  });
+});

src/index.js

@@ -11,6 +11,7 @@ import FontIcon from './components/FontIcon';
 import IconButton from './components/IconButton';
 import Paper from './components/Paper';
 import Snackbar from './components/Snackbar';
+import Subheader from './components/Subheader';
 import RadioButtonGroup from './components/RadioButtonGroup';
 import RaisedButton from './components/RaisedButton';
 import Toggle from './components/Toggle';
@@ -29,6 +30,7 @@ export {
   IconButton,
   Paper,
   Snackbar,
+  Subheader,
   RadioButtonGroup,
   RaisedButton,
   Toggle,

usage.py

@@ -36,6 +36,15 @@
 
     spacer,
 
+    # Test SDSubheader
+    sd_material_ui.Subheader(children=['This is a subheader']),
+
+    spacer,
+
+    sd_material_ui.Subheader(children=['This is a subheader with an inset'], inset=True),
+
+    spacer,
+
     # Test SDPaper
     sd_material_ui.Paper(zDepth=5,
                          circle=True,