Story chapters

[davestewart]

Background

Often I find myself trying to arrange sets of variants in the same place on a page.

It looks like we can push multiple stories into the same page, but it takes a bit of extra styling to make it work:

Proposal

What if we added a first class citizen for this?

<template>
  <Story>
    <Chapter title="..." description="...">
      <Variant>
        ...
      </Variant>
      <Variant>
        ...
      </Variant>
    </Chapter>

    <Chapter title="..." description="...">
      <Variant>
        ...
      </Variant>
      <Variant>
        ...
      </Variant>
    </Chapter>
  </Story>
</template>

Would need to think about:

• how layout would work with the parent story
• would each chapter inherit layout, or inherit from the above?
• etc

[davestewart]

Given #27, the hierarchy might instead be:

<template>
  <Shelf title="..." text="...">
    <Story>
      ...
    </Story>
    <Story>
      ...
    </Story>
  </Shelf>
  <Shelf title="..." text="...">
    <Story>
      ...
    </Story>
    <Story>
      ...
    </Story>
  </Shelf>
</template>

And in fact, <Shelf>, <Story> and <Variant> could support title and text props, with text even supporting markdown:

<Story title="Some feature">    
  <Variant text="A simple variant">
    ...
  </Variant>
  
  <Variant text="
    A more complex variant:
    
    - a list with items
    - a list with items
    - a list with items
    
    Etc, etc, etc
  ">
    ...
  </Variant>
</Story>

This would pretty much automate component layout and markup / hints.