update latest content as data docs for storybook and WTR integrations

CONTRIBUTING.md

@@ -223,7 +223,7 @@ The WTR and the full setup is covered in greater detail within [the GreenwoodJS
 
 1. **[Mock Data Requests](https://www.greenwood.dev/guides/ecosystem/web-test-runner/#content-as-data)**
 
-   If using Greenwood's Content as Data feature, mocking `fetch` with mock data is necessary.
+   If using one of Greenwood's Content as Data [Client APIs](/docs/content-as-data/data-client/), mocking `fetch` with mock data is necessary.
 
 #### Examples
 
@@ -279,38 +279,26 @@ components/
     my-component.stories.js
 ```
 
-#### _Content as Data_ Stories
-
-When a component requires a `fetch` request for data, the story will need to mock this request before being able to render within the Storybook.
-
-To mock `fetch`, create a `parameter` within the story export object named `fetchMock`. This object contains a `mocks` array with a `matcher` for the localhost network request URL. The `matcher.response` object represents the mocked data to use with the story.
-
-Checkout [the `blog-posts-list.stories.js` story](https://github.com/ProjectEvergreen/www.greenwoodjs.dev/blob/main/src/components/blog-posts-list/blog-posts-list.stories.js) as an example.
+Below is an example of a basic Storybook file:
 
 ```js
-import "./my-custom-element.js";
-import pages from "../../stories/mocks/graph.json";
+import "./header.js";
 
 export default {
-  title: "Components/My Custom Element",
-  parameters: {
-    // ...other parameters, if necessary...
-    fetchMock: {
-      mocks: [
-        {
-          matcher: {
-            url: "http://localhost:1985/graph.json",
-            response: {
-              body: pages,
-            },
-          },
-        },
-      ],
-    },
-  },
+  title: "Components/Header",
 };
+
+const Template = () => "<app-header></app-header>";
+
+export const Primary = Template.bind({});
 ```
 
+#### Content as Data
+
+When a component implements one of Greenwood's Content as Data [Client APIs](/docs/content-as-data/data-client/), the story will need to mock this request before being able to render within the Storybook.
+
+See the [Greenwood Storybook docs](/guides/ecosystem/storybook/#content-as-data) for more information and [the _blog-posts-list.stories.js_ story](https://github.com/ProjectEvergreen/www.greenwoodjs.dev/blob/main/src/components/blog-posts-list/blog-posts-list.stories.js) for an example in this project.
+
 ## Hosting and Deployment
 
 This project is hosted on Netlify and automatically deploys on each merge into main. Release branches will be curated over the course of a Greenwood release cycle and then merged at the time the new Greenwood release is published to NPM.

src/pages/guides/ecosystem/storybook.md

@@ -201,9 +201,11 @@ export default defineConfig({
 
 ## Content as Data
 
-If you are using any of Greenwood's [content as data](/docs/content-as-data/) features, you'll want to configure Storybook for mocking `fetch` calls in your stories.
+If you are using any of Greenwood's Content as Data [Client APIs](/docs/content-as-data/data-client/), you'll want to configure Storybook to mock the HTTP calls Greenwood's data client makes, and provide the desired response needed based on the API being called.
 
-1. First, install the [**storybook-addon-fetch-mock**](https://storybook.js.org/addons/storybook-addon-fetch-mock) addon
+This can be accomplished with the [**storybook-addon-fetch-mock**](https://storybook.js.org/addons/storybook-addon-fetch-mock) addon and configuring it with the right `matcher.url` and `matcher.response`
+
+1. First, install the **storybook-addon-fetch-mock** addon
    ```shell
    $ npm i -D storybook-addon-fetch-mock
    ```
@@ -239,7 +241,8 @@ If you are using any of Greenwood's [content as data](/docs/content-as-data/) fe
              matcher: {
                url: "http://localhost:1984/___graph.json",
                response: {
-                 body: pages,
+                 // this is an example of mocking out getContentByRoute
+                 body: pages.filter((page) => page.route.startsWith("/blog/")),
                },
              },
            },

src/pages/guides/ecosystem/web-test-runner.md

@@ -192,7 +192,9 @@ export default {
 
 ## Content as Data
 
-If you are using any of Greenwood's [content as data](/docs/content-as-data/) features, you'll want to have your tests handle mocking of `fetch` calls. This can be done with a simple override of `window.fetch`
+If you are using any of Greenwood's Content as Data [Client APIs](/docs/content-as-data/data-client/), you'll want to have your tests handle mocking of `fetch` calls.
+
+This can be done by overriding `window.fetch` and providing the desired response needed based on the API being called:
 
 ```js
 import { expect } from "@esm-bundle/chai";
@@ -202,7 +204,8 @@ import "./blog-posts-list.js";
 // override fetch to return a promise that resolves to our mock data
 window.fetch = function () {
   return new Promise((resolve) => {
-    resolve(new Response(JSON.stringify(graph)));
+    // this is an example of mocking out getContentByRoute
+    resolve(new Response(JSON.stringify(graph.filter((page) => page.route.startsWith("/blog/")))));
   });
 };