feat(ICA): Add optional information and iconButton prop

src/__tests__/scss/__snapshots__/styles-test.js.snap

@@ -12898,6 +12898,10 @@ li.bx--accordion__item--disabled:last-of-type {
   margin-bottom: 0.25rem;
 }
 
+.security--ica__info {
+  vertical-align: top;
+}
+
 .security--ica__trend {
   margin-top: 0.5rem;
   vertical-align: top;

src/components/ICA/ICA-story.js

@@ -8,9 +8,13 @@ import { storiesOf } from '@storybook/react';
 
 import React from 'react';
 
+import { Edit16 } from '@carbon/icons-react';
+
 import { components } from '../../../.storybook';
 import { carbonPrefix } from '../../globals/namespace';
 
+import IconButton from '../IconButton/IconButton';
+
 import { ICA } from '../..';
 import { Locales } from './ICA';
 
@@ -46,6 +50,26 @@ storiesOf(components('ICA'), module)
     <ICA {...storyProps({ value: icaValue * 100000 })} />
   ))
   .add('with total', () => <ICA {...storyProps({ total })} />)
+  .add('with edit button', () => (
+    <ICA
+      {...storyProps({ value: 350, total: 450 })}
+      iconButton={
+        <IconButton
+          onClick={console.log('click event')}
+          renderIcon={Edit16}
+          tooltip={true}
+          label={'Edit label'}
+          tooltipDirection="bottom"
+        />
+      }
+    />
+  ))
+  .add('with information icon', () => (
+    <ICA
+      {...storyProps({ value: 350, total: 450 })}
+      information={'Information label'}
+    />
+  ))
   .add(
     'in an ICA wall',
     () => (
@@ -91,7 +115,7 @@ storiesOf(components('ICA'), module)
         Multiple \`ICA\` components (i.e., an "ICA Wall") should be presented in a grid using the correct class names.
 
         These two row examples show different combinations of breakpoints and spans set per column with specific class names.
-        
+
         For more information the 16 column IBM grid, please review the [\`@carbon/grid\` package documentation](https://github.com/carbon-design-system/carbon/tree/main/packages/grid).
       `,
       },

src/components/ICA/ICA.js

@@ -13,6 +13,8 @@ import 'numeral/locales';
 import { ArrowUp16, ArrowUp20, ArrowUp24 } from '@carbon/icons-react';
 import Icon from '../Icon/Icon';
 
+import Tooltip from '../Tooltip';
+
 import isDevelopment from '../../globals/env';
 import { getComponentNamespace } from '../../globals/namespace';
 
@@ -70,6 +72,8 @@ const ICA = ({
   label,
   locale,
   percentage,
+  information,
+  iconButton,
   size,
   trending,
   truncate,
@@ -113,7 +117,14 @@ const ICA = ({
 
   return (
     <div className={`${ICAClasses}`} {...other}>
-      <h4 className={`${namespace}__label`}>{label} </h4>
+      <span className={`${namespace}__row`}>
+        <h4 className={`${namespace}__label`}>{label} </h4>
+        {information && (
+          <Tooltip showIcon={true} direction={'right'}>
+            {information}
+          </Tooltip>
+        )}
+      </span>
       <span className={`${namespace}__row`}>
         {trending && (
           <Icon className={`${namespace}__trend`} renderIcon={renderIcon} />
@@ -125,6 +136,7 @@ const ICA = ({
             <span>/{truncatedTotal}</span>
           </span>
         ) : null}
+        {iconButton}
       </span>
     </div>
   );
@@ -145,6 +157,12 @@ ICA.propTypes = {
    */
   forceShowTotal: PropTypes.bool,
 
+  /** Displays an iconButton next to the ICA value */
+  iconButton: PropTypes.node,
+
+  /** Pass in content to the body of the information tooltip. */
+  information: PropTypes.node,
+
   /**
    * Text label for ICA.
    * @type string

src/components/ICA/_index.scss

@@ -37,6 +37,10 @@
     margin-bottom: $carbon--spacing-02;
   }
 
+  &__info {
+    vertical-align: top;
+  }
+
   &__trend {
     margin-top: $carbon--spacing-03;
     vertical-align: top;

src/components/__tests__/__snapshots__/public-api-test.js.snap

@@ -4902,6 +4902,12 @@ Map {
       "forceShowTotal": Object {
         "type": "bool",
       },
+      "iconButton": Object {
+        "type": "node",
+      },
+      "information": Object {
+        "type": "node",
+      },
       "label": Object {
         "isRequired": true,
         "type": "string",