PD-381: Port MongoDB Charts Pipeline summary component to LeafyGreen (CHARTS-2864)

.changeset/chilled-pants-count.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/pipeline': major
+'@leafygreen-ui/menu': patch
+---
+
+Initial release of @leafygreen-ui/pipeline component. Removed deprecated title prop from the @leafygreen-ui/menu component propTypes.

jest.config.js

@@ -46,5 +46,9 @@ module.exports = {
     '.svg': '<rootDir>/__mocks__/svgTransformer.js',
   },
 
+  // Ignore transforming node_modules except for:
+  // 1. `react-children-utilities`
+  transformIgnorePatterns: ['/node_modules/(?!(react-children-utilities)/)'],
+
   setupFiles: ['<rootDir>/scripts/jestSetup.js'],
 };

package.json

@@ -20,7 +20,7 @@
   },
   "scripts": {
     "start": "start-storybook -p 9001 -c storybook -s ./storybook/static",
-    "build": "lerna run --parallel build -- --env production",
+    "build": "lerna run build -- --env production",
     "build:storybook": "build-storybook -c storybook -o ./storybook/public -s ./storybook/static",
     "clean": "rimraf packages/*/{dist,node_modules} node_modules",
     "create-package": "node ./scripts/package-builder.js",
@@ -66,6 +66,7 @@
     "@storybook/theming": "^5.2.5",
     "@svgr/babel-plugin-replace-jsx-attribute-value": "^4.2.0",
     "@svgr/webpack": "^4.3.3",
+    "@testing-library/jest-dom": "^4.2.3",
     "@testing-library/react": "^8.0.1",
     "@testing-library/react-hooks": "^2.0.1",
     "@types/facepaint": "^1.2.1",
@@ -99,7 +100,6 @@
     "gh-pages": "^2.1.1",
     "husky": "^3.0.9",
     "jest": "23.6.0",
-    "jest-dom": "^3.2.2",
     "jest-junit": "^6.3.0",
     "lerna": "3.18.3",
     "polished": "^3.4.2",

packages/logo/src/Logo.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
-import 'jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 import { Logo, LogoMark } from '.';
 
 afterAll(cleanup);

packages/menu/src/Menu.spec.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import 'jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 import { render, fireEvent, cleanup } from '@testing-library/react';
 import { Menu, MenuSeparator, MenuItem } from './index';
 

packages/menu/src/MenuItem.tsx

@@ -257,7 +257,6 @@ MenuItem.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
   className: PropTypes.string,
-  title: PropTypes.string,
   description: PropTypes.string,
   disabled: PropTypes.bool,
   active: PropTypes.bool,

packages/modal/src/Modal.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
-import 'jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 import Modal from './Modal';
 
 afterAll(cleanup);

packages/mongo-menu/src/MongoMenu.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import 'jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 import { render, fireEvent, cleanup } from '@testing-library/react';
 import MongoMenu from '.';
 

packages/pipeline/README.md

@@ -0,0 +1,91 @@
+# Pipeline
+
+![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/pipeline.svg)
+
+## Usage
+
+```shell
+npm install @leafygreen-ui/pipeline
+```
+
+### Example
+
+```js
+<Pipeline size="xsmall" className="my-pipeline">
+  <Stage>$match</Stage>
+  <Stage>$addFields</Stage>
+  <Stage>$limit</Stage>
+</Pipeline>
+```
+
+### Output HTML
+
+```html
+<div data-leafygreen-ui="pipeline" class="leafygreen-ui-1hmty9x my-pipeline">
+  <ol data-leafygreen-ui="pipeline-stages" class="leafygreen-ui-7mx6fb">
+    <li
+      data-leafygreen-ui="pipeline-stage"
+      class="leafygreen-ui-11gdvjk"
+      data-stage-visible="true"
+    >
+      $match
+      <div
+        data-leafygreen-ui="pipeline-stage-chevron"
+        class="leafygreen-ui-pglvth"
+      />
+    </li>
+    <li
+      data-leafygreen-ui="pipeline-stage"
+      class="leafygreen-ui-11gdvjk leafygreen-ui-pipeline-stage--last-visible"
+      data-stage-visible="true"
+    >
+      $addFields
+      <div
+        data-leafygreen-ui="pipeline-stage-chevron"
+        class="leafygreen-ui-pglvth"
+      />
+    </li>
+    <li
+      data-leafygreen-ui="pipeline-stage"
+      class="leafygreen-ui-11gdvjk"
+      data-stage-visible="false"
+    >
+      $limit
+      <div
+        data-leafygreen-ui="pipeline-stage-chevron"
+        class="leafygreen-ui-pglvth"
+      />
+    </li>
+  </ol>
+  <div data-leafygreen-ui="pipeline-counter" class="leafygreen-ui-1iicq0p">
+    <div
+      data-leafygreen-ui="pipeline-counter-chevron"
+      class="leafygreen-ui-18yu2oo"
+    />
+  </div>
+</div>
+```
+
+## Properties
+
+### Pipeline
+
+| Prop        | Type     | Description                                                                                                                                                                                                | Default     |
+| ----------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `className` | `String` | Adds a className to the class attribute.                                                                                                                                                                   | `''`        |
+| `children`  | `Node`   | The content that will render inside of the component. If any nodes other than `Stage` components are passed in as children, the `Pipeline` component will automatically wrap them with `Stage` components. | `undefined` |
+| `size`      | `String` | Sets the size variant of the Pipeline. Valid sizes are: `'xsmall'`, `'small'`, `'normal'`, and `'large'`                                                                                                   | `'xsmall'`  |
+
+_All other props will be spread onto the root element._
+
+### Stage
+
+| Prop               | Type      | Description                                                                                                                                                       | Default     |
+| ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `className`        | `String`  | Adds a className to the class attribute.                                                                                                                          | `''`        |
+| `children`         | `Node`    | The content that will render inside of the component.                                                                                                             | `undefined` |
+| `intersectionNode` | `Element` | The DOM element to observe intersections with. When used with the `Pipeline` component, this prop is automatically set to the element rendered by the `Pipeline`. | `window`    |
+| `threshold`        | `Number`  | Either a single number or an array of numbers which indicate at what percentage of the target's visibility, the observer's callback should be executed.           | `0.8`       |
+| `size`             | `String`  | Sets the size variant of the Pipeline. Valid sizes are: `'xsmall'`, `'small'`, `'normal'`, and `'large'`                                                          | `'xsmall'`  |
+
+_All other props will be spread onto the root element. The Pipeline component will also decorate the child Stage components with the `size` prop that it is supplied with._

packages/pipeline/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@leafygreen-ui/pipeline",
+  "version": "0.9.0",
+  "description": "LeafyGreen UI Kit Pipeline",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "../../node_modules/.bin/webpack --config ../../webpack.config.js"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/emotion": "^1.0.6",
+    "@leafygreen-ui/hooks": "^1.1.0",
+    "@leafygreen-ui/lib": "^3.2.0",
+    "@leafygreen-ui/palette": "^1.1.0",
+    "@leafygreen-ui/tooltip": "^2.0.0",
+    "lodash": "^4.17.15",
+    "react-children-utilities": "^2.0.0",
+    "react-intersection-observer": "^8.25.1",
+    "react-merge-refs": "^1.0.0"
+  },
+  "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0"
+}

packages/pipeline/src/Counter.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import { typeIs } from '@leafygreen-ui/lib';
+import Counter from './Counter';
+import { Size } from './styles';
+
+const className = 'test-counter-class';
+
+function renderCounter(props = {}) {
+  const utils = render(<Counter {...props} size={Size.XSmall} />);
+
+  if (!typeIs.element(utils.container.firstChild)) {
+    throw new Error('Counter element not found');
+  }
+
+  return {
+    ...utils,
+    element: utils.container.firstChild,
+  };
+}
+
+afterAll(cleanup);
+
+describe('packages/pipeline/Counter', () => {
+  test(`renders "${className}" in the stage's classList`, () => {
+    const { element } = renderCounter({ className });
+    expect(element.classList.contains(className)).toBe(true);
+  });
+});

packages/pipeline/src/Counter.tsx

@@ -0,0 +1,141 @@
+import React, { forwardRef, ReactElement, ReactNode, Ref } from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+
+import {
+  getRootStyle,
+  getChildStyle,
+  getChevronStyle,
+  Size,
+  layout,
+  colors,
+  counterAttr,
+  counterChevronAttr,
+} from './styles';
+
+interface StateForStyles {
+  size?: Size;
+}
+
+interface CounterProps {
+  /**
+   * Content that will appear inside of the Counter component.
+   */
+  children?: ReactNode;
+
+  /**
+   * Classname applied to Counter content container.
+   **/
+  className?: string;
+
+  /**
+   * Alter the rendered size of the component. Inherited from the parent Pipeline component.
+   */
+  size: Size;
+}
+
+const getBaseStyle = ({ size = Size.XSmall }: StateForStyles): string => {
+  const { chevron, fontSize, fontWeight, gutter, height, lineHeight } = layout[
+    size
+  ];
+
+  const { color, secondary } = colors;
+  const outerSize = height / 2;
+  const offset = outerSize + chevron.size * 2;
+
+  return cx(
+    getRootStyle({ size }),
+    getChildStyle({ size }),
+    css`
+      background-color: ${secondary.backgroundColor};
+      color: ${color};
+      padding: ${gutter.vertical}px ${gutter.horizontal}px;
+      margin-right: ${offset}px;
+      font-size: ${fontSize}px;
+      font-weight: ${fontWeight};
+      line-height: ${lineHeight};
+      flex: 1 1 auto;
+      white-space: nowrap;
+      z-index: 2;
+
+      &::before {
+        white-space: nowrap;
+        content: '+' counter(hiddenCount);
+      }
+    `,
+  );
+};
+
+const getCounterChevronStyle = ({
+  size = Size.XSmall,
+}: StateForStyles): string => {
+  const { chevron, height } = layout[size];
+  const { secondary } = colors;
+  const outerSize = height / 2;
+
+  return cx(
+    getChevronStyle({ size }),
+    css`
+      &::before {
+        background-color: ${secondary.backgroundColor};
+        box-shadow: 0 0 0 ${chevron.size}px transparent,
+          0 0 0 ${outerSize}px transparent;
+      }
+    `,
+  );
+};
+
+const getStatefulStyles = (state: StateForStyles) => ({
+  base: getBaseStyle(state),
+  chevron: getCounterChevronStyle(state),
+});
+
+/**
+ * # Counter
+ *
+ * React Component to render the counter for the number of hidden stages in the Pipeline component.
+ *
+ * ```
+ * <Counter />
+ * ```
+ * @param props.className Classname applied to Counter content container.
+ */
+const Counter = forwardRef(
+  (
+    { className = '', children, size, ...rest }: CounterProps,
+    ref: Ref<HTMLDivElement>,
+  ): ReactElement => {
+    const { base: baseStyle, chevron: chevronStyle } = getStatefulStyles({
+      size,
+    });
+
+    return (
+      <div
+        {...rest}
+        {...counterAttr.prop}
+        data-testid="pipeline-counter"
+        className={cx(baseStyle, className)}
+        ref={ref}
+      >
+        {/* Children will be the tooltip provided by the Pipeline component */}
+        {children}
+
+        <div
+          {...counterChevronAttr.prop}
+          data-testid="pipeline-counter-chevron"
+          className={chevronStyle}
+        />
+      </div>
+    );
+  },
+);
+
+Counter.displayName = 'Counter';
+
+Counter.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  size: PropTypes.oneOf(Object.values(Size)).isRequired,
+};
+
+export default Counter;