# Robins changes to Traffic Light UI example for

SketchSystems.spec

# Robins changes to Traffic Light UI example for
Search Bar Hacked*

  Inactive*
    focused -> Active
    submitted -> Empty Search

  Active
    canceled -> Inactive
    typed -> Text Entry

    Empty*
      submitted -> Empty Search

    Text Entry
      submitted -> Loading Search Results

    Loading Search Results
      tick -> Results

    Results
      submitted -> Loading Search Results

    Empty Search
    
    

SketchSystems_prototype.js

function render({active_states}){
  var active_state = active_states[0].name;
  return $('div', {style: {display: 'flex', justifyContent: 'center', height: '100%'}},
           render_search_bar(active_state))}

function render_search_bar(active_state){
  if (active_state == 'Inactive') {
    return $('div',
             $('input', {value: '',
                         placeholder: 'Enter a search term...',
                         style: {border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search')
            )
  }
  if (active_state == 'Empty') {
    return $('div',
             $('input', {value: ' ',
                         style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'))
  }
  if (active_state == 'Text Entry') {
    return $('div',
             $('input', {value: 'Example sea',
                         style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'))
  }
  if (active_state == 'Empty Search') {
    return $('div',
             $('input', {value: '',
                         style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'),
             $('div', {style: { color: 'Red'} }, $('p', 'An empty search has no results. Please enter search text to search')),
            )
  }       
  if (active_state == 'Loading Search Results') {
    return $('div',
             $('input', {value: '',
                         placeholder: 'Example search string',
                         style: {border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('button', {disabled: true, style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: 'lightgrey'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'),
             $('div', $('p', 'Loading Results Spinner...'))
            )
  }
  if (active_state == 'Results') {
    return $('div',
             $('input', {value: 'Example search string',
                         style: {backgroundColor: 'papayaWhip', border: '1px solid grey', borderRadius: '8px', padding: '8px', marginRight: '12px'}}),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', backgroundColor: '#449bd1', color: 'white'}}, 'Search'),
             $('button', {style: {border: 'none', borderRadius: '8px', padding: '8px 12px', marginLeft: '6px', backgroundColor: 'tomato', color: 'white'}}, 'Cancel'),
             $('ul',
               $('li', 'Search result 1'),
               $('li', 'Search result 2'),
               $('li', 'Search result 3')))
  }
}