Update component docs to new format with example-first structure

.vale.ini

@@ -26,6 +26,7 @@ Microsoft.Ellipses = NO # Mostly just picks up code
 Microsoft.Dashes = NO
 Microsoft.Foreign = NO
 Microsoft.Plurals = NO
+Microsoft.Quotes = NO # Mostly just picks up code
 
 # Not relevant for Fern audience
 Microsoft.GeneralURL = NO

.vale/styles/FernStyles/Acronyms.yml

@@ -84,3 +84,8 @@ exceptions:
   - RBAC
   - SAML
   - OIDC
+  - RGB
+  - JPEG
+  - RPG
+  - MIME
+  - PNG

.vale/styles/FernStyles/Headings.yml

@@ -44,42 +44,6 @@ exceptions:
   - RPC
   - SDK
   - SDKs
-  - Accordion
-  - Accordions
-  - Accordion Groups
-  - Aside
-  - Badge
-  - Badges
-  - Button
-  - Callout
-  - Callouts
-  - Card
-  - Cards
-  - Card Groups
-  - Code Blocks
-  - CodeBlock
-  - CodeBlocks
-  - CodeGroup
-  - Embed
-  - Endpoint Request Snippet
-  - Endpoint Response Snippet
-  - Endpoint Schema Snippet
-  - Frame
-  - Frames
-  - Icon
-  - Icons
-  - Param Field
-  - Param Fields
-  - ParamField
-  - Runnable Endpoint
-  - Step
-  - Steps
-  - Sticky Table
-  - StickyTable
-  - Tab
-  - Tabs
-  - Tooltip
-  - Tooltips
   - PDF
   - CSS
   - HTML
@@ -114,3 +78,4 @@ exceptions:
   - RBAC
   - YAML
   - fern.config.json
+  - Font Awesome

fern/assets/styles.css

@@ -1107,3 +1107,24 @@ h1, h2, h3 {
 .fern-sidebar-link[href$="changelog"] > svg {
   display: none;
 }
+
+/*** START -- HIGHLIGHTED FRAME STYLING ***/
+.highlight-frame {
+  background-color: var(--accent-a2);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.highlight-frame > *:first-child {
+  margin-top: 0;
+}
+
+.highlight-frame > *:last-child {
+  margin-bottom: 0;
+}
+
+:is(.dark) .highlight-frame {
+  background-color: var(--accent-a3);
+}
+/*** END -- HIGHLIGHTED FRAME STYLING ***/

fern/docs.yml

@@ -304,6 +304,10 @@ redirects:
     destination: /learn/docs/preview-publish/publishing-your-docs
 
   # Building and Customizing Your Docs redirects - specific cases first
+  - source: /learn/docs/writing-content/components/accordion-groups
+    destination: /learn/docs/writing-content/components/accordions
+  - source: /learn/docs/writing-content/components/card-groups
+    destination: /learn/docs/writing-content/components/cards
   - source: /learn/docs/building-and-customizing-your-docs/navigation
     destination: /learn/docs/configuration/navigation
   - source: /learn/docs/navigation/overview

fern/products/docs/docs.yml

@@ -35,75 +35,81 @@ navigation:
           - page: Overview
             path: ./pages/component-library/default-components/overview.mdx
             icon: fa-duotone fa-book
-          - page: Accordions
+          - page: Accordion
             path: ./pages/component-library/default-components/accordions.mdx
             icon: fa-duotone fa-chevron-down
-          - page: Accordion Groups
-            path: ./pages/component-library/default-components/accordion-groups.mdx
-            icon: fa-duotone fa-chevrons-down
+            slug: accordions
           - page: Anchor
             path: ./pages/component-library/default-components/anchor.mdx
             icon: fa-duotone fa-link
           - page: Aside
             path: ./pages/component-library/default-components/aside.mdx
             icon: fa-regular fa-comment-dots
-          - page: Badges
+          - page: Badge
             path: ./pages/component-library/default-components/badges.mdx
             icon: fa-regular fa-ribbon
+            slug: badges
           - page: Button
             path: ./pages/component-library/default-components/button.mdx
             icon: fa-duotone fa-arrow-pointer
-          - page: Callouts
+          - page: Callout
             path: ./pages/component-library/default-components/callouts.mdx
             icon: fa-duotone fa-exclamation-triangle
-          - page: Cards
+            slug: callouts
+          - page: Card
             path: ./pages/component-library/default-components/cards.mdx
             icon: fa-duotone fa-id-card
-          - page: Card Groups
-            path: ./pages/component-library/default-components/card-groups.mdx
-            icon: fa-duotone fa-grid-2
-          - page: Code Blocks
+            slug: cards
+          - page: Code block
             path: ./pages/component-library/default-components/code-blocks.mdx
             icon: fa-duotone fa-code
+            slug: code-blocks
           - page: Embed
             path: ./pages/component-library/default-components/embed.mdx
             icon: fa-duotone fa-window-restore
-          - page: Endpoint Request Snippet
+          - page: Endpoint request snippet
             path: ./pages/component-library/default-components/endpoint-request-snippet.mdx
             icon: fa-duotone fa-arrow-up
             slug: request-snippet
-          - page: Endpoint Response Snippet
+          - page: Endpoint response snippet
             path: ./pages/component-library/default-components/endpoint-response-snippet.mdx
             icon: fa-duotone fa-arrow-down
             slug: response-snippet
-          - page: Endpoint Schema Snippet
+          - page: Endpoint schema snippet
             path: ./pages/component-library/default-components/endpoint-schema-snippet.mdx
             icon: fa-duotone fa-sitemap
             slug: schema-snippet
-          - page: Runnable Endpoint
-            path: ./pages/component-library/default-components/runnable-endpoint.mdx
-            icon: fa-duotone fa-play-circle
-          - page: Frames
+          - page: Frame
             path: ./pages/component-library/default-components/frames.mdx
             icon: fa-duotone fa-window-maximize
-          - page: Icons
+            slug: frames
+          - page: Icon
             path: ./pages/component-library/default-components/icons.mdx
             icon: fa-duotone fa-icons
-          - page: Parameter Fields
+            slug: icons
+          - page: Parameter field
             path: ./pages/component-library/default-components/parameter-fields.mdx
             icon: fa-duotone fa-list
-          - page: Steps
+            slug: parameter-fields
+          - page: Runnable endpoint
+            path: ./pages/component-library/default-components/runnable-endpoint.mdx
+            icon: fa-duotone fa-play-circle
+          - page: Step
             path: ./pages/component-library/default-components/steps.mdx
             icon: fa-duotone fa-list-ol
-          - page: Sticky tables
+            slug: steps
+          - page: Sticky table
             path: ./pages/component-library/default-components/sticky-tables.mdx
             icon: fa-duotone fa-table
-          - page: Tabs
+            slug: sticky-tables
+          - page: Tab
             path: ./pages/component-library/default-components/tabs.mdx
             icon: fa-duotone fa-folder-open
-          - page: Tooltips
+            slug: tabs
+          - page: Tooltip
             path: ./pages/component-library/default-components/tooltips.mdx
             icon: fa-duotone fa-comment
+            slug: tooltips
       - page: Fern Editor
         path: ./pages/component-library/writing-content/visual-editor.mdx
         slug: fern-editor