147 docs add permit example documentation (#473)

JCopeland-PIFSC · web-flow · commit c4e5eaab04f3 · 2024-11-08T07:27:04.000-10:00
* Add example image

* Minor markdown cleanup
diff --git a/examples/computed-form-fields/README.md b/examples/computed-form-fields/README.md
@@ -94,7 +94,6 @@ const computeFieldValue = (numberOfFish, species) => {
 };
 ```
 
+## Computed Form Fields Example Preview
 
-
-# Computed Form Fields Example Preview
-![Computed Form Fields](./src/assets//computed-form-fields.png)
+![Computed Form Fields](./src/assets/computed-form-fields.png)
diff --git a/examples/conditional-form-fields/README.md b/examples/conditional-form-fields/README.md
@@ -105,6 +105,6 @@ const ConditionalForm = () => {
 />
 ```
 
-# Conditional Form Fields Example Preview
-![Conditional Form Fields](./src/assets/conditional-form-fields.png)
+## Conditional Form Fields Example Preview
 
+![Conditional Form Fields](./src/assets/conditional-form-fields.png)
diff --git a/examples/field-validators/README.md b/examples/field-validators/README.md
@@ -67,5 +67,6 @@ import { fullNameValidators } from "../utilities/fieldValidators";
 }
 ```
 
-# Field Validators Example Preview
-![Field Validators](./src/assets/field-validators.png)
+## Field Validators Example Preview
+
+![Field Validators](./src/assets/field-validators.png)
diff --git a/examples/form-structure/README.md b/examples/form-structure/README.md
@@ -95,3 +95,7 @@ The form does include two additional examples.
     setResetToggle(true)
   }
 ```
+
+## Form Structure Example Preview
+
+![Form Structure](./src/assets/form-structure.png)
diff --git a/examples/form-structure/src/assets/form-structure.png b/examples/form-structure/src/assets/form-structure.png
diff --git a/examples/mock-api/README.md b/examples/mock-api/README.md
@@ -176,5 +176,6 @@ const { data } = await postRequestWithFetch(MSW_ENDPOINT.SPECIES, {
 });
 ```
 
-# Mock API Example Preview
-![Mock API](./src/assets/mock-api.png)
+## Mock API Example Preview
+
+![Mock API](./src/assets/mock-api.png)
diff --git a/examples/multistep-form/README.md b/examples/multistep-form/README.md
@@ -126,5 +126,6 @@ useEffect(() => {
 }
 ```
 
-# Multistep Form Example Preview
-![Multistep Form](./src/assets/multistep.png)
+## Multistep Form Example Preview
+
+![Multistep Form](./src/assets/multistep.png)
diff --git a/examples/network-status/README.md b/examples/network-status/README.md
@@ -29,5 +29,6 @@ Learn more about RADFish examples at the official [documentation](https://nmfs-r
    }, [isOffline]);
    ```
 
-# Network Status Example Preview
-![Network Status](./src/assets/network-status.png)
+## Network Status Example Preview
+
+![Network Status](./src/assets/network-status.png)
diff --git a/examples/on-device-storage/README.md b/examples/on-device-storage/README.md
@@ -79,5 +79,6 @@ The `useOfflineStorage` hook returns an object with the following methods:
   - Returns a promise that resolves to the updated data as an object:
     `{ numberOfFish: 10, species: salmon }`
 
-# On-Device Storage Example Preview
-![On-Device Storage](./src/assets/on-device-storage.png)
+## On-Device Storage Example Preview
+
+![On-Device Storage](./src/assets/on-device-storage.png)
diff --git a/examples/persisted-form/README.md b/examples/persisted-form/README.md
@@ -116,5 +116,6 @@ return (
 
 4. Construct your form using the `react-radfish` components. See the `/src/pages/Form.jsx` file to see how to construct the form and use the methods available from `FormWrapper`.
 
-# Persisted Form Example Preview
+## Persisted Form Example Preview
+
 ![Persisted Form](./src/assets/persisted-form.png)
diff --git a/examples/react-query/README.md b/examples/react-query/README.md
@@ -8,5 +8,6 @@ This example does _not_ include any backend persistence via IndexedDB, as this i
 
 `[GET] /species` returns a list of 4 species
 
-# React Query Example Preview
-![React Query](./src/assets/react-query.png)
+## React Query Example Preview
+
+![React Query](./src/assets/react-query.png)
diff --git a/examples/server-sync/README.md b/examples/server-sync/README.md
@@ -187,5 +187,6 @@ export const ServerSync = () => {
 };
 ```
 
-# Server Sync Example Preview
-![Server Sync](./src/assets/server-sync.png)
+## Server Sync Example Preview
+
+![Server Sync](./src/assets/server-sync.png)
diff --git a/examples/simple-table/README.md b/examples/simple-table/README.md
@@ -168,5 +168,6 @@ You can pass these props directly to the `<Table>` component to enhance its styl
 
 For a complete list of available props and detailed descriptions, please refer to the [Trussworks Table Component Documentation](https://trussworks.github.io/react-uswds/?path=/docs/components-table--docs).
 
-# Simple Table Example Preview
-![Simple Table](./src/assets/simple-table.png)
+## Simple Table Example Preview
+
+![Simple Table](./src/assets/simple-table.png)

Original file line number	Diff line number	Diff line change
`@@ -67,5 +67,6 @@ import { fullNameValidators } from "../utilities/fieldValidators";`
`67`	`67`	`}`
`68`	`68`	```
`69`	`69`
`70`		`-# Field Validators Example Preview`
`71`		`-![Field Validators](./src/assets/field-validators.png)`
	`70`	`+## Field Validators Example Preview`
	`71`	`+`
	`72`	`+![Field Validators](./src/assets/field-validators.png)`
Original file line number	Diff line number	Diff line change
`@@ -95,3 +95,7 @@ The form does include two additional examples.`
`95`	`95`	`setResetToggle(true)`
`96`	`96`	`}`
`97`	`97`	```
	`98`	`+`
	`99`	`+## Form Structure Example Preview`
	`100`	`+`
	`101`	`+![Form Structure](./src/assets/form-structure.png)`
Original file line number	Diff line number	Diff line change
`@@ -126,5 +126,6 @@ useEffect(() => {`
`126`	`126`	`}`
`127`	`127`	```
`128`	`128`
`129`		`-# Multistep Form Example Preview`
`130`		`-![Multistep Form](./src/assets/multistep.png)`
	`129`	`+## Multistep Form Example Preview`
	`130`	`+`
	`131`	`+![Multistep Form](./src/assets/multistep.png)`