Complex User Interaction

NOTE: This page is in construction as compositions are under construction - you can ignore it for now.

Sometimes building components is more about testing interaction than they are about mocking various component states. In the BottomSheet component found in the svelte-pieces package also in this monorepo. A Story component was set up that allowed for quick adjustment of some opening height props such that the component can be tested in a variety of conditions.

[BottomSheet.example]

Note especially the use of the helper ShowHide component. As a Story is just Svelte, you can do anything, even use setContext in your stories file.

Conglomeration of many components

Sometimes you may want to prototype an arrangement of multiple components together. The following example combines a Map, GeoJSONSource, and Layer component from the Living Dictionaries repo into a display of earthquake clusters.

[EarthquakeClusters.example]