Add ability to nest doc ref markdown under specific versions

5 files changed, 26 insertions, 5 deletions

diff --git a/packages/react-docs/CHANGELOG.json b/packages/react-docs/CHANGELOG.json
index 30e48197d..b36ac9e4f 100644
--- a/packages/react-docs/CHANGELOG.json
+++ b/packages/react-docs/CHANGELOG.json
@@ -1,5 +1,13 @@
 [
     {
+        "version": "0.0.15",
+        "changes": [
+            {
+                "note": "Nest MD files under versions so that you can update them for future versions"
+            }
+        ]
+    },
+    {
         "timestamp": 1529397769,
         "version": "0.0.14",
         "changes": [
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 8c70f4f6d..1a7c016ed 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -52,7 +52,8 @@
         "react-dom": "15.6.1",
         "react-markdown": "^3.2.2",
         "react-scroll": "^1.5.2",
-        "react-tooltip": "^3.2.7"
+        "react-tooltip": "^3.2.7",
+        "semver": "5.5.0"
     },
     "publishConfig": {
         "access": "public"
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index a4e6f4f6e..7030001e8 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -12,6 +12,7 @@ import {
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
+import * as semver from 'semver';
 
 import { DocsInfo } from '../docs_info';
 import {
@@ -180,7 +181,14 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
         return renderedSections;
     }
     private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
-        const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdown[sectionName];
+        const markdownVersions = _.keys(this.props.docsInfo.sectionNameToMarkdownByVersion);
+        // Get version LTE to selectedVersion
+        const eligibleVersions = _.filter(markdownVersions, mdVersion => {
+            return semver.lte(mdVersion, this.props.selectedVersion);
+        });
+        const sortedEligibleVersions = eligibleVersions.sort(semver.rcompare.bind(semver));
+        const closestVersion = sortedEligibleVersions[0];
+        const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName];
         if (!_.isUndefined(markdownFileIfExists)) {
             return (
                 <MarkdownSection
diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts
index 6f4f39f00..e9f3c13fe 100644
--- a/packages/react-docs/src/docs_info.ts
+++ b/packages/react-docs/src/docs_info.ts
@@ -24,7 +24,7 @@ export class DocsInfo {
     public packageUrl: string;
     public menu: DocsMenu;
     public sections: SectionsMap;
-    public sectionNameToMarkdown: { [sectionName: string]: string };
+    public sectionNameToMarkdownByVersion: SectionNameToMarkdownByVersion;
     public contractsByVersionByNetworkId?: ContractsByVersionByNetworkId;
     public typeConfigs: DocsInfoTypeConfigs;
     private _docsInfo: DocsInfoConfig;
@@ -34,7 +34,7 @@ export class DocsInfo {
         this.displayName = config.displayName;
         this.packageUrl = config.packageUrl;
         this.sections = config.sections;
-        this.sectionNameToMarkdown = config.sectionNameToMarkdown;
+        this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion;
         this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId;
         this.typeConfigs = config.typeConfigs;
         this._docsInfo = config;
diff --git a/packages/react-docs/src/types.ts b/packages/react-docs/src/types.ts
index f4e61edc9..cbc774c2e 100644
--- a/packages/react-docs/src/types.ts
+++ b/packages/react-docs/src/types.ts
@@ -1,3 +1,7 @@
+export interface SectionNameToMarkdownByVersion {
+    [version: string]: { [sectionName: string]: string };
+}
+
 export interface DocsInfoConfig {
     id: string;
     type: SupportedDocJson;
@@ -5,7 +9,7 @@ export interface DocsInfoConfig {
     packageUrl: string;
     menu: DocsMenu;
     sections: SectionsMap;
-    sectionNameToMarkdown: { [sectionName: string]: string };
+    sectionNameToMarkdownByVersion: SectionNameToMarkdownByVersion;
     visibleConstructors: string[];
     sectionNameToModulePath?: { [sectionName: string]: string[] };
     menuSubsectionToVersionWhenIntroduced?: { [sectionName: string]: string };