feat(LoginBox): introduce the pf4 loginbox component (patternfly#737)

affects: patternfly4-react-lerna-root, @patternfly/react-core

packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.d.ts

@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface LoginBoxProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+declare const LoginBox: SFC<LoginBoxProps>;
+
+export default LoginBox;

packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.docs.js

@@ -0,0 +1,13 @@
+import { LoginBox, LoginBoxHeader, LoginBoxBody, LoginBoxFooter } from '@patternfly/react-core';
+import Simple from './examples/SimpleLoginBox';
+
+export default {
+  title: 'LoginBox',
+  components: {
+    LoginBox,
+    LoginBoxHeader,
+    LoginBoxBody,
+    LoginBoxFooter
+  },
+  examples: [Simple]
+};

packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styles from '@patternfly/patternfly-next/components/LoginBox/login-box.css';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Content rendered inside the LoginBox */
+  children: PropTypes.node,
+  /** Additional classes added to the LoginBox */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const LoginBox = ({ className, children, ...props }) => (
+  <div {...props} className={css(styles.loginBox, className)}>
+    {children}
+  </div>
+);
+
+LoginBox.propTypes = propTypes;
+LoginBox.defaultProps = defaultProps;
+
+export default LoginBox;

packages/patternfly-4/react-core/src/components/LoginBox/LoginBox.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import LoginBox from './LoginBox';
+import LoginBoxBody from './LoginBoxBody';
+import LoginBoxHeader from './LoginBoxHeader';
+import LoginBoxFooter from './LoginBoxFooter';
+
+const LoginBoxContent = () => (
+  <React.Fragment>
+    <LoginBox>
+      <LoginBoxHeader>LoginBox Header</LoginBoxHeader>
+      <LoginBoxBody>LoginBox Body</LoginBoxBody>
+      <LoginBoxFooter>LoginBox Footer</LoginBoxFooter>
+    </LoginBox>
+  </React.Fragment>
+);
+
+test('simple LoginBox', () => {
+  const view = mount(<LoginBoxContent />);
+  expect(view).toMatchSnapshot();
+});
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<LoginBox />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<LoginBox className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'loginbox';
+  const view = shallow(<LoginBox data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.d.ts

@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface LoginBoxBodyProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+declare const LoginBoxBody: SFC<LoginBoxBodyProps>;
+
+export default LoginBoxBody;

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/LoginBox/login-box.css';
+
+const propTypes = {
+  /** Content rendered inside the LoginBox Body */
+  children: PropTypes.node,
+  /** Additional classes added to the LoginBox Body */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const LoginBoxBody = ({ children, className, ...props }) => (
+  <div className={css(styles.loginBoxBody, className)} {...props}>
+    {children}
+  </div>
+);
+
+LoginBoxBody.propTypes = propTypes;
+LoginBoxBody.defaultProps = defaultProps;
+
+export default LoginBoxBody;

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxBody.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import LoginBoxBody from './LoginBoxBody';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<LoginBoxBody />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<LoginBoxBody className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'loginbox-body';
+  const view = shallow(<LoginBoxBody data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.d.ts

@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface LoginBoxFooterProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+declare const LoginBoxFooter: SFC<LoginBoxFooterProps>;
+
+export default LoginBoxFooter;

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/LoginBox/login-box.css';
+
+const propTypes = {
+  /** Content rendered inside the LoginBox Footer */
+  children: PropTypes.node,
+  /** Additional classes added to the LoginBox Footer */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const LoginBoxFooter = ({ children, className, ...props }) => (
+  <div className={css(styles.loginBoxFooter, className)} {...props}>
+    {children}
+  </div>
+);
+
+LoginBoxFooter.propTypes = propTypes;
+LoginBoxFooter.defaultProps = defaultProps;
+
+export default LoginBoxFooter;

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxFooter.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import LoginBoxFooter from './LoginBoxFooter';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<LoginBoxFooter />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<LoginBoxFooter className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'loginbox-body';
+  const view = shallow(<LoginBoxFooter data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.d.ts

@@ -0,0 +1,10 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+
+export interface LoginBoxHeaderProps extends HTMLProps<HTMLDivElement> {
+  children?: ReactNode;
+  className?: string;
+}
+
+declare const LoginBoxHeader: SFC<LoginBoxHeaderProps>;
+
+export default LoginBoxHeader;

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/LoginBox/login-box.css';
+
+const propTypes = {
+  /** Content rendered inside the LoginBox Header */
+  children: PropTypes.node,
+  /** Additional classes added to the LoginBox Header */
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const LoginBoxHeader = ({ children, className, ...props }) => (
+  <div className={css(styles.loginBoxHeader, className)} {...props}>
+    {children}
+  </div>
+);
+
+LoginBoxHeader.propTypes = propTypes;
+LoginBoxHeader.defaultProps = defaultProps;
+
+export default LoginBoxHeader;

packages/patternfly-4/react-core/src/components/LoginBox/LoginBoxHeader.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import LoginBoxHeader from './LoginBoxHeader';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<LoginBoxHeader />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<LoginBoxHeader className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'loginbox-header';
+  const view = shallow(<LoginBoxHeader data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});

packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBox.test.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-login-box extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-login-box {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+}
+
+<div
+  className="pf-c-login-box"
+/>
+`;
+
+exports[`simple LoginBox 1`] = `
+.pf-c-login-box__header {
+  display: block;
+  padding: 3rem 3rem 1rem 3rem;
+}
+.pf-c-login-box__body {
+  display: block;
+  padding: 2rem 3rem 2rem 3rem;
+}
+.pf-c-login-box__footer {
+  display: block;
+  padding: 2rem 3rem 4rem 3rem;
+}
+.pf-c-login-box {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+}
+
+<LoginBoxContent>
+  <LoginBox
+    className=""
+  >
+    <div
+      className="pf-c-login-box"
+    >
+      <LoginBoxHeader
+        className=""
+      >
+        <div
+          className="pf-c-login-box__header"
+        >
+          LoginBox Header
+        </div>
+      </LoginBoxHeader>
+      <LoginBoxBody
+        className=""
+      >
+        <div
+          className="pf-c-login-box__body"
+        >
+          LoginBox Body
+        </div>
+      </LoginBoxBody>
+      <LoginBoxFooter
+        className=""
+      >
+        <div
+          className="pf-c-login-box__footer"
+        >
+          LoginBox Footer
+        </div>
+      </LoginBoxFooter>
+    </div>
+  </LoginBox>
+</LoginBoxContent>
+`;

packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxBody.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-login-box__body extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-login-box__body {
+  display: block;
+  padding: 2rem 3rem 2rem 3rem;
+}
+
+<div
+  className="pf-c-login-box__body"
+/>
+`;

packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxFooter.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-login-box__footer extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-login-box__footer {
+  display: block;
+  padding: 2rem 3rem 4rem 3rem;
+}
+
+<div
+  className="pf-c-login-box__footer"
+/>
+`;

packages/patternfly-4/react-core/src/components/LoginBox/__snapshots__/LoginBoxHeader.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-login-box__header extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-login-box__header {
+  display: block;
+  padding: 3rem 3rem 1rem 3rem;
+}
+
+<div
+  className="pf-c-login-box__header"
+/>
+`;