Simulated states
Some elements on websites have special states while interacting with input devices (mouse, keyboard, touchscreen, …etc)
Those states, called pseudo-states (:tap
, :focus
, :active
, :hover
, …etc) might have different visual representations depending on the context and the styles you defined in your stylesheets (viewport, mobile/desktop, touchablescreen, dark/light theme, …etc)
Within story.to.design, for each story you defined, we propose to simulate those standard pseudo-states, while rendering the story.
This way when you import a component, you can now generate a variant for each pseudo-state combination even if you didn’t declare them inside your stories.

For instance for a button, you can have all those pseudo-states generated, and see the CSS impacting the button when story.to.design interacted with this button.
