diff --git a/docs/learn/lesson-1.mdx b/docs/learn/lesson-1.mdx index fe6e4e2..c1cefa9 100644 --- a/docs/learn/lesson-1.mdx +++ b/docs/learn/lesson-1.mdx @@ -32,7 +32,7 @@ We'll begin by structuring our `HomePage` using `GridContainer` and `Grid` compo For more detailed information on the React components (`GridContainer`, `Grid`) from `@trussworks/react-uswds` that we are using, please see the [Trussworks React USWDS Grid documentation](https://trussworks.github.io/react-uswds/?path=/docs/components-grid--docs). To understand the foundational CSS grid system and its principles upon which these components are built, the [official USWDS Layout Grid documentation](https://designsystem.digital.gov/utilities/layout-grid/) is also a valuable resource. -**1. Import Grid Components:** +### 1.1: Import Grid Components In `src/pages/Home.jsx`, update your import statement from `@trussworks/react-uswds` to also include `GridContainer` and `Grid`. Your existing import for `Button` will be modified as follows: @@ -45,7 +45,7 @@ In `src/pages/Home.jsx`, update your import statement from `@trussworks/react-us //diff-add-end ``` -**2. Apply the Grid Structure:** +### 1.2: Apply the Grid Structure Next, modify the `return` statement of your `HomePage` component to incorporate the USWDS grid. You will wrap your main page content (everything inside the main `<>...` fragment, except for the sticky footer) with these components. diff --git a/docs/learn/lesson-2.mdx b/docs/learn/lesson-2.mdx index 04d5b35..34c52ae 100644 --- a/docs/learn/lesson-2.mdx +++ b/docs/learn/lesson-2.mdx @@ -1,113 +1,245 @@ -import CodeBlock from '@theme/CodeBlock'; +import CodeBlock from "@theme/CodeBlock"; -# Lesson 2: [Start Trip] Form Inputs +# Lesson 2: Start Trip Form Inputs -This lesson focuses on building the first step of the trip logging form, the "Start Trip" page. We'll use components from the U.S. Web Design System (USWDS) library (`@trussworks/react-uswds`) to add inputs for the trip date, start time, and weather conditions. We will also start the application in development mode to take advantage of Hot Module Replacement (HMR) for faster feedback during development. +This lesson focuses on building the first step of the trip logging form, the "Start Trip" page. We'll use components from the U.S. Web Design System (USWDS) library (`@trussworks/react-uswds`) to add inputs for the trip date, start time, and weather conditions. -## Getting Started +## Step 1: Add Date Picker Input + +We need a way for the user to select the date of their fishing trip. We'll use the `DatePicker` component from `@trussworks/react-uswds`. + +### 1.1: Import the DatePicker Component -Before adding the form inputs, let's start the development server. Open your terminal, navigate to the project's root directory (`learn-radfish`), and run the following command: +First, open `src/pages/StartTrip.jsx` and update the import statement from `@trussworks/react-uswds` to include `DatePicker`. Your existing import will be modified as follows: -```bash -npm run start +```jsx title="src/pages/StartTrip.jsx" showLineNumbers=5 +import { + Button, + //diff-add-start + DatePicker, + //diff-add-end + ErrorMessage, + //diff-add-start + Form, + FormGroup, + //diff-add-end + Grid, + GridContainer, + //diff-add-start + Label, + //diff-add-end + StepIndicator, + StepIndicatorStep, +} from "@trussworks/react-uswds"; ``` -This command starts the Vite development server. It will automatically open the application in your default web browser. Thanks to Hot Module Replacement (HMR), most changes you make to the code will be reflected in the browser almost instantly without needing a full page reload, speeding up your development workflow. Keep this terminal window open while you work through the lesson. +**Understanding the USWDS Components:** -## Step 1: Add Date Picker Input +Before we start building the form, let's understand what each of these imported components does: -We need a way for the user to select the date of their fishing trip. We'll use the `DatePicker` component from `@trussworks/react-uswds`. +- **`Form`**: Main container for form elements with submission handling and styling +- **`FormGroup`**: Wrapper that groups form elements for proper spacing and accessibility +- **`Label`**: Creates accessible form labels with support for required indicators +- **`DatePicker`**: Calendar interface for date selection with formatting and validation + +These components work together to create accessible, well-structured forms that follow USWDS design patterns and accessibility guidelines. + +### 1.2: Add the DatePicker to the Form -Open `src/pages/StartTrip.jsx`. Locate the `Form` component to add the following code: +Now locate the `Form` component to add the following code: -```jsx title="src/pages/StartTrip.jsx" -
-// diff-add-start - -