Merge pull request #120 from steverydz/feature/tooltips

Create tooltip component

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,19 @@
+## Done
+
+[List of work items including drive-bys]
+
+## QA
+
+- Check out this feature branch
+- Run the site using the command `./run serve`
+- View the site locally in your web browser at: [http://0.0.0.0:8102/](http://0.0.0.0:8102/)
+- [List additional steps to QA the new features or prove the bug has been resolved]
+
+
+## Issue / Card
+
+[List of links to Github issues/bugs and cards if needed - e.g. `Fixes #1`]
+
+## Screenshots
+
+[if relevant, include a screenshot]

src/lib/components/ToolTip/ToolTip.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ToolTip = ({
+  id, message, position, children,
+}) => {
+  const modifierClassPrefix = 'p-tooltip--';
+
+  let className = 'p-tooltip';
+
+  if (position) {
+    className += ` ${modifierClassPrefix}${position}`;
+  }
+
+  return (
+    <span className={className} aria-describedby={id}>
+      {children}
+      <span className="p-tooltip__message" role="tooltip" id={id}>
+        {message}
+      </span>
+    </span>
+  );
+};
+
+ToolTip.defaultProps = {
+  position: 'btm-right',
+};
+
+ToolTip.propTypes = {
+  children: PropTypes.node.isRequired,
+  position: PropTypes.oneOf([
+    'left',
+    'right',
+    'top-left',
+    'btm-left',
+    'top-right',
+    'btm-right',
+    'top-center',
+    'btm-center',
+  ]),
+  id: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+};
+
+ToolTip.displayName = 'ToolTip';
+
+export default ToolTip;

src/lib/components/ToolTip/ToolTip.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { select } from '@storybook/addon-knobs';
+import { withInfo } from '@storybook/addon-info';
+
+import ToolTip from './ToolTip';
+
+const label = 'Positions';
+const options = [
+  'left',
+  'right',
+  'top-left',
+  'top-right',
+  'btm-left',
+  'btm-right',
+  'top-center',
+  'btm-center',
+];
+const defaultValue = 'btm-left';
+
+storiesOf('ToolTip', module)
+  .add('Default ToolTip',
+    withInfo('You can set the position of the tooltip by passing a position prop')(() => (
+      <ToolTip
+        id="default-tooltip"
+        message="Lorem ipsum dolor sit amet"
+        position={select(label, options, defaultValue)}
+      >
+        Example ToolTip
+      </ToolTip>),
+    ),
+  );

src/lib/components/ToolTip/ToolTip.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+import ToolTip from './ToolTip';
+
+describe('ToolTip component', () => {
+  it('should render a tooltip component', () => {
+    const toolTip = ReactTestRenderer.create(
+      <ToolTip id="default-tooltip" message="Lorem ipsum dolor sit amet">
+        Bottom left tooltip
+      </ToolTip>,
+    );
+    const json = toolTip.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('should render a tooltip component with a bottom center tooltip', () => {
+    const toolTip = ReactTestRenderer.create(
+      <ToolTip id="btm-cntr" message="Lorem ipsum dolor sit amet" position="btm-center">
+        Bottom center tooltip
+      </ToolTip>,
+    );
+    const json = toolTip.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('should render a tooltip component with a bottomright tooltip', () => {
+    const toolTip = ReactTestRenderer.create(
+      <ToolTip id="btm-right" message="Lorem ipsum dolor sit amet" position="btm-right">
+        Bottom right tooltip
+      </ToolTip>,
+    );
+    const json = toolTip.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('should render a tooltip component with a left tooltip', () => {
+    const toolTip = ReactTestRenderer.create(
+      <ToolTip id="left" message="Lorem ipsum dolor sit amet" position="left">
+        Left tooltip
+      </ToolTip>,
+    );
+    const json = toolTip.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('should render a tooltip component with a right tooltip', () => {
+    const toolTip = ReactTestRenderer.create(
+      <ToolTip id="right" message="Lorem ipsum dolor sit amet" position="right">
+        Right tooltip
+      </ToolTip>,
+    );
+    const json = toolTip.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('should render a tooltip component with a top left tooltip', () => {
+    const toolTip = ReactTestRenderer.create(
+      <ToolTip id="to-lft" message="Lorem ipsum dolor sit amet" position="top-left">
+        Top left tooltip
+      </ToolTip>,
+    );
+    const json = toolTip.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('should render a tooltip component with a top center tooltip', () => {
+    const toolTip = ReactTestRenderer.create(
+      <ToolTip id="tp-cntr" message="Lorem ipsum dolor sit amet" position="top-center">
+        Top center tooltip
+      </ToolTip>,
+    );
+    const json = toolTip.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('should render a tooltip component with a top right tooltip', () => {
+    const toolTip = ReactTestRenderer.create(
+      <ToolTip id="tp-right" message="Lorem ipsum dolor sit amet" position="top-right">
+        Top right tooltip
+      </ToolTip>,
+    );
+    const json = toolTip.toJSON();
+    expect(json).toMatchSnapshot();
+  })
+});

src/lib/components/ToolTip/__snapshots__/ToolTip.test.js.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToolTip component should render a tooltip component 1`] = `
+<span
+  aria-describedby="default-tooltip"
+  className="p-tooltip p-tooltip--btm-right"
+>
+  Bottom left tooltip
+  <span
+    className="p-tooltip__message"
+    id="default-tooltip"
+    role="tooltip"
+  >
+    Lorem ipsum dolor sit amet
+  </span>
+</span>
+`;
+
+exports[`ToolTip component should render a tooltip component with a bottom center tooltip 1`] = `
+<span
+  aria-describedby="btm-cntr"
+  className="p-tooltip p-tooltip--btm-center"
+>
+  Bottom center tooltip
+  <span
+    className="p-tooltip__message"
+    id="btm-cntr"
+    role="tooltip"
+  >
+    Lorem ipsum dolor sit amet
+  </span>
+</span>
+`;
+
+exports[`ToolTip component should render a tooltip component with a bottomright tooltip 1`] = `
+<span
+  aria-describedby="btm-right"
+  className="p-tooltip p-tooltip--btm-right"
+>
+  Bottom right tooltip
+  <span
+    className="p-tooltip__message"
+    id="btm-right"
+    role="tooltip"
+  >
+    Lorem ipsum dolor sit amet
+  </span>
+</span>
+`;
+
+exports[`ToolTip component should render a tooltip component with a left tooltip 1`] = `
+<span
+  aria-describedby="left"
+  className="p-tooltip p-tooltip--left"
+>
+  Left tooltip
+  <span
+    className="p-tooltip__message"
+    id="left"
+    role="tooltip"
+  >
+    Lorem ipsum dolor sit amet
+  </span>
+</span>
+`;
+
+exports[`ToolTip component should render a tooltip component with a right tooltip 1`] = `
+<span
+  aria-describedby="right"
+  className="p-tooltip p-tooltip--right"
+>
+  Right tooltip
+  <span
+    className="p-tooltip__message"
+    id="right"
+    role="tooltip"
+  >
+    Lorem ipsum dolor sit amet
+  </span>
+</span>
+`;
+
+exports[`ToolTip component should render a tooltip component with a top center tooltip 1`] = `
+<span
+  aria-describedby="tp-cntr"
+  className="p-tooltip p-tooltip--top-center"
+>
+  Top center tooltip
+  <span
+    className="p-tooltip__message"
+    id="tp-cntr"
+    role="tooltip"
+  >
+    Lorem ipsum dolor sit amet
+  </span>
+</span>
+`;
+
+exports[`ToolTip component should render a tooltip component with a top left tooltip 1`] = `
+<span
+  aria-describedby="to-lft"
+  className="p-tooltip p-tooltip--top-left"
+>
+  Top left tooltip
+  <span
+    className="p-tooltip__message"
+    id="to-lft"
+    role="tooltip"
+  >
+    Lorem ipsum dolor sit amet
+  </span>
+</span>
+`;
+
+exports[`ToolTip component should render a tooltip component with a top right tooltip 1`] = `
+<span
+  aria-describedby="tp-right"
+  className="p-tooltip p-tooltip--top-right"
+>
+  Top right tooltip
+  <span
+    className="p-tooltip__message"
+    id="tp-right"
+    role="tooltip"
+  >
+    Lorem ipsum dolor sit amet
+  </span>
+</span>
+`;

src/lib/index.js

@@ -47,6 +47,7 @@ import TableCell from './components/Table/TableCell';
 import TableRow from './components/Table/TableRow';
 import Tabs from './components/Tabs/Tabs';
 import TabsItem from './components/Tabs/TabsItem';
+import ToolTip from './components/ToolTip/ToolTip';
 
 export {
   Accordion, AccordionItem, BlockQuote, Breadcrumb, BreadcrumbItem, Button, Card, CodeBlock,
@@ -55,5 +56,5 @@ export {
   MatrixItem, MediaObject, Modal, MutedHeading, Navigation, NavigationBanner, NavigationLink,
   Notification, Pagination, PaginationItem, SideNav, SideNavBanner, SideNavGroup, SideNavLink,
   SteppedList, SteppedListItem, Strip, StripColumn, StripRow, Switch, Table, TableCell, TableRow,
-  Tabs, TabsItem,
+  Tabs, TabsItem, ToolTip,
 };