Add support for React Fragments to CardList and FormLayout (#44)

Fragments are not traversed with `React.children.map()` [1][2] so we are using the `react-keyed-flatten-children` bundle to flatten the children to a one-dimensional array. This is necessary to be able to pass props to children of these layouts.

[1] https://reactjs.org/docs/react-api.html#reactchildrenmap
[2] reactjs/rfcs#61 (comment)

package.json

@@ -15,7 +15,8 @@
     "normalize.css": "^8.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-keyed-flatten-children": "^1.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",

src/lib/components/layout/CardList/CardList.jsx

@@ -1,3 +1,4 @@
+import flattenChildren from 'react-keyed-flatten-children';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './CardList.scss';
@@ -19,7 +20,7 @@ const CardList = (props) => {
       className={styles.root}
       {...other}
     >
-      {React.Children.map(children, (child) => {
+      {flattenChildren(children).map((child) => {
         if (!React.isValidElement(child)) {
           return null;
         }

src/lib/components/layout/FormLayout/FormLayout.jsx

@@ -1,3 +1,4 @@
+import flattenChildren from 'react-keyed-flatten-children';
 import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './FormLayout.scss';
@@ -66,7 +67,7 @@ const FormLayout = (props) => {
       ].join(' ')}
       style={inlineStyle(customLabelWidth, labelAutoWidthFallback)}
     >
-      {React.Children.map(children, (child) => {
+      {flattenChildren(children).map((child) => {
         if (!React.isValidElement(child)) {
           return null;
         }