Creating a quote component

docs/assets/style.css

@@ -126,3 +126,12 @@ article {
   float:left;
   z-index: 1;
 }
+
+/* Quotes - Overwriting Bootstrap styling */
+blockquote footer, blockquote footer span, blockquote footer small {
+  font-size:1em;
+  color:inherit;
+}
+blockquote footer:before, blockquote footer span:before, blockquote footer small:before {
+  content:"";
+}

docs/examples/Quote.jsx

@@ -0,0 +1,8 @@
+var example = (
+  <div>
+    <UIToolkit.Quote author="Brad Frost" role="Web Designer">It's not about what we do, it's about what we enable other people to do</UIToolkit.Quote>
+    <UIToolkit.Quote author="Christian Heilmann" role="Developer Evangelist" cite="Twitter" purpose="warning">Fix the broken things before you build the shiney new broken things</UIToolkit.Quote>
+  </div>
+);
+
+React.render(example, mountNode);

docs/src/Components.jsx

@@ -104,6 +104,21 @@ var Components = React.createClass({
           </ul>
         </article>
 
+         <article id="quote">
+          <h3>Quote</h3>
+          <p>A quote is used referencing blocks of content from another source within your document. They come as a <code>Block</code> (default) or <code>inline</code></p>
+          <CustomComponent codeText={fs.readFileSync(__dirname + '/../examples/Quote.jsx', 'utf8')} />
+          <h4>Attributes</h4>
+          <ul>
+            <li><code>type</code> String - Block (default) or Inline</li>
+            <li><code>cite</code> String - cited title of a work; for example, the title of a book mentioned within the main text flow of a document</li>
+            <li><code>author</code> String - The author of the quote</li>
+            <li><code>role</code> String - The role/job title of the author</li>
+            <li><code>purpose</code> String - The purpose of the quote</li>
+            <li><code>size</code> String - The size of the alert (default: medium)</li>
+          </ul>
+        </article>
+
       </section>
     );
   }

src/components/quote/__tests__/quote-test.js

@@ -0,0 +1,18 @@
+/** @jsx React.DOM */
+
+var React = require('react');
+var AlertComponent = require('../code/views/quoteView.jsx');
+
+describe('AlertComponent', function() {
+
+  it('should render an Quote', function() {
+    var quote = TestUtils.renderIntoDocument(
+      <QuoteComponent>I am content</QuoteComponent>
+    );
+
+    var renderedAlert = TestUtils.findRenderedDOMComponentWithClass(quote, 'component-quote');
+    assert.equal(renderedQuote.getDOMNode().textContent, 'I am content');
+
+  });
+
+});

src/components/quote/code/index.js

@@ -0,0 +1 @@
+module.exports = require('./views/quoteView.jsx');

src/components/quote/code/less/_quote.less

@@ -0,0 +1,73 @@
+/*------------------------------------*\
+    #Quote
+\*------------------------------------*/
+
+.component-quote {
+  border-left: solid .25em;
+  margin:0;
+  padding:1em;
+  font-size:1em;
+  quotes: "“" "”" "‘" "’";
+  &.inline {
+    border-left:none;
+  }
+  p {
+    &:first-of-type {
+      margin-top:0;
+    }
+    font-style: italic;
+    font-size: 1em;
+    &:before {
+      content: open-quote;
+    }
+    &:after {
+      content: close-quote;
+    }
+  }
+  footer {
+    font-size:1em;
+  }
+  small, cite {
+    .small;
+  }
+  cite:before {
+    content: "Source: "
+  }
+  & + .component-quote {
+    margin-top: .5em;
+  }
+}
+
+//
+// == Functional Colours ==
+//
+
+// Mixin
+.quote-variant(@background) {
+  color: @background;
+  border-color: lighten(@background, 30%);
+  small, cite {
+    color: lighten(@background, 20%);
+  }
+}
+
+.component-quote {
+  &.primary {
+    .quote-variant(@primary);
+  }
+  &.secondary {
+    .quote-variant(@secondary);
+  }
+  &.success {
+    .quote-variant(@success);
+  }
+  &.info {
+    .quote-variant(@info);
+  }
+  &.warning {
+    .quote-variant(@warning);
+  }
+  &.danger {
+    .quote-variant(@danger);
+  }
+}

src/components/quote/code/templates/blockQuoteTemplate.jsx

@@ -0,0 +1,19 @@
+var classNames = require('classnames');
+var getComponentClasses = require('../../../../utils/getComponentClasses');
+
+module.exports = function() {
+
+  var propClasses = ['size', 'purpose', 'orientation'];
+  var classes = getComponentClasses('component-quote', propClasses, this.props);
+
+  return (
+      <blockquote cite={this.props.cite} className={classNames(classes)} itemScope itemType="http://schema.org/CreativeWork">
+        <p itemProp="text">{this.props.children}</p>
+        <footer itemProp="author" itemScope itemType="http://schema.org/Person">
+          <span itemProp="name">{this.props.author}</span>
+          <small itemProp="jobTitle">{this.props.role}</small>
+          {(this.props.cite) ? <cite itemProp="citation">{this.props.cite}</cite> : null}
+        </footer>
+      </blockquote>
+  );
+};

src/components/quote/code/templates/quoteTemplate.jsx

@@ -0,0 +1,18 @@
+var classNames = require('classnames');
+var getComponentClasses = require('../../../../utils/getComponentClasses');
+
+module.exports = function() {
+
+  var propClasses = ['size', 'purpose', 'orientation'];
+  var classes = getComponentClasses('component-quote', propClasses, this.props);
+
+  return (
+      <q cite={this.props.cite} className={classNames(classes)} itemScope itemType="http://schema.org/CreativeWork" itemProp="text">
+        {this.props.children}
+        <span itemProp="author" itemScope itemType="http://schema.org/Person">
+          <meta itemProp="name" content={this.props.author} />
+          <meta itemProp="jobTitle" content={this.props.role} />
+        </span>
+      </q>
+  );
+};

src/components/quote/code/views/quoteView.jsx

@@ -0,0 +1,19 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  propTypes: {
+    purpose: React.PropTypes.oneOf(['default', 'primary', 'secondary', 'success', 'warning', 'danger', 'info']),
+    size: React.PropTypes.oneOf(['default', 'small', 'medium', 'large', 'extra-large']),
+    orientation: React.PropTypes.oneOf(['default', 'horizontal', 'vertical']),
+    type: React.PropTypes.oneOf(['block', 'inline'])
+  },
+
+  render: function() {
+    if(this.props.type === 'inline') {
+      return require('../templates/quoteTemplate.jsx').call(this);
+    }
+    return require('../templates/blockQuoteTemplate.jsx').call(this);
+  }
+});
+

src/components/quote/index.js

@@ -0,0 +1 @@
+module.exports = require('./code/index');

src/less/toolkit.less

@@ -11,6 +11,7 @@
 @import "../components/icon-list/code/less/_icon-list";
 @import "../components/icon-list-item/code/less/_icon-list-item";
 @import "../components/alert/code/less/_alert";
+@import "../components/quote/code/less/_quote";
 
 /*------------------------------------*\
   Font-Awesome

src/ui-toolkit.js

@@ -10,5 +10,6 @@ UIToolkit.Image = require('./components/image');
 UIToolkit.IconList = require('./components/icon-list');
 UIToolkit.IconListItem = require('./components/icon-list-item');
 UIToolkit.Alert = require('./components/alert');
+UIToolkit.Quote = require('./components/quote');
 
 module.exports = UIToolkit;