Fix Styleguidist

src/lib/containers/CardContainerLogic.md

@@ -1,7 +1,6 @@
 Standard generic card renderer:
 ```jsx
-<SynapseContextConsumer>
-(synapseContext) => {
+<SynapseContextConsumer>{(synapseContext) => {
   return (
   <CardContainerLogic
     accessToken={synapseContext.accessToken}
@@ -17,7 +16,7 @@ Standard generic card renderer:
       subTitle: 'authors',
       secondaryLabels: ['year', 'journal', 'study', 'grants', 'DOI'],
     }}
-  />)}
+  />)}}
 </SynapseContextConsumer>
 ```
 

src/lib/containers/PageProgress.md

@@ -1,11 +1,13 @@
 ```jsx
-      <PageProgress
-        barColor={ "green" }
-        barPercent={ 75 }
-        backBtnLabel={ "Back"}
-        backBtnCallback={ ()=>{ console.log("you just clicked back button") } }
-        forwardBtnLabel={ "Next" }
-        forwardBtnCallback={ ()=>{ console.log("When forwardBtnActive is set to true, you will see this message") } }
-        forwardBtnActive={ false }
-      />
+const [percent, setPercent] = React.useState(50);
+
+<PageProgress
+  barColor={ "green" }
+  barPercent={ percent }
+  backBtnLabel={ "Back"}
+  backBtnCallback={ ()=>{ setPercent(percent-25) } }
+  forwardBtnLabel={ "Next" }
+  forwardBtnCallback={ ()=>{ setPercent(percent+25) } }
+  forwardBtnActive={ percent < 100 }
+/>
 ```

src/lib/containers/download_list/DownloadListTable.md

@@ -1,3 +1,3 @@
 ```jsx
-accessToken && <DownloadListTable />
+accessToken ? <DownloadListTable /> : <>Sign in to view this component</>
 ```

src/lib/containers/download_list_v2/AvailableForDownloadTable.md

@@ -1,3 +1,3 @@
 ```jsx
-<AvailableForDownloadTable />
+accessToken ? <AvailableForDownloadTable /> : <>Sign in to view this component</>
 ```

src/lib/containers/personal_access_token/AccessTokenPage.md

@@ -1,6 +1,6 @@
 ```jsx
-accessToken && <AccessTokenPage
+accessToken ? <AccessTokenPage
     title={'Personal Access Tokens'}
     body={'Create and manage tokens that can be used to access your Synapse account programmatically.'}
-  ></AccessTokenPage>
+  /> : <>Sign in to view this component</>
 ```

src/lib/containers/synapse_form_wrapper/SynapseFormWrapper.md

@@ -1,13 +1,17 @@
 Contribution Form
 ```jsx
-<SynapseFormWrapper
-formSchemaEntityId="syn20692910"
-fileNamePath="study.submission_name"
-formUiSchemaEntityId="syn20692911"
-formNavSchemaEntityId="syn20968007"
-isWizardMode={true}
-token={accessToken}
-formTitle="Your Contribution Request"
-formClass="contribution-request"
-/>
+<SynapseContextConsumer>
+    {synapseContext => 
+        <SynapseFormWrapper
+        formSchemaEntityId="syn20692910"
+        fileNamePath="study.submission_name"
+        formUiSchemaEntityId="syn20692911"
+        formNavSchemaEntityId="syn20968007"
+        isWizardMode={true}
+        token={synapseContext.accessToken}
+        formTitle="Your Contribution Request"
+        formClass="contribution-request"
+        />
+    }
+</SynapseContextConsumer>
 ```

styleguide.setup.js

@@ -5,6 +5,7 @@ import circleSvg from './src/demo/containers/playground/icons/circle.svg'
 import mouseSvg from './src/demo/containers/playground/icons/mouse.svg'
 import resilienceadSvg from './src/demo/containers/playground/icons/resiliencead.svg'
 import moment from 'moment'
+import { SynapseContextConsumer } from './src/lib/utils/SynapseContext'
 
 global.currentUserProfile = false
 global.accessToken = false
@@ -42,7 +43,7 @@ global.iconOptions = {
   'Resilience-AD': resilienceadSvg,
 }
 
-
+global.SynapseContextConsumer = SynapseContextConsumer
 global.AVATAR = AVATAR
 global.SMALL_USER_CARD = SMALL_USER_CARD
 global.MEDIUM_USER_CARD = MEDIUM_USER_CARD