feat(common): Improve shorthand array handling

This updates the createShorthand factory to take two special props as
extraProps to generate a key if missing. This is necessary for shorthand
props that are arrays. The props are:
- childKey - enables explicitly setting the key via props
- getChildKey - function that takes the given props and returns a key

src/factories.js

@@ -6,6 +6,22 @@ import Icon from './elements/Icon/Icon'
 import Image from './elements/Image/Image'
 import Label from './elements/Label/Label'
 
+/**
+ * If the 'key' prop is not set, set it based on the childKey or getChildKey props.
+ *
+ * @param   {function} options.getChildKey Returns a key based on props
+ * @param   {string} options.childKey Given childKey
+ * @param   {object} options.props A props object
+ * @returns {object} A new props object
+ */
+const mergeChildKey = ({ getChildKey, childKey, ...props }) => {
+  if (!props.key) {
+    props.key = childKey || getChildKey && getChildKey(props)
+  }
+
+  return props
+}
+
 /**
  * Merges props and classNames.
  *
@@ -20,7 +36,7 @@ const mergePropsAndClassName = (props, extraProps) => {
     newProps.className = cx(props.className, extraProps.className) // eslint-disable-line react/prop-types
   }
 
-  return newProps
+  return mergeChildKey(newProps)
 }
 
 /**