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",