Blockquote (ifmeorg#896)

* blockquote

* Emoji added

* Update Blockquote.jsx

* Update Blockquote.scss

* Update Blockquote.stories.jsx

* Update Blockquote.jsx

* Update Blockquote.jsx

* Update Blockquote.jsx

* Update Blockquote.jsx

* author prop

* Update Blockquote.jsx

* Update Blockquote.stories.jsx

* Update Blockquote.stories.jsx

* Update Blockquote.scss

* Update Blockquote.stories.jsx

* Final edit

* Class to container

* Update schema.rb

* minwidth changed

* Font size changed

* Update Blockquote.jsx

* Author class

* Author class

Author: prateksha

client/app/bundles/shared/components/Blockquote.jsx

@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+import css from './Blockquote.scss';
+
+type Props = {
+  text?: string,
+  author?: string,
+};
+
+export default class Blockquote extends React.Component<Props> {
+  render() {
+    const { text, author } = this.props;
+    const textClassNames = `${css.text}`;
+    const authorClassNames = `${css.author}`;
+    return (
+      <div className={textClassNames}>
+        <p>
+          <q>
+            {text}
+          </q>
+        </p>
+        <div className={authorClassNames}>
+          {author}
+        </div>
+      </div>
+    );
+  }
+}

client/app/bundles/shared/components/Blockquote.scss

@@ -0,0 +1,29 @@
+@import "_legacy.scss";
+@import "_base.scss";
+
+.text {
+  display: inline-block;
+  position: relative;
+
+  background-color: rgba(255, 255, 255, 0.1);
+  font-family: Lato, sans-serif;
+  font-style: italic;
+  font-size: 24px;
+  line-height: 1.2;
+  text-align: center;
+  align-content: center;
+  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
+
+  width: 100%;
+  padding: 20px;
+  @media screen and (min-width: 960px) {
+    padding: 50px;
+    font-size: 36px;
+  }
+
+  color: white;
+
+  .author {
+    margin-top: 10px;
+  }
+}

client/app/stories/Blockquote.stories.jsx

@@ -0,0 +1,13 @@
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import Blockquote from 'bundles/shared/components/Blockquote';
+import { SingleColumnLayout, withSource } from './Stories.helper';
+
+storiesOf('Blockquotes', module)
+  .add('Blockquote', withSource(
+    <SingleColumnLayout>
+      <Blockquote text="It's not just all in your head, it's all around you. We can heal together." author="❤️" />
+    </SingleColumnLayout>,
+  ));