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`] = `""`;

src/lib/components/layout/CardList/CardList.scss

@@ -0,0 +1,3 @@
+$card-list-card-min-width: var(--rui-card-list-card-min-width);
+$card-list-card-max-width: var(--rui-card-list-card-max-width);
+$card-list-grid-gap: var(--rui-card-list-grid-gap);

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

@@ -0,0 +1 @@
+export { default } from './CardList';

src/lib/components/layout/CardList/__tests__/__snapshots__/CardList.test.jsx.snap

@@ -7,6 +7,7 @@ export const Card = (props) => {
     children,
     disabled,
     id,
+    inList,
     raised,
     type,
   } = props;
@@ -25,6 +26,11 @@ export const Card = (props) => {
     disabledClass = styles.isRootDisabled;
   }
 
+  let inListClass = '';
+  if (inList) {
+    inListClass = styles.isRootInList;
+  }
+
   let raisedClass = '';
   if (raised) {
     raisedClass = styles.isRootRaised;
@@ -36,6 +42,7 @@ export const Card = (props) => {
         ${styles.root}
         ${typeClass}
         ${disabledClass}
+        ${inListClass}
         ${raisedClass}
       `).trim()}
       id={id}
@@ -48,6 +55,7 @@ export const Card = (props) => {
 Card.defaultProps = {
   disabled: false,
   id: undefined,
+  inList: false,
   raised: false,
   type: 'flat',
 };
@@ -59,6 +67,7 @@ Card.propTypes = {
   ]).isRequired,
   disabled: PropTypes.bool,
   id: PropTypes.string,
+  inList: PropTypes.bool,
   raised: PropTypes.bool,
   type: PropTypes.oneOf(['flat', 'bordered', 'warning', 'error']),
 };

src/lib/components/layout/CardList/_theme.scss

@@ -24,6 +24,10 @@
   @include card-disabled();
 }
 
+.isRootInList {
+  @include card-in-list();
+}
+
 .isRootRaised {
   @include card-raised();
 }

src/lib/components/layout/CardList/index.js

@@ -19,6 +19,10 @@
   background-color: map-get($card-disabled, background-color);
 }
 
+@mixin card-in-list() {
+  max-width: $card-in-list-max-width;
+}
+
 @mixin card-raised() {
   box-shadow: map-get($card-raised, box-shadow);
 }

src/lib/components/ui/Card/Card.jsx

@@ -23,6 +23,8 @@ $card-disabled: (
   border-color: var(--rui-card-disabled-border-color),
 );
 
+$card-in-list-max-width: var(--rui-card-in-list-max-width);
+
 $card-raised: (
   box-shadow: var(--rui-card-raised-box-shadow),
 );

src/lib/components/ui/Card/Card.scss

@@ -39,6 +39,7 @@ exports[`rendering renders correctly raised 1`] = `
   className="root
         flat
         
+        
         isRootRaised"
 >
   <p>
@@ -52,6 +53,7 @@ exports[`rendering renders correctly with all props 1`] = `
   className="root
         warning
         isRootDisabled
+        
         isRootRaised"
   id="custom-id"
 >

src/lib/components/ui/Card/_mixins.scss

@@ -8,6 +8,7 @@ export { DocumentationLayoutContent } from './components/documentation/Documenta
 export { DocumentationLayoutSidebar } from './components/documentation/DocumentationLayout';
 
 // Layout components
+export { default as CardList } from './components/layout/CardList';
 export { default as LayoutCenter } from './components/layout/LayoutCenter';
 export { List } from './components/layout/List';
 export { ListItem } from './components/layout/List';

src/lib/components/ui/Card/_theme.scss

@@ -418,9 +418,17 @@
   --rui-button-large-padding-x: var(--rui-offset-5);
   --rui-button-large-font-size: var(--rui-typography-size-1);
 
+  //
+  // Card List
+  // =========
+
+  --rui-card-list-card-min-width: 300px;
+  --rui-card-list-card-max-width: auto;
+  --rui-card-list-grid-gap: var(--rui-offset-4);
+
   //
   // Cards
-  // ============
+  // =====
 
   // Cards: common properties
   --rui-card-padding: var(--rui-offset-4);
@@ -443,6 +451,9 @@
   // Cards: raised
   --rui-card-raised-box-shadow: 0 0.01rem 0.65rem -0.1rem #{rgba(0, 0, 0, 0.3)};
 
+  // Cards: in Card List
+  --rui-card-in-list-max-width: 400px;
+
   // Cards: disabled
   --rui-card-disabled-border-color: transparent;
   --rui-card-disabled-background-color: var(--rui-color-gray-200);