BC: Make LayoutCenter more generic: call it simply Center and sto…

…p it from taking up 100 % of viewport height (#143)

It's now necessary to set the desired height on the parent of the `Center` layout,
eg. when you're using `Login` screen component which is expected to spread over
entire viewport.

src/demo/pages/navigation.js

@@ -24,8 +24,8 @@ export default [
   {
     items: [
       {
-        link: '#layout-components-centered-layout',
-        title: 'Centered Layout',
+        link: '#layout-components-center',
+        title: 'Center',
       },
       {
         link: '#layout-components-cta',

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/index.js

@@ -1,20 +1,30 @@
 // Layout components
-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 { 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 } 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 {
+  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';