Merge pull request #234 from rvsia/makeHeadersConsistent

Make headers in demo consistent

Author: Hyperkid123

packages/react-renderer-demo/src/app/pages/renderer/component-api.md

@@ -8,9 +8,9 @@ import ExampleLink from '@docs/components/common/example-link';
 <Grid container item>
 <Grid item xs={12} md={10}>
 
-### Components API
+# Components API
 
-### Common props for all form fields
+# Common props for all form fields
 
 There is very short list of that can be applied to every form field
 
@@ -38,7 +38,7 @@ Others: <br/>
 &nbsp;&nbsp;tab/tab item <br/>
 &nbsp;&nbsp;wizard <br/>
 
-### FormGroup wrapped components
+# FormGroup wrapped components
 
 Basic components are wrapped in formGroup. FormGroup provides a standard API to show labels, helper texts, errors, etc.
 
@@ -55,23 +55,23 @@ All those components provides a shared group of props:
 |isReadOnly|boolean|Is the field readOnly?|
 |initialValue|custom|There are two ways how to set initial values in the form: you can use either the <RouterLink href="/renderer/renderer-api"><Link>initialValues</Link></RouterLink> prop for the whole form or you can set the value in the schema for each field separately. For more information, please see [here](https://final-form.org/docs/react-final-form/types/FieldProps#initialvalue).|
 
-#### Text field
+## Text field
 
 |Prop|Type|Description|
 |----|:--:|----------:|
 |placeholder|node/string|A placeholder|
 
 <ExampleLink to='text-field' />
 
-#### Text area
+## Text area
 
 |Prop|Type|Description|
 |----|:--:|----------:|
 |placeholder|node/string|A placeholder|
 
 <ExampleLink to='textarea-field' />
 
-#### Select
+## Select
 
 |Prop|Type|Description|
 |----|:--:|----------:|
@@ -86,7 +86,7 @@ All those components provides a shared group of props:
 
 <ExampleLink to='select-field' />
 
-#### Checkbox
+## Checkbox
 
 |Prop|Type|Description|
 |----|:--:|----------:|
@@ -96,15 +96,15 @@ All those components provides a shared group of props:
 <br />
 <ExampleLink to='checkbox' text='Single checkbox example'/>
 
-#### Radio
+## Radio
 
 |Prop|Type|Description|
 |----|:--:|----------:|
 |options|array|Options in format { label: 'Label', value: value }|
 
 <ExampleLink to='radio' />
 
-#### Switch
+## Switch
 
 |Prop|Type|Description|
 |----|:--:|----------:|
@@ -113,7 +113,7 @@ All those components provides a shared group of props:
 
 <ExampleLink to='switch-field' />
 
-#### Datepicker
+## Datepicker
 
 This component is using [react-day-picker](https://react-day-picker.js.org/docs/) as a base component.
 
@@ -131,17 +131,17 @@ This component is using [react-day-picker](https://react-day-picker.js.org/docs/
 
 <ExampleLink to='date-picker' />
 
-#### Timepicker
+## Timepicker
 
 |Prop|Type|Description|
 |----|:--:|----------:|
 |placeholder|node/string|A placeholder|
 
 <ExampleLink to='time-picker' />
 
-### Others components
+# Others components
 
-#### Subform
+## Subform
 
 |Prop|Type|Description|
 |----|:--:|----------:|
@@ -151,7 +151,7 @@ This component is using [react-day-picker](https://react-day-picker.js.org/docs/
 
 <ExampleLink to='sub-form' />
 
-#### Tab/tab item
+## Tab/tab item
 
 Tab <br/>
 
@@ -168,7 +168,7 @@ Tab item <br/>
 
 <ExampleLink to='tabs' />
 
-#### Wizard
+## Wizard
 
 Wizard <br />
 

packages/react-renderer-demo/src/app/pages/renderer/component-mapping.md

@@ -7,22 +7,22 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 <Grid container item>
 <Grid item xs={12} md={10}>
 
-## Introduction
+# Introduction
 
 In order to successfully render a form via FormRenderer you need to assign component mappers. Component mapper is an object of React components,
 where key is a component identifier and value is the Component. The identifiers must be equivalent to `componentTypes` in your schema.
 
 There are two types of component mappers required by FormRenderer: `layoutMapper` and `formFieldsMapper`.
 
 
-### LayoutMapper
+## LayoutMapper
 In layout mapper you have to define your form layout components like form wrapper, form groups etc.
 
 
-### FormFieldsMapper
+## FormFieldsMapper
 Form fields mapper defines form inputs which can mutate the form state.
 
-## Creating layoutMapper
+# Creating layoutMapper
 
 Layout mapper components define the form layout. There are several different components which you have to implement. If you don't need
 any special wrapper for the component, you can define it as `React.Fragment`.
@@ -46,36 +46,36 @@ Check the example below to see a simple implementation of layout components.
 
 <RawComponent source="component-mapper/layout-mapper" />
 
-### Layout components props
+## Layout components props
 
-#### FormWrapper
+### FormWrapper
 |Prop|Type|Description|Value|Customizable|
 |----|----|-----------|-----|------------|
 |children|node|Content of the form||Based on form schema|
 
-#### Button
+### Button
 |Prop|Type|Description|Value|Customizable|
 |----|----|-----------|-----|------------|
 |label|string|Button label|"Submit", "Cancel", "Reset"|Yes, \`buttonsLabels\` FormRenderer prop|
 |variant|string|Variant of button. Submit button will receive "primary" value |"primary", undefined|No|
 |onClick|function|Button click event handler|function|Yes, \`onSubmit\`, \`onCancel\`, \`onReset\` FormRenderer props|
 
-#### ButtonGroup
+### ButtonGroup
 |Prop|Type|Description|Value|Customizable|
 |----|----|-----------|-----|------------|
 |children|node|Wrapper around form buttons||No|
 
-#### Title
+### Title
 |Prop|Type|Description|Customizable|
 |----|----|-----------|------------|
 |children|node|Form title|no|
 
-#### Description
+### Description
 |Prop|Type|Description|Customizable|
 |----|----|-----------|------------|
 |children|node|Form description|no|
 
-## Creating formFieldsMapper
+# Creating formFieldsMapper
 
 Form fields mapper defines components that are rendered from input schema. Each component in mapper must have an unique key,
 which corresponds to `componentType` in input schema. Keys names can be chosen but there are some predefined constants

packages/react-renderer-demo/src/app/pages/renderer/condition.md

@@ -1,18 +1,17 @@
 import Link from 'next/link';
 
-### Conditional fields
 import Grid from '@material-ui/core/Grid'
 
 import ListOfContents from '../../src/helpers/list-of-contents';
 
 <Grid container item>
 <Grid item xs={12} md={10}>
 
-## Conditional fields
+# Conditional fields
 
 You can show a field only if it meets a condition:
 
-### Schema
+## Schema
 
 ```jsx
 {
@@ -35,9 +34,9 @@ You can show a field only if it meets a condition:
 
 `when` - is name of field where the value is stored, **always required!**
 
-### Conditions
+## Conditions
 
-#### Is
+### Is
 
 `is` - test if the value is equal
 
@@ -50,7 +49,7 @@ condition: {
 // Foo == 'Bar' => true
 // Foo == 'Not a Bar' => false
 ```
-#### Is empty
+### Is empty
 
 `isEmpty` - tests if the value is empty (using [lodash function](https://lodash.com/docs/4.17.11#isEmpty))
 
@@ -70,7 +69,7 @@ condition: {
 // Foo = false => true
 // Foo = true => false
 ```
-#### Is not empty
+### Is not empty
 
 `isNotEmpty` - tests if the value is not empty (using [lodash function](https://lodash.com/docs/4.17.11#isEmpty))
 
@@ -90,7 +89,7 @@ condition: {
 // Foo = true => false
 // Foo = true => true
 ```
-#### Pattern
+### Pattern
 
 `pattern` - tests if the value matches the pattern
 
@@ -104,7 +103,7 @@ condition: {
 // Foo = 'Foo foo baar!' => true
 ```
 
-#### Not match
+### Not match
 
 `notMatch` - reverse `is`/`pattern` condition
 
@@ -129,7 +128,7 @@ condition: {
 // Foo = 'bar' => false
 ```
 
-### Clearing values
+## Clearing values
 
 If you need to clear values after switching fields, please see <Link href="/renderer/unmounting"><a>here</a></Link>.
 

packages/react-renderer-demo/src/app/pages/renderer/data-types.md

@@ -6,12 +6,12 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 <Grid container item>
 <Grid item xs={12} md={10}>
 
-## Introduction
+# Introduction
 
  You can specify a type of a component by providing `dataType`, which will automatically validates the component value.
 Because almost everything in HTML inputs is outputed as a string, adding the `dataType` props will also cast the value to given type.
 
-### Available dataTypes
+## Available dataTypes
 
  ```jsx
 ['integer', 'float', 'number', 'boolean', 'string']

packages/react-renderer-demo/src/app/pages/renderer/development-setup.md

@@ -5,17 +5,17 @@ import ListOfContents from '../../src/helpers/list-of-contents';
 <Grid container item>
 <Grid item xs={12} md={10}>
 
-### Development setup
+# Development setup
 
 Data Driven Forms is a monorepo which uses [Lerna](https://github.com/lerna/lerna), so you can use all its commands as well.
 
-#### Install
+## Install
 
 ```console
 yarn install
 ```
 
-#### Build
+## Build
 
 ```console
 yarn build
@@ -25,7 +25,7 @@ All packages are linked together by default, so if you run a `yarn build` in a p
 
 Don't forget to build all packages, which are linked together!
 
-#### Run a package
+## Run a package
 
 Each package has a small playground `package/demo`, where you can test your changes.
 
@@ -34,7 +34,7 @@ cd packages/pf3-component-mapper
 yarn start
 ```
 
-#### Run documentation
+## Run documentation
 
 The documentation is a server-side rendered React application based on [NextJS framework](https://nextjs.org/).
 
@@ -43,14 +43,14 @@ cd packages/react-renderer-demo
 yarn dev
 ```
 
-#### How to clean?
+## How to clean?
 
 ```console
 rm yarn.lock
 yarn lerna clean # will delete all node_modules
 ```
 
-### Tests
+# Tests
 
 Tests needed to be run from the core folder.
 
@@ -60,7 +60,7 @@ yarn test
 yarn test packages/pf3-component-mapper
 ```
 
-### Commits
+# Commits
 
 Data Driven Forms uses [Semantic Release](https://github.com/semantic-release/commit-analyzer)
 
@@ -83,7 +83,7 @@ Please, do not use Semantic Release, if you update only the demo.
 
 All packages are releasing together and they share the version number.
 
-### Changes to documentation
+# Changes to documentation
 
 If your changes influence API or add new features, you should describe these new options in the `demo` repository. Thanks!