Added Statistics calculation

Statistics now show calculated values

node_modules/mui/source/elements/Paper/Paper.js

@@ -0,0 +1,96 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import propTypes from '../utils/propTypes';
+import transitions from '../styles/transitions';
+
+function getStyles(props, context) {
+  const {
+    rounded,
+    circle,
+    transitionEnabled,
+    zDepth,
+  } = props;
+
+  const {
+    baseTheme,
+    paper,
+    borderRadius,
+  } = context.muiTheme;
+
+  return {
+    root: {
+      color: paper.color,
+      backgroundColor: paper.backgroundColor,
+      transition: transitionEnabled && transitions.easeOut(),
+      boxSizing: 'border-box',
+      fontFamily: baseTheme.fontFamily,
+      WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated)
+      boxShadow: paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers
+      borderRadius: circle ? '50%' : rounded ? borderRadius : '0px',
+    },
+  };
+}
+
+class Paper extends Component {
+  static propTypes = {
+    /**
+     * Children passed into the paper element.
+     */
+    children: PropTypes.node,
+    /**
+     * Set to true to generate a circlular paper container.
+     */
+    circle: PropTypes.bool,
+    /**
+     * By default, the paper container will have a border radius.
+     * Set this to false to generate a container with sharp corners.
+     */
+    rounded: PropTypes.bool,
+    /**
+     * Override the inline-styles of the root element.
+     */
+    style: PropTypes.object,
+    /**
+     * Set to false to disable CSS transitions for the paper element.
+     */
+    transitionEnabled: PropTypes.bool,
+    /**
+     * This number represents the zDepth of the paper shadow.
+     */
+    zDepth: propTypes.zDepth,
+  };
+
+  static defaultProps = {
+    circle: false,
+    rounded: true,
+    transitionEnabled: true,
+    zDepth: 1,
+  };
+
+  static contextTypes = {
+    muiTheme: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const {
+      children,
+      circle, // eslint-disable-line no-unused-vars
+      rounded, // eslint-disable-line no-unused-vars
+      style,
+      transitionEnabled, // eslint-disable-line no-unused-vars
+      zDepth, // eslint-disable-line no-unused-vars
+      ...other
+    } = this.props;
+
+    const {prepareStyles} = this.context.muiTheme;
+    const styles = getStyles(this.props, this.context);
+
+    return (
+      <div {...other} style={prepareStyles(Object.assign(styles.root, style))}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export default Paper;

node_modules/mui/source/elements/Paper/Paper.spec.js

@@ -0,0 +1,90 @@
+/* eslint-env mocha */
+import React from 'react';
+import {shallow} from 'enzyme';
+import {assert} from 'chai';
+import Paper from './Paper';
+import getMuiTheme from '../styles/getMuiTheme';
+
+describe('<Paper />', () => {
+  const muiTheme = getMuiTheme();
+  const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
+  const testChildren = <div className="unique">Hello World</div>;
+
+  it('renders children by default', () => {
+    const wrapper = shallowWithContext(
+      <Paper>{testChildren}</Paper>
+    );
+
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+  });
+
+  it('renders children and have borderRadius by default', () => {
+    const wrapper = shallowWithContext(
+      <Paper>{testChildren}</Paper>
+    );
+
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+    assert.strictEqual(wrapper.prop('style').borderRadius, 2, 'should have round corner');
+  });
+
+  it('renders children and should be a circle', () => {
+    const wrapper = shallowWithContext(
+      <Paper circle={true}>{testChildren}</Paper>
+    );
+
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+    assert.strictEqual(wrapper.prop('style').borderRadius, '50%', 'should be a circle');
+  });
+
+  it('renders children and does not have rounded corners', () => {
+    const wrapper = shallowWithContext(
+      <Paper rounded={false}>{testChildren}</Paper>
+    );
+
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+    assert.strictEqual(wrapper.prop('style').borderRadius, '0px', 'should not have borderRadius');
+  });
+
+  it('renders children and overwrite styles', () => {
+    const style = {
+      backgroundColor: 'red',
+      borderRadius: '70px',
+    };
+    const wrapper = shallowWithContext(
+      <Paper style={style}>{testChildren}</Paper>
+    );
+
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+    assert.strictEqual(wrapper.prop('style').backgroundColor, 'red', 'should have red backgroundColor');
+    assert.strictEqual(wrapper.prop('style').borderRadius, '70px', 'should have borderRadius');
+  });
+
+  it('renders children and has css transitions by default', () => {
+    const wrapper = shallowWithContext(
+      <Paper>{testChildren}</Paper>
+    );
+
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+    assert.ok(wrapper.prop('style').transition, 'should have css transitions');
+  });
+
+  it('renders children and disable css transitions', () => {
+    const wrapper = shallowWithContext(
+      <Paper transitionEnabled={false}>{testChildren}</Paper>
+    );
+
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+    assert.isNotOk(wrapper.prop('style').transition, 'should not have css transitions');
+  });
+
+  it('renders children and change zDepth', () => {
+    const zDepth = 3;
+    const wrapper = shallowWithContext(
+      <Paper zDepth={zDepth}>{testChildren}</Paper>
+    );
+
+    assert.ok(wrapper.contains(testChildren), 'should contain the children');
+    assert.strictEqual(wrapper.prop('style').boxShadow, muiTheme.paper.zDepthShadows[zDepth - 1],
+      'should have good zDepthShadows');
+  });
+});

node_modules/mui/source/elements/Paper/index.js

@@ -0,0 +1 @@
+export default from './Paper';