From c1bc127bf4b6d2b8e5b2eda246eded28cb16ec60 Mon Sep 17 00:00:00 2001 From: Jay Giang Date: Tue, 27 May 2025 15:52:35 -0700 Subject: [PATCH 1/5] Fix headings for lesson-1 for docusaurus right sidebar readability --- docs/learn/lesson-1.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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. From 89b3ae29a6f940a37a850584857b4c29f4e77ef6 Mon Sep 17 00:00:00 2001 From: Jay Giang Date: Tue, 27 May 2025 15:52:55 -0700 Subject: [PATCH 2/5] Cleanup and edit lesson 2 --- docs/learn/lesson-2.mdx | 312 ++++++++++++++++++++++++++++++++-------- 1 file changed, 250 insertions(+), 62 deletions(-) diff --git a/docs/learn/lesson-2.mdx b/docs/learn/lesson-2.mdx index 04d5b35..d0ed662 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 - -