docs: vitest docs final drafting and home page logo tweaks and labels

Author: thescientist13

src/assets/vitest.svg

@@ -35,17 +35,19 @@ export default class BuildWithFriends extends HTMLElement {
           </span>
           <span class="${styles.icon}">
             <span>${wtrIcon}</span>
-            <span>Web Test Runner</span>
+            <span class="${styles.iconLabel}">Web Test Runner</span>
           </span>
           <span class="${styles.icon}">
-            ${wccIcon}
+            <span>${wccIcon}</span>
+            <span class="${styles.iconLabel}">WC Compiler</span>
           </span>
           <span class="${styles.icon}">
             <span>${openPropsIcon}</span>
-            <span>Open Props</span>
+            <span class="${styles.iconLabel}">Open Props</span>
           </span>
           <span class="${styles.icon}">
-            ${vitestIcon}
+            <span>${vitestIcon}</span>
+            <span class="${styles.iconLabel}">Vitest</span>
           </span>
         </div>
       </div>

src/components/build-with-friends/build-with-friends.js

@@ -35,6 +35,10 @@
   display: inline-block;
 }
 
+.iconLabel {
+  padding-left: var(--size-1);
+}
+
 @media (min-width: 600px) {
   .icon {
     display: inline-block;

src/components/build-with-friends/build-with-friends.module.css

@@ -47,7 +47,7 @@ We were not able to detect the right builder for your project. Please select one
     Webpack 5
 ```
 
-> See our Vitest docs for additional configuration examples to support [Import Attributes](/guides/ecosystem/vitest/#import-attributes) and [Greenwood resource plugins](/guides/ecosystem/vitest/#resource-plugins) usage in your components. For this guide, you'll be updating a _vite.config.js_ file instead.
+> See our Vitest docs for additional configuration examples to support [Import Attributes](/guides/ecosystem/vitest/#import-attributes) and [Greenwood resource plugins](/guides/ecosystem/vitest/#resource-plugins) usage in your components. For that guide, you'll be updating a _vite.config.js_ file instead.
 
 ## Usage
 

src/pages/guides/ecosystem/storybook.md

@@ -14,7 +14,7 @@ tocHeading: 2
 
 > At time of writing, this guide was based on Vitest v4.x and Vite v7.x.
 
-Install Vite and Vitest:
+First, install Vite and Vitest:
 
 <!-- prettier-ignore-start -->
 
@@ -56,13 +56,13 @@ Next, let's create a _vitest.config.js_ file and configure the location of our t
 
 <!-- prettier-ignore-end -->
 
-Lastly, let's create some NPM scripts to run our tests. By default, vitest will run in watch mode which is great for TDD (Test Driven Development).
+Lastly, let's create some NPM scripts to run your tests. By default, Vitest will run in watch mode which is great for TDD (Test Driven Development).
 
-Below is an example of how to setup NPM scripts for development:
+Below is an example of how to setup NPM scripts for testing:
 
 <!-- prettier-ignore-start -->
 
-<app-ctc-block variant="snippet">
+<app-ctc-block variant="snippet" heading="package.json">
 
   ```json
   {
@@ -99,7 +99,7 @@ The best way to test Web Components is in a browser. For this guide, we will use
 
 <!-- prettier-ignore-end -->
 
-Then install Playwright
+Then install Playwright:
 
 <!-- prettier-ignore-start -->
 
@@ -141,7 +141,7 @@ Then in our _vitest.config.js_ file, let's add configuration for Playwright:
 
 <!-- prettier-ignore-end -->
 
-> Note: For CI environments like GitHub Actions, you'll want to add a step for install Playwright include deps
+> Note: For CI environments like GitHub Actions, you'll want to add a step for installing Playwright, including the [`--with-deps` flag](https://playwright.dev/docs/ci):
 >
 > ```shell
 > npx playwright install --with-deps
@@ -225,7 +225,7 @@ You should now be good to start writing your first test! ⚡
 
 ## Import Attributes
 
-As [Vite does not support Import Attributes](https://github.com/vitejs/vite/issues/14674), we will need to update our _vitest.config.js_ file and write a [custom plugin](https://vitejs.dev/guide/api-plugin) to work around this.
+As [Vite does not support Import Attributes](https://github.com/vitejs/vite/issues/14674), you will need to update your _vitest.config.js_ file and write a [custom plugin](https://vitejs.dev/guide/api-plugin) to work around this.
 
 In this example we are handling for CSS Module scripts:
 
@@ -302,7 +302,7 @@ Phew, should be all set now.
 
 ## Resource Plugins
 
-If you're using one of Greenwood's [resource plugins](/docs/plugins/), you'll want to update the _vitest.config.js_ file so we can create a custom transformation plugin that can leverage Greenwood's plugins to automatically handle custom transformations.
+If you're using one of Greenwood's [resource plugins](/docs/plugins/), you'll want to update the _vitest.config.js_ file with a plugin that can leverage Greenwood's plugins to automatically handle custom transformations.
 
 For example, if you're using Greenwood's [Raw Plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-import-raw), you'll need to create a wrapping Vite plugin to handle this transformation.