From aa1d3fc98c04a95f513e027b3b4660483147181e Mon Sep 17 00:00:00 2001
From: Boaz Shuster <boaz.shuster.github@gmail.com>
Date: Tue, 18 Dec 2018 05:43:56 +0200
Subject: [PATCH] feat(Chip): Add the Chip component to PF4

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
---
 .../react-core/src/components/Chip/Chip.d.ts  |  20 +++
 .../src/components/Chip/Chip.docs.js          |  15 ++
 .../react-core/src/components/Chip/Chip.js    |  69 ++++++++
 .../src/components/Chip/Chip.test.js          |  54 ++++++
 .../src/components/Chip/ChipButton.d.ts       |   7 +
 .../src/components/Chip/ChipButton.js         |  30 ++++
 .../Chip/__snapshots__/Chip.test.js.snap      | 158 ++++++++++++++++++
 .../components/Chip/examples/SimpleChip.js    |  42 +++++
 .../react-core/src/components/Chip/index.d.ts |   1 +
 .../react-core/src/components/Chip/index.js   |   1 +
 .../react-core/src/components/index.ts        |   1 +
 11 files changed, 398 insertions(+)
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/Chip.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/Chip.docs.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/Chip.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/Chip.test.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/ChipButton.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/ChipButton.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/__snapshots__/Chip.test.js.snap
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/examples/SimpleChip.js
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/index.d.ts
 create mode 100644 packages/patternfly-4/react-core/src/components/Chip/index.js

diff --git a/packages/patternfly-4/react-core/src/components/Chip/Chip.d.ts b/packages/patternfly-4/react-core/src/components/Chip/Chip.d.ts
new file mode 100644
index 00000000000..8d6b0f98862
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/Chip.d.ts
@@ -0,0 +1,20 @@
+import { SFC, HTMLProps } from 'react';
+import { Omit, OneOf } from '../../typeUtils';
+import { TooltipPosition } from '../Tooltip';
+
+export const ChipVariant = {
+  overflow: 'overflow',
+  closable: 'closable'
+};
+
+export interface ChipProps extends Omit<HTMLProps<HTMLDivElement>, 'children' > {
+  children: string;
+  isOverflowed?: boolean;
+  variant: OneOf<typeof ChipVariant, keyof typeof ChipVariant>;
+  position: OneOf<typeof TooltipPosition, keyof typeof TooltipPosition>;
+}
+
+declare const Chip: SFC<ChipProps>;
+
+export default Chip;
+
diff --git a/packages/patternfly-4/react-core/src/components/Chip/Chip.docs.js b/packages/patternfly-4/react-core/src/components/Chip/Chip.docs.js
new file mode 100644
index 00000000000..66a02d24103
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/Chip.docs.js
@@ -0,0 +1,15 @@
+import { Chip } from '@patternfly/react-core';
+import SimpleExample from './examples/SimpleChip';
+
+export default {
+  title: 'Chip',
+  components: {
+    Chip,
+  },
+  examples: [
+    {
+      component: SimpleExample,
+      title: 'Simple Example'
+    }
+  ]
+};
diff --git a/packages/patternfly-4/react-core/src/components/Chip/Chip.js b/packages/patternfly-4/react-core/src/components/Chip/Chip.js
new file mode 100644
index 00000000000..0d4ea6ece88
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/Chip.js
@@ -0,0 +1,69 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import ChipButton from './ChipButton';
+import { Tooltip, TooltipPosition } from '../Tooltip';
+import { TimesCircleIcon } from '@patternfly/react-icons';
+import styles from '@patternfly/patternfly-next/components/Chip/chip.css';
+import { getUniqueId } from '../../internal/util';
+
+export const ChipVariant = {
+  overflow: 'overflow',
+  closable: 'closable'
+};
+
+const Chip = ({ variant, onClick, children, id, position, className, ...props }) => {
+  const idChip = id || getUniqueId()
+  switch (variant) {
+    case ChipVariant.overflow:
+      return (
+        <div className={css(styles.chip, styles.modifiers.overflow, className)} {...props}>
+          <ChipButton onClick={onClick} aria-label="Expand chip">
+            <span className={css(styles.chipText)}>{children}</span>
+          </ChipButton>
+        </div>
+      );
+    default:
+      const ChipComponent = (
+        <div className={css(styles.chip, className)} {...props}>
+          <span className={css(styles.chipText)} id={idChip}>
+            {children}
+          </span>
+          <ChipButton onClick={onClick} aria-label="Remove" id={`remove_${idChip}`} aria-labelledby={`remove_${idChip} ${idChip}`}>
+            <TimesCircleIcon aria-hidden="true" />
+          </ChipButton>
+        </div>
+      );
+      return children.length < 16 ? (
+        ChipComponent
+      ) : (
+        <Tooltip position={position} content={children}>
+          {ChipComponent}
+        </Tooltip>
+      );
+  }
+};
+
+Chip.propTypes = {
+  /** Content rendered inside the chip text */
+  children: PropTypes.string.isRequired,
+  /** ID of the chip */
+  id: PropTypes.string,
+  /** Additional classes added to the chip item */
+  className: PropTypes.string,
+  /** Builds the chip structure according to variant */
+  variant: PropTypes.oneOf(Object.values(ChipVariant)),
+  /** Position of the tooltip which is displayed if text is longer */
+  position: PropTypes.oneOf(Object.values(TooltipPosition)),
+  /** Function that is called when clicking on the chip button */
+  onClick: PropTypes.func
+};
+
+Chip.defaultProps = {
+  id: undefined,
+  className: '',
+  position: 'top',
+  variant: ChipVariant.closable
+};
+
+export default Chip;
diff --git a/packages/patternfly-4/react-core/src/components/Chip/Chip.test.js b/packages/patternfly-4/react-core/src/components/Chip/Chip.test.js
new file mode 100644
index 00000000000..33728f93686
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/Chip.test.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ChipButton from './ChipButton';
+import Chip from './Chip';
+
+test('ChipButton', () => {
+  const view = shallow(
+    <ChipButton id="my-chip-button" className="chip-bttn-cls">
+      <b>Close</b>
+    </ChipButton>
+  );
+  expect(view).toMatchSnapshot();
+});
+
+describe('Chip', () => {
+  test('overflow', () => {
+    const view = shallow(
+      <Chip className="my-chp-cls" variant="overflow">
+        4 more
+      </Chip>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('closable', () => {
+    const view = shallow(
+      <Chip className="my-chp-cls" variant="closable" id="chip_one">
+        Chip
+      </Chip>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+
+  test('closable with tooltip', () => {
+    const view = shallow(
+      <Chip className="my-chp-cls" variant="closable" id="chip_one">
+        12345678901234567891
+      </Chip>
+    );
+    expect(view).toMatchSnapshot();
+  });
+
+  test('onClick', () => {
+    const clickFnc = jest.fn();
+    const view = shallow(
+      <Chip onClick={() => clickFnc('chip_one')} id="chip_one">
+        Chip
+      </Chip>
+    );
+    view.find(ChipButton).simulate('click');
+    expect(clickFnc).toBeCalledWith('chip_one');
+  });
+});
diff --git a/packages/patternfly-4/react-core/src/components/Chip/ChipButton.d.ts b/packages/patternfly-4/react-core/src/components/Chip/ChipButton.d.ts
new file mode 100644
index 00000000000..c6f800a0f35
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/ChipButton.d.ts
@@ -0,0 +1,7 @@
+import { SFC, HTMLProps } from 'react';
+
+export interface ChipButtonProps extends HTMLProps<HTMLButtonElement> {}
+
+declare const ChipButton: SFC<ChipButtonProps>;
+
+export default ChipButton;
diff --git a/packages/patternfly-4/react-core/src/components/Chip/ChipButton.js b/packages/patternfly-4/react-core/src/components/Chip/ChipButton.js
new file mode 100644
index 00000000000..035d68592b8
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/ChipButton.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import PropTypes from 'prop-types';
+import styles from '@patternfly/patternfly-next/components/Chip/chip.css';
+import { Button } from '../Button';
+
+const ChipButton = ({ children, className, onClick, ...props }) => {
+  return (
+    <Button variant="plain" onClick={onClick} className={className} {...props}>
+      {children}
+    </Button>
+  );
+};
+
+ChipButton.propTypes = {
+  /** Content rendered inside the chip item */
+  children: PropTypes.node,
+  /** Additional classes added to the chip item */
+  className: PropTypes.string,
+  /** Function that is called when clicking on the chip button */
+  onClick: PropTypes.func,
+};
+
+ChipButton.defaultProps = {
+  children: null,
+  className: '',
+  onClick: () => {}
+};
+
+export default ChipButton;
diff --git a/packages/patternfly-4/react-core/src/components/Chip/__snapshots__/Chip.test.js.snap b/packages/patternfly-4/react-core/src/components/Chip/__snapshots__/Chip.test.js.snap
new file mode 100644
index 00000000000..2469986787b
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/__snapshots__/Chip.test.js.snap
@@ -0,0 +1,158 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chip closable 1`] = `
+.pf-c-chip__text {
+  display: block;
+  max-width: 7.5rem;
+  overflow: hidden;
+  font-size: 0.75rem;
+  color: #282d33;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pf-c-chip.my-chp-cls {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  padding-left: 0.5rem;
+  background-color: #ffffff;
+  border-radius: 3px;
+}
+
+<div
+  className="pf-c-chip my-chp-cls"
+>
+  <span
+    className="pf-c-chip__text"
+    id="chip_one"
+  >
+    Chip
+  </span>
+  <ChipButton
+    aria-label="Remove"
+    aria-labelledby="remove_chip_one chip_one"
+    className=""
+    id="remove_chip_one"
+    onClick={[Function]}
+  >
+    <TimesCircleIcon
+      aria-hidden="true"
+      color="currentColor"
+      size="sm"
+      title={null}
+    />
+  </ChipButton>
+</div>
+`;
+
+exports[`Chip closable with tooltip 1`] = `
+.pf-c-chip__text {
+  display: block;
+  max-width: 7.5rem;
+  overflow: hidden;
+  font-size: 0.75rem;
+  color: #282d33;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pf-c-chip.my-chp-cls {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  padding-left: 0.5rem;
+  background-color: #ffffff;
+  border-radius: 3px;
+}
+
+<Tooltip
+  appendTo={[Function]}
+  className={null}
+  content="12345678901234567891"
+  enableFlip={true}
+  position="top"
+  size="small"
+  zIndex={9999}
+>
+  <div
+    className="pf-c-chip my-chp-cls"
+  >
+    <span
+      className="pf-c-chip__text"
+      id="chip_one"
+    >
+      12345678901234567891
+    </span>
+    <ChipButton
+      aria-label="Remove"
+      aria-labelledby="remove_chip_one chip_one"
+      className=""
+      id="remove_chip_one"
+      onClick={[Function]}
+    >
+      <TimesCircleIcon
+        aria-hidden="true"
+        color="currentColor"
+        size="sm"
+        title={null}
+      />
+    </ChipButton>
+  </div>
+</Tooltip>
+`;
+
+exports[`Chip overflow 1`] = `
+.pf-c-chip__text {
+  display: block;
+  max-width: 7.5rem;
+  overflow: hidden;
+  font-size: 0.75rem;
+  color: #282d33;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pf-c-chip.pf-m-overflow.my-chp-cls {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  padding-left: 0.5rem;
+  background-color: #ffffff;
+  border-radius: 3px;
+}
+
+<div
+  className="pf-c-chip pf-m-overflow my-chp-cls"
+>
+  <ChipButton
+    aria-label="Expand chip"
+    className=""
+    onClick={[Function]}
+  >
+    <span
+      className="pf-c-chip__text"
+    >
+      4 more
+    </span>
+  </ChipButton>
+</div>
+`;
+
+exports[`ChipButton 1`] = `
+<Button
+  aria-label={null}
+  className="chip-bttn-cls"
+  component="button"
+  id="my-chip-button"
+  isActive={false}
+  isBlock={false}
+  isDisabled={false}
+  isFocus={false}
+  isHover={false}
+  onClick={[Function]}
+  type="button"
+  variant="plain"
+>
+  <b>
+    Close
+  </b>
+</Button>
+`;
diff --git a/packages/patternfly-4/react-core/src/components/Chip/examples/SimpleChip.js b/packages/patternfly-4/react-core/src/components/Chip/examples/SimpleChip.js
new file mode 100644
index 00000000000..1c802ae07ee
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/examples/SimpleChip.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Chip } from '@patternfly/react-core';
+
+class SimpleChip extends React.Component {
+  state = {
+    show: ['chip_one', 'chip_two']
+  };
+  deleteItem = id => {
+    const { show } = this.state;
+    const ix = show.indexOf(id);
+    if (ix < 0) {
+      return;
+    }
+    this.setState(() => ({
+      show: [...show.slice(0, ix), ...show.slice(ix + 1, show.length)]
+    }));
+  };
+  render() {
+    const { show } = this.state
+    return (
+      <React.Fragment>
+        {show.includes('chip_one') && (
+          <Chip id="chip_one" onClick={() => this.deleteItem('chip_one')}>
+            Chip
+          </Chip>
+        )}
+        <br />
+        <br />
+        {show.includes('chip_two') && (
+          <Chip id="chip_two" onClick={() => this.deleteItem('chip_two')}>
+            Really long Chip that goes on and on
+          </Chip>
+        )}
+        <br />
+        <br />
+        <Chip variant="overflow">4 more</Chip>
+      </React.Fragment>
+    );
+  }
+}
+
+export default SimpleChip;
diff --git a/packages/patternfly-4/react-core/src/components/Chip/index.d.ts b/packages/patternfly-4/react-core/src/components/Chip/index.d.ts
new file mode 100644
index 00000000000..68faf22289c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/index.d.ts
@@ -0,0 +1 @@
+export { default as Chip } from './Chip';
diff --git a/packages/patternfly-4/react-core/src/components/Chip/index.js b/packages/patternfly-4/react-core/src/components/Chip/index.js
new file mode 100644
index 00000000000..68faf22289c
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/Chip/index.js
@@ -0,0 +1 @@
+export { default as Chip } from './Chip';
diff --git a/packages/patternfly-4/react-core/src/components/index.ts b/packages/patternfly-4/react-core/src/components/index.ts
index fcf4c029366..858e7879a4f 100644
--- a/packages/patternfly-4/react-core/src/components/index.ts
+++ b/packages/patternfly-4/react-core/src/components/index.ts
@@ -10,6 +10,7 @@ export * from './Breadcrumb';
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
+export * from './Chip';
 export * from './DataList';
 export * from './Dropdown';
 export * from './EmptyState';