Merge pull request #286 from rvsia/renderAllDocsHidden

Hyperkid123 · web-flow · commit 06b455224bb6 · 2020-01-16T17:06:32.000+01:00
Render all texts on component example
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.md b/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Checkbox multiple
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox.md b/packages/react-renderer-demo/src/app/pages/component-example/checkbox.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Checkbox
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/date-picker.md b/packages/react-renderer-demo/src/app/pages/component-example/date-picker.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Date picker
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/plain-text.md b/packages/react-renderer-demo/src/app/pages/component-example/plain-text.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Plain text
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/radio.md b/packages/react-renderer-demo/src/app/pages/component-example/radio.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Radio
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/select-field.md b/packages/react-renderer-demo/src/app/pages/component-example/select-field.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Select
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/sub-form.md b/packages/react-renderer-demo/src/app/pages/component-example/sub-form.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Subform
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/switch-field.md b/packages/react-renderer-demo/src/app/pages/component-example/switch-field.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Switch
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/tabs.md b/packages/react-renderer-demo/src/app/pages/component-example/tabs.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Tabs
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/text-field.md b/packages/react-renderer-demo/src/app/pages/component-example/text-field.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Text field
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/textarea-field.md b/packages/react-renderer-demo/src/app/pages/component-example/textarea-field.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Text area
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/time-picker.md b/packages/react-renderer-demo/src/app/pages/component-example/time-picker.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Time picker
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/wizard.md b/packages/react-renderer-demo/src/app/pages/component-example/wizard.md
@@ -1,5 +1,3 @@
 import ComponentText from '@docs/components/component-example-text';
 
-# Wizard
-
 <ComponentText />
diff --git a/packages/react-renderer-demo/src/app/src/components/component-example-text.js b/packages/react-renderer-demo/src/app/src/components/component-example-text.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import { baseExamples } from '@docs/components/navigation/examples-definitions';
 import ComponentExample from '@docs/components/component-example';
+import { Heading } from './mdx/mdx-components';
 
 const ComponentExampleText = () => {
   const router = useRouter();
@@ -14,8 +15,20 @@ const ComponentExampleText = () => {
   const baseStructure = baseExamples.find(item => item.component === component);
 
   return (<React.Fragment>
+    <Heading level="4" component="h1">{ baseStructure.linkText }</Heading>
     <ComponentExample activeMapper={ activeMapper } component={ component }/>
-    <baseStructure.ContentText activeMapper={ activeMapper } component={ component }/>
+    <div hidden={ activeMapper !== 'mui' } className="mui">
+      <Heading level="5" component="h2">{ `MUI ${baseStructure.linkText}` }</Heading>
+      <baseStructure.ContentText activeMapper={ 'mui' } component={ component }/>
+    </div>
+    <div hidden={ activeMapper !== 'pf3' }>
+      <Heading level="5" component="h2">{ `PF3 ${baseStructure.linkText}` }</Heading>
+      <baseStructure.ContentText activeMapper={ 'pf3' } component={ component }/>
+    </div>
+    <div hidden={ activeMapper !== 'pf4' }>
+      <Heading level="5" component="h2">{ `PF4 ${baseStructure.linkText}` }</Heading>
+      <baseStructure.ContentText activeMapper={ 'pf4' } component={ component }/>
+    </div>
   </React.Fragment>);
 };
 
diff --git a/packages/react-renderer-demo/src/app/src/components/component-example.js b/packages/react-renderer-demo/src/app/src/components/component-example.js
@@ -392,11 +392,6 @@ class ComponentExample extends Component {
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={ 12 } >
-          <Typography variant="h5" gutterBottom>
-              Notes
-          </Typography>
-        </Grid>
       </Grid>
     );
   }
diff --git a/packages/react-renderer-demo/src/app/src/components/mdx/mdx-components.js b/packages/react-renderer-demo/src/app/src/components/mdx/mdx-components.js
@@ -39,7 +39,7 @@ const useHeadingStyles = makeStyles(() => ({
   },
 }));
 
-const Heading = ({ level, children, variant, component, ...rest }) => {
+export const Heading = ({ level, children, variant, component, ...rest }) => {
   const router = useRouter();
   const classes = useHeadingStyles();
   const id = headerToId(children);
diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/tabs.js b/packages/react-renderer-demo/src/app/src/components/navigation/examples-texts/tabs.js
@@ -13,15 +13,15 @@ export default ({ activeMapper }) =>
     <Typography variant="body1">
   For using this component, you have to append TabItem component (containing form fields) to fields property.
     </Typography>
-    <Typography variant="h6" gutterBottom>
+    <Typography gutterBottom>
     Component constant
     </Typography>
     <pre>TAB_ITEM</pre> <Typography variant="body1">as an import from componentTypes</Typography>
     <pre>tab-item</pre> <Typography variant="body1">as a string</Typography>
     { activeMapper === 'pf3' &&
     (
       <Fragment>
-        <Typography variant="h6" gutterBottom>
+        <Typography gutterBottom>
         Validation
         </Typography>
         <Typography variant="body1">Because of schema flexibility there is no simple and efficient way to signal invalid tab content.</Typography>
@@ -30,5 +30,4 @@ export default ({ activeMapper }) =>
         </Typography>
       </Fragment>
     ) }
-
   </Fragment>;
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/pf3-select.md b/packages/react-renderer-demo/src/app/src/doc-components/pf3-select.md
@@ -1,4 +1,4 @@
-# PF3 Async Select
+**PF3 Async Select**
 
 PF3 Select allows to load the options asynchronously.
 
@@ -7,7 +7,7 @@ PF3 Select allows to load the options asynchronously.
 |loadOptions|`func`|A function returning `Promise`, only on mount.|
 |loadingMessage|`string`|A message shown during the loading.|
 
-## loadOptions example
+**loadOptions example**
 
 Currently now, PF3 select supports only loading on mounting.
 
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/pf3-wizard.md b/packages/react-renderer-demo/src/app/src/doc-components/pf3-wizard.md
@@ -1,7 +1,6 @@
 This a custom component. OnSubmit will send only values from visited steps.
-# PF3 Wizard
 
-## Props
+**Props**
 
 | Prop  | Type | Default |  Description |
 | ------------- | ------------- | ------------- | ------------- |
@@ -10,7 +9,7 @@ This a custom component. OnSubmit will send only values from visited steps.
 | stepsInfo  | object  | undefined  | Information for stepper  |
 | inModal  | bool  | false  | If form is in a modal (will add a cancel icon to the header)  |
 
-## Default buttonLabels
+**Default buttonLabels**
 
 ```jsx
 {
@@ -31,7 +30,7 @@ You can rewrite only selection of them, e.g.
 
 (Others will stay default)
 
-## Format of stepsInfo
+**Format of stepsInfo**
 
 ```jsx
 [
@@ -44,7 +43,7 @@ You can rewrite only selection of them, e.g.
 
 ![image](https://user-images.githubusercontent.com/32869456/52336077-393c4e00-2a04-11e9-9aad-d591515cdba6.png)
 
-## Docs for steps
+**Docs for steps**
 
 | Props  | Type  |  Description |
 | ------------- | ------------- | ------------- |
@@ -66,7 +65,7 @@ nextStep: {
 },
 ```
 
-## Useful links
+**Useful links**
 
 [PF3 wizard implementation](https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-3/patternfly-react/src/components/Wizard)
 
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/pf4-select.md b/packages/react-renderer-demo/src/app/src/doc-components/pf4-select.md
@@ -1,12 +1,12 @@
-# Menu portaling
+**Menu portaling**
 
 In order to show menu properly in dialogs like modals, you can use `menuIsPortal`. This will append menu as portal to body.
 
 |prop name|type|description|
 |---------|----|-----------|
 |menuIsPortal|`bool`|Append menu to body instead of to select wrapper.See more [here](https://react-select.com/advanced#portaling)|
 
-# PF4 Async Select
+**PF4 Async Select**
 
 PF4 Select allows to load the options asynchronously.
 
@@ -16,7 +16,7 @@ PF4 Select allows to load the options asynchronously.
 |loadingMessage|`node`|A message shown during the initial loading.|
 |updatingMessage|`node`|A message shown during the loading|
 
-## loadOptions example
+**loadOptions example**
 
 `loadOptions` receives a search input text as an argument.
 
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/pf4-wizard.md b/packages/react-renderer-demo/src/app/src/doc-components/pf4-wizard.md
@@ -2,9 +2,7 @@ This a custom component. OnSubmit will send only values from visited steps.
 
 Don't forget hide form controls by setting \`showFormControls\` to \`false\` as a prop of the renderer component.
 
-# PF4 Wizard
-
-## Props
+**Props**
 
 | Prop  | Type | Default |  Description |
 | ------------- | ------------- | ------------- | ------------- |
@@ -19,7 +17,7 @@ Don't forget hide form controls by setting \`showFormControls\` to \`false\` as
 |showTitles|bool|undefined|If true, step titles will be shown in the wizard body|
 |predictSteps|bool|undefined|If true, dynamic wizard will predict steps in the navigation.|
 
-## Default buttonLabels
+**Default buttonLabels**
 
 ```jsx
 {
@@ -39,7 +37,7 @@ You can rewrite only selection of them, e.g.
 
 (Others will stay default)
 
-## Docs for steps
+**Docs for steps**
 
 | Props  | Type  |  Description |
 | ------------- | ------------- | ------------- |
@@ -74,7 +72,7 @@ nextStep: {
 nextStep: ({ values }) => (values.aws === '123' &&& values.password === 'secret') ? 'secretStep' : 'genericStep'
 ```
 
-### Buttons
+**Buttons**
 
 Each step can implement its own buttons.
 
@@ -110,11 +108,11 @@ The components receives these props:
 |renderNextButton|Function which completely handle the next/submit button.|
 
 
-## How to do substeps
+**How to do substeps**
 
 Field in Wizard fields should contain `substepOf` <`string`> which is title of the primary step. Steps with the same substepOf are grouped together by the title of primary step.
 
-### Example
+Example
 
 Structure:
 
@@ -154,13 +152,13 @@ Schema: [
 Progressive Wizard works same way. It checks if previous step has the same \`substepOf\` value and if so, it grouped them together.
 If the value is different, a new primary step is created with the step as a substep.
 
-## First step
+**First step**
 
 First step should have `stepKey: 1` or as a string: `'1'`
 
-## Variants of Wizard
+**Variants of Wizard**
 
-### Simple wizard
+Simple wizard
 
 - steps navigation is visible, user can jump back and forward (after visiting the step)
 - does not contain any conditional steps
@@ -169,7 +167,7 @@ First step should have `stepKey: 1` or as a string: `'1'`
 
 ![simplewizard](https://user-images.githubusercontent.com/32869456/58427234-56725680-809f-11e9-8e22-3ce7286b30d2.gif)
 
-### Progressive wizard
+Progressive wizard
 
 - steps are visible as user visits them
 - user can jump only back
@@ -179,7 +177,7 @@ First step should have `stepKey: 1` or as a string: `'1'`
 
 ![progressivewizard](https://user-images.githubusercontent.com/32869456/58427241-5b370a80-809f-11e9-8e79-a4a829b8d181.gif)
 
-## Useful links
+**Useful links**
 
 [PF4 wizard implementation](https://www.patternfly.org/v4/documentation/react/components/wizard/)
 
diff --git a/packages/react-renderer-demo/src/app/src/doc-components/wizard.md b/packages/react-renderer-demo/src/app/src/doc-components/wizard.md
@@ -1,8 +1,6 @@
 This a custom component. OnSubmit will send only values from visited steps.
 
-# Wizard
-
-## Docs for steps
+**Docs for steps**
 
 | Props  | Type  |  Description |
 | ------------- | ------------- | ------------- |
@@ -11,7 +9,7 @@ This a custom component. OnSubmit will send only values from visited steps.
 | nextStep  | object/stepKey of next step | See below |
 | fields  | array | As usual |
 
-## Default buttonLabels
+**Default buttonLabels**
 
 ```jsx
 {

-Original file line number
+Diff line change
@@ @@ -1,5 +1,3 @@ @@
 import ComponentText from '@docs/components/component-example-text';
 -# Radio
+-
 <ComponentText />