[Feat]: Component doc pages should show a preview in view when you load the page

[adixon-adobe]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

documentation/all

Description of the requested feature

Sometimes I'm looking for a component by the look of it, and I noticed that we often don't show the actual component examples until pretty low down on the page. It'd be nice to have a quick preview at the top of each page.

Mockups or screenshots

No response

Implementation notes or ideas

No response

[hunterloftis]

We should schedule this for after #1663

[Westbrook]

Other feedback for docs design/layout...

Re: "Try it on WebComponents.dev" buttons.

Honestly they just all blended together for me and looked like status badges

[Westbrook]

@Rajdeepc you mentioned an interest in our 11ty usage. This is one place where we'd like to leverage it more directly. A POC of what this could look like is available at https://demo-first-docs--spectrum-web-components.netlify.app/components/button/. If you have thoughts on smart ways to bind custom-element.json files with 11ty to make this possible, that would be great to hear. Even if we were to drop the attribute Pickers for an initial release, there would be lots of benefit from including something like this in the docs.

[Westbrook]

These are starting to make their way into the public docs site: https://opensource.adobe.com/spectrum-web-components/components/action-bar/

As template.ts and args.ts files are abstracted in the stories directory of each package, this technique will propagate through the project.

[Westbrook]

We've got a pretty "small" library here at this point, so only a few packages remain to adopt the template.ts and args.ts approach to allow them to be consumed at full fidelity into the documentation site. Some of these might not make sense in this context, but the more creativity at play here, the better...

To Do:

• Action Bar
  • args.ts
• Action Button
  • template.ts
  • args.ts
• Action Group
  • template.ts
  • args.ts
• Action Menu
  • template.ts
  • args.ts
• Asset
  • template.ts
  • args.ts
• Avatar
  • template.ts
  • args.ts
• Badge
  • template.ts
  • args.ts
• Button
  • args.ts
• Button Group
  • template.ts
  • args.ts
• Card
  • template.ts
  • args.ts
• Checkbox
  • template.ts
  • args.ts
• Coachmark
  • template.ts
  • args.ts
• Color Area
  • template.ts
  • args.ts
• Color Handle
  • template.ts
  • args.ts
• Color Loupe
  • template.ts
  • args.ts
• Color Slider
  • template.ts
  • args.ts
• Color Wheel
  • template.ts
  • args.ts
• Combobox
  • template.ts
  • args.ts
• Dialog
  • template.ts
  • args.ts
• Divider
  • template.ts
  • args.ts
• Dropzone
  • template.ts
  • args.ts
• Field Group
  • template.ts
  • args.ts
• Field Label
  • template.ts
  • args.ts
• Help Text
  • template.ts
  • args.ts
• Icon
  • template.ts
  • args.ts
• Icons
  • template.ts
  • args.ts
• Icons UI
  • template.ts
  • args.ts
• Icons Workflow
  • template.ts
  • args.ts
• Iconset
  • template.ts
  • args.ts
• Illustrated Message
  • template.ts
  • args.ts
• Infield Button
  • template.ts
  • args.ts
• Link
  • template.ts
  • args.ts
• Menu
  • template.ts
  • args.ts
• Meter
  • template.ts
  • args.ts
• Number Field
  • template.ts
  • args.ts
• Overlay
  • template.ts
  • args.ts
• Picker Button
  • template.ts
  • args.ts
• Popover
  • template.ts
  • args.ts
• Progress Bar
  • template.ts
  • args.ts
• Progress Circle
  • template.ts
  • args.ts
• Radio
  • template.ts
  • args.ts
• Search
  • template.ts
  • args.ts
• Side Nav
  • template.ts
  • args.ts
• Slider
  • template.ts
  • args.ts
• Split View
  • template.ts
  • args.ts
• Status Light
  • template.ts
  • args.ts
• Swatch
  • template.ts
  • args.ts
• Switch
  • template.ts
  • args.ts
• Table
  • template.ts
  • args.ts
• Tabs
  • template.ts
  • args.ts
• Tags
  • template.ts
  • args.ts
• Text Field
  • template.ts
  • args.ts
• Thumbnail
  • template.ts
  • args.ts
• Toast
  • template.ts
  • args.ts
• Tooltip
  • template.ts
  • args.ts
• Top Nav
  • template.ts
  • args.ts
• Tray
  • template.ts
  • args.ts
• Underlay
  • template.ts
  • args.ts
• Base? Bundle?
  • template.ts
  • args.ts
• Grid
  • template.ts
  • args.ts
• Opacity Checkerboard
  • template.ts
  • args.ts
• Reactive Controllers?
  • template.ts
  • args.ts
• Shared?
  • template.ts
  • args.ts
• Styles?
  • template.ts
  • args.ts
• Theme?
  • template.ts
  • args.ts
• Truncated
  • template.ts
  • args.ts