diff --git a/src/__tests__/scss/__snapshots__/styles-test.js.snap b/src/__tests__/scss/__snapshots__/styles-test.js.snap
index f50a2e338..a282a107b 100644
--- a/src/__tests__/scss/__snapshots__/styles-test.js.snap
+++ b/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;
diff --git a/src/components/ICA/ICA-story.js b/src/components/ICA/ICA-story.js
index eff3a8ed7..1d6e3e40a 100644
--- a/src/components/ICA/ICA-story.js
+++ b/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)
))
.add('with total', () => )
+ .add('with edit button', () => (
+
+ }
+ />
+ ))
+ .add('with information icon', () => (
+
+ ))
.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).
`,
},
diff --git a/src/components/ICA/ICA.js b/src/components/ICA/ICA.js
index c0603ffad..99e35669a 100644
--- a/src/components/ICA/ICA.js
+++ b/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 (
-
{label}
+
+ {label}
+ {information && (
+
+ {information}
+
+ )}
+
{trending && (
@@ -125,6 +136,7 @@ const ICA = ({
/{truncatedTotal}
) : null}
+ {iconButton}
);
@@ -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
diff --git a/src/components/ICA/_index.scss b/src/components/ICA/_index.scss
index 700b19d8c..dec89ba7a 100644
--- a/src/components/ICA/_index.scss
+++ b/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;
diff --git a/src/components/__tests__/__snapshots__/public-api-test.js.snap b/src/components/__tests__/__snapshots__/public-api-test.js.snap
index 7eb55033a..6b49b0042 100644
--- a/src/components/__tests__/__snapshots__/public-api-test.js.snap
+++ b/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",