wearewarhol / config-file

Configuration File Reader for Warhol
MIT License
1 stars 0 forks source link

Add option to configure interactive states for components #6

Open SirPepe opened 5 years ago

SirPepe commented 5 years ago

Simple component without states:

{
  "name": "Navigation",
  "source": ".navigation"
},

Simple component with an additional state (state is just a simple selector):

{
  "name": "Navigation",
  "source": ".navigation",
  "states": [ ".navigation.open "]
},

Not so simple component with an additional state (state is a mapping for target and source, one object for each state):

{
  "name": "Navigation",
  "source": ".navigation",
  "target": "nav",
  "states": [{
    "source": ".navigation.open",
    "target": "nav.activated"
  }]
},

Before this gets added it should be demonstrated that a simple selector like nav.activated can be turned into a function that can set the element into the state described by the selector

drublic commented 5 years ago

Is the state meant to be triggered on a component? So do classes get applied to the component? It think this should not be the case.

The state is thus just a description of a specific variant of the component. So it could be more like a variants array which could contain more than just states. For example you could describe different variants of a single component "button". These variants might be treated as separate components though. Sounds more like syntactic sugar for the config than a backend implementation, right?