feat(SocialNetworksList): add List for displaying social icons

Provides a dedicated component for displaying Lists of social network
buttons

Author: jonthomp

src/components/SocialNetworksList/SocialNetworksList.examples.md

@@ -0,0 +1,36 @@
+```jsx
+<SocialNetworksList
+  itemsObjects={[
+    { name: "twitter", to: "http://www.twitter.com" },
+    { name: "linkedin", to: "http://www.linkedin.com" },
+  ]}
+/>
+```
+
+#### As buttons
+
+```jsx
+<SocialNetworksList
+  itemsObjects={[
+    { name: "twitter", label: "Follow", to: "http://www.twitter.com"},
+    { name: "linkedin", label: "Connect", color: "blue", to: "http://www.linkedin.com" },
+  ]}
+  prefix="fa"
+  asButtons
+/>
+```
+
+#### Items as components
+
+```jsx
+<SocialNetworksList
+  items={[
+    <a href="http://www.twitter.com">
+      <Icon prefix="fa" name="twitter" />
+    </a>,
+    <a href="http://www.facebook.com">
+      <Icon prefix="fa" name="facebook" />
+    </a>,
+  ]}
+/>
+```;

src/components/SocialNetworksList/SocialNetworksList.react.js

@@ -0,0 +1,60 @@
+// @flow
+
+import * as React from "react";
+import cn from "classnames";
+import { List, Icon, Button } from "../";
+
+type itemObject = {|
+  name: string,
+  label?: string,
+  to?: string,
+  tooltip?: string,
+  color?: string,
+|};
+
+type Props = {|
+  +children?: React.Node,
+  +className?: string,
+  +asButtons?: boolean,
+  +prefix?: string,
+  +itemsObjects?: Array<itemObject>,
+  +items?: Array<React.Node>,
+|};
+
+function listItemFromObjectFactory(asButtons, iconPrefix) {
+  return item => {
+    const itemContent = asButtons ? (
+      <Button to={item.to} social={item.name} color={item.color} size="sm">
+        {item.label}
+      </Button>
+    ) : (
+      <a href={item.to} data-original-title={item.tooltip}>
+        <Icon prefix={iconPrefix} name={item.name} />
+      </a>
+    );
+    return <List.Item inline>{itemContent}</List.Item>;
+  };
+}
+
+function SocialNetworksList(props: Props): React.Node {
+  const { children, className, asButtons, prefix = "fe" } = props;
+  const classes = cn("social-links", className);
+
+  const getObjectListItem = listItemFromObjectFactory(asButtons, prefix);
+
+  const items =
+    (props.itemsObjects && props.itemsObjects.map(getObjectListItem)) ||
+    (props.items &&
+      props.items.map(item => <List.Item inline>{item}</List.Item>)) ||
+    children;
+
+  return (
+    <List inline className={classes}>
+      {items}
+    </List>
+  );
+}
+
+SocialNetworksList.displayName = "SocialNetworksList";
+
+export default SocialNetworksList;

src/components/SocialNetworksList/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+import SocialNetworksList from "./SocialNetworksList.react";
+
+export { SocialNetworksList as default };

src/components/index.js

@@ -27,6 +27,7 @@ export { default as Profile } from "./Profile";
 export { default as Progress } from "./Progress";
 export { default as ProgressCard } from "./ProgressCard";
 export { default as Site } from "./Site";
+export { default as SocialNetworksList } from "./SocialNetworksList";
 export { default as Stamp } from "./Stamp";
 export { default as StampCard } from "./StampCard";
 export { default as StatsCard } from "./StatsCard";