feat(react-core-card): added PatternFly 4 Card Component (patternfly#458

)

affects: @patternfly/react-core, @patternfly/react-docs

Added the Card Component from here: https://pf-next.com/components/Card/examples/

ISSUES CLOSED: patternfly#386

packages/react-core/src/components/Card/Card.d.ts

@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactType } from 'react';
+
+export interface CardProps extends HTMLProps<HTMLDivElement> {
+  component?: ReactType<CardProps>;
+}
+
+declare const Card: SFC<CardProps>;
+
+export default Card;

packages/react-core/src/components/Card/Card.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Card/styles.css';
+import { componentShape } from '../../internal/componentShape';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  component: componentShape
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  component: 'article'
+};
+
+const Card = ({ children, className, component: Component, ...props }) => (
+  <Component className={css(styles.card, className)} {...props}>
+    {children}
+  </Component>
+);
+
+Card.propTypes = propTypes;
+Card.defaultProps = defaultProps;
+
+export default Card;

packages/react-core/src/components/Card/Card.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<Card />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<Card className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card';
+  const view = shallow(<Card data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
+
+test('allows passing in a string as the component', () => {
+  const component = 'section';
+  const view = shallow(<Card component={component} />);
+  expect(view.type()).toBe(component);
+});
+
+test('allows passing in a React Component as the component', () => {
+  const Component = () => null;
+  const view = shallow(<Card component={Component} />);
+  expect(view.type()).toBe(Component);
+});

packages/react-core/src/components/Card/CardBody.d.ts

@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactType } from 'react';
+
+export interface CardBodyProps extends HTMLProps<HTMLDivElement> {
+  component?: ReactType<CardBodyProps>;
+}
+
+declare const CardBody: SFC<CardBodyProps>;
+
+export default CardBody;

packages/react-core/src/components/Card/CardBody.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Card/styles.css';
+import { componentShape } from '../../internal/componentShape';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  component: componentShape
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  component: 'div'
+};
+
+const CardBody = ({ children, className, component: Component, ...props }) => (
+  <Component className={css(styles.cardBody, className)} {...props}>
+    {children}
+  </Component>
+);
+
+CardBody.propTypes = propTypes;
+CardBody.defaultProps = defaultProps;
+
+export default CardBody;

packages/react-core/src/components/Card/CardBody.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import CardBody from './CardBody';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<CardBody />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<CardBody className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-body';
+  const view = shallow(<CardBody data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
+
+test('allows passing in a string as the component', () => {
+  const component = 'section';
+  const view = shallow(<CardBody component={component} />);
+  expect(view.type()).toBe(component);
+});
+
+test('allows passing in a React Component as the component', () => {
+  const Component = () => null;
+  const view = shallow(<CardBody component={Component} />);
+  expect(view.type()).toBe(Component);
+});

packages/react-core/src/components/Card/CardFooter.d.ts

@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactType } from 'react';
+
+export interface CardFooterProps extends HTMLProps<HTMLDivElement> {
+  component?: ReactType<CardFooterProps>;
+}
+
+declare const CardFooter: SFC<CardFooterProps>;
+
+export default CardFooter;

packages/react-core/src/components/Card/CardFooter.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Card/styles.css';
+import { componentShape } from '../../internal/componentShape';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  component: componentShape
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  component: 'div'
+};
+
+const CardFooter = ({
+  children,
+  className,
+  component: Component,
+  ...props
+}) => (
+  <Component className={css(styles.cardFooter, className)} {...props}>
+    {children}
+  </Component>
+);
+
+CardFooter.propTypes = propTypes;
+CardFooter.defaultProps = defaultProps;
+
+export default CardFooter;

packages/react-core/src/components/Card/CardFooter.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import CardFooter from './CardFooter';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<CardFooter />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<CardFooter className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-footer';
+  const view = shallow(<CardFooter data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
+
+test('allows passing in a string as the component', () => {
+  const component = 'div';
+  const view = shallow(<CardFooter component={component} />);
+  expect(view.type()).toBe(component);
+});
+
+test('allows passing in a React Component as the component', () => {
+  const Component = () => null;
+  const view = shallow(<CardFooter component={Component} />);
+  expect(view.type()).toBe(Component);
+});

packages/react-core/src/components/Card/CardHeader.d.ts

@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactType } from 'react';
+
+export interface CardHeaderProps extends HTMLProps<HTMLDivElement> {
+  component?: ReactType<CardHeaderProps>;
+}
+
+declare const CardHeader: SFC<CardHeaderProps>;
+
+export default CardHeader;

packages/react-core/src/components/Card/CardHeader.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Card/styles.css';
+import { componentShape } from '../../internal/componentShape';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string,
+  component: componentShape
+};
+
+const defaultProps = {
+  children: null,
+  className: '',
+  component: 'div'
+};
+
+const CardHeader = ({
+  children,
+  className,
+  component: Component,
+  ...props
+}) => (
+  <Component className={css(styles.cardHeader, className)} {...props}>
+    {children}
+  </Component>
+);
+
+CardHeader.propTypes = propTypes;
+CardHeader.defaultProps = defaultProps;
+
+export default CardHeader;

packages/react-core/src/components/Card/CardHeader.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import CardHeader from './CardHeader';
+import { shallow } from 'enzyme';
+
+test('renders with PatternFly Core styles', () => {
+  const view = shallow(<CardHeader />);
+  expect(view).toMatchSnapshot();
+});
+
+test('className is added to the root element', () => {
+  const view = shallow(<CardHeader className="extra-class" />);
+  expect(view.prop('className')).toMatchSnapshot();
+});
+
+test('extra props are spread to the root element', () => {
+  const testId = 'card-footer';
+  const view = shallow(<CardHeader data-testid={testId} />);
+  expect(view.prop('data-testid')).toBe(testId);
+});
+
+test('allows passing in a string as the component', () => {
+  const component = 'div';
+  const view = shallow(<CardHeader component={component} />);
+  expect(view.type()).toBe(component);
+});
+
+test('allows passing in a React Component as the component', () => {
+  const Component = () => null;
+  const view = shallow(<CardHeader component={Component} />);
+  expect(view.type()).toBe(Component);
+});

packages/react-core/src/components/Card/__snapshots__/Card.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-card extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-card {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  box-shadow: 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.2);
+}
+
+<article
+  className="pf-c-card"
+/>
+`;

packages/react-core/src/components/Card/__snapshots__/CardBody.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-card__body extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-card__body {
+  display: block;
+  padding: 2rem 2rem 2rem 2rem;
+}
+
+<div
+  className="pf-c-card__body"
+/>
+`;

packages/react-core/src/components/Card/__snapshots__/CardFooter.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-card__footer extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-card__footer {
+  display: block;
+  padding: 2rem 2rem 2rem 2rem;
+}
+
+<div
+  className="pf-c-card__footer"
+/>
+`;

packages/react-core/src/components/Card/__snapshots__/CardHeader.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-card__header extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+.pf-c-card__header {
+  display: block;
+  padding: 2rem 2rem 2rem 2rem;
+}
+
+<div
+  className="pf-c-card__header"
+/>
+`;

packages/react-core/src/components/Card/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Card, CardProps } from './Card';
+export { default as CardBody, CardBodyProps } from './CardBody';
+export { default as CardFooter, CardFooterProps } from './CardFooter';
+export { default as CardHeader, CardHeaderProps } from './CardHeader';

packages/react-core/src/components/Card/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { default as CardBody } from './CardBody';
+export { default as CardFooter } from './CardFooter';
+export { default as CardHeader } from './CardHeader';

packages/react-core/src/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Badge';
 export * from './Button';
+export * from './Card';
 export * from './Title';
 export * from './Alert';

packages/react-core/src/components/index.js

@@ -1,4 +1,5 @@
 export * from './Badge';
 export * from './Button';
+export * from './Card';
 export * from './Title';
 export * from './Alert';