Clay: Clayui.com should have documentation about the Demos found in Storybook

[kresimir-coko]

I propose we document our demos found in Storybook and add them under an Examples or Demos page in the main clayui.com navigation.

So far we have the following demos:

• Multiple Graph Demos, which could be their own page
• List Page, File Page, Form Page, which I assume are examples of some DXP pages where a Clay component is the main focus point
• Drag & Drop tables
• Drag & Drop List

We could have the navigation look something like this:

Get Started >
Foundations >
Components >
Demos v
    - Graph
    - Pages
    - Drag & Drop
CSS Framework >
Migration >

[bryceosterhaus]

Great idea, I think that could help generate visibility.

[kresimir-coko]

I'll pick this up when my queue clears

[kresimir-coko]

Hey @bryceosterhaus here's an initial setup I did, can you please take a look and let me know if the structure is good https://github.com/kresimir-coko/clay/tree/3196.

[bryceosterhaus]

@kresimir-coko Hey, I just took a look and I think I initially misunderstood your first example of the navigation. I'm not sure it makes sense to create another page tab and then duplicate our storybook examples. This will just lead to unnecessary redundancy and doesn't necessarily help solve the find-ability of our examples. Instead of listing them all out one for one, I think we could just have a Examples page that gives a brief overview of what storybook is and why we use it, and then link to our storybook. I think the reason people don't consult them immediately is because they aren't sure what "Storybook" is. Maybe even just changing our wording from "Storybook" to "Examples" or "Demos" would help. I think the overall goal is to lessen the gap between our docs and people consulting storybook for inspiration.

[jbalsas]

page that gives a brief overview of what storybook is and why we use it, and then link to our storybook

Maybe some big "cards" with snapshots of the components or examples linking to the storybooks? 🤔

[matuzalemsteles]

Maybe some big "cards" with snapshots of the components or examples linking to the storybooks? 🤔

I like this! I like these styles of Carbon https://www.carbondesignsystem.com/components/overview

[bryceosterhaus]

@matuzalemsteles I really like that example, we just need to auto-generate snapshots when we build clayui.com.

[matuzalemsteles]

Yeah, I think that way it would require more maintenance and a design 😬

[kresimir-coko]

@jbalsas

Maybe some big "cards" with snapshots of the components or examples linking to the storybooks?

Did you mean to say all components? In my understanding the idea of this issue was to document the Demos we have in storybook: drag & drop and pages, listed under Demos > Templates in Storybook.

We can still use the big card approach for those, but this is me just getting clarity on your wording.

[jbalsas]

I didn't mean anything by it. Just that you can show big snapshots to link to storybooks.