Merge pull request #159 from oanelson/140-documentation-editorial-cleanup----design-system

Editorial changes. Closes 140.

Author: theangchen

docs/design-system/custom-components/application-container.md

@@ -4,18 +4,18 @@ sidebar_position: 1
 
 # Application Container
 
-The `Application` container is designed to handle network status changes and display appropriate toast notifications. It comes with **built-in** functionality that automatically handles these changes.
+The `Application` container handles network status changes and displays appropriate toast notifications. It has **built-in** functionality that automatically handles these changes.
 
 ## Features
 
-- **Built-in Offline/Online Notifications**: The `Application` component monitors the network status and shows toast messages when the app goes offline or comes back online.
+- **Built-in Offline/Online Notifications**: The `Application` component monitors the network status. It shows toast messages when the app goes offline or comes back online.
 - **Custom Hooks**: It leverages the `useToasts` and `useOfflineStatus` hooks from within `@nmfs-radfish/react-radfish` package.
 
 ## How It Works
 
 ### Built-in Offline/Online Notifications
 
-The `Application` component has **built-in** functionality to check the application's network status and display toast notifications when the state changes:
+The `Application` component has **built-in** functionality to check the application's network status. It displays toast notifications when the state changes:
 
 - **When the application goes offline**: A warning toast is displayed with the message `"Application is offline"`.
 - **When the application comes back online**: An info toast is displayed with the message `"Application is online"`.
@@ -24,7 +24,7 @@ This feature is provided **out of the box** and requires no additional setup fro
 
 ### Example Usage
 
-To use the `Application` component, wrap it around your app in the entry file (e.g., `index.js` or `index.jsx`):
+To use the `Application` component, wrap it around your app in the entry file (e.g. `index.js` or `index.jsx`):
 
 ```jsx
 import { Application } from "@nmfs-radfish/react-radfish";

docs/design-system/custom-components/date-picker.md

@@ -4,7 +4,9 @@ sidebar_position: 2
 
 # DatePicker
 
-The `DatePicker` component is a reusable form input designed to capture date-related information from users. It provides a consistent and accessible user interface element for selecting dates, ensuring seamless integration within NOAA web applications.
+The `DatePicker` component is an essential, versitile, reusable form input. It's designed to capture date-related information from users. It is customizable, easy to integrate, and adheres to accessibility standards. It seamlessly integrates with NOAA web applications, so developers can build consistent, accessible, and user-friendly forms and data entry interfaces.
+
+By following the best practices and examples below, developers can add the DatePicker to their projects.
 
 ## **Features**
 
@@ -25,7 +27,7 @@ The `DatePicker` component is a reusable form input designed to capture date-rel
 | `hint`     | `string` | `undefined` | No       | Supplemental text that provides additional guidance or information about the input field.  |
 | `label`        | `string` | **—**       | Yes      | The text label associated with the input field.                                            |
 | `className`    | `string` | `""`        | No       | Additional CSS classes to apply to the root element for custom styling.                    |
-| `...props`     | `object` | `-`         | No       | Any other valid HTML input attributes (e.g., `onChange`, `disabled`, etc.)                 |
+| `...props`     | `object` | `-`         | No       | Any other valid HTML input attributes (e.g. `onChange`, `disabled`, etc.).                 |
 
 ## **Installation**
 
@@ -39,7 +41,7 @@ import { DatePicker } from "@nmfs-radfish/react-radfish";
 
 ### 1. Basic Usage
 
-A simple date picker with essential props
+A simple date picker with essential props:
 
 ```jsx
 import React from "react";
@@ -64,7 +66,7 @@ export default BasicForm;
 
 ### 2. With Default Value and Custom Type
 
-Using a different input type and setting a default value
+Using a different input type and setting a default value:
 
 ```jsx
 import React from "react";
@@ -129,7 +131,7 @@ export default ControlledForm;
 
 ### 4. Custom Styling
 
-Applying custom CSS classes to the DatePicker
+Applying custom CSS classes to the DatePicker:
 
 ```jsx
 import React from "react";
@@ -156,12 +158,10 @@ export default StyledForm;
 
 ### 508 Compliance
 
-The DatePicker component ensures accessibility by using the native HTML input element, which is inherently 508 compliant. It supports keyboard navigation, allowing users to interact with the date picker without a mouse. Additionally, the component is fully compatible with screen readers, providing clear labels and descriptive hints through proper ARIA attributes. This ensures that all users, including those with disabilities, can effectively utilize the DatePicker in forms and data entry interfaces.
+The DatePicker component ensures accessibility by using the native HTML input element, which is inherently 508 compliant. It supports keyboard navigation, allowing users to interact with the date picker without a mouse. Additionally, the component is fully compatible with screen readers, providing clear labels and descriptive hints through proper ARIA attributes. This means that all users, including those with disabilities, can use the DatePicker in forms and data entry interfaces.
 
 ### RADFish DatePicker vs. Trussworks DatePicker
 
-The RADFish DatePicker offers flexibility by supporting both controlled and uncontrolled modes. In controlled mode, developers manage the value via React state, allowing for precise control over the input. In uncontrolled mode, the browser manages the form state, simplifying development for straightforward use cases. On the other hand, the Trussworks date picker only supports uncontrolled behavior, which limits flexibility in scenarios where managing the input programmatically is required. This makes the RADFish DatePicker a more versatile choice for a wider range of applications, offering developers greater control when needed.
-
-### Conclusion
+The RADFish DatePicker offers flexibility by supporting both controlled and uncontrolled modes. In controlled mode, developers manage the value via React state, allowing for precise control over the input. In uncontrolled mode, the browser manages the form state, simplifying development for straightforward use cases. 
 
-The DatePicker component is a versatile and accessible tool for capturing date information within NOAA web applications. Its customizable props, ease of integration, and adherence to accessibility standards make it an essential component for building user-friendly forms and data entry interfaces. By following the best practices and examples provided, developers can efficiently incorporate the DatePicker into their projects, enhancing both functionality and user experience.
+The Trussworks date picker only supports uncontrolled behavior. This limits flexibility in scenarios where managing the input programmatically is required. This makes the RADFish DatePicker a more versatile choice for a wider range of applications, offering developers greater control when needed.

docs/design-system/custom-components/index.mdx

@@ -4,7 +4,9 @@ sidebar_position: 1
 
 # RADFish Custom Components
 
-{/* Write top text here */}
+Most of RADFish uses standard components from React libraries and the [U.S. Design System](https://designsystem.digital.gov/), as implemented by the [react-uswds open source project](https://github.com/trussworks/react-uswds). 
+
+Custom components which are not part of these standardized libraries are listed here:
 
 
 ```mdx-code-block

docs/design-system/custom-components/table.md

@@ -4,14 +4,14 @@ sidebar_position: 3
 
 # Table
 
-The Table component is a flexible and customizable table designed for displaying tabular data.
+The `Table` component is a flexible and customizable table designed for displaying sortable data.
 
 ## Features
 
 - **Sorting**: Click on any column header to sort the table by that column. Sorting toggles between ascending, descending, and unsorted states.
 - **Multi-Column Sorting**: Multi-column sorting allows you to sort data by multiple columns. Click additional column headers in the desired order of sorting priority.
-- **Pagination**: Use the pagination controls below the table to navigate through multiple pages of data. You can move between the first, previous, next, and last page, and see the current page number and total pages.
-- **Custom Rendering**: Certain columns (like the image and price) use custom render functions to display data in a more user-friendly way.
+- **Pagination**: Use the pagination controls below the table to navigate through multiple pages of data. You can move between the first, previous, next, and last page. You can also see the current page number and total pages.
+- **Custom Rendering**: Certain columns (like image and price) use custom render functions to display data in a more user-friendly way.
 
 ## How to Use the `<Table>` Component
 
@@ -32,7 +32,7 @@ For a practical implementation, refer to the [Simple Table Example](https://gith
 | **`defaultSort`**       | `Array<Object>` | Sets the default sorting for the table, with each object specifying a key for the column and direction ("asc" or "desc"). |
 | **`className`**         | `string`        | An optional `className` for custom styling.                                                                               |
 
-#### Trussworks Table Props
+### Trussworks Table Props
 
 The `<Table>` component is built on top of the Trussworks table component, allowing you to pass Trussworks-specific props like `striped`, `bordered`, and others for additional customization.
 
@@ -61,6 +61,7 @@ For more details on available Trussworks props, refer to the [Trussworks Table D
 ## Usage Examples
 
 ### Simple
+This example shows a simple table, with two columns and two rows.
 
 ```jsx
 import { Table } from "@nmfs-radfish/react-radfish";
@@ -77,9 +78,11 @@ import { Table } from "@nmfs-radfish/react-radfish";
 />
 ```
 
+This code will render as shown in this screenshot:
 ![Table Example Screenshot](/img/example-table-simple.png)
 
 ### Pagination
+This example shows a table with multiple pages by using `paginationOptions`.
 
 ```jsx
 import { Table } from "@nmfs-radfish/react-radfish";
@@ -100,10 +103,11 @@ import { Table } from "@nmfs-radfish/react-radfish";
   }}
 />
 ```
-
+This code will render as shown in this screenshot:
 ![Table Example Screenshot](/img/example-table-pagination.png)
 
 ### Column Render Property
+Certain data types, such as images, require special rendering properties. 
 
 ```jsx
 <Table
@@ -130,10 +134,11 @@ import { Table } from "@nmfs-radfish/react-radfish";
   }}
 />
 ```
-
+This code will render as shown in this screenshot:
 ![Table Example Screenshot](/img/example-table-render-property.png)
 
 ### onRowClick Prop
+You can use `onRowClick` to pass functions using React.
 
 ```jsx
 <Table
@@ -164,9 +169,11 @@ import { Table } from "@nmfs-radfish/react-radfish";
 />
 ```
 
+This code will render as shown in this animated gif:
 ![Table Example Screenshot](/img/example-table-onClickRow.gif)
 
 ### defaultSort Prop
+You can set how the table is displayed by default.
 
 ```jsx
 <Table
@@ -189,9 +196,11 @@ import { Table } from "@nmfs-radfish/react-radfish";
 />
 ```
 
+This code will render as shown in this screenshot:
 ![Table Example Screenshot](/img/example-table-defaultSort.png)
 
 ### Trussworks Table Props
+You can add styles like `bordered` or `striped` to your table.
 
 ```jsx
 <Table
@@ -221,4 +230,5 @@ import { Table } from "@nmfs-radfish/react-radfish";
 />
 ```
 
+This code will render as shown in this animated gif:
 ![Table Example Screenshot](/img/example-table-trussworks-prop.png)

docs/design-system/us-web-design-system.md

@@ -3,3 +3,7 @@ sidebar_position: 2
 ---
 
 # U.S. Web Design System
+
+The [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/) is a set of design and development principles and guidelines. It helps deveolpers create standardized, accessible, consistent, and user-friendly websites and applications. 
+
+In most cases, RADFish uses standard components from React libraries and the U.S. Design System, as implemented by the [react-uswds open source project](https://github.com/trussworks/react-uswds). RADFish also uses some custom components which are not part of these standardized libraries. These custom components are listed [here](https://nmfs-radfish.github.io/radfish/design-system/custom-components).

docs/developer-documentation/getting-started.md

@@ -82,6 +82,6 @@ Please visit [upgrading](./upgrading.md) for more information.
 
 This script starts the Vite development server. It runs the app locally with hot module reloading, allowing for fast development and instant updates as you make changes. Open [http://localhost:3000](http://localhost:3000/) to view it in the browser.
 
-See [Available Scripts](./building-your-application/available-scripts/available-scripts.md) for full list of commands.
+See [Available Scripts](./building-your-application/available-scripts) for full list of commands.
 
 Now that you are up and running, see the [Components & Usage](./building-your-application/patterns/components.md) section to start building out your first pages!