Snippets: Update group treatment and add description support

[michaeltaranto]

Improve affordance of snippet group by nesting snippets under sticky group headers.
Snippets also now support an optional description property to help users differentiate similar snippets.

Migration

While not a breaking change, this update does change the way snippets are rendered and how groups are treated, so some migration may be desired.

Previously snippets rendered the group and name on the same line.
For example:

[
  {
    "group": "Button",
    "name": "Small",
    "code": "..."
  },
  {
    "group": "Button",
    "name": "Large",
    "code": "..."
  }
]

resulted in:

---------------
Button Small
Button Large
---------------

Groups are now elevated to sticky headers, with snippets nested underneath:

---------------
Button
---------------
Small
Large
---------------

To avoid grouping migrate to use name and description properties instead, and omit group:

 [
   {
-    group: 'Button',
+    name: 'Button',
-    name: 'Small',
+    description: 'Small',
     code: '...',
   },
   {
-    group: 'Button',
+    name: 'Button',
-    name: 'Large',
+    description: 'Large',
     code: '...',
   },
 ]

which results in the same UX as previously.

[changeset-bot]

🦋 Changeset detected

Latest commit: 81100d2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
playroom	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[felixhabib]

I'm still seeing the top margin offset problem in Safari and Firefox as well as Chrome 🤔

[felixhabib]

Working really solid now with scrolling! Nice improvement! I left a couple more suggestions but happy with where it's at ⭐