diff --git a/docs/building-your-application/development-standards.md b/docs/building-your-application/development-standards.md index 4ed81b5..bcd3017 100644 --- a/docs/building-your-application/development-standards.md +++ b/docs/building-your-application/development-standards.md @@ -10,7 +10,7 @@ sidebar_position: 4 USWDS (United States Web Design System) is a web design system that specifies coding patterns, components, and design tokens that outline how government applications should be built while adhering to 508 compliance guidelines. -More specifically, when building applications with React, there is an existing component library, [react-uswds](https://github.com/trussworks/react-uswds) that our project extends for the purposes of building any Radfish application. These components maintain all functionality of `react-uswds` components, but are branded with NOAA themes and styles. These components live in `react-radfish` directory, and allow for development in a modern React environment with NOAA look and feel. +More specifically, when building applications with React, there is an existing component library, [react-uswds](https://github.com/trussworks/react-uswds) that our project extends for the purposes of building any RADFish application. These components maintain all functionality of `react-uswds` components, but are branded with NOAA themes and styles. These components live in `react-radfish` directory, and allow for development in a modern React environment with NOAA look and feel. For reference on the full `react-uswds` library, you can reference the deployed storybook: @@ -55,7 +55,7 @@ Branding refers to the process of creating a distinct identity for a product or You will notice, that the components above do not have any `className` assigned, and you may be wondering how to style that component. To do this, there are a couple of things to keep in mind. 1. Each component in `react-radfish` has it’s own scoped css file, that modifies the existing `@trussworks` css in order to inject NOAA styles. This file should not be touched. If you notice a bug or issue, please see `CONTRIBUTING` -2. You can modify the general theme of these components in the `styles/theme.css` file. You can change things like color variables, font-family, and line-height here, and they will be propagated throughout the application, as well as throughout `react-radfish` . Radfish utilizes css variables, and can be used like so: +2. You can modify the general theme of these components in the `styles/theme.css` file. You can change things like color variables, font-family, and line-height here, and they will be propagated throughout the application, as well as throughout `react-radfish` . RADFish utilizes css variables, and can be used like so: ```css // styles/theme.js @@ -87,7 +87,7 @@ By following this method, you can leverage the underlying `uswds` component, mai As NOAA is a governmental agency, Section 508 compliance is crucial for the development of frontend apps because it ensures that these applications are accessible to all users, including those with disabilities. NOAA provides vital information related to weather, oceans, and atmospheric conditions, and it is imperative that individuals with diverse abilities can access and utilize these resources. -508 compliance has been a driving factor for many decisions we make in Radfish, from extending a compliant component library in `@trussworks/react-uswds` to our UX strategies. +508 compliance has been a driving factor for many decisions we make in RADFish, from extending a compliant component library in `@trussworks/react-uswds` to our UX strategies. **Resources:** Read more about 508 compliance here: [https://www.section508.gov/](https://www.section508.gov/) diff --git a/docs/building-your-application/patterns/components.md b/docs/building-your-application/patterns/components.md index 4fc429f..4faf8c4 100644 --- a/docs/building-your-application/patterns/components.md +++ b/docs/building-your-application/patterns/components.md @@ -6,7 +6,7 @@ sidebar_position: 5 ## Building your first page and form -When building applications with React, there is an existing component library, [react-uswds](https://trussworks.github.io/react-uswds/?path=/docs/welcome--docs) that our project extends for the purposes of building any Radfish application. These components maintain all functionality of `react-uswds` components, but are branded with NOAA themes and styles. These components live in `react-radfish` directory, and allow for development in a modern React environment with NOAA look and feel. +When building applications with React, there is an existing component library, [react-uswds](https://trussworks.github.io/react-uswds/?path=/docs/welcome--docs) that our project extends for the purposes of building any RADFish application. These components maintain all functionality of `react-uswds` components, but are branded with NOAA themes and styles. These components live in `react-radfish` directory, and allow for development in a modern React environment with NOAA look and feel. For reference on the full `react-uswds` library, you can reference the deployed storybook: diff --git a/docs/building-your-application/patterns/mock-api.md b/docs/building-your-application/patterns/mock-api.md index 13d6a97..abb2a03 100644 --- a/docs/building-your-application/patterns/mock-api.md +++ b/docs/building-your-application/patterns/mock-api.md @@ -4,9 +4,9 @@ sidebar_position: 4 # Mock API -As a frontend developer, it can sometimes be a blocker when you are developing a feature that has a dependency on an external API. Often times, you can be waiting for a backend developer to finish building our their API endpoints before you can continue building your feature. RadfishApp ships with a built-in mock server that allows the frontend developer to “stub out” and mock API requests/responses without this hard dependency during development. +As a frontend developer, it can sometimes be a blocker when you are developing a feature that has a dependency on an external API. Often times, you can be waiting for a backend developer to finish building our their API endpoints before you can continue building your feature. RADFishApp ships with a built-in mock server that allows the frontend developer to “stub out” and mock API requests/responses without this hard dependency during development. -More specifically, RadfishApp ships with [mock service worker](https://mswjs.io/) and is preconfigured in the boilerplate application. +More specifically, RADFishApp ships with [mock service worker](https://mswjs.io/) and is preconfigured in the boilerplate application. At the entrypoint of the React application, we enable API mocking with the `enableMocking` function: diff --git a/docs/building-your-application/patterns/state-management.md b/docs/building-your-application/patterns/state-management.md index 23ec6aa..87d3406 100644 --- a/docs/building-your-application/patterns/state-management.md +++ b/docs/building-your-application/patterns/state-management.md @@ -83,7 +83,7 @@ At a high level, we handle state management for tables in a similar way, althoug By doing this, `DemoTable` can now utilize the `useTableState` hook, that provides the component with all of the state, event handlers, sorting functionality, as well as other pieces of functionality that may be needed for the application’s needs. -More specifically, Radfish leverages a React Library called [Tanstack Table](https://tanstack.com/table/latest/docs/framework/react/react-table) which makes it simple to handle traditionally tricky table interactions like sorting, filtering, and data fetching. Tanstack Table manages a lot of the heavy lifting with regards to re-rendering, and provides an easy to use interface to make static tables dynamic and interactive. +More specifically, RADFish leverages a React Library called [Tanstack Table](https://tanstack.com/table/latest/docs/framework/react/react-table) which makes it simple to handle traditionally tricky table interactions like sorting, filtering, and data fetching. Tanstack Table manages a lot of the heavy lifting with regards to re-rendering, and provides an easy to use interface to make static tables dynamic and interactive. We suggest looking closely at the official Tanstack Table documentation to get familiar with how the library works. But, in the context of the boilerplate repo, we’ve provided a simple interface in `TableWrapper` that leverages the `useReactTable` hook. @@ -128,7 +128,7 @@ PWAs leverage service workers, which are scripts that run in the background inde **See more about service workers [here](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)** -Service workers are integrated into the Radfish application by default. After scaffolding the application you will notice the following files: +Service workers are integrated into the RADFish application by default. After scaffolding the application you will notice the following files: `service-worker.js` @@ -145,7 +145,7 @@ serviceWorkerRegistration.register(); This will register the React application as a PWA, which can be downloaded from the browser. For more information on how to download the PWA onto your device, see [this blog article](https://aureatelabs.com/blog/install-pwa-to-device/) -Additionally, you can query for whether or not the Radfish application is online or offline by leveraging the [navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) +Additionally, you can query for whether or not the RADFish application is online or offline by leveraging the [navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) > Note, that this service worker is preconfigured when using the boilerplate `react-javascript` template diff --git a/docusaurus.config.js b/docusaurus.config.js index 8f188f2..487f11f 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -8,7 +8,7 @@ import { themes as prismThemes } from "prism-react-renderer"; /** @type {import('@docusaurus/types').Config} */ const config = { - title: "Radfish Documentation", + title: "RADFish Documentation", tagline: "Frontend Development Tooling for NOAA Developers", favicon: "img/favicon.ico", @@ -53,7 +53,7 @@ const config = { ({ image: "img/radfish-logo.png", navbar: { - title: "RADfish Docs", + title: "RADFish Docs", logo: { alt: "RADFish Logo", src: "img/radfish-logo.png",