updates Dropdown documentation, adds documentation assets folders

[jasonbasuil]

closes #226

• Updated Dropdown documentation based on feedback https://www.notion.so/userinterviews1/Dropdowns-74e13a30f3f0486f821daa526f7771e9
• Experimenting with including screenshots to documentation to help illustrate use cases. Might need to explore best practices along the way.

[rroppolo]

My only fear is that these static images may get out of date really quickly...

I wonder if we could experiment with the storybook Figma plugin and embed the figma file directly?

https://pocka.github.io/storybook-addon-designs/?path=/docs/internal-blocks-design--foo

There seems to be a way to embed a Figma file in the Docs mdx file like:

import { Figma } from "storybook-addon-designs/blocks"

<Figma url="https://foo.bar/baz" />

Full disclosure I have not tried that at all so it may not work 😅 But I am hesitant to introduce static images to the design system because I feel like it will be an extra barrier to making changes quickly.... So might be worth a quick try if this will serve a similar purpose before we fully commit to images.

Edit: Just tried it and it does kind of work:

I'm not too familiar with Figma so not sure if there is a way to create a new document with just the section you want here (not the whole Dropdowns page). Ideally with that new Figma doc being built using the same Figma components so that any changes to the dropdown will propagate. But that's the general idea - hope that makes sense

[jasonbasuil]

Yes! Thank you bringing this up! This was also a concern I had as well but didn't know something like this existed. This definitely seems like something we could use instead.

This probably will be an open question for @katiebratt and @natkasman , but if we were to have these two screenshot examples living in a Figma doc somewhere (I'm assuming it would have to be their own Figma page in order to link to it ... since it looks like this ` doesn't focus on specific nodes but the entire page. Is this something we could look into? Would probably save us from screenshots going out of date and makes collaborating on documentation easier.

[natkasman]

This is so cool! I made a separate page on Figma so it only shows those components. Let me know if this works!

[jasonbasuil]

Looks real spiffy! This is pretty exciting since it increases visibility for best practices and also if you wanted to include any extra guidance you can also do it directly in Figma to illustrate guidelines and it should always be up to date! Thank you!

[rroppolo]

OMG that's so cool! Thank you both for looking into that and making it a reality!!

[rroppolo]

❤️