Use description and title front matter for pages rendered from /content (#6832)

Author: alex-page

.changeset/fair-owls-hug.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Use description and title front matter for pages rendered from /content

polaris.shopify.com/content/components/account-connection/index.md

@@ -1,5 +1,6 @@
 ---
 title: Account connection
+description: The account connection component is used so merchants can connect or disconnect their store to various accounts. For example, if merchants want to use the Facebook sales channel, they need to connect their Facebook account to their Shopify store.
 category: Actions
 keywords:
   - AccountConnection
@@ -19,12 +20,6 @@ examples:
     description: Use to let merchants connect or disconnect their store to their third-party accounts, like Facebook.
 ---
 
-# Account connection
-
-The account connection component is used so merchants can connect or disconnect their store to various accounts. For example, if merchants want to use the Facebook sales channel, they need to connect their Facebook account to their Shopify store.
-
----
-
 ## Best practices
 
 The account component should:

polaris.shopify.com/content/components/action-list/index.md

@@ -1,5 +1,6 @@
 ---
 title: Action list
+description: Action lists render a list of actions or selectable options. This component is usually placed inside a [popover container](https://polaris.shopify.com/components/popover) to create a dropdown menu or to let merchants select from a list of options.
 category: Actions
 keywords:
   - ActionList
@@ -35,12 +36,6 @@ examples:
     description: Use help text when the normal Verb noun syntax for the actions does not provide sufficient context for the merchant.
 ---
 
-# Action list
-
-Action lists render a list of actions or selectable options. This component is usually placed inside a [popover container](https://polaris.shopify.com/components/popover) to create a dropdown menu or to let merchants select from a list of options.
-
----
-
 ## Best practices
 
 Actions lists should:

polaris.shopify.com/content/components/app-provider/index.md

@@ -1,5 +1,6 @@
 ---
 title: App provider
+description: App provider is a required component that enables sharing global settings throughout the hierarchy of your application.
 category: Structure
 keywords:
   - app
@@ -29,12 +30,6 @@ examples:
     description: With a `colorScheme`, the app provider component will set the root color scheme for the App (such as light or dark). For `colorScheme` configuration, see the [CustomProperties](https://polaris.shopify.com/components/custom-properties) component documentation.
 ---
 
-# App provider
-
-App provider is a required component that enables sharing global settings throughout the hierarchy of your application.
-
----
-
 ## Best practices
 
 The app provider component is required to use Polaris. Without it, the components in your application will not function correctly. You must wrap the root (the top) of your application in the app provider component.

polaris.shopify.com/content/components/autocomplete/index.md

@@ -1,5 +1,6 @@
 ---
 title: Autocomplete
+description: The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `Combobox` and `Listbox` components with minor UI differences.
 category: Forms
 keywords:
   - autocomplete
@@ -36,12 +37,6 @@ examples:
     description: Use to help merchants complete a destructive action quickly.
 ---
 
-# Autocomplete
-
-The autocomplete component is an input field that provides selectable suggestions as a merchant types into it. It allows merchants to quickly search through and select from large collections of options. It's a convenience wrapper around the `Combobox` and `Listbox` components with minor UI differences.
-
----
-
 ## Best practices
 
 The autocomplete component should:

polaris.shopify.com/content/components/avatar/index.md

@@ -1,5 +1,6 @@
 ---
 title: Avatar
+description: Avatars are used to show a thumbnail representation of an individual or business in the interface.
 category: Images and icons
 keywords:
   - photo
@@ -29,12 +30,6 @@ examples:
     description: Use a `square` shape when the avatar represents a non-person entity like an app, channel, or store.
 ---
 
-# Avatar
-
-Avatars are used to show a thumbnail representation of an individual or business in the interface.
-
----
-
 ## Best practices
 
 Avatars should be one of 4 sizes:

polaris.shopify.com/content/components/badge/index.md

@@ -1,5 +1,6 @@
 ---
 title: Badge
+description: Badges are used to inform merchants of the status of an object or of an action that’s been taken.
 category: Images and icons
 keywords:
   - pills
@@ -49,12 +50,6 @@ examples:
     description: Use when the status and progress accessibilityLabels are not appropriate to a given context.
 ---
 
-# Badge
-
-Badges are used to inform merchants of the status of an object or of an action that’s been taken.
-
----
-
 ## Best practices
 
 Badges benefit merchants by:

polaris.shopify.com/content/components/banner/index.md

@@ -1,5 +1,6 @@
 ---
 title: Banner
+description: Informs merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way. Banners are placed at the top of the page or section they apply to, and below the page or section header.
 category: Feedback indicators
 keywords:
   - inform
@@ -56,12 +57,6 @@ examples:
     description: Banners inside of cards render with less spacing and a pared-back design to fit within a content context.
 ---
 
-# Banner
-
-Informs merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way. Banners are placed at the top of the page or section they apply to, and below the page or section header.
-
----
-
 ## Best practices
 
 Banners should:

polaris.shopify.com/content/components/button-group/index.md

@@ -1,5 +1,6 @@
 ---
 title: Button group
+description: Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
 category: Actions
 keywords:
   - ButtonGroup
@@ -29,12 +30,6 @@ examples:
     description: Use to emphasize several buttons as a thematically-related set among other controls.
 ---
 
-# Button group
-
-Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.
-
----
-
 ## Best practices
 
 Button groups should:

polaris.shopify.com/content/components/button/index.md

@@ -1,5 +1,6 @@
 ---
 title: Button
+description: Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.
 category: Actions
 keywords:
   - CTA
@@ -80,14 +81,6 @@ examples:
     description: Use when a button has been pressed and the associated action is in progress.
 ---
 
-# Button
-
-Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as “view shipping settings”.
-
-For navigational actions that appear within or directly following a sentence, use the [link component](https://polaris.shopify.com/components/link).
-
----
-
 ## Best practices
 
 Buttons should: