feat(Add Application Launcher Component):

fix #184

Author: glekner

src/components/ApplicationLauncher/ApplicationLauncher.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import ApplicationLauncherToggle from './ApplicationLauncherToggle';
+import { Dropdown } from '../Dropdown';
+
+class ApplicationLauncher extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showLauncher: false,
+      type: props.type
+    };
+  }
+
+  componentWillReceiveProps = nextProps => {
+    this.setState({ type: nextProps.type });
+  };
+
+  toggleLauncher = () => {
+    this.setState({ showLauncher: !this.state.showLauncher });
+  };
+
+  render() {
+    const classes = classNames(
+      {
+        'applauncher-pf applauncher-pf-block-list dropdown dropdown-kebab-pf':
+          this.state.type === 'grid'
+      },
+      {
+        'applauncher-pf dropdown dropdown-kebab-pf': this.state.type === 'list'
+      },
+      { open: this.state.showLauncher }
+    );
+    return (
+      <li className={classes}>
+        <ApplicationLauncherToggle
+          tooltipPlacement={this.props.tooltipPlacement}
+          onClick={this.toggleLauncher}
+        />
+        <Dropdown.Menu className="dropdown-menu-right">
+          {this.props.children}
+        </Dropdown.Menu>
+      </li>
+    );
+  }
+}
+ApplicationLauncher.propTypes = {
+  /** Children Node */
+  children: PropTypes.node.isRequired,
+  /** tooltipPlacement */
+  tooltipPlacement: PropTypes.string,
+  /** Application Launcher Type */
+  type: PropTypes.string.isRequired
+};
+ApplicationLauncher.defaultProps = {
+  tooltipPlacement: 'left'
+};
+
+export default ApplicationLauncher;

src/components/ApplicationLauncher/ApplicationLauncher.stories.js

@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import {
+  NavApplicationLauncherStory,
+  WrapperNavApplicationLauncherStory
+} from './Stories/index';
+
+const stories = storiesOf('ApplicationLauncher', module);
+stories.addDecorator(withKnobs);
+
+NavApplicationLauncherStory(stories);
+WrapperNavApplicationLauncherStory(stories);

src/components/ApplicationLauncher/ApplicationLauncher.test.js

@@ -0,0 +1,47 @@
+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 is working properly', () => {
+  const component = mount(
+    <ApplicationLauncherItem
+      icon="pficon pficon-storage-domain"
+      title="Recteque"
+      tooltip="Tooltip!"
+      onClick={handleClick}
+    />
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});
+
+test('ApplicationLauncherToggle is working properly', () => {
+  const component = mount(
+    <ApplicationLauncherToggle tooltipPlacement="left" onClick={handleClick} />
+  );
+
+  expect(component.render()).toMatchSnapshot();
+});

src/components/ApplicationLauncher/ApplicationLauncherItem.js

@@ -0,0 +1,56 @@
+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,
+  title,
+  icon,
+  noIcons,
+  className,
+  ...props
+}) => {
+  const classes = classNames('applauncher-pf-item', className);
+
+  return (
+    <OverlayTrigger
+      overlay={<Tooltip id="tooltip">{tooltip}</Tooltip>}
+      placement="left"
+      trigger={['hover', 'focus']}
+      rootClose={false}
+    >
+      <li className={classes} role="menuitem">
+        <a className="applauncher-pf-link" href="#" onClick={e => onClick(e)}>
+          {!noIcons && (
+            <Icon name={icon} className="applauncher-pf-link-icon" />
+          )}
+          <span className="applauncher-pf-link-title">{title}</span>
+        </a>
+      </li>
+    </OverlayTrigger>
+  );
+};
+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.isRequired,
+  /** No Icons Bool */
+  noIcons: PropTypes.bool
+};
+ApplicationLauncherItem.defaultProps = {
+  className: '',
+  onClick: null,
+  noIcons: false
+};
+export default ApplicationLauncherItem;

src/components/ApplicationLauncher/ApplicationLauncherToggle.js

@@ -0,0 +1,38 @@
+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 = ({ onClick, tooltipPlacement }) => {
+  const tooltip = <Tooltip id="tooltip">Application Launcher</Tooltip>;
+
+  return (
+    <OverlayTrigger
+      placement={tooltipPlacement}
+      id="applauncher-pf-block-list"
+      overlay={tooltip}
+    >
+      <Button onClick={onClick} bsStyle="link" className="nav-item-iconic">
+        <Icon
+          className="fa fa-th applauncher-pf-icon"
+          aria-describedby="tooltip"
+          name=""
+        />
+      </Button>
+    </OverlayTrigger>
+  );
+};
+ApplicationLauncherToggle.propTypes = {
+  /** onClick func */
+  onClick: PropTypes.func,
+  /** tooltipPlacement */
+  tooltipPlacement: PropTypes.string
+};
+ApplicationLauncherToggle.defaultProps = {
+  onClick: null,
+  tooltipPlacement: 'bottom'
+};
+
+export default ApplicationLauncherToggle;

src/components/ApplicationLauncher/Stories/NavApplicationLauncherStory.js

@@ -0,0 +1,72 @@
+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';
+import ApplicationLauncher from '../ApplicationLauncher';
+import ApplicationLauncherItem from '../ApplicationLauncherItem';
+
+const handleClick = e => {
+  e.preventDefault();
+  action('app clicked!')();
+};
+
+const NavApplicationLauncherStory = stories => {
+  stories.addWithInfo('Application Launcher', '', () => {
+    const type = select(
+      'Launcher Type',
+      { grid: 'Grid', list: 'List' },
+      'grid'
+    );
+
+    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 type={type} tooltipPlacement="left">
+              <ApplicationLauncherItem
+                icon="pficon pficon-storage-domain"
+                title="Recteque"
+                tooltip="Tooltip!"
+                onClick={handleClick}
+                noIcons={!iconBool}
+              />
+              <ApplicationLauncherItem
+                icon="pficon pficon-virtual-machine"
+                title="Ipsum"
+                tooltip="Tooltip!"
+                onClick={handleClick}
+                noIcons={!iconBool}
+              />
+              <ApplicationLauncherItem
+                icon="pficon pficon-domain"
+                title="Lorem"
+                tooltip="Tooltip!"
+                onClick={handleClick}
+                noIcons={!iconBool}
+              />
+              <ApplicationLauncherItem
+                icon="pficon pficon-home"
+                title="Home"
+                tooltip="Tooltip!"
+                onClick={handleClick}
+                noIcons={!iconBool}
+              />
+            </ApplicationLauncher>
+          </ul>
+        </nav>
+      </nav>
+    );
+    return inlineTemplate({
+      title: 'ApplicationLauncher',
+      documentationLink: `${
+        DOCUMENTATION_URL.PATTERNFLY_ORG_APPLICATION_FRAMEWORK
+      }launcher/`,
+      story
+    });
+  });
+};
+
+export default NavApplicationLauncherStory;

src/components/ApplicationLauncher/Stories/WrapperNavApplicationLauncherStory.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';
+import ApplicationLauncherWrapper from '../Wrappers/ApplicationLauncherWrapper';
+
+const handleClick = e => {
+  e.preventDefault();
+  action('app clicked!')();
+};
+
+const Apps = [
+  {
+    title: 'Ipsum',
+    icon: 'pficon pficon-home',
+    tooltip: 'Tooltip!',
+    onClick: e => {
+      handleClick(e);
+    }
+  },
+  {
+    title: 'Royal',
+    icon: 'pficon pficon-virtual-machine',
+    tooltip: 'Tooltip!',
+    onClick: e => {
+      handleClick(e);
+    }
+  },
+  {
+    title: 'Lemon',
+    icon: 'pficon pficon-storage-domain',
+    tooltip: 'Tooltip!',
+    onClick: e => {
+      handleClick(e);
+    }
+  },
+  {
+    title: 'Domain',
+    icon: 'pficon pficon-domain',
+    tooltip: 'Tooltip!',
+    onClick: e => {
+      handleClick(e);
+    }
+  }
+];
+
+const WrapperNavApplicationLauncherStory = stories => {
+  stories.addWithInfo('Wrapper Application Launcher', '', () => {
+    const type = select(
+      'Launcher Type',
+      { grid: 'Grid', list: 'List' },
+      'grid'
+    );
+
+    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">
+            <ApplicationLauncherWrapper
+              apps={Apps}
+              noIcons={!iconBool}
+              type={type}
+            />
+          </ul>
+        </nav>
+      </nav>
+    );
+    return inlineTemplate({
+      title: 'WrapperApplicationLauncher',
+      documentationLink: `${
+        DOCUMENTATION_URL.PATTERNFLY_ORG_APPLICATION_FRAMEWORK
+      }launcher/`,
+      story
+    });
+  });
+};
+
+export default WrapperNavApplicationLauncherStory;

src/components/ApplicationLauncher/Stories/index.js

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