htl-conditional-css.html

<div class="container ... ">
  <div class="component ... ${getStepClass(properties.step, 1)}">
    STEP 1
  </div>
  <div class="component ... ${getStepClass(properties.step, 2)}">
    STEP 2
  </div>
  <div class="component ... ${getStepClass(properties.step, 3)}">
    STEP 3
  </div>
  <div class="component ... ${getStepClass(properties.step, 4)}">
    STEP 4
  </div>
</div>

<!-- This would actually go in a javascript file -->
<script type="text/javascript">
/**
 * Determine which css class to add.
 *
 * pageIndex - the actual step value from properties.step
 * step - the step from the HTML.
 */
function getStepClass(pageIndex, step) {
  if (pageIndex < step) {
    return 'completed';
  } else if (pageIndex === step) {
    return 'active';
  } else {
    return 'inactive';
  }
}
</script>