Nav Bar || Standard list item component

[vikasrohit]

This is a generic component which will be reused across multiple components.

Component tree

• std-list-item
  • label(.text)
  • img(.icon)

Requirements:

• Create a branch off of master and make a PR to master
• Should support different layouts of text and icon, specifically:
  • icon above label (see example item in quick links item, icon is of 32x32 size)
  • icon in left and text following it (icon should be of 16x16)
  • text in left and icon on the right (icon should be of 16x16)
• rendering of icon and text should both be configurable so that the user can use any of them or both

[krispenney]

Could I take this one?

[vikasrohit]

You are all set. Go ahead. 👍

[vikasrohit]

@K9101 You can check Panel example in the dev branch for reference.

[krispenney]

Ok thanks!
If the icon is on the left or right, should the text and image remain on their respective edges while the item fills it's container (like the panel)?

[vikasrohit]

@K9101 Sorry, for any confusion, however, the icon and the image are the same. We are calling the image as icon. Now the three layouts (while naming the layouts, I have used text a base to decide the direction) would be like this:

a) dtu (down to up)

|------icon-------|
|------text------- |

b) rtl (right to left)

| icon | text ------------------------|

c) ltr (left to right)

| text ------------------------| icon |

[krispenney]

@vikasrohit Thanks, that makes sense.
I just created a pull request for this issue, let me know if you would like any changes.

[vikasrohit]

Thanks @K9101 I will review it in couple of hours. Meanwhile you can pick other one from available tasks.

[vikasrohit]

@K9101 Can you please adhere to ES6 coding style as suggested by React documentation. For reference, please see the updated Panel component in dev branch.

[krispenney]

@vikasrohit sorry for the delay, I just created a pull request with those changes.

[vikasrohit]

Closing task. Thanks @K9101 for your hard work.