chore(docs): fix formatting

Jaspero · Nov 26, 2024 · 45fb3eb · 45fb3eb
1 parent 4c676ac
commit 45fb3eb
Show file tree

Hide file tree

Showing 50 changed files with 526 additions and 45 deletions.
diff --git a/docs/docs/Editors/code-editor.md b/docs/docs/Editors/code-editor.md
@@ -5,11 +5,10 @@ import '../../static/c/code-editor.css'; -->
 
 ### Description
 
-`<jp-code-editor>` is a code editor component for the web.
-
-Code editor **can be used as a form field**.
+`<jp-code-editor>` is a code editor component for the web. Code editor **can be used as a form field**. 
 
 It's a wrapper around https://codemirror.net/5/.
+****
 
 ### Attributes
 
@@ -19,6 +18,8 @@ It's a wrapper around https://codemirror.net/5/.
 |  label   |                                          | `string` |                    Shows at the top of the editor                     |
 |   name   | ✓ <br></br> (to be a valid form element) | `string` |                     native `name` on form element                     |
 |    id    |                                          | `string` |                      native `id` on form element                      |
+<br></br>
+****
 
 ### Dependencies
 
@@ -36,19 +37,27 @@ In order for this component to work you have to include the following
 ```
 
 Depending on your editor options, you might need additional dependancies that you can find on https://cdnjs.com/libraries/codemirror/5.65.14
+<br></br>
+****
 
 ### Slots
 
 This component does not have any slots.
+<br></br>
+****
 
 ### Methods
 
 This component does not have any methods.
+<br></br>
+****
 
 ### Events
 
 - `value`
   - triggers when code changes
+<br></br>
+****
 
 ### Demo
 
@@ -58,3 +67,5 @@ This component does not have any methods.
 
 <jp-code-editor options='{"mode": "javascript"}'></jp-code-editor>
 ```
+<br></br>
+****
diff --git a/docs/docs/Editors/json-editor.md b/docs/docs/Editors/json-editor.md
@@ -4,11 +4,10 @@
 
 ### Description
 
-`<jp-json-editor>` is a component to view, edit, format, and validate JSON.
-
-JSON editor **can be used as a form field**.
+`<jp-json-editor>` is a component to view, edit, format, and validate JSON. Editor **can be used as a form field**.
 
 It's a wrapper around https://github.com/josdejong/jsoneditor.
+****
 
 ### Attributes
 
@@ -19,6 +18,8 @@ It's a wrapper around https://github.com/josdejong/jsoneditor.
 |  label   |                                          |       `string`       |                            Shows at the top of the editor                             |
 |   name   | ✓ <br></br> (to be a valid form element) |       `string`       |                             native `name` on form element                             |
 |    id    |                                          |       `string`       |                              native `id` on form element                              |
+<br></br>
+****
 
 ### Dependencies
 
@@ -35,19 +36,27 @@ In order for this component to work you have to include the following
 ```html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.10.2/jsoneditor.min.js"></script>
 ```
+<br></br>
+****
 
 ### Slots
 
 This component does not have any slots.
+<br></br>
+****
 
 ### Methods
 
 This component does not have any methods.
+<br></br>
+****
 
 ### Events
 
 - `value`
   - triggers when editor content changes
+<br></br>
+****
 
 ### Demo
 
@@ -56,3 +65,5 @@ This component does not have any methods.
 
 <jp-json-editor value='{"array": [1, 2, 3],"boolean": true,"color": "#82b92c","null": null,"number": 123,"object": { "a": "b", "c": "d" },"string": "Hello World"}'></jp-json-editor>
 ```
+<br></br>
+****
diff --git a/docs/docs/Form fields/autocomplete.md b/docs/docs/Form fields/autocomplete.md
@@ -6,6 +6,8 @@ import '../../static/c/autocomplete.css'; -->
 ### Description
 
 `<jp-autocomplete>` is a field component with a combination of `<input>` functionality and `<select>` functionality.
+****
+
 
 ### Attributes
 
@@ -29,22 +31,30 @@ import '../../static/c/autocomplete.css'; -->
 |          pattern           |              |                  `string`                   |                          pattern that input has to satisfy                          |
 |  patternValidationMessage  |              |                  `string`                   |           validation message for when component does not satisfy pattern            |
 |     validationMessages     |              | `{[type]: string}` where `type` is `string` |          compact way of writing validation messages in a single attribute           |
+<br></br>
+****
 
 ### Slots
 
 This component does not have any slots.
+<br></br>
+****
 
 ### Methods
 
 - `getValue`
   - returns form field value
 - `reportValidity`
   - triggers reportValidity
+<br></br>
+****
 
 ### Events
 
 - `value`
   - triggers when value of the field changes
+<br></br>
+****
 
 ### Demo
 
@@ -54,3 +64,5 @@ This component does not have any slots.
 
 <jp-autocomplete options='["One", "Two", "Three"]' label="Autocomplete"></jp-autocomplete>
 ```
+<br></br>
+****
diff --git a/docs/docs/Form fields/checkbox.md b/docs/docs/Form fields/checkbox.md
@@ -6,6 +6,7 @@ import '../../static/c/checkbox.css'; -->
 ### Description
 
 `<jp-checkbox>` is a form component with multi `<input type="checkbox">` functionality.
+****
 
 ### Attributes
 
@@ -20,22 +21,30 @@ import '../../static/c/checkbox.css'; -->
 |         maxSelects          |              |                                                  `number`                                                  |                 maximum number of checks allowed                  |
 | maxselectsValidationMessage |              |                                                  `string`                                                  | validation message for when component does not satisfy maxSelects |
 |     validationMessages      |              |                                `{[type]: string}` where `type` is `string`                                 | compact way of writing validation messages in a single attribute  |
+<br></br>
+****
 
 ### Slots
 
 This component does not have any slots.
+<br></br>
+****
 
 ### Methods
 
 - `getValue`
   - returns form field value
 - `reportValidity`
   - triggers reportValidity
+<br></br>
+****
 
 ### Events
 
 - `value`
   - triggers when one of the checkboxes changes value
+<br></br>
+****
 
 ### Demo
 
@@ -49,3 +58,5 @@ This component does not have any slots.
     {"value": "lorem adasda", "label": "lorem adasda"}
 ]'></jp-checkbox>
 ```
+<br></br>
+****
diff --git a/docs/docs/Form fields/chips.md b/docs/docs/Form fields/chips.md
@@ -6,6 +6,7 @@ import '../../static/c/chips.css'; -->
 ### Description
 
 `<jp-chips>` is a field component that makes typed input iterative.
+****
 
 ### Attributes
 
@@ -28,22 +29,30 @@ import '../../static/c/chips.css'; -->
 |          unique           |              |                  `boolean`                  |                determines if each chip has to be different                |
 |  uniqueValidationMessage  |              |                  `string`                   |       validation message for when component does not satisfy unique       |
 |    validationMessages     |              | `{[type]: string}` where `type` is `string` |     compact way of writing validation messages in a single attribute      |
+<br></br>
+****
 
 ### Slots
 
 This component does not have any slots.
+<br></br>
+****
 
 ### Methods
 
 - `getValue`
   - returns form field value
 - `reportValidity`
   - triggers reportValidity
+<br></br>
+****
 
 ### Events
 
 - `value`
   - triggers when chips/input changes
+<br></br>
+****
 
 ### Demo
 
@@ -53,3 +62,5 @@ This component does not have any slots.
 
 <jp-chips label="Chips" placeholder="Placeholder"></jp-chips>
 ```
+<br></br>
+****
diff --git a/docs/docs/Form fields/ckeditor.md b/docs/docs/Form fields/ckeditor.md
@@ -8,6 +8,7 @@ import '../../static/c/ckeditor.css'; -->
 `<jp-ckeditor>` is a text editor form component.
 
 It's a wrapper around https://ckeditor.com/.
+****
 
 ### Attributes
 
@@ -21,12 +22,16 @@ It's a wrapper around https://ckeditor.com/.
 |  label   |              |            `string`             |                          shows at the top                          |
 | height   |              |            `string`             |               defines the height of the editable area              |
 |  width   |              |            `string`             |               defines the width of the editable area               |
+<br></br>
+****
 
 ### Interfaces
 
 #### `ImageService`
 
 Defines the accepted file types and provides a method to upload a file.
+<br></br>
+****
 
 ##### Properties
 
@@ -35,6 +40,7 @@ Defines the accepted file types and provides a method to upload a file.
 | uploadFile |              | `function` | uploads a file and returns a promise <br></br> which is a string that represents an identifier for the image |
 
 <br></br>
+****
 
 ### Dependencies
 
@@ -43,20 +49,28 @@ In order for this component to work you have to include the following
 ```html
 <script src="https://cdn.ckeditor.com/ckeditor5/41.2.1/super-build/ckeditor.js"></script>
 ```
+<br></br>
+****
 
 ### Slots
 
 This component does not have any slots.
+<br></br>
+****
 
 ### Methods
 
 - `getValue`
   - returns form field value
+<br></br>
+****
 
 ### Events
 
 - `value`
   - triggers when value of the editor changes
+<br></br>
+****
 
 ### Demo
 
@@ -66,3 +80,5 @@ This component does not have any slots.
 
 <jp-ckeditor value="<p>Blup</p>"></jp-ckeditor>
 ```
+<br></br>
+****
diff --git a/docs/docs/Form fields/date-range.md b/docs/docs/Form fields/date-range.md
@@ -6,6 +6,7 @@ import '../../static/c/date-range.css'; -->
 ### Description
 
 `<jp-date-range>` is a field component with `<input type="date">` from/to functionality.
+****
 
 ### Attributes
 
@@ -28,22 +29,30 @@ import '../../static/c/date-range.css'; -->
 |     minSelectibleDays     |                                          |                                `number`                             |              number of days that must be in range               |
 |     maxDateSelectible     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectibleDays    |
 |     minDateSelectible     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectibleDays    |
+<br></br>
+****
 
 ### Slots
 
 This component does not have any slots.
+<br></br>
+****
 
 ### Methods
 
 - `getValue`
   - returns form field value
 - `reportValidity`
   - triggers reportValidity
+<br></br>
+****
 
 ### Events
 
 - `value`
   - triggers when value of the field changes
+<br></br>
+****
 
 ### Demo
 
@@ -53,3 +62,5 @@ This component does not have any slots.
 
 <jp-date-range label="Pick a date range"></jp-date-range>
 ```
+<br></br>
+****