AS#103506492417792, Support hyperlinks in StandardListItem component

-- Added support for rendering StandardListItem as hyperlink

Author: vikasrohit

components/StandardListItem/StandardListItem.jsx

@@ -1,4 +1,4 @@
-import {PropTypes, Component } from 'react'
+import {PropTypes } from 'react'
 import React from 'react'
 
 require('./StandardListItemStyles.scss')
@@ -8,39 +8,45 @@ require('./StandardListItemStyles.scss')
  // labelText: The text for the label
  // placeIcon: defines the position of the icon. Either: top | left | right.  Default to top
 
-class StandardListItem extends Component {
-  constructor(props) {
-    super(props)
-  }
-  render() {
-    const classes = 'StandardListItem transition ' + this.props.placeIcon
-    let label
-    let icon
+const StandardListItem = ({showIcon, showLabel, imgSrc, labelText, linkUrl, linkTarget='_self', placeIcon='top'}) => {
+  const classes = 'StandardListItem transition ' + placeIcon
+  let label
+  let icon
+  let item
 
-    if (this.props.showLabel){
-      label = <p className="label">{this.props.labelText}</p>
-    }
+  if (showLabel) {
+    label = <p className="label">{labelText}</p>
+  }
 
-    if (this.props.showIcon){
-      icon = <img className="icon" src={this.props.imgSrc}/>
-    }
+  if (showIcon) {
+    icon = <img className="icon" src={imgSrc}/>
+  }
 
-    return (<div className={classes}>{label}{icon}</div>)
+  if (linkUrl) {
+    item =
+        <a className={classes} href={linkUrl} target={linkTarget}>{label}{icon}</a>
+  } else {
+    item = <div className={classes}>{label}{icon}</div>
   }
+
+  return item
 }
 
 StandardListItem.propTypes = {
-  showIcon : PropTypes.bool,
-  showLabel : PropTypes.bool,
-  imgSrc : PropTypes.string,
-  labelText : PropTypes.node,
-  placeIcon : PropTypes.string
+  showIcon   : PropTypes.bool,
+  showLabel  : PropTypes.bool,
+  imgSrc     : PropTypes.string,
+  labelText  : PropTypes.node,
+  linkUrl    : PropTypes.string,
+  linkTarget : PropTypes.string,
+  placeIcon  : PropTypes.string
 }
 
 StandardListItem.defaultProps = {
-  showIcon: true,
-  showLabel: true,
-  placeIcon: 'top'
+  showIcon    : true,
+  showLabel   : true,
+  linkTarget  : '_self',
+  placeIcon   : 'top'
 }
 
 export default StandardListItem

components/StandardListItem/StandardListItemExamples.jsx

@@ -16,14 +16,26 @@ const StandardListItemExamples = () => (
 
     <h1>Icon on the Right</h1>
 
-    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right"  />
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right" />
 
     <h1>Icon Hidden</h1>
     <StandardListItem labelText="This is a test" showIcon={false}  />
 
     <h1>Label Hidden</h1>
     <StandardListItem imgSrc="../components/Avatar/place-holder.svg" showLabel={false}  />
 
+    <h1>With Link In Self</h1>
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="Click Me" linkUrl="http://google.com" />
+
+    <h1>With Link In New Tab</h1>
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="Click Me" linkUrl="http://google.com" linkTarget="_blank" />
+
+    <h1>Link: Icon on the Right</h1>
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="right" linkUrl="http://google.com"  />
+
+    <h1>Link: Icon on the Left</h1>
+    <StandardListItem imgSrc="../components/Avatar/place-holder.svg" labelText="This is a test" placeIcon="left" linkUrl="http://google.com"  />
+
   </div>
 )