Allow href and onClick in ListGroupItem (elastic#1933)

* Allow href and onClick in ListGroupItem

* Convert EuiListGroup to TypeScript

* PR comments

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Converted `EuiFacetButton` to TypeScript ([#2226](https://github.com/elastic/eui/pull/2226))
 - Adds an optional `onClear` prop to the the `EuiDatePicker` component ([#2235](https://github.com/elastic/eui/pull/2235))
+- Added support for `onClick` and `href` props on `EuiListGroupItem` and converted to TypeScript ([#1933](https://github.com/elastic/eui/pull/1933))
 
 **Bug fixes**
 

src/components/list_group/__snapshots__/list_group_item.test.js.snap → src/components/list_group/__snapshots__/list_group_item.test.tsx.snap

@@ -49,6 +49,22 @@ exports[`EuiListGroupItem props extraAction is rendered 1`] = `
 </li>
 `;
 
+exports[`EuiListGroupItem props href and onClick is rendered 1`] = `
+<li
+  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
+>
+  <a
+    class="euiListGroupItem__button"
+    href="#"
+  >
+    <span
+      class="euiListGroupItem__label"
+      title=""
+    />
+  </a>
+</li>
+`;
+
 exports[`EuiListGroupItem props href is rendered 1`] = `
 <li
   class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
@@ -308,19 +324,3 @@ exports[`EuiListGroupItem throws an warning if both iconType and icon are provid
   </span>
 </li>
 `;
-
-exports[`EuiListGroupItem throws an warning if both onClick and href are provided but still renders 1`] = `
-<li
-  class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
->
-  <a
-    class="euiListGroupItem__button"
-    href="#"
-  >
-    <span
-      class="euiListGroupItem__label"
-      title=""
-    />
-  </a>
-</li>
-`;

src/components/list_group/index.js → src/components/list_group/index.ts

@@ -1,3 +1,2 @@
 export { EuiListGroup } from './list_group';
-
 export { EuiListGroupItem } from './list_group_item';

src/components/list_group/list_group.tsx

@@ -0,0 +1,112 @@
+import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
+import classNames from 'classnames';
+
+import { EuiListGroupItem, EuiListGroupItemProps } from './list_group_item';
+import { CommonProps } from '../common';
+
+type EuiListGroupProps = CommonProps &
+  HTMLAttributes<HTMLUListElement> & {
+    /**
+     * Add a border to the list container
+     */
+    bordered?: boolean;
+
+    /**
+     * Remove container padding, stretching list items to the edges
+     */
+    flush?: boolean;
+
+    /**
+     * Items to display in this group
+     */
+    listItems?: EuiListGroupItemProps[];
+
+    /**
+     * Sets the max-width of the page,
+     * set to `true` to use the default size,
+     * set to `false` to not restrict the width,
+     * set to a number for a custom width in px,
+     * set to a string for a custom width in custom measurement.
+     */
+    maxWidth?: boolean | number | string;
+
+    /**
+     * Display tooltips on all list items
+     */
+    showToolTips?: boolean;
+
+    /**
+     * Allow link text to wrap
+     */
+    wrapText?: boolean;
+  };
+
+export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
+  children,
+  className,
+  listItems,
+  style,
+  flush = false,
+  bordered = false,
+  wrapText = false,
+  maxWidth = true,
+  showToolTips = false,
+  ...rest
+}) => {
+  let newStyle: CSSProperties | undefined;
+  let widthClassName;
+  if (maxWidth !== true) {
+    let value: CSSProperties['maxWidth'];
+    if (typeof maxWidth === 'number') {
+      value = `${maxWidth}px`;
+    } else {
+      value = typeof maxWidth === 'string' ? maxWidth : undefined;
+    }
+
+    newStyle = { ...style, maxWidth: value };
+  } else if (maxWidth === true) {
+    widthClassName = 'euiListGroup-maxWidthDefault';
+  }
+
+  const classes = classNames(
+    'euiListGroup',
+    {
+      'euiListGroup-flush': flush,
+      'euiListGroup-bordered': bordered,
+    },
+    widthClassName,
+    className
+  );
+
+  let childrenOrListItems = null;
+  if (listItems) {
+    childrenOrListItems = listItems.map((item, index) => {
+      return [
+        <EuiListGroupItem
+          key={`title-${index}`}
+          showToolTip={showToolTips}
+          wrapText={wrapText}
+          {...item}
+        />,
+      ];
+    });
+  } else {
+    if (showToolTips) {
+      childrenOrListItems = React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement<Partial<EuiListGroupItemProps>>(child, {
+            showToolTip: true,
+          });
+        }
+      });
+    } else {
+      childrenOrListItems = children;
+    }
+  }
+
+  return (
+    <ul className={classes} style={newStyle || style} {...rest}>
+      {childrenOrListItems}
+    </ul>
+  );
+};