Make steps appear in TOC in Versioning and Product Switching pages (#224)

Author: devalog

fern/products/docs/pages/navigation/products.mdx

@@ -26,8 +26,8 @@ Each product can contain its own distinct versions, tabs, sections, pages, and A
 
 ## Add Products to Your Docs
 
-<Steps>
-### Define your products
+<Steps toc={true}>
+<Step title="Define your products">
 
 Create a `products` folder inside of your `fern` folder. To specify a product's contents and navigational structure, add a `.yml` file to the `products` folder for each product.
 Make sure to include the `navigation` and `tabs` properties, if applicable.
@@ -83,8 +83,8 @@ tabs:
 ```
 </CodeBlock>
 </CodeBlocks>
-
-### Add your product configuration
+</Step>
+<Step title="Add your product configuration">
 
 To define a product, add an item to the `products` list in `docs.yml`, specifying the `display-name` and `path`.
 
@@ -110,8 +110,8 @@ products:
     subtitle: Product B subtitle # optional
 ```
 </CodeBlock>
-
-### Add versioning to your products (optional)
+</Step>
+<Step title="Add versioning to your products (optional)">
 
 You can optionally add versions to a product. Versioned and unversioned products can live next to each other in your site. Each version of a single product has its own `yml` file.
 
@@ -165,9 +165,11 @@ products:
 </CodeBlock>
 
 For more information on setting up versioned products, follow our [versioning docs](/docs/navigation/versions).
+</Step>
+<Step title="Remove extra navigation from docs.yml">
 
-### Remove extra `navigation` from `docs.yml`
 If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure to remove. Those fields should now belong in the product-specific `.yml` files. 
+</Step>
 </Steps>
 
 ## Customizing Selector Styling

fern/products/docs/pages/navigation/versions.mdx

@@ -11,8 +11,8 @@ Each version of your docs can contain its own distinct tabs, sections, pages, an
 
 **To add versions to your docs:**
 
-<Steps>
-### Define your versions
+<Steps toc={true}>
+<Step title="Define your versions">
 
 Create a `versions` folder inside of your `fern` folder. To specify the contents of each version, add a `.yml` file to the `versions` folder to define the navigational structure of that version. Make sure to include the `navigation` and `tabs` properties, if applicable. 
 
@@ -79,8 +79,8 @@ tabs:
 </CodeBlocks>
 
 <Note>You can also have multiple products, some versioned and some unversioned. For more information on setting up multiple products, follow our [product switching docs](/docs/navigation/products).</Note>
-
-### Add your version configuration
+</Step>
+<Step title="Add your version configuration">
 
 To define a version, in `docs.yml`, add an item to the `versions` list, specifying the `display-name` and `path`. 
 
@@ -104,7 +104,9 @@ versions:
     path: ./versions/v2-1.yml
 ```
 </CodeBlock>
+</Step>
+<Step title="Remove extra navigation from docs.yml">
 
-### Remove extra `navigation` from `docs.yml`
 If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure to remove. Those fields should now belong in the version-specific `.yml` files. 
+</Step>
 </Steps>