Few little tidy ups before merging in

- Updated styles for class rename `theme-stripe` to `theme-column`
- Added commented out example of column layout to demo app
- Fix prop-types in Doc
- Added `correctnewlines` example to create-docs
- Added docs for `appearance` prop to readme

example/bundle-hub2.css

@@ -7839,19 +7839,19 @@ section#hub-content #content-suggested-edits .hub-se-magic dragbox ul {
   -ms-filter: none;
   filter: none;
 }
-#hub-reference.content-body.hub-reference-theme-stripe .hub-reference .hub-reference-section .hub-reference-right {
+#hub-reference.content-body.hub-reference-theme-column .hub-reference .hub-reference-section .hub-reference-right {
   width: 450px;
   background: #3d434a;
   border-left: 0 none;
 }
-#hub-reference.content-body.hub-reference-theme-stripe .hub-reference-results {
+#hub-reference.content-body.hub-reference-theme-column .hub-reference-results {
   width: 450px;
 }
-#hub-reference.content-body.hub-reference-theme-stripe .hub-reference-results .hub-reference-results-slider {
+#hub-reference.content-body.hub-reference-theme-column .hub-reference-results .hub-reference-results-slider {
   width: 900px;
 }
-#hub-reference.content-body.hub-reference-theme-stripe .hub-reference-results .hub-reference-results-slider .hub-reference-results-examples,
-#hub-reference.content-body.hub-reference-theme-stripe .hub-reference-results .hub-reference-results-slider .hub-reference-results-explorer {
+#hub-reference.content-body.hub-reference-theme-column .hub-reference-results .hub-reference-results-slider .hub-reference-results-examples,
+#hub-reference.content-body.hub-reference-theme-column .hub-reference-results .hub-reference-results-slider .hub-reference-results-explorer {
   width: 450px !important;
 }
 #hub-search .searchbox {

example/src/Demo.jsx

@@ -67,8 +67,10 @@ class Demo extends React.Component {
               oasFiles={{
                 'api-setting': Object.assign(extensions.defaults, this.state.oas),
               }}
-              flags={{ correctnewlines: false, }}
-              appearance={{}}
+              flags={{ correctnewlines: false }}
+              // Uncomment this in for column layout
+              appearance={{ referenceLayout: 'column' }}
+              // appearance={{ referenceLayout: 'row' }}
               suggestedEdits
               oauth={this.props.oauth}
               variables={{

packages/api-explorer/README.md

@@ -17,6 +17,9 @@ npm install --save @readme/api-explorer
   docs={Array}
   oasFiles={Object}
   flags={Object}
+  appearance={{
+    referenceLayout: String,  
+  }},
   oauth={Boolean}
   suggestedEdits={Boolean}
   tryItMetrics={function}
@@ -39,7 +42,8 @@ npm install --save @readme/api-explorer
 }
 ```
 
-- `flags` -  an object of project flags from readme. Changing these will modify how the API Explorer works.
+- `flags` - an object of project flags from readme. Changing these will modify how the API Explorer works.
+- `appearance.referenceLayout` - a string to determine the layout style, either `row` or `column`.
 - `oauth` - whether this project uses oauth or not
 - `suggestedEdits` - whether suggested edits are enabled or not. This just toggles the button.
 - `tryItMetrics` - function to call when request is made

packages/api-explorer/lib/create-docs.js

@@ -23,6 +23,10 @@
 //   ]
 // }
 // [/block]
+
+// testing
+// correctnewlines
+// option
 // `;
 
 module.exports = (oas, apiSetting) => {

packages/api-explorer/src/Doc.jsx

@@ -354,7 +354,7 @@ Doc.propTypes = {
   oas: PropTypes.shape({}),
   setLanguage: PropTypes.func.isRequired,
   flags: PropTypes.shape({
-    referenceLayout: PropTypes.string,
+    correctnewlines: PropTypes.bool,
   }).isRequired,
   appearance: PropTypes.shape({
     referenceLayout: PropTypes.string,