Merge pull request #4495 from picklesrus/comment-status

Commenting status component.

src/components/commenting-status/commenting-status.jsx

@@ -0,0 +1,31 @@
+const classNames = require('classnames');
+const PropTypes = require('prop-types');
+const FlexRow = require('../../components/flex-row/flex-row.jsx');
+const React = require('react');
+
+
+require('./commenting-status.scss');
+
+const CommentingStatus = props => (
+    <div className={classNames('commenting-status', props.className)}>
+        <div className={classNames('commenting-status-inner-content', props.innerClassName)}>
+            <FlexRow className="comment-status-img">
+                <img
+                    className="comment-status-icon"
+                    src="/svgs/project/comment-status.svg"
+                />
+            </FlexRow>
+            <FlexRow>
+                {props.children}
+            </FlexRow>
+        </div>
+    </div>
+);
+
+CommentingStatus.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    innerClassName: PropTypes.string
+};
+
+module.exports = CommentingStatus;

src/components/commenting-status/commenting-status.scss

@@ -0,0 +1,23 @@
+@import "../../colors";
+
+.commenting-status {
+    border: 1px solid $ui-blue-10percent;
+    border-radius: 8px;
+    padding: 1.75rem 3rem 2rem;
+    margin: .5rem 0 2.25rem;
+    background-color: $ui-blue-10percent;
+    width: 100%;
+    text-align: center;
+
+    p {
+        margin-bottom: 0;
+        line-height: 1.75rem;
+    }
+    .bottom-text {
+        font-size: .875rem;
+    }
+    .status-icon-class {
+        width: 28px;
+        height: 28px;
+    }
+}

static/svgs/project/comment-status.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M9 16c-1 1-3.5 2.5-4 2s0-1 0-2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9zm-3-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H6zm0-4a1 1 0 1 0 0 2h8a1 1 0 0 0 0-2H6z" id="a"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#575E75" xlink:href="#a"/><g mask="url(#b)" fill="#4D97FF"><path d="M0 0h20v20H0z"/></g></g></svg>

test/unit/components/commenting-status.test.jsx

@@ -0,0 +1,33 @@
+const React = require('react');
+const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
+const CommentingStatus = require('../../../src/components/commenting-status/commenting-status.jsx');
+
+describe('CommentingStatus', () => {
+    test('Basic render', () => {
+        const component = shallowWithIntl(
+            <CommentingStatus />
+        );
+        expect(component.find('div.commenting-status').exists()).toBe(true);
+        expect(component.find('img.comment-status-icon').exists()).toBe(true);
+    });
+
+    test('ClassNames added', () => {
+        const component = shallowWithIntl(
+            <CommentingStatus
+                className="class1"
+                innerClassName="class2"
+            />
+        );
+        expect(component.find('div.class1').exists()).toBe(true);
+        expect(component.find('div.class2').exists()).toBe(true);
+    });
+
+    test('Children added', () => {
+        const component = shallowWithIntl(
+            <CommentingStatus>
+                <img className="myChildDiv" />
+            </CommentingStatus>
+        );
+        expect(component.find('img.myChildDiv').exists()).toBe(true);
+    });
+});