[SettingToggle] Move with primitive components example first (#9111)

### WHY are these changes introduced?

Moves the `with primitive components` example first so that it shows by
default on the SettingToggle page in the style guide.

### WHAT is this pull request doing?

- Moves `with primitive components` first
- Adds copy to example description to clarify that it is built with
layout and typography primitives, not the deprecated `SettingToggle`
component
    <details>
      <summary>SettingToggle — before</summary>
<img
src="https://user-images.githubusercontent.com/26749317/234971552-dae13e78-8b6f-4b26-8cb9-530a6c875882.png"
alt="SettingToggle — before">
    </details>
    <details>
      <summary>SettingToggle — after</summary>
<img
src="https://user-images.githubusercontent.com/26749317/234971548-e704e1cf-8122-4364-bf51-43ccb2fd83e5.png"
alt="SettingToggle — after">
    </details>

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/shaggy-cycles-greet.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated `SettingTogle` to show `with primitive components` first in style guide

polaris.shopify.com/content/components/deprecated/setting-toggle.md

@@ -19,12 +19,12 @@ status:
   value: Deprecated
   message: The SettingToggle is a simple layout component that composes its children with a button in a card. This pattern should be built using the primitive layout and typography components. See the "With primitive components" example to learn how to build setting toggles with primitive components.
 examples:
+  - fileName: setting-toggle-with-primitive-components.tsx
+    title: With primitive components
+    description: Use to allow merchants to toggle a setting that has an on or off state. Display the name of the setting and provide a description so merchants have the context needed to decide whether or not to enable the setting. This pattern is built using the layout and typography components, instead of the deprecated `SettingToggle` component.
   - fileName: setting-toggle-deprecated.tsx
     title: With deprecated component
     description: The setting toggle component is deprecated. The "With primitive components" example is the recommended way to build the setting toggle pattern.
-  - fileName: setting-toggle-with-primitive-components.tsx
-    title: With primitive components
-    description: Use to allow merchants to toggle a setting that has an on or off state. Display the name of the setting and provide a description so merchants have the context needed to decide whether or not to enable the setting.
 ---
 
 ## Best practices