Rename LayoutCenter to Center and CardList to Grid

src/demo/pages/navigation.js

@@ -24,12 +24,8 @@ export default [
   {
     items: [
       {
-        link: '#layout-components-card-list',
-        title: 'Card List',
-      },
-      {
-        link: '#layout-components-centered-layout',
-        title: 'Centered Layout',
+        link: '#layout-components-center',
+        title: 'Center',
       },
       {
         link: '#layout-components-cta',
@@ -39,6 +35,10 @@ export default [
         link: '#layout-components-form-layout',
         title: 'Form Layout',
       },
+      {
+        link: '#layout-components-grid',
+        title: 'Grid',
+      },
       {
         link: '#layout-components-list',
         title: 'List',

src/lib/components/layout/LayoutCenter/LayoutCenter.jsx → src/lib/components/layout/Center/Center.jsx

@@ -1,21 +1,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './LayoutCenter.scss';
+import styles from './Center.scss';
 
-const LayoutCenter = (props) => (
+export const Center = (props) => (
   <div className={styles.root}>
     <div>
       {props.children}
     </div>
   </div>
 );
 
-LayoutCenter.defaultProps = {
+Center.defaultProps = {
   children: null,
 };
 
-LayoutCenter.propTypes = {
+Center.propTypes = {
   children: PropTypes.node,
 };
 
-export default LayoutCenter;
+export default Center;

src/lib/components/layout/LayoutCenter/LayoutCenter.scss → src/lib/components/layout/Center/Center.scss

@@ -4,5 +4,4 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  min-height: 100vh;
 }

src/lib/components/layout/LayoutCenter/__tests__/LayoutCenter.test.jsx → src/lib/components/layout/Center/__tests__/Center.test.jsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
-import LayoutCenter from '..';
+import { Center } from '../Center';
 
 describe('rendering', () => {
   it('renders correctly', () => {
-    const tree = shallow(<LayoutCenter />);
+    const tree = shallow(<Center />);
 
     expect(shallowToJson(tree)).toMatchSnapshot();
   });
 
   it('renders correctly with children', () => {
-    const tree = shallow(<LayoutCenter><div>test</div></LayoutCenter>);
+    const tree = shallow(<Center><div>test</div></Center>);
 
     expect(shallowToJson(tree)).toMatchSnapshot();
   });

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

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

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

@@ -1,9 +1,9 @@
 import flattenChildren from 'react-keyed-flatten-children';
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from './CardList.scss';
+import styles from './Grid.scss';
 
-const CardList = (props) => {
+export const Grid = (props) => {
   const {
     children,
     id,
@@ -25,22 +25,20 @@ const CardList = (props) => {
           return null;
         }
 
-        return React.cloneElement(child, {
-          inList: true,
-        });
+        return React.cloneElement(child);
       })}
     </div>
   );
 };
 
-CardList.defaultProps = {
+Grid.defaultProps = {
   children: null,
   id: undefined,
 };
 
-CardList.propTypes = {
+Grid.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string,
 };
 
-export default CardList;
+export default Grid;

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

@@ -7,11 +7,11 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto;
-  grid-gap: $card-list-grid-gap;
+  grid-gap: $grid-gap;
   margin-bottom: $layout-common-bottom-spacing;
 
   @include breakpoint-up(sm) {
-    grid-template-columns: repeat(auto-fit, minmax($card-list-card-min-width, $card-list-card-max-width));
+    grid-template-columns: repeat(auto-fit, minmax($grid-item-min-width, $grid-item-max-width));
     justify-content: start;
   }
 }

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

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

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

@@ -7,7 +7,6 @@ exports[`rendering renders correctly with a single child 1`] = `
   <Card
     dense={false}
     disabled={false}
-    inList={true}
     key=".0"
     raised={false}
     type={null}
@@ -25,7 +24,6 @@ exports[`rendering renders correctly with multiple children 1`] = `
   <Card
     dense={false}
     disabled={false}
-    inList={true}
     key=".0"
     raised={false}
     type={null}
@@ -36,7 +34,6 @@ exports[`rendering renders correctly with multiple children 1`] = `
   <Card
     dense={false}
     disabled={false}
-    inList={true}
     key=".1"
     raised={false}
     type={null}
@@ -47,7 +44,6 @@ exports[`rendering renders correctly with multiple children 1`] = `
   <Card
     dense={false}
     disabled={false}
-    inList={true}
     key=".2"
     raised={false}
     type={null}

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

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

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

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

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

@@ -8,7 +8,6 @@ export const Card = (props) => {
     dense,
     disabled,
     id,
-    inList,
     raised,
     type,
     variant,
@@ -48,11 +47,6 @@ export const Card = (props) => {
     disabledClass = styles.isDisabled;
   }
 
-  let inListClass = '';
-  if (inList) {
-    inListClass = styles.isInList;
-  }
-
   let raisedClass = '';
   if (raised) {
     raisedClass = styles.isRaised;
@@ -66,7 +60,6 @@ export const Card = (props) => {
         ${variantClass}
         ${denseClass}
         ${disabledClass}
-        ${inListClass}
         ${raisedClass}
       `).trim()}
       id={id}
@@ -80,7 +73,6 @@ Card.defaultProps = {
   dense: false,
   disabled: false,
   id: undefined,
-  inList: false,
   raised: false,
   type: null,
   variant: 'flat',
@@ -91,7 +83,6 @@ Card.propTypes = {
   dense: PropTypes.bool,
   disabled: PropTypes.bool,
   id: PropTypes.string,
-  inList: PropTypes.bool,
   raised: PropTypes.bool,
   type: PropTypes.oneOf(['success', 'warning', 'error', 'help', 'info', 'note']),
   variant: PropTypes.oneOf(['flat', 'bordered']),

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

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

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

@@ -39,8 +39,6 @@ $card-disabled: (
   opacity: var(--rui-card-disabled-opacity),
 );
 
-$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/tests/__snapshots__/Card.test.jsx.snap

@@ -45,7 +45,6 @@ exports[`rendering renders correctly raised 1`] = `
         isVariantFlat
 
 
-
         isRaised"
 >
   <p>
@@ -61,7 +60,6 @@ exports[`rendering renders correctly with all props 1`] = `
         isVariantBordered
         isDense
         isDisabled
-
         isRaised"
   id="custom-id"
 >

src/lib/index.js

@@ -1,20 +1,30 @@
 // Layout components
-export { default as CardList } from './components/layout/CardList';
-export { default as LayoutCenter } from './components/layout/LayoutCenter';
-export { CTA } from './components/layout/CTA';
-export { CTACenter } from './components/layout/CTA';
-export { CTAEnd } from './components/layout/CTA';
-export { CTAStart } from './components/layout/CTA';
-export { FormLayout } from './components/layout/FormLayout';
-export { FormLayoutCustomField } from './components/layout/FormLayout';
-export { List } from './components/layout/List';
-export { ListItem } from './components/layout/List';
-export { Media } from './components/layout/Media';
-export { MediaBody } from './components/layout/Media';
-export { MediaObject } from './components/layout/Media';
-export { Toolbar } from './components/layout/Toolbar';
-export { ToolbarGroup } from './components/layout/Toolbar';
-export { ToolbarItem } from './components/layout/Toolbar';
+export { default as Center } from './components/layout/Center';
+export {
+  CTA,
+  CTACenter,
+  CTAEnd,
+  CTAStart,
+} from './components/layout/CTA';
+export {
+  FormLayout,
+  FormLayoutCustomField,
+} from './components/layout/FormLayout';
+export { default as Grid } from './components/layout/Grid';
+export {
+  List,
+  ListItem,
+} from './components/layout/List';
+export {
+  Media,
+  MediaBody,
+  MediaObject,
+} from './components/layout/Media';
+export {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem,
+} from './components/layout/Toolbar';
 
 // Screens
 export { default as ForgotPassword } from './components/screens/Login/ForgotPassword';
@@ -26,9 +36,11 @@ export { default as Alert } from './components/ui/Alert';
 export { default as Badge } from './components/ui/Badge';
 export { default as Button } from './components/ui/Button';
 export { default as ButtonGroup } from './components/ui/ButtonGroup';
-export { Card } from './components/ui/Card';
-export { CardBody } from './components/ui/Card';
-export { CardFooter } from './components/ui/Card';
+export {
+  Card,
+  CardBody,
+  CardFooter,
+} from './components/ui/Card';
 export { default as CheckboxField } from './components/ui/CheckboxField';
 export { default as Modal } from './components/ui/Modal';
 export { default as MultipleSelectField } from './components/ui/MultipleSelectField';