Nav Bar || Search Suggestions Panel components

[vikasrohit]

In this task, we are required to implement 4 components. Create a branch off of master and make a PR to master

Main panel

This panel contains two sub components. One for recent search suggestions and one for popular search suggestions.

Component tree

• search-suggestion-panel
  • recent-search-suggestions
  • popular-search-suggestions

Requirements

• Should have a configurable field to show/hide of any of the panels

Recent Search Suggestions Panel

This component reuses the panel component and transcludes the required DOM into it.

Component tree

• recent-search-suggestions
  • panel
    • panel-header
    • label(text="Recent Search")
    • recent-search-panel-actions
      • recent-search-panel-action
        • a(text="Edit")
  • panel-body
    • search-suggestion-result-list

Requirements:

• The functionality of the Edit button is not ironed out yet. So, it can be a dummy link for now.

Popular Search Suggestions Panel

This component reuses the panel component and transcludes the required DOM into it.

Component tree

• popular-search-suggestions
  • panel
    • panel-header
      • label(text="Popular")
    • panel-body
      • search-suggestion-result-list

Search Suggestion Result List

This is a wrapper component for containing all suggestion items as std-list-item component.

Component tree

• search-suggestion-result-list
  • std-list-item(.search-suggestion-result-list-item)

[reynard2007]

Taking this

[reynard2007]

Went through the speck and couldn't find this shown. Is there a mockup of this component that we can get? I remember it's in the video via the InVision prototype, but not sure how that helps.

[vikasrohit]

Good catch. I would discuss with designer and update here. Meanwhile, you can simply assume the default margin paddings of the components being used. Thats the beauty of the component based development. :)
Just order the elements/components in the same way they are represented in the InVision. Purpose of this task is to have all requirement components for showing the search suggestions while user is typing in the component, which would be create via #11. So, you can focus on the behaviour, which you view in the video, for now. Assume that root component of this task i.e. search-suggestion-panel would be controlled by the search-bar component and this component should be able to respond events/changes raised by search-bar component.

[vikasrohit]

@reynard2007 I have discussed with the designer @vic-appirio. He would be providing the specks for the whole search component by today EOD (PST). Meanwhile you can work on it, by following my previous comment.

[vikasrohit]

@reynard2007 We have updated the live specks folder in the google drive to have the specks for the search dropdown as well. Please use that for your development of the component and let us know if you still have any query.