fix(card): add wrapper to image to resize it properly (#3642)

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>

Author: boaz0

packages/react-core/src/components/Card/CardHeadMain.test.tsx

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

packages/react-core/src/components/Card/CardHeadMain.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+
+export interface CardHeadMainProps extends React.HTMLProps<HTMLDivElement> {
+  /** Content rendered inside the Card Head Main */
+  children?: React.ReactNode;
+  /** Additional classes added to the Card Head Main */
+  className?: string;
+}
+
+export const CardHeadMain: React.FunctionComponent<CardHeadMainProps> = ({
+  children = null,
+  className = '',
+  ...props
+}: CardHeadMainProps) => (
+  <div className={css('pf-c-card__head-main', className)} {...props}>
+    {children}
+  </div>
+);

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`className is added to the root element 1`] = `"pf-c-card__head-main extra-class"`;
+
+exports[`renders with PatternFly Core styles 1`] = `
+<div
+  className="pf-c-card__head-main"
+>
+  text
+</div>
+`;

packages/react-core/src/components/Card/examples/Card.md

@@ -3,10 +3,10 @@ title: 'Card'
 section: components
 cssPrefix: 'pf-c-card'
 typescript: true
-propComponents: ['Card', 'CardHeader', 'CardBody', 'CardFooter']
+propComponents: ['Card', 'CardHeadMain', 'CardHeader', 'CardBody', 'CardFooter']
 ---
 
-import { Card, CardActions, CardHead, CardHeader, CardBody, CardFooter, Checkbox, DropdownActions } from '@patternfly/react-core';
+import { Brand, Card, CardActions, CardHead, CardHeadMain, CardHeader, CardBody, CardFooter, Checkbox, DropdownActions } from '@patternfly/react-core';
 import pfLogo from './pfLogo.svg'; 
 
 ## Examples
@@ -25,7 +25,7 @@ SimpleCard = () => (
 
 ```js title=With-image-and-actions
 import React from 'react'; 
-import { Card, CardHead, CardActions, CardHeader, CardBody, CardFooter, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, } from '@patternfly/react-core'; 
+import { Brand, Card, CardHead, CardHeadMain, CardActions, CardHeader, CardBody, CardFooter, Dropdown, DropdownToggle, DropdownItem, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, } from '@patternfly/react-core'; 
 import pfLogo from './pfLogo.svg'; 
 
 class KebabDropdown extends React.Component {
@@ -75,7 +75,9 @@ class KebabDropdown extends React.Component {
     return (
       <Card>
         <CardHead>
-          <img src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }}/>
+          <CardHeadMain>
+            <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }}/>
+          </CardHeadMain>
           <CardActions>
             <Dropdown
               onSelect={this.onSelect}
@@ -262,12 +264,14 @@ class KebabDropdown extends React.Component {
 
 ```js title=Only-image-in-the-card-head
 import React from 'react';
-import { Card, CardBody, CardFooter, CardHead, CardHeader } from '@patternfly/react-core';
+import { Brand, Card, CardBody, CardFooter, CardHead, CardHeadMain, CardHeader } from '@patternfly/react-core';
 
 ImageCard = () => (
   <Card>
     <CardHead>
-      <img src={pfLogo} alt="PatternFly Logo" style={{ height: '50px' }}/>
+      <CardHeadMain>
+        <Brand src={pfLogo} alt="PatternFly logo" style={{ height: '50px' }}/>
+      </CardHeadMain>
     </CardHead> 
     <CardHeader>Header</CardHeader>
     <CardBody>Body</CardBody>

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

@@ -4,3 +4,4 @@ export * from './CardBody';
 export * from './CardFooter';
 export * from './CardHeader';
 export * from './CardHead';
+export * from './CardHeadMain';