Add styling to designer notes

demo/views/common/information-styles/information-styles.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/**
+ * Wraps children in styling wrapper
+ *
+ * @param {object} props
+ * @return {InformationStyled}
+ */
+export default props => (
+  <div className='demo-information-styles'>
+    { props.children }
+  </div>
+);

demo/views/common/information-styles/information-styles.scss

@@ -0,0 +1,18 @@
+@import 'colors';
+
+.demo-information-styles {
+  a {
+    color: $blue;
+    font-weight: bold;
+    text-decoration: none;
+
+    &:hover {
+      color: $blue-dark;
+      text-decoration: underline;
+    }
+  }
+
+  li {
+    line-height: 20px;
+  }
+}

demo/views/common/information-styles/package.json

@@ -0,0 +1,4 @@
+{
+  "main": "./information-styles.js",
+  "style": "./information-styles.scss"
+}

demo/views/common/page-content-area/page-content-area.js

@@ -11,7 +11,7 @@ import SimpleHeading from './../../../components/simple-heading';
  * @return {PageContentArea}
  */
 export default props => (
-  <section className='demo-page-content-area'>
+  <section className={ classNames(props.className, 'demo-page-content-area') }>
     <SimpleHeading title={ props.title } link={ props.link } />
     <div className='demo-page-content-area__content'>
       { props.children }

demo/views/pages/component/component.js

@@ -5,6 +5,7 @@ import I18n from 'i18n-js';
 
 // App Components
 import PageContentArea from '../../common/page-content-area';
+import InformationStyles from '../../common/information-styles';
 import ComponentPreview from './component-preview';
 import ComponentAPI from './component-api';
 
@@ -35,7 +36,9 @@ class Component extends React.Component {
     if (designerNotes) {
       return (
         <PageContentArea title={ I18n.t('component_page.design_notes') }>
-          <div dangerouslySetInnerHTML={{ __html: marked(designerNotes) }} />
+          <InformationStyles>
+            <div dangerouslySetInnerHTML={{ __html: marked(designerNotes) }} />
+          </InformationStyles>
         </PageContentArea>
       );
     } else {

demo/views/pages/document/document.js

@@ -4,6 +4,7 @@ import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import DocumentStore from './../../../stores/document';
 import DocumentActions from './../../../actions/document';
 import marked from 'marked';
+import InformationStyles from '../../common/information-styles';
 import Spinner from 'components/spinner';
 import Row from 'components/row';
 import Highlight from 'react-highlight';
@@ -53,20 +54,22 @@ class Document extends React.Component {
     }
 
     return (
-      <div className="demo-document">
-        { content }
+      <InformationStyles>
+        <div className="demo-document">
+          { content }
 
-        <ReactCSSTransitionGroup
-          className={ this.loadingClasses() }
-          transitionName="demo-document__loading"
-          transitionAppear={ true }
-          transitionAppearTimeout={ 300 }
-          transitionEnterTimeout={ 300 }
-          transitionLeaveTimeout={ 0 }
-        >
-          { spinner }
-        </ReactCSSTransitionGroup>
-      </div>
+          <ReactCSSTransitionGroup
+            className={ this.loadingClasses() }
+            transitionName="demo-document__loading"
+            transitionAppear={ true }
+            transitionAppearTimeout={ 300 }
+            transitionEnterTimeout={ 300 }
+            transitionLeaveTimeout={ 0 }
+          >
+            { spinner }
+          </ReactCSSTransitionGroup>
+        </div>
+      </InformationStyles>
     );
   }
 }

demo/views/pages/document/document.scss

@@ -14,17 +14,6 @@ $doc-animation: opacity 100ms 200ms ease-in;
     }
   }
 
-  a {
-    color: $blue;
-    font-weight: bold;
-    text-decoration: none;
-
-    &:hover {
-      color: $blue-dark;
-      text-decoration: underline;
-    }
-  }
-
   code {
     background-color: $grey-dark-blue-15;
     border-radius: 4px;