patternfly · priley86 · Jun 14, 2018 · May 12, 2018
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -32,6 +32,7 @@
     "react-bootstrap": "^0.32.1",
     "react-bootstrap-switch": "^15.5.3",
     "react-c3js": "^0.1.20",
+    "react-click-outside": "^3.0.1",
     "react-fontawesome": "^1.6.1",
     "reactabular-table": "^8.14.0",
     "recompose": "^0.26.0"

diff --git a/packages/core/src/components/ApplicationLauncher/ApplicationLauncher.js b/packages/core/src/components/ApplicationLauncher/ApplicationLauncher.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ApplicationLauncherToggle from './ApplicationLauncherToggle';
+import { Dropdown } from '../Dropdown';
+import { noop } from '../../common/helpers';
+
+const ApplicationLauncher = ({
+  open,
+  grid,
+  tooltip,
+  tooltipPlacement,
+  children,
+  toggleLauncher,
+  className,
+  ...propTypes
+}) => {
+  const classes = classNames(
+    'applauncher-pf dropdown',
+    {
+      'applauncher-pf-block-list': grid
+    },
+    { open }
+  );
+  return (
+    <li className={classes}>
+      <ApplicationLauncherToggle
+        tooltip={tooltip}
+        tooltipPlacement={tooltipPlacement}
+        onClick={() => toggleLauncher()}
+        open={open}
+      />
+      <Dropdown.Menu className="dropdown-menu-right">{children}</Dropdown.Menu>
+    </li>
+  );
+};
+
+ApplicationLauncher.propTypes = {
+  /** Additional element css classes */
+  className: PropTypes.string,
+  /** Children Node */
+  children: PropTypes.node.isRequired,
+  /** Toggle Tooltip */
+  tooltip: PropTypes.string,
+  /** tooltipPlacement */
+  tooltipPlacement: PropTypes.string,
+  /** Application Launcher Type (Default List) */
+  grid: PropTypes.bool,
+  /** open bool */
+  open: PropTypes.bool,
+  /** Toggle launcher func */
+  toggleLauncher: PropTypes.func
+};
+ApplicationLauncher.defaultProps = {
+  className: '',
+  tooltip: '',
+  tooltipPlacement: 'left',
+  toggleLauncher: noop,
+  grid: false,
+  open: false
+};
+
+export default ApplicationLauncher;
diff --git a/packages/core/src/components/ApplicationLauncher/ApplicationLauncher.stories.js b/packages/core/src/components/ApplicationLauncher/ApplicationLauncher.stories.js
@@ -0,0 +1,22 @@
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import {
+  storybookPackageName,
+  STORYBOOK_CATEGORY
+} from 'storybook/constants/siteConstants';
+import {
+  NavApplicationLauncherStory,
+  WrapperNavApplicationLauncherStory
+} from './Stories/index';
+import { name } from '../../../package.json';
+
+const stories = storiesOf(
+  `${storybookPackageName(name)}/${
+    STORYBOOK_CATEGORY.APPLICATION_FRAMEWORK
+  }/Launcher`,
+  module
+);
+stories.addDecorator(withKnobs);
+
+NavApplicationLauncherStory(stories);
+WrapperNavApplicationLauncherStory(stories);
diff --git a/packages/core/src/components/ApplicationLauncher/ApplicationLauncher.test.js b/packages/core/src/components/ApplicationLauncher/ApplicationLauncher.test.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import {
+  ApplicationLauncher,
+  ApplicationLauncherItem,
+  ApplicationLauncherToggle
+} from './index';
+
+const handleClick = e => {
+  e.preventDefault();
+};
+
+test('ApplicationLauncher is working properly', () => {
+  const component = mount(
+    <ApplicationLauncher type="grid" tooltipPlacement="left">
+      <ApplicationLauncherItem
+        icon="pficon pficon-storage-domain"
+        title="Recteque"
+        tooltip="Tooltip!"
+        onClick={handleClick}
+      />
+    </ApplicationLauncher>
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('ApplicationLauncherItem with tooltip is working properly', () => {
+  const component = mount(
+    <ApplicationLauncherItem
+      icon="pficon pficon-storage-domain"
+      title="Recteque"
+      tooltip="Tooltip!"
+      onClick={handleClick}
+    />
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('ApplicationLauncherItem without tooltip is working properly', () => {
+  const component = mount(
+    <ApplicationLauncherItem
+      icon="pficon pficon-storage-domain"
+      title="Recteque"
+      onClick={handleClick}
+    />
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('ApplicationLauncherToggle is working properly', () => {
+  const component = mount(
+    <ApplicationLauncherToggle tooltipPlacement="left" onClick={handleClick} />
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
diff --git a/packages/core/src/components/ApplicationLauncher/ApplicationLauncherItem.js b/packages/core/src/components/ApplicationLauncher/ApplicationLauncherItem.js
@@ -0,0 +1,87 @@
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip } from '../Tooltip';
+import { OverlayTrigger } from '../OverlayTrigger';
+import { Icon } from '../Icon';
+
+const ApplicationLauncherItem = ({
+  onClick,
+  tooltip,
+  tooltipPlacement,
+  title,
+  icon,
+  noIcons,
+  className,
+  ...props
+}) => {
+  const classes = classNames('applauncher-pf-item', className);
+
+  if (tooltip !== null) {
+    return (
+      <OverlayTrigger
+        overlay={<Tooltip id={title}>{tooltip}</Tooltip>}
+        placement={tooltipPlacement}
+        trigger={['hover', 'focus']}
+        rootClose={false}
+      >
+        <li className={classes} role="presentation">
+          <a
+            className="applauncher-pf-link"
+            href="#"
+            onClick={e => onClick(e)}
+            role="menuitem"
+          >
+            {!noIcons && (
+              <Icon
+                type="pf"
+                name={icon}
+                className="applauncher-pf-link-icon"
+              />
+            )}
+            <span className="applauncher-pf-link-title">{title}</span>
+          </a>
+        </li>
+      </OverlayTrigger>
+    );
+  }
+  return (
+    <li className={classes} role="presentation">
+      <a
+        className="applauncher-pf-link"
+        href="#"
+        onClick={e => onClick(e)}
+        role="menuitem"
+      >
+        {!noIcons && (
+          <Icon type="pf" name={icon} className="applauncher-pf-link-icon" />
+        )}
+        <span className="applauncher-pf-link-title">{title}</span>
+      </a>
+    </li>
+  );
+};
+ApplicationLauncherItem.propTypes = {
+  /** Additional element css classes */
+  className: PropTypes.string,
+  /** onClick func */
+  onClick: PropTypes.func,
+  /** Title String */
+  title: PropTypes.string.isRequired,
+  /** Icon Type */
+  icon: PropTypes.string.isRequired,
+  /** App Tooltip */
+  tooltip: PropTypes.string,
+  /** Tooltip Placement */
+  tooltipPlacement: PropTypes.string,
+  /** No Icons Bool */
+  noIcons: PropTypes.bool
+};
+ApplicationLauncherItem.defaultProps = {
+  className: '',
+  onClick: null,
+  noIcons: false,
+  tooltipPlacement: 'left',
+  tooltip: null
+};
+export default ApplicationLauncherItem;
diff --git a/packages/core/src/components/ApplicationLauncher/ApplicationLauncherToggle.js b/packages/core/src/components/ApplicationLauncher/ApplicationLauncherToggle.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger } from '../OverlayTrigger';
+import { Tooltip } from '../Tooltip';
+import { Icon } from '../Icon';
+import { Button } from '../Button';
+
+const ApplicationLauncherToggle = ({
+  open,
+  tooltip,
+  onClick,
+  tooltipPlacement
+}) => {
+  if (tooltip)
+    return (
+      <OverlayTrigger
+        placement={tooltipPlacement}
+        id="applauncher-pf-block-list"
+        overlay={<Tooltip id={tooltip}>{tooltip}</Tooltip>}
+      >
+        <Button
+          onClick={onClick}
+          bsStyle="link"
+          className="nav-item-iconic dropdown-toggle"
+          aria-expanded={open}
+        >
+          <Icon name="th applauncher-pf-icon" />
+        </Button>
+      </OverlayTrigger>
+    );
+  return (
+    <Button
+      onClick={onClick}
+      bsStyle="link"
+      className="nav-item-iconic dropdown-toggle"
+      aria-expanded={open}
+    >
+      <Icon name="th applauncher-pf-icon" />
+      <span className="dropdown-title">
+        <span className="applauncher-pf-title">
+          Application Launcher
+          <span className="caret" aria-hidden="true" />
+        </span>
+      </span>
+    </Button>
+  );
+};
+ApplicationLauncherToggle.propTypes = {
+  /** onClick func */
+  onClick: PropTypes.func,
+  /** tooltipPlacement */
+  tooltipPlacement: PropTypes.string,
+  /** Toggle Tooltip */
+  tooltip: PropTypes.string,
+  /** is Open bool */
+  open: PropTypes.bool.isRequired
+};
+ApplicationLauncherToggle.defaultProps = {
+  onClick: null,
+  tooltipPlacement: 'bottom',
+  tooltip: ''
+};
+
+export default ApplicationLauncherToggle;
diff --git a/packages/core/src/components/ApplicationLauncher/Stories/NavApplicationLauncherStory.js b/packages/core/src/components/ApplicationLauncher/Stories/NavApplicationLauncherStory.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, select } from '@storybook/addon-knobs';
+import { inlineTemplate } from 'storybook/decorators/storyTemplates';
+import { DOCUMENTATION_URL } from 'storybook/constants/siteConstants';
+import ApplicationLauncher from '../ApplicationLauncher';
+import ApplicationLauncherItem from '../ApplicationLauncherItem';
+
+const handleClick = e => {
+  e.preventDefault();
+  action('app clicked!')();
+};
+
+const NavApplicationLauncherStory = stories => {
+  stories.addWithInfo('Launcher', '', () => {
+    const type = select(
+      'Launcher Type',
+      { true: 'Grid', false: 'List' },
+      'true'
+    );
+    const iconBool = boolean('Icons', true);
+
+    const story = (
+      <nav className="navbar navbar-pf-vertical">
+        <nav className="collapse navbar-collapse">
+          <ul className="nav navbar-nav navbar-right navbar-iconic">
+            <ApplicationLauncher
+              grid={type === 'true'}
+              tooltipPlacement="left"
+              open
+            >
+              <ApplicationLauncherItem
+                key="app1"
+                icon="storage-domain"
+                title="Recteque"
+                tooltip="Tooltip!"
+                tooltipPlacement="left"
+                onClick={handleClick}
+                noIcons={!iconBool}
+              />
+              <ApplicationLauncherItem
+                key="app2"
+                icon="virtual-machine"
+                title="No Tooltip"
+                onClick={handleClick}
+                noIcons={!iconBool}
+              />
+              <ApplicationLauncherItem
+                key="app3"
+                icon="domain"
+                title="Lorem"
+                tooltip="Tooltip!"
+                tooltipPlacement="left"
+                onClick={handleClick}
+                noIcons={!iconBool}
+              />
+              <ApplicationLauncherItem
+                key="app4"
+                icon="home"
+                title="Home"
+                tooltip="Tooltip!"
+                tooltipPlacement="left"
+                onClick={handleClick}
+                noIcons={!iconBool}
+              />
+            </ApplicationLauncher>
+          </ul>
+        </nav>
+      </nav>
+    );
+    return inlineTemplate({
+      title: 'ApplicationLauncher',
+      documentationLink: `${
+        DOCUMENTATION_URL.PATTERNFLY_ORG_APPLICATION_FRAMEWORK
+      }launcher/`,
+      story
+    });
+  });
+};
+
+export default NavApplicationLauncherStory;