feat(Hint): add hint components

packages/react-core/src/components/Hint/Hint.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
+import { css } from '@patternfly/react-styles';
+
+export interface HintProps {
+  /** Content rendered inside the hint. */
+  children?: React.ReactNode;
+  /** Additional classes applied to the hint. */
+  className?: string;
+  /** Actions of the hint. */
+  actions?: React.ReactNode;
+}
+
+export const Hint: React.FunctionComponent<HintProps> = ({ children, className, actions, ...props }: HintProps) => (
+  <div className={css(styles.hint, className)} {...props}>
+    <div className={css(styles.hintActions)}>{actions}</div>
+    {children}
+  </div>
+);
+Hint.displayName = 'Hint';

packages/react-core/src/components/Hint/HintBody.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
+import { css } from '@patternfly/react-styles';
+
+export interface HintBodyProps {
+  /** Content rendered inside the hint body. */
+  children?: React.ReactNode;
+  /** Additional classes applied to the hint body. */
+  className?: string;
+}
+
+export const HintBody: React.FunctionComponent<HintBodyProps> = ({ children, className, ...props }: HintBodyProps) => (
+  <div className={css(styles.hintBody, className)} {...props}>
+    {children}
+  </div>
+);
+HintBody.displayName = 'HintBody';

packages/react-core/src/components/Hint/HintFooter.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
+import { css } from '@patternfly/react-styles';
+
+export interface HintFooterProps {
+  /** Content rendered inside the hint footer. */
+  children?: React.ReactNode;
+  /** Additional classes applied to the hint footer. */
+  className?: string;
+}
+
+export const HintFooter: React.FunctionComponent<HintFooterProps> = ({
+  children,
+  className,
+  ...props
+}: HintFooterProps) => (
+  <div className={css(styles.hintFooter, className)} {...props}>
+    {children}
+  </div>
+);
+HintFooter.displayName = 'HintFooter';

packages/react-core/src/components/Hint/HintTitle.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Hint/hint';
+import { css } from '@patternfly/react-styles';
+
+export interface HintTitleProps {
+  /** Content rendered inside the hint title. */
+  children?: React.ReactNode;
+  /** Additional classes applied to the hint title. */
+  className?: string;
+}
+
+export const HintTitle: React.FunctionComponent<HintTitleProps> = ({
+  children,
+  className,
+  ...props
+}: HintTitleProps) => (
+  <div className={css(styles.hintTitle, className)} {...props}>
+    {children}
+  </div>
+);
+HintTitle.displayName = 'HintTitle';

packages/react-core/src/components/Hint/__tests__/Hint.test.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { Hint } from '../Hint';
+import { HintBody } from '../HintBody';
+import { HintTitle } from '../HintTitle';
+import { HintFooter } from '../HintFooter';
+
+test('simple hint', () => {
+  const view = shallow(
+    <Hint>
+      <HintTitle>Title</HintTitle>
+      <HintBody>Body</HintBody>
+      <HintFooter>Footer</HintFooter>
+    </Hint>
+  );
+  expect(view).toMatchSnapshot();
+});

packages/react-core/src/components/Hint/__tests__/__snapshots__/Hint.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`simple hint 1`] = `
+<div
+  className="pf-c-hint"
+>
+  <div
+    className="pf-c-hint__actions"
+  />
+  <HintTitle>
+    Title
+  </HintTitle>
+  <HintBody>
+    Body
+  </HintBody>
+  <HintFooter>
+    Footer
+  </HintFooter>
+</div>
+`;

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

@@ -0,0 +1,184 @@
+---
+id: Hint
+section: components
+cssPrefix: null
+propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
+beta: true
+---
+
+## Examples
+
+### Basic with title
+
+```js
+import React from 'react';
+import {
+  Hint,
+  HintTitle,
+  HintBody,
+  HintFooter,
+  Button,
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownPosition,
+  DropdownDirection,
+  KebabToggle
+} from '@patternfly/react-core';
+
+class BasicHint extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false
+    };
+    this.onToggle = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+    this.onSelect = event => {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+    };
+  }
+
+  render() {
+    const { isOpen } = this.state;
+    const dropdownItems = [
+      <DropdownItem key="link">Link</DropdownItem>,
+      <DropdownItem key="action" component="button">
+        Action
+      </DropdownItem>,
+      <DropdownItem key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem key="disabled action" isDisabled component="button">
+        Disabled Action
+      </DropdownItem>,
+      <DropdownSeparator key="separator" />,
+      <DropdownItem key="separated link">Separated Link</DropdownItem>,
+      <DropdownItem key="separated action" component="button">
+        Separated Action
+      </DropdownItem>
+    ];
+    const actions = (
+      <Dropdown
+        onSelect={this.onSelect}
+        toggle={<KebabToggle onToggle={this.onToggle} id="hint-kebab-toggle" />}
+        isOpen={isOpen}
+        dropdownItems={dropdownItems}
+        position="right"
+        isPlain
+      />
+    );
+    return (
+      <Hint actions={actions}>
+        <HintTitle>Do more with Find it Fix it capabilities</HintTitle>
+        <HintBody>
+          Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
+        </HintBody>
+        <HintFooter>
+          <Button variant="link" isInline>
+            Try it for 90 days
+          </Button>
+        </HintFooter>
+      </Hint>
+    );
+  }
+}
+```
+
+### Basic without title
+
+```js
+import React from 'react';
+import {
+  Hint,
+  HintBody,
+  HintFooter,
+  Button,
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownPosition,
+  DropdownDirection,
+  KebabToggle
+} from '@patternfly/react-core';
+
+class BasicHint extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false
+    };
+    this.onToggle = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+    this.onSelect = event => {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+    };
+  }
+
+  render() {
+    const { isOpen } = this.state;
+    const dropdownItems = [
+      <DropdownItem key="link">Link</DropdownItem>,
+      <DropdownItem key="action" component="button">
+        Action
+      </DropdownItem>,
+      <DropdownItem key="disabled link" isDisabled>
+        Disabled Link
+      </DropdownItem>,
+      <DropdownItem key="disabled action" isDisabled component="button">
+        Disabled Action
+      </DropdownItem>,
+      <DropdownSeparator key="separator" />,
+      <DropdownItem key="separated link">Separated Link</DropdownItem>,
+      <DropdownItem key="separated action" component="button">
+        Separated Action
+      </DropdownItem>
+    ];
+    const actions = (
+      <Dropdown
+        onSelect={this.onSelect}
+        toggle={<KebabToggle onToggle={this.onToggle} id="hint-notitle-kebab-toggle" />}
+        isOpen={isOpen}
+        dropdownItems={dropdownItems}
+        position="right"
+        isPlain
+      />
+    );
+    return (
+      <React.Fragment>
+        <Hint>
+          <HintBody>
+            Welcome to the new documentation experience.
+            <Button variant="link" isInline>
+              Learn more about the improved features.
+            </Button>
+          </HintBody>
+        </Hint>
+        <br />
+        <Hint actions={actions}>
+          <HintBody>
+            Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
+          </HintBody>
+          <HintFooter>
+            <Button variant="link" isInline>
+              Try it for 90 days
+            </Button>
+          </HintFooter>
+        </Hint>
+      </React.Fragment>
+    );
+  }
+}
+```

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

@@ -0,0 +1,4 @@
+export * from './Hint';
+export * from './HintBody';
+export * from './HintFooter';
+export * from './HintTitle';

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

@@ -26,6 +26,7 @@ export * from './ExpandableSection';
 export * from './FileUpload';
 export * from './Form';
 export * from './FormSelect';
+export * from './Hint';
 export * from './InputGroup';
 export * from './Label';
 export * from './List';

packages/react-integration/cypress/integration/hint.spec.ts

@@ -0,0 +1,12 @@
+describe('Hint Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#hint-demo-nav-item-link').click();
+    cy.url().should('eq', 'http://localhost:3000/hint-demo-nav-link');
+  });
+
+  it('Verify banner', () => {
+    cy.get('.pf-c-hint').should('exist');
+    cy.get('.pf-c-hint__title').should('exist');
+  });
+});

packages/react-integration/demo-app-ts/src/Demos.ts

@@ -346,6 +346,11 @@ export const Demos: DemoInterface[] = [
     name: 'Grid Demo',
     componentType: Examples.GridDemo
   },
+  {
+    id: 'hint-demo',
+    name: 'Hint Demo',
+    componentType: Examples.HintDemo
+  },
   {
     id: 'input-group-demo',
     name: 'Input Group Demo',