Ability to group Variants within a Story

[davestewart]

Clear and concise description of the problem

Say you have a component which has formatting and size props.

It would be nice to be able to see variants of each prop in separate section, rather than just all run together.

Suggested solution

I suggest a new <Chapter> component (seeing as group is already another term in Histoire):

<template>
  <Story :layout="{ type: 'grid', width: '400' }">

    <Chapter title="Formatting">
      <Variant title="default">
        <UiFigure>0.151351483</UiFigure>
      </Variant>
      ...
    </Chapter>

    <Chapter title="Size">
      <Variant title="default">
        <UiFigure size="xl">0.151351483</UiFigure>
      </Variant>     
      ...

The page would then show each set of props with a title and the variants nested within.

Or maybe <Chapter> could be <Variants> or <VariantGroup>.

Alternative

None

Additional context

Here's an example of where we would find this useful:

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.