Catalog Results

SketchSystems.spec

Catalog Results
  Sort Updated
  Filters Updated
  Empty State

Sort BottomBar
  Default Sort Order
  on click -> Sort

Filters BottomBar
  No Selected Filters Bottombar
  Some Selected Filters Bottombar
  on click -> Filters

Filters
  other filter tab clicked -> Filter Tab Loading
  any filter selected -> Reset Enabled
  no filters selected -> Reset Disabled
  apply filters -> Filters Updated
  close bottom-sheet -> Catalog Results

Filter Tab
  Filter Tab Empty State
  No Selected Filters
  Some Selected Filters
  Exactly One Filter Selected
  any filter selected -> Selected Indicator On
  no filters selected -> Selected Indicator Off

Filter Tab Loading
  success -> Filter Tab
  failure -> Catalog Results

Sort
  select sort order -> Sort Updated
  close bottom-sheet -> Catalog Results

Reset
  Reset Enabled
  Reset Disabled
  on click -> No Selected Filters

Selected Indicator 
  Selected Indicator On
  Selected Indicator Off

Sub Category
  expand -> Sub Sub Category
  collapse -> Sub Category

Sub Sub Category
  ## one of [checkbox, radiobutton, switch]
  Checkable
    Checkable On
      turn off -> Is Checkable A RadioButton?
    Checkable Off
      turn on -> Is Checkable A RadioButton?
    Checkable Indeterminate

Checkable Behaviour
  Is Checkable A RadioButton?
    yes -> Exactly One Filter Selected
    no -> Some Selected Filters

## Questions
## 1. Can radiobutton checkables be unchecked by tapping the checked item? (looks weird)
## 2. Should all filter tabs' data reload on filter tab change?
## 3. 3. What about empty states of Filter Tab and Catalog Results?

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}