Merge pull request #10 from bold-commerce/tooltip-component

Add Tooltip component

src/components/tooltip/Readme.md

@@ -0,0 +1,24 @@
+### Purpose
+Give the user a tooltip that appears beneath an element being hovered over.
+
+### Examples
+#### Standard
+```jsx
+<React.Fragment>
+  <Tooltip message="Count of created orders in the last 30 days.">
+    <h3>30 Orders</h3>
+  </Tooltip>
+</React.Fragment>
+```
+
+#### With custom props
+```jsx
+<React.Fragment>
+  <Tooltip
+    message="Count of created orders in the last 30 days."
+    className={'example__tooltip__order-count'}
+  >
+    <h3>30 Orders</h3>
+  </Tooltip>
+</React.Fragment>
+```

src/components/tooltip/Tooltip.css

@@ -0,0 +1,44 @@
+.stx-tooltip-wrapper {
+  display: inline-flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.stx-tooltip {
+  position: absolute;
+  z-index: 9999999;
+  top: 100%;
+  margin-top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  text-align: center;
+  display: none;
+  min-width: 120px;
+  max-width: 160px;
+  white-space: normal;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.stx-tooltip::before {
+  content: " ";
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%);
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border: 8px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.7);
+}
+
+.stx-tooltip-wrapper:hover .stx-tooltip {
+  display: inline-block;
+}

src/components/tooltip/Tooltip.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cns from 'classnames';
+
+import './Tooltip.css';
+
+const Tooltip = ({ children, message, className, ...otherProps }) => (
+  <div className={cns(className, 'stx-tooltip-wrapper')} {...otherProps}>
+    {children}
+    <div className='stx-tooltip'>
+      {message}
+    </div>
+  </div>
+);
+
+Tooltip.defaultProps = {
+  className: null,
+};
+
+Tooltip.propTypes = {
+  message: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+export default Tooltip;

src/components/tooltip/Tooltip.test.js

@@ -0,0 +1,21 @@
+/* global describe, test, expect */
+import React from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Tooltip from './Tooltip';
+
+describe('Tooltip', () => {
+  test('Tooltip renders with available and extra props', () => {
+    const component = shallow(
+      <Tooltip
+        className='custom-class-name'
+        message='Count of created orders in the last 30 days.'
+        tabIndex={0}
+      >
+        <h3>30 Orders</h3>
+      </Tooltip>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});

src/components/tooltip/__snapshots__/Tooltip.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip Tooltip renders with available and extra props 1`] = `
+<div
+  className="custom-class-name stx-tooltip-wrapper"
+  tabIndex={0}
+>
+  <h3>
+    30 Orders
+  </h3>
+  <div
+    className="stx-tooltip"
+  >
+    Count of created orders in the last 30 days.
+  </div>
+</div>
+`;

src/index.js

@@ -20,6 +20,7 @@ export { default as LoadingSpinner } from './components/loadingspinner/LoadingSp
 export { default as ProgressBar } from './components/progressbar/ProgressBar';
 export { default as Message } from './components/message/Message';
 export { default as Pill } from './components/pill/Pill';
+export { default as Tooltip } from './components/tooltip/Tooltip';
 
 // Product
 export { default as Details } from './components/details/Details';