feat(Chip): Add the Chip component to PF4

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;
+

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'
+    }
+  ]
+};

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;

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');
+  });
+});

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;

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;

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>
+`;