/* eslint-disable react/prop-types, react/jsx-closing-bracket-location */
var React = require("react");
var _ = require("underscore");

var ApiOptions = require("./perseus-api.jsx").Options;
var Renderer = require("./renderer.jsx");

var rendererProps = React.PropTypes.shape({
    content: React.PropTypes.string,
    widgets: React.PropTypes.object,
    images: React.PropTypes.object,
});

var ArticleRenderer = React.createClass({

    propTypes: {
        json: React.PropTypes.oneOfType([
            rendererProps,
            React.PropTypes.arrayOf(rendererProps),
        ]).isRequired,
    },

    shouldComponentUpdate: function(nextProps, nextState) {
        return nextProps !== this.props || nextState !== this.state;
    },

    _sections: function() {
        return _.isArray(this.props.json) ?
            this.props.json :
            [this.props.json];
    },

    render: function() {
        var apiOptions = _.extend(
            {},
            ApiOptions.defaults,
            this.props.apiOptions,
            {
                isArticle: true,
            }
        );


        // TODO(alex): Add mobile api functions and pass them down here
        var sections = this._sections().map((section, i) => {
            return <Renderer
                {...section}
                key={i}
                key_={i}
                apiOptions={apiOptions}
                enabledFeatures={this.props.enabledFeatures}
            />;
        });

        return <div className="framework-perseus perseus-article">
            {sections}
        </div>;
    },
});

module.exports = ArticleRenderer;

/* eslint-disable react/prop-types, react/jsx-closing-bracket-location */
var React = require("react");
var _ = require("underscore");

var ApiOptions = require("./perseus-api.jsx").Options;
var Renderer = require("./renderer.jsx");

var rendererProps = React.PropTypes.shape({
    content: React.PropTypes.string,
    widgets: React.PropTypes.object,
    images: React.PropTypes.object,
});

var ArticleRenderer = React.createClass({

    propTypes: {
        json: React.PropTypes.oneOfType([
            rendererProps,
            React.PropTypes.arrayOf(rendererProps),
        ]).isRequired,
    },

    shouldComponentUpdate: function(nextProps, nextState) {
        return nextProps !== this.props || nextState !== this.state;
    },

    _sections: function() {
        return _.isArray(this.props.json) ?
            this.props.json :
            [this.props.json];
    },

    render: function() {
        var apiOptions = _.extend(
            {},
            ApiOptions.defaults,
            this.props.apiOptions,
            {
                isArticle: true,
            }
        );


        // TODO(alex): Add mobile api functions and pass them down here
        var sections = this._sections().map((section, i) => {
            return <div key={i} className="clearfix">
                <Renderer
                    {...section}
                    key={i}
                    key_={i}
                    apiOptions={apiOptions}
                    enabledFeatures={this.props.enabledFeatures}
                />
            </div>;
        });

        return <div className="framework-perseus perseus-article">
            {sections}
        </div>;
    },
});

module.exports = ArticleRenderer;

Add clearfix divs around each of the article sections.
Add clearfix divs around each of the article sections.

Summary:
Fixes https://app.asana.com/0/27216215224639/56999462903835

When there were floated images inside article sections, they would sometimes
overlap with other sections. This wraps all of the sections in clearfixes so
they don't overlap.

Test Plan:
 - Visit [this test article](http://localhost:9000/article.html#content=%5B%7B%22content%22%3A%22%5B%5B%E2%98%83%20image%2011%5D%5D%5Cn%5Cn%23%23%23%23%20Step%201%3A%20Spot%20the%20isosceles%20triangle.%5Cn%5CnSegments%20%24%5C%5Coverline%7B%5C%5CredD%7BBC%7D%7D%24%20and%20%24%5C%5Coverline%7B%5C%5CredD%7BBD%7D%7D%24%20are%20both%20radii%2C%20so%20they%20have%20the%20same%20length.%20This%20means%20that%20%24%5C%5Ctriangle%20CBD%24%20is%20isosceles%2C%20%20which%20also%20means%20that%20its%20base%20angles%20are%20congruent%3A%5Cn%5Cn%3E%24m%5C%5Cangle%20C%20%3D%20m%5C%5Cangle%20D%20%3D%20%5C%5CblueD%20%5C%5Cpsi%24%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%22image%2011%22%3A%7B%22type%22%3A%22image%22%2C%22alignment%22%3A%22float-right%22%2C%22static%22%3Afalse%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22static%22%3Afalse%2C%22title%22%3A%22%22%2C%22range%22%3A%5B%5B0%2C10%5D%2C%5B0%2C10%5D%5D%2C%22box%22%3A%5B200%2C200%5D%2C%22backgroundImage%22%3A%7B%22url%22%3A%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2F25b7882f2d5ab80f2ac9b30c822ca3f0b9af75fd%22%2C%22width%22%3A200%2C%22height%22%3A200%7D%2C%22labels%22%3A%5B%5D%2C%22alt%22%3A%22%22%2C%22caption%22%3A%22%22%7D%2C%22version%22%3A%7B%22major%22%3A0%2C%22minor%22%3A0%7D%7D%7D%7D%2C%7B%22content%22%3A%22%5B%5B%E2%98%83%20image%201%5D%5D%5Cn%5Cn%23%23%23%23%20Step%202%3A%20Spot%20the%20straight%20angle.%5Cn%5CnAngle%20%24%5C%5Cangle%7B%5C%5CredD%7BABC%7D%7D%24%20is%20a%20straight%20angle%2C%20so%5Cn%5Cn%3E%20%24%5C%5CpurpleC%20%5C%5Ctheta%20%2B%20m%5C%5Cangle%20DBC%20%3D%20180%5E%5C%5Ccirc%24%20%5Cn%5Cn%3E%20%24%5C%5Cphantom%7B%5C%5Ctheta%2B%7Dm%5C%5Cangle%20DBC%20%3D%20180%5E%5C%5Ccirc%20-%20%5C%5CpurpleC%20%5C%5Ctheta%24%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%22image%201%22%3A%7B%22type%22%3A%22image%22%2C%22alignment%22%3A%22float-right%22%2C%22static%22%3Afalse%2C%22graded%22%3Atrue%2C%22options%22%3A%7B%22static%22%3Afalse%2C%22title%22%3A%22%22%2C%22range%22%3A%5B%5B0%2C10%5D%2C%5B0%2C10%5D%5D%2C%22box%22%3A%5B200%2C200%5D%2C%22backgroundImage%22%3A%7B%22url%22%3A%22web%2Bgraphie%3A%2F%2Fka-perseus-graphie.s3.amazonaws.com%2Fc7986d1bb533b2e30674a4b37e68cf94c5374e63%22%2C%22width%22%3A200%2C%22height%22%3A200%7D%2C%22labels%22%3A%5B%5D%2C%22alt%22%3A%22%22%2C%22caption%22%3A%22%22%7D%2C%22version%22%3A%7B%22major%22%3A0%2C%22minor%22%3A0%7D%7D%7D%7D%2C%7B%22content%22%3A%22%23%23%23%23%20Step%203%3A%20Write%20an%20equation%20and%20solve%20for%20%24%5C%5CblueD%20%5C%5Cpsi%24.%5Cn%5CnThe%20interior%20angles%20of%20%24%5C%5Ctriangle%20CBD%24%20are%20%24%5C%5CblueD%20%5C%5Cpsi%24%2C%20%24%5C%5CblueD%20%5C%5Cpsi%24%2C%20and%20%24%28180%5E%5C%5Ccirc%20-%5C%5CpurpleC%20%5C%5Ctheta%29%24%2C%20and%20we%20know%20that%20the%20interior%20angles%20of%20any%20triangle%20sum%20to%20%24180%5E%5C%5Ccirc%24.%5Cn%5Cn%3E%24%5C%5Cbegin%7Balign%7D%5Cn%5C%5CblueD%7B%5C%5Cpsi%7D%20%2B%20%5C%5CblueD%7B%5C%5Cpsi%7D%20%2B%20%28180%5E%5C%5Ccirc-%20%5C%5CpurpleC%7B%5C%5Ctheta%7D%29%20%26%3D%20180%5E%5C%5Ccirc%20%5C%5C%5C%5C%5C%5C%5C%5C%5Cn2%5C%5CblueD%7B%5C%5Cpsi%7D%20%2B%20180%5E%5C%5Ccirc-%20%5C%5CpurpleC%7B%5C%5Ctheta%7D%20%26%3D%20180%5E%5C%5Ccirc%20%5C%5C%5C%5C%5C%5C%5C%5C%5Cn2%5C%5CblueD%7B%5C%5Cpsi%7D-%20%5C%5CpurpleC%7B%5C%5Ctheta%7D%20%26%3D0%20%5C%5C%5C%5C%5C%5C%5C%5C%5Cn2%5C%5CblueD%7B%5C%5Cpsi%7D%20%26%3D%5C%5CpurpleC%7B%5C%5Ctheta%7D%5Cn%5C%5Cend%7Balign%7D%24%5Cn%5CnCool.%20We%27ve%20completed%20our%20proof%20for%20Case%20A.%20Just%20two%20more%20cases%20left%21%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%7D%7D%5D)
 - View in preview/desktop mode
 - See that the sections don't overlap with each other.

Reviewers: alex

Reviewed By: alex

Differential Revision: https://phabricator.khanacademy.org/D23506
