Change flags.stripe to appearance.referenceLayout

example/src/Demo.jsx

@@ -65,7 +65,7 @@ class Demo extends React.Component {
               oasFiles={{
                 'api-setting': Object.assign(extensions.defaults, this.state.oas),
               }}
-              flags={{ correctnewlines: false, stripe: false }}
+              flags={{ correctnewlines: false, }}
               suggestedEdits
               oauth={this.props.oauth}
             />

legacy-stuff/reference.jade

@@ -2,9 +2,7 @@ extends ../partial
 include mixins
 
 block content
-  - var theme = project.appearance.columnReferenceLayout ? 'stripe' : ''
-
-  #hub-reference.content-body.hub-reference-sticky(class="hub-reference-theme-"+theme)
+  #hub-reference.content-body.hub-reference-sticky(class="hub-reference-theme-"+project.appearance.referenceLayout)
     if isPreview
       .hub-reference
         .hub-reference-section

packages/api-explorer/__tests__/Doc.test.jsx

@@ -71,15 +71,15 @@ test('should work without a doc.swagger/doc.path/oas', () => {
   expect(docComponent.find('Content').length).toBe(1);
 });
 
-test('should still display `Content` with stripe layout', () => {
+test('should still display `Content` with column-style layout', () => {
   const doc = { title: 'title', slug: 'slug', type: 'basic' };
   const docComponent = shallow(
     <Doc
       doc={doc}
       setLanguage={() => {}}
       language="node"
       suggestedEdits
-      flags={{ stripe: true }}
+      appearance={{ referenceLayout: 'column' }}
       oauth={false}
       apiKey=""
       tryItMetrics={() => {}}
@@ -284,9 +284,9 @@ describe('Response Schema', () => {
   });
 });
 
-describe('stripe theme', () => {
+describe('themes', () => {
   test('should output code samples and responses in the right column', () => {
-    const doc = mount(<Doc {...props} flags={{ stripe: true }} />);
+    const doc = mount(<Doc {...props} appearance={{ referenceLayout: 'column' }} />);
     doc.setState({ showEndpoint: true });
 
     expect(doc.find('.hub-reference-right').find('CodeSample').length).toBe(1);

packages/api-explorer/__tests__/index.test.jsx

@@ -19,6 +19,7 @@ const props = {
     }),
   },
   flags: {},
+  appearance: {},
   suggestedEdits: false,
 };
 

packages/api-explorer/src/Doc.jsx

@@ -148,7 +148,7 @@ class Doc extends React.Component {
     );
   }
 
-  themeStripe(doc) {
+  columnTheme(doc) {
     return (
       <div className="hub-api">
         <div className="hub-reference-section">
@@ -227,8 +227,8 @@ class Doc extends React.Component {
   renderEndpoint() {
     const { doc } = this.props;
 
-    if (this.props.appearance.columnReferenceLayout) {
-      return this.themeStripe(doc);
+    if (this.props.appearance.referenceLayout === 'column') {
+      return this.columnTheme(doc);
     }
 
     return this.themeMain(doc);
@@ -348,9 +348,12 @@ Doc.propTypes = {
   }).isRequired,
   oas: PropTypes.shape({}),
   setLanguage: PropTypes.func.isRequired,
+  flags: PropTypes.shape({
+    referenceLayout: PropTypes.string,
+  }).isRequired,
   appearance: PropTypes.shape({
-    columnReferenceLayout: PropTypes.bool,
-  }),
+    referenceLayout: PropTypes.string,
+  }).isRequired,
   language: PropTypes.string.isRequired,
   oauth: PropTypes.bool.isRequired,
   suggestedEdits: PropTypes.bool.isRequired,
@@ -361,7 +364,10 @@ Doc.propTypes = {
 Doc.defaultProps = {
   oas: {},
   flags: {
-    stripe: false,
+    correctnewlines: false,
+  },
+  appearance: {
+    referenceLayout: 'row',
   },
   apiKey: undefined,
 };

packages/api-explorer/src/block-types/Content.jsx

@@ -94,7 +94,9 @@ Loop.propTypes = {
     }),
   ).isRequired,
   column: PropTypes.string,
-  flags: PropTypes.shape({}),
+  flags: PropTypes.shape({
+    correctnewlines: PropTypes.bool,
+  }).isRequired,
 };
 
 Loop.defaultProps = {

packages/api-explorer/src/index.jsx

@@ -55,19 +55,20 @@ class ApiExplorer extends React.Component {
     return this.props.oasFiles[apiSetting];
   }
   render() {
-    const theme = this.props.appearance.columnReferenceLayout ? 'stripe' : '';
     return (
       <div className={`is-lang-${this.state.language}`}>
         <div
           id="hub-reference"
-          className={`content-body hub-reference-sticky hub-reference-theme-${theme}`}
+          className={`content-body hub-reference-sticky hub-reference-theme-${this.props.appearance
+            .referenceLayout}`}
         >
           {this.props.docs.map(doc => (
             <Doc
               key={doc._id}
               doc={doc}
               oas={this.getOas(doc)}
               setLanguage={this.setLanguage}
+              appearance={this.props.appearance}
               flags={this.props.flags}
               language={this.state.language}
               oauth={this.props.oauth}
@@ -86,7 +87,10 @@ ApiExplorer.propTypes = {
   docs: PropTypes.arrayOf(PropTypes.object).isRequired,
   oasFiles: PropTypes.shape({}).isRequired,
   appearance: PropTypes.shape({
-    columnReferenceLayout: PropTypes.bool,
+    referenceLayout: PropTypes.string,
+  }).isRequired,
+  flags: PropTypes.shape({
+    correctnewlines: PropTypes.bool,
   }).isRequired,
   oauth: PropTypes.bool,
   suggestedEdits: PropTypes.bool.isRequired,
@@ -95,7 +99,9 @@ ApiExplorer.propTypes = {
 
 ApiExplorer.defaultProps = {
   oauth: false,
-  flags: { stripe: false },
+  flags: {
+    correctnewlines: false,
+  },
   tryItMetrics: () => {},
 };