feat(pf4-brand): introduce brand component (patternfly#633)

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

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

@@ -4,15 +4,16 @@ import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 
 const propTypes = {
+  /** Additional classes added to the Avatar. */
   className: PropTypes.string,
+  /** Attribute that specifies the URL of the image for the Avatar. */
   src: PropTypes.string,
+  /** Attribute that specifies the alt text of the image for the Avatar. */
   alt: PropTypes.string.isRequired
 };
 
 const defaultProps = {
-  /** Additional classes added to the Avatar. */
   className: '',
-  /** Attribute that specifies the URL of the image for the Avatar. */
   src: ''
 };
 

packages/patternfly-4/react-core/src/components/Avatar/examples/SimpleAvatar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
-import avatarImg from '../../../../../react-docs/src/assets/img_avatar.png';
+import avatarImg from './img_avatar.png';
 
 class SimpleAvatar extends React.Component {
   static title = 'Simple Avatar';

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

@@ -0,0 +1,9 @@
+import { SFC, HTMLProps, ReactNode } from 'react';
+import { Omit } from '../../typeUtils';
+
+export interface BrandProps extends HTMLProps<HTMLImageElement> {
+  src?: string;
+  alt: string;
+}
+declare const Brand: SFC<BrandProps>;
+export default Brand;

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

@@ -0,0 +1,10 @@
+import { Brand } from '@patternfly/react-core';
+import Simple from './examples/SimpleBrand';
+
+export default {
+  title: 'Brand',
+  components: {
+    Brand
+  },
+  examples: [Simple]
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Additional classes added to the Brand. */
+  className: PropTypes.string,
+  /** Attribute that specifies the URL of the image for the Brand. */
+  src: PropTypes.string,
+  /** Attribute that specifies the alt text of the image for the Brand. */
+  alt: PropTypes.string.isRequired
+};
+
+const defaultProps = {
+  className: '',
+  src: ''
+};
+
+const Brand = ({ className, src, alt, ...props }) => (
+  /** the brand component currently contains no styling
+   the 'pf-c-brand' string will be used for the className */
+  <img {...props} className={css('pf-c-brand', className)} src={src} alt={alt} />
+);
+
+Brand.propTypes = propTypes;
+Brand.defaultProps = defaultProps;
+
+export default Brand;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Brand from './Brand';
+
+test('simple brand', () => {
+  const view = shallow(<Brand alt="brand" />);
+  expect(view).toMatchSnapshot();
+});

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`simple brand 1`] = `
+<img
+  alt="brand"
+  className="pf-c-brand"
+  src=""
+/>
+`;

packages/patternfly-4/react-core/src/components/Brand/examples/SimpleBrand.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Brand } from '@patternfly/react-core';
+import brandImg from './pf_logo.svg';
+
+class SimpleBrand extends React.Component {
+  static title = 'Simple Brand';
+
+  render() {
+    return <Brand src={brandImg} alt="Brand Image" />;
+  }
+}
+
+export default SimpleBrand;

packages/patternfly-4/react-core/src/components/Brand/index.js

@@ -0,0 +1 @@
+export { default as Brand } from './Brand';

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

@@ -11,3 +11,4 @@ export * from './TextArea';
 export * from './Dropdown';
 export * from './Select';
 export * from './Avatar';
+export * from './Brand';

packages/patternfly-4/react-tokens/package.json

@@ -27,7 +27,7 @@
     "build": "node build/generateTokens.js"
   },
   "devDependencies": {
-    "@patternfly/patternfly-next": "1.0.43",
+    "@patternfly/patternfly-next": "1.0.44",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2"

yarn.lock

@@ -193,6 +193,10 @@
   version "1.0.43"
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly-next/-/patternfly-next-1.0.43.tgz#64498a29c690b1713fef7e07d0eac701ef064c9a"
 
+"@patternfly/patternfly-next@1.0.44":
+  version "1.0.44"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly-next/-/patternfly-next-1.0.44.tgz#556a48dcfbb24a01f65363656c725a35a731bb0c"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"