Merge pull request #640 from rvsia/makeHeadersConsistent

Make headers consistent

Author: Hyperkid123

packages/react-renderer-demo/src/helpers/list-of-contents.js

@@ -36,10 +36,15 @@ const ListHeader = ({ text }) => {
   const classes = useLinkStyles();
   const router = useRouter();
   const level = (text.match(/#/g) || []).length;
+
+  if (level === 1) {
+    return null;
+  }
+
   const labelText = text.replace(/#/g, '');
   return (
     <a className={classes.link} href={`${router.pathname}#${headerToId(text)}`} title={labelText}>
-      {[...new Array(level)].map((_v, index) => (
+      {[...new Array(level - 1)].map((_v, index) => (
         <React.Fragment key={index}>&nbsp;&nbsp;</React.Fragment>
       ))}
       {labelText}
@@ -80,12 +85,17 @@ const useStyles = makeStyles((theme) => ({
   },
   hidden: {
     height: '100%'
+  },
+  headerLink: {
+    color: 'inherit',
+    textDecoration: 'none'
   }
 }));
 
 const ListOfContents = ({ found = [] }) => {
   const [activeItem, setActive] = useState();
   let isMounted = true;
+  const router = useRouter();
 
   const scrollListener = (setActive) => {
     const min = -10;
@@ -110,11 +120,15 @@ const ListOfContents = ({ found = [] }) => {
   }, []);
   const classes = useStyles();
 
+  const header = found[0].replace(/# /, '');
+
   return (
     <StickyBox offsetTop={96} offsetBottom={20}>
       <div className={classes.fixedContainer}>
         <Typography className={classes.contentHeader} component="h3">
-          Content
+          <a className={classes.headerLink} href={`${router.pathname}#${headerToId(header)}`} title={header}>
+            {header}
+          </a>
         </Typography>
         <List dense>
           {found.map((text) => (

packages/react-renderer-demo/src/pages/components/field-array.md

@@ -11,7 +11,7 @@ import DocPage from '@docs/doc-page';
 import { FieldArray } from '@data-driven-forms/react-form-renderer';
 ```
 
-# Dynamic fields
+## Dynamic fields
 
 Dynamic fields allow you to add or remove field inputs in your forms. In Data Driven Forms, Field Array is used to provide this functionality. Simillarly to [FieldProvider](/components/field-provider) Data driven forms include [React Final Form Arrays](https://github.com/final-form/react-final-form-arrays). Please visit their documentation to learn more about the functionality and implementation.
 
@@ -25,7 +25,7 @@ import { FieldArray } from '@data-driven-forms/react-form-renderer';
 
 <CodeExamples source="components/field-array/form-fields-mapper" mode="preview" />
 
-# Naming
+## Naming
 
 FieldArray supports [final form notation](https://final-form.org/docs/final-form/field-names).
 
@@ -59,7 +59,7 @@ You don't need to name the nested components, then the values are saved as an ar
 }
 ```
 
-# Validators
+## Validators
 
 You can use user a few provided validators (you can also use your [own](/mappers/validator-mapper).)
 
@@ -70,13 +70,9 @@ EXACT_LENGTH: ({threshold})
 ```
 
 
-# Implementation
+## Implementation
 
-PF4 and MUI component mapper provides an experimental implementation of field arrays.
-
-[PF4 Field Array](/mappers/field-array?mapper=pf4)
-
-[MUI Field Array](/mappers/field-array?mapper=mui)
+All DDF mappers contain its own implementation [field array](/mappers/field-array?mapper=pf4)
 
 <CodeExamples source="components/field-array/pf4-demo" mode="preview" />
 

packages/react-renderer-demo/src/pages/components/renderer.md

@@ -42,11 +42,11 @@ const App = () => (<FormRenderer
 |[validate](/schema/introduction#validate)|func|A function which receives all form values and returns an object with errors.||
 |[validatorMapper](/mappers/validator-mapper)|object|A mapper containing custom validators, it's automatically merged with the default one.||
 
-# Schema
+## Schema
 
 The root object of the schema represents the Form component. Please read more [here](/schema/introduction).
 
-## Example
+### Example
 
 ```javascript
 schema = {

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

@@ -46,7 +46,7 @@ yarn dev
 yarn lerna clean # will delete all node_modules
 ```
 
-# Tests
+## Tests
 
 Tests needed to be run from the core folder.
 
@@ -56,7 +56,7 @@ yarn test
 yarn test packages/pf3-component-mapper
 ```
 
-# Commits
+## Commits
 
 Data Driven Forms uses [Semantic Release](https://github.com/semantic-release/commit-analyzer)
 
@@ -79,11 +79,11 @@ 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 `react-renderer-demo` repository. Thanks!
 
-# Generating a mapper template
+## Generating a mapper template
 
 To generate a mapper template, run:
 

packages/react-renderer-demo/src/pages/mappers/action-mapper.md

@@ -29,7 +29,7 @@ The [ActionMapper](/components/renderer#optionalprops) allows you to map schema
 
 Do not forget to keep order of args or use object with keys as named arguments.
 
-# Example
+## Example
 
 So, let's say you need to translate labels of fields using your translate function `translate(id)` and the schema has no access to use JavaScript code.
 

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

@@ -30,7 +30,7 @@ Standard components are:
 |switch|
 |timepicker/datepicker|
 
-# Form fields components
+## Form fields components
 
 Basic components that can change the form state (inputs) share common props. These components are using [useFieldApi](/mappers/custom-mapper#usefieldapi) or [FieldProvider](/mappers/custom-mapper#fieldprovider) to access the form state.
 
@@ -45,23 +45,23 @@ Basic components that can change the form state (inputs) share common props. The
 |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 [initialValues](/components/renderer) 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' />
 
-## Select
+### Select
 
 |Prop|Type|Description|
 |----|:--:|----------:|
@@ -76,7 +76,7 @@ Basic components that can change the form state (inputs) share common props. The
 
 <ExampleLink to='select' />
 
-## Checkbox
+### Checkbox
 
 |Prop|Type|Description|
 |----|:--:|----------:|
@@ -86,15 +86,15 @@ Basic components that can change the form state (inputs) share common props. The
 <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|
 |----|:--:|----------:|
@@ -103,7 +103,7 @@ Basic components that can change the form state (inputs) share common props. The
 
 <ExampleLink to='switch' />
 
-## Datepicker
+### Datepicker
 
 This component is using [react-day-picker](https://react-day-picker.js.org/docs/) as a base component.
 
@@ -121,17 +121,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|
 |----|:--:|----------:|
@@ -141,7 +141,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/>
 
@@ -158,7 +158,7 @@ Tab item <br/>
 
 <ExampleLink to='tabs' />
 
-## Wizard
+### Wizard
 
 Wizard <br />
 
@@ -180,7 +180,7 @@ Wizard step <br/>
 
 <ExampleLink to='wizard' />
 
-## Plain text
+### Plain text
 
 |Prop|Type|Description|
 |----|:--:|----------:|

packages/react-renderer-demo/src/pages/schema/clear-on-unmount.md

@@ -9,14 +9,14 @@ When using dynamic forms where more fields share the same name, the value is pre
 `clearOnUnmount` option in the renderer component or in the schema of the field. The option in the schema has always higher priority. (When 
 `clearOnUnmount` is set in the renderer and the field has it this attribute set to `false`, the field value will not be cleared.)
 
-# Examples
+## Examples
 
-## Form example
+### Form example
 
 <CodeExample source="components/clear-on-unmount" mode="preview" />
 
 
-## Form level configuration
+### Form level configuration
 
 ```jsx
 <FormRenderer
@@ -28,7 +28,7 @@ When using dynamic forms where more fields share the same name, the value is pre
 />
 ```
 
-## Field level configuration
+### Field level configuration
 
 ```jsx
 {