Create Card List layout component for rendering Cards in grid

Author: adamkudrna

demo/generated/demo.js

@@ -1,6 +1,6 @@
 {
   "name": "@react-ui-org/react-ui",
-  "version": "0.22.1",
+  "version": "0.23.0",
   "license": "MIT",
   "main": "dist/lib.js",
   "repository": {

dist/lib.js

@@ -11,6 +11,7 @@ import {
   Button,
   ButtonGroup,
   Card,
+  CardList,
   CheckboxField,
   Documentation,
   DocumentationLayout,
@@ -273,6 +274,22 @@ class DemoContainer extends React.Component {
           <hr />
           <section id="layout-components" className="mb-7">
             <h2 className="typography-size-5 mb-6">Layout Components</h2>
+            <h3 id="layout-components-card-list" className="typography-size-4 mb-6">Card List</h3>
+            <p>
+              Card List can be used to render <a href="#ui-components-card">Cards</a> in grid.
+            </p>
+            <Documentation
+              name="Card List"
+              component={(
+                <CardList>
+                  <DocumentationPlaceholder text="card" />
+                  <DocumentationPlaceholder text="card" />
+                  <DocumentationPlaceholder text="card" />
+                  <DocumentationPlaceholder text="card" />
+                  <DocumentationPlaceholder text="card" />
+                </CardList>
+              )}
+            />
             <h3 id="layout-components-centered-layout" className="typography-size-4 mb-6">Centered Layout</h3>
             <p>
               Centered layout takes 100 % of viewport height.
@@ -670,6 +687,9 @@ class DemoContainer extends React.Component {
               )}
             />
             <h3 id="ui-components-card" className="typography-size-4 mb-6">Card</h3>
+            <p>
+              You might want to use Cards along with <a href="#layout-components-card-list">Card List</a> layout.
+            </p>
             <Documentation
               name="Card types"
               component={(

package-lock.json

@@ -27,6 +27,10 @@ export default [
   },
   {
     items: [
+      {
+        link: '#layout-components-card-list',
+        title: 'Card List',
+      },
       {
         link: '#layout-components-centered-layout',
         title: 'Centered Layout',

package.json

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './CardList.scss';
+
+const CardList = (props) => {
+  const {
+    children,
+    id,
+    ...other
+  } = props;
+
+  if (!props.children) {
+    return null;
+  }
+
+  return (
+    <div
+      id={id}
+      className={styles.root}
+      {...other}
+    >
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return null;
+        }
+
+        return React.cloneElement(child, {
+          inList: true,
+        });
+      })}
+    </div>
+  );
+};
+
+CardList.defaultProps = {
+  children: null,
+  id: undefined,
+};
+
+CardList.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  id: PropTypes.string,
+};
+
+export default CardList;

src/demo/pages/DemoContainer.jsx

@@ -0,0 +1,16 @@
+@import '../../../styles/tools/breakpoints';
+@import '../../../styles/tools/offset';
+@import './theme';
+
+/* autoprefixer grid: off */
+.root {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-gap: $card-list-grid-gap;
+  margin-bottom: offset(4);
+
+  @include breakpoint-up(xs) {
+    grid-template-columns: repeat(auto-fit, minmax($card-list-card-min-width, $card-list-card-max-width));
+  }
+}

src/demo/pages/navigation.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import CardList from '../CardList';
+
+describe('rendering', () => {
+  it('renders correctly with no children', () => {
+    const tree = shallow((
+      <CardList />
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly with a single child', () => {
+    const tree = shallow((
+      <CardList>
+        <span>content</span>
+      </CardList>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly with multiple children', () => {
+    const tree = shallow((
+      <CardList>
+        <span>content 1</span>
+        <span>content 2</span>
+        <span>content 3</span>
+      </CardList>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly with a single child 1`] = `
+<div
+  className="root"
+>
+  <span
+    inList={true}
+    key=".0"
+  >
+    content
+  </span>
+</div>
+`;
+
+exports[`rendering renders correctly with multiple children 1`] = `
+<div
+  className="root"
+>
+  <span
+    inList={true}
+    key=".0"
+  >
+    content 1
+  </span>
+  <span
+    inList={true}
+    key=".1"
+  >
+    content 2
+  </span>
+  <span
+    inList={true}
+    key=".2"
+  >
+    content 3
+  </span>
+</div>
+`;
+
+exports[`rendering renders correctly with no children 1`] = `""`;