feat(react-core/card): added Card Components

affects: @patternfly/react-core, @patternfly/react-docs Added Card, CardHeader, CardBody, and CardFooter components ISSUES CLOSED: patternfly#386
dmiller9911 · Jun 29, 2018 · e7618f9 · e7618f9
1 parent 0074044
commit e7618f9
Show file tree

Hide file tree

Showing 34 changed files with 381 additions and 135 deletions.
diff --git a/packages/react-core/build/copyStyles.js b/packages/react-core/build/copyStyles.js
@@ -8,7 +8,7 @@ const pfDir = dirname(
 
 copySync(join(pfDir, 'assets/'), stylesDir);
 const css = readFileSync(join(pfDir, 'patternfly.css'), 'utf8').replace(
-  /\/assets\//gi,
+  /\.?\/assets\//gi,
   './'
 );
 writeFileSync(join(stylesDir, 'patternfly.css'), css);
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -36,7 +36,7 @@
     "postbuild": "node ./build/copyStyles.js"
   },
   "devDependencies": {
-    "@patternfly/patternfly-next": "^1.0.4",
+    "@patternfly/patternfly-next": "1.0.5",
     "fs-extra": "^6.0.1"
   }
 }
diff --git a/packages/react-core/src/components/Button/__snapshots__/Button.test.js.snap b/packages/react-core/src/components/Button/__snapshots__/Button.test.js.snap
@@ -3,17 +3,17 @@
 exports[`action button 1`] = `
 .pf-c-button.pf-m-action {
   display: inline-block;
+  position: relative;
   padding: 0.5rem 0.5rem 0.5rem 0.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1;
+  color: #292e34;
   text-align: center;
   white-space: nowrap;
   background-color: transparent;
   border: 0px;
   border-radius: 30em;
-  box-shadow: none;
-  color: #292e34;
 }
 
 <button
@@ -30,17 +30,17 @@ exports[`action button 1`] = `
 exports[`danger button 1`] = `
 .pf-c-button.pf-m-danger {
   display: inline-block;
+  position: relative;
   padding: 0.25rem 1.5rem 0.25rem 1.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #ffffff;
   text-align: center;
   white-space: nowrap;
   background-color: #a30000;
   border: 0px;
   border-radius: 30em;
-  box-shadow: inset 0 0 0 2px #a30000;
-  color: #ffffff;
 }
 
 <button
@@ -57,17 +57,17 @@ exports[`danger button 1`] = `
 exports[`isBlock 1`] = `
 .pf-c-button.pf-m-primary.pf-m-block {
   display: block;
+  position: relative;
   padding: 0.25rem 1.5rem 0.25rem 1.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #ffffff;
   text-align: center;
   white-space: nowrap;
   background-color: #00659c;
   border: 0px;
   border-radius: 30em;
-  box-shadow: inset 0 0 0 2px #00659c;
-  color: #ffffff;
   width: 100%;
 }
 
@@ -84,17 +84,17 @@ exports[`isBlock 1`] = `
 exports[`isDisabled 1`] = `
 .pf-c-button.pf-m-primary.pf-m-disabled {
   display: inline-block;
+  position: relative;
   padding: 0.25rem 1.5rem 0.25rem 1.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #72767b;
   text-align: center;
   white-space: nowrap;
-  background-color: #00659c;
+  background-color: #d1d1d1;
   border: 0px;
   border-radius: 30em;
-  box-shadow: inset 0 0 0 1px undefined;
-  color: #ffffff;
   pointer-events: none;
 }
 
@@ -111,17 +111,17 @@ exports[`isDisabled 1`] = `
 exports[`isFocus 1`] = `
 .pf-c-button.pf-m-primary.pf-m-focus {
   display: inline-block;
+  position: relative;
   padding: 0.25rem 1.5rem 0.25rem 1.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #ffffff;
   text-align: center;
   white-space: nowrap;
   background-color: #00659c;
   border: 0px;
   border-radius: 30em;
-  box-shadow: inset 0 0 0 2px #00659c;
-  color: #ffffff;
 }
 
 <button
@@ -137,17 +137,17 @@ exports[`isFocus 1`] = `
 exports[`isHover 1`] = `
 .pf-c-button.pf-m-primary.pf-m-hover {
   display: inline-block;
+  position: relative;
   padding: 0.25rem 1.5rem 0.25rem 1.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #ffffff;
   text-align: center;
   white-space: nowrap;
   background-color: #00659c;
   border: 0px;
   border-radius: 30em;
-  box-shadow: inset 0 0 0 2px #00659c;
-  color: #ffffff;
 }
 
 <button
@@ -163,17 +163,17 @@ exports[`isHover 1`] = `
 exports[`link button 1`] = `
 .pf-c-button.pf-m-link {
   display: inline-block;
+  position: relative;
   padding: 0.25rem 0.25rem 0.25rem 0.25rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #00486e;
   text-align: center;
   white-space: nowrap;
   background-color: transparent;
   border: 0px;
   border-radius: 30em;
-  box-shadow: none;
-  color: #00486e;
 }
 
 <button
@@ -190,17 +190,17 @@ exports[`link button 1`] = `
 exports[`primary button 1`] = `
 .pf-c-button.pf-m-primary {
   display: inline-block;
+  position: relative;
   padding: 0.25rem 1.5rem 0.25rem 1.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #ffffff;
   text-align: center;
   white-space: nowrap;
   background-color: #00659c;
   border: 0px;
   border-radius: 30em;
-  box-shadow: inset 0 0 0 2px #00659c;
-  color: #ffffff;
 }
 
 <button
@@ -217,17 +217,17 @@ exports[`primary button 1`] = `
 exports[`secondary button 1`] = `
 .pf-c-button.pf-m-secondary {
   display: inline-block;
+  position: relative;
   padding: 0.25rem 1.5rem 0.25rem 1.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #00659c;
   text-align: center;
   white-space: nowrap;
   background-color: transparent;
   border: 0px;
   border-radius: 30em;
-  box-shadow: inset 0 0 0 2px #00659c;
-  color: #00659c;
 }
 
 <button
@@ -244,17 +244,17 @@ exports[`secondary button 1`] = `
 exports[`tertiary button 1`] = `
 .pf-c-button.pf-m-tertiary {
   display: inline-block;
+  position: relative;
   padding: 0.25rem 1.5rem 0.25rem 1.5rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
+  color: #292e34;
   text-align: center;
   white-space: nowrap;
   background-color: transparent;
   border: 0px;
   border-radius: 30em;
-  box-shadow: inset 0 0 0 2px #72767b;
-  color: #00659c;
 }
 
 <button

diff --git a/packages/react-core/src/components/Card/Card.d.ts b/packages/react-core/src/components/Card/Card.d.ts
@@ -0,0 +1,7 @@
+import { SFC, HTMLProps } from 'react';
+
+export interface CardProps extends HTMLProps<HTMLDivElement> {}
+
+declare const Card: SFC<CardProps>;
+
+export default Card;
diff --git a/packages/react-core/src/components/Card/Card.js b/packages/react-core/src/components/Card/Card.js
@@ -0,0 +1,25 @@
+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';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const Card = ({ children, className, ...props }) => (
+  <div className={css(styles.card, className)} {...props}>
+    {children}
+  </div>
+);
+
+Card.propTypes = propTypes;
+Card.defaultProps = defaultProps;
+
+export default Card;
diff --git a/packages/react-core/src/components/Card/CardBody.d.ts b/packages/react-core/src/components/Card/CardBody.d.ts
@@ -0,0 +1,7 @@
+import { SFC, HTMLProps } from 'react';
+
+export interface CardBodyProps extends HTMLProps<HTMLDivElement> {}
+
+declare const CardBody: SFC<CardBodyProps>;
+
+export default CardBody;
diff --git a/packages/react-core/src/components/Card/CardBody.js b/packages/react-core/src/components/Card/CardBody.js
@@ -0,0 +1,25 @@
+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';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const CardBody = ({ children, className, ...props }) => (
+  <div className={css(styles.cardBody, className)} {...props}>
+    {children}
+  </div>
+);
+
+CardBody.propTypes = propTypes;
+CardBody.defaultProps = defaultProps;
+
+export default CardBody;
diff --git a/packages/react-core/src/components/Card/CardFooter.d.ts b/packages/react-core/src/components/Card/CardFooter.d.ts
@@ -0,0 +1,7 @@
+import { SFC, HTMLProps } from 'react';
+
+export interface CardFooterProps extends HTMLProps<HTMLDivElement> {}
+
+declare const CardFooter: SFC<CardFooterProps>;
+
+export default CardFooter;
diff --git a/packages/react-core/src/components/Card/CardFooter.js b/packages/react-core/src/components/Card/CardFooter.js
@@ -0,0 +1,25 @@
+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';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const CardFooter = ({ children, className, ...props }) => (
+  <div className={css(styles.cardFooter, className)} {...props}>
+    {children}
+  </div>
+);
+
+CardFooter.propTypes = propTypes;
+CardFooter.defaultProps = defaultProps;
+
+export default CardFooter;
diff --git a/packages/react-core/src/components/Card/CardHeader.d.ts b/packages/react-core/src/components/Card/CardHeader.d.ts
@@ -0,0 +1,7 @@
+import { SFC, HTMLProps } from 'react';
+
+export interface CardHeaderProps extends HTMLProps<HTMLDivElement> {}
+
+declare const CardHeader: SFC<CardHeaderProps>;
+
+export default CardHeader;
diff --git a/packages/react-core/src/components/Card/CardHeader.js b/packages/react-core/src/components/Card/CardHeader.js
@@ -0,0 +1,25 @@
+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';
+
+const propTypes = {
+  children: PropTypes.any,
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  children: null,
+  className: ''
+};
+
+const CardHeader = ({ children, className, ...props }) => (
+  <div className={css(styles.cardHeader, className)} {...props}>
+    {children}
+  </div>
+);
+
+CardHeader.propTypes = propTypes;
+CardHeader.defaultProps = defaultProps;
+
+export default CardHeader;
diff --git a/packages/react-core/src/components/Card/index.d.ts b/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';
diff --git a/packages/react-core/src/components/Card/index.js b/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';
diff --git a/packages/react-core/src/components/Title/Title.d.ts b/packages/react-core/src/components/Title/Title.d.ts
@@ -1,14 +1,12 @@
 import { SFC, HTMLProps, ReactNode } from 'react';
-import { Omit, OneOf } from '../../util';
+import { Omit, OneOf } from '../../typeUtils';
+import { BaseSizes } from '../../styles/sizes';
+
+export const TitleSize: Pick<
+  typeof BaseSizes,
+  'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+>;
 
-export const TitleSize: {
-  xxxxl: 'xxxxl';
-  xxxl: 'xxxl';
-  xxl: 'xxl';
-  xl: 'xl';
-  lg: 'lg';
-  md: 'md';
-};
 export interface TitleProps
   extends Omit<HTMLProps<HTMLHeadingElement>, 'size'> {
   size: OneOf<typeof TitleSize, keyof typeof TitleSize>;