carbon-addons-iot-react 2.155.13 → 2.156.0

package/es/components/Card/Card.js

@@ -26,7 +26,7 @@ import { settings } from '../../constants/Settings.js';
 import { CARD_SIZES, CARD_LAYOUTS, ROW_HEIGHT, DASHBOARD_SIZES, CARD_DIMENSIONS, DASHBOARD_BREAKPOINTS, DASHBOARD_COLUMNS, CARD_TYPES, CARD_CONTENT_PADDING, CARD_TITLE_HEIGHT } from '../../constants/LayoutConstants.js';
 import { CardPropTypes } from '../../constants/CardPropTypes.js';
 import { getCardMinSize, filterValidAttributes } from '../../utils/componentUtilityFunctions.js';
-import { getUpdatedCardSize, useCardResizing } from '../../utils/cardUtilityFunctions.js';
+import { getTranslatedLabel, getUpdatedCardSize, useCardResizing } from '../../utils/cardUtilityFunctions.js';
 import { parseValue } from '../DateTimePicker/dateTimePickerUtils.js';
 import useSizeObserver from '../../hooks/useSizeObserver.js';
 import EmptyState from '../EmptyState/EmptyState.js';
@@ -263,7 +263,8 @@ var defaultProps = {
   overrides: undefined,
   type: null,
   data: null,
-  content: null
+  content: null,
+  shouldUseTranslatedLabels: false
 };
 /** Dumb component that renders the card basics */
 
@@ -272,7 +273,7 @@ var Card = function Card(props) {
 
   var size = props.size,
       children = props.children,
-      title = props.title,
+      titleProp = props.title,
       subtitleProp = props.subtitle,
       hasTitleWrap = props.hasTitleWrap;
       props.layout;
@@ -310,9 +311,12 @@ var Card = function Card(props) {
       type = props.type,
       data = props.data,
       content = props.content,
-      others = _objectWithoutProperties(props, ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content"]); // TODO: remove once final version of range prop is supported
+      shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
+      others = _objectWithoutProperties(props, ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "shouldUseTranslatedLabels"]); // Get translated title if shouldUseTranslatedLabels is true
 
 
+  var title = getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n); // TODO: remove once final version of range prop is supported
+
   useEffect(function () {
     if (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string') {
       warning(false, 'The Card components availableActions.range is an experimental property and may be subject to change.') ;
@@ -808,6 +812,13 @@ Card.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/es/components/CardEditor/CardEditForm/CardEditForm.js

@@ -57,6 +57,9 @@ var propTypes = {
     modalIconDescription: PropTypes.string
   }),
 
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
+
   /** if provided, returns an array of strings which are the dataItems to be allowed
    * on each card
    * getValidDataItems(card, selectedTimeRange)
@@ -122,6 +125,7 @@ var defaultProps = {
     modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
     modalIconDescription: 'Close'
   },
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   getValidTimeRanges: null,
   dataItems: [],
@@ -151,6 +155,7 @@ var CardEditForm = function CardEditForm(_ref) {
       availableDimensions = _ref.availableDimensions,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
       onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       actions = _ref.actions;
   var mergedI18n = useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
@@ -168,6 +173,7 @@ var CardEditForm = function CardEditForm(_ref) {
     onChange: onChange,
     isSummaryDashboard: isSummaryDashboard,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     dataItems: dataItems,
     availableDimensions: availableDimensions,
     getValidDataItems: getValidDataItems,
@@ -318,6 +324,17 @@ CardEditForm.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "getValidDataItems": {
       "defaultValue": {
         "value": "null",

package/es/components/CardEditor/CardEditForm/CardEditFormContent.js

@@ -83,6 +83,9 @@ var propTypes = {
     thisYearLabel: PropTypes.string
   }),
 
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
+
   /** if provided, returns an array of strings which are the timeRanges to be allowed
    * on each card
    * getValidTimeRanges(card, selectedDataItems)
@@ -123,6 +126,7 @@ var propTypes = {
 var defaultProps = {
   cardConfig: {},
   i18n: {},
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   getValidTimeRanges: null,
   dataItems: [],
@@ -164,6 +168,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
       isSummaryDashboard = _ref.isSummaryDashboard,
       onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       dataItems = _ref.dataItems,
       getValidDataItems = _ref.getValidDataItems,
       getValidTimeRanges = _ref.getValidTimeRanges,
@@ -201,6 +206,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     ,
     onChange: onChange,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     getValidTimeRanges: getValidTimeRanges,
     currentBreakpoint: currentBreakpoint,
     selectedDataItems: selectedDataItems,
@@ -247,6 +253,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     getValidDataItems: getValidDataItems,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     dataSeriesItemLinks: dataSeriesItemLinks,
     translateWithId: handleTranslation,
     actions: actions
@@ -488,6 +495,17 @@ CardEditFormContent.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "getValidDataItems": {
       "defaultValue": {
         "value": "null",

package/es/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.js

@@ -27,6 +27,7 @@ import { DataItemsPropTypes, DashboardEditorActionsPropTypes, handleDefaultDataI
 import ColorDropdown from '../../../ColorDropdown/ColorDropdown.js';
 import { CARD_TYPES, BAR_CHART_TYPES } from '../../../../constants/LayoutConstants.js';
 import Button from '../../../Button/Button.js';
+import { getTranslatedLabel } from '../../../../utils/cardUtilityFunctions.js';
 import ThresholdsFormItem from './ThresholdsFormItem.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -136,6 +137,9 @@ var propTypes = {
     primaryButtonLabelText: PropTypes.string,
     secondaryButtonLabelText: PropTypes.string
   }),
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
   actions: DashboardEditorActionsPropTypes,
 
   /**
@@ -190,6 +194,7 @@ var defaultProps = {
     secondaryButtonLabelText: 'Cancel',
     decimalPlacesLabel: 'Decimal places'
   },
+  shouldUseTranslatedLabels: false,
   editDataSeries: [],
   showEditor: false,
   setShowEditor: null,
@@ -272,6 +277,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       availableDimensions = _ref.availableDimensions,
       onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       isLarge = _ref.isLarge,
       testId = _ref.testId,
       _ref$actions$dataSeri = _ref.actions.dataSeriesFormActions,
@@ -442,7 +448,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
           label: evt.target.value
         }));
       },
-      value: editDataItem.label,
+      value: getTranslatedLabel(editDataItem.label, shouldUseTranslatedLabels, i18n),
       helperText: mergedI18n.dataItemEditorDataItemHelperText(mergedI18n.dataItemSource, editDataItem.dataItemId)
     })), hasColorDropdown &&
     /*#__PURE__*/
@@ -576,7 +582,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       },
       columnType: editDataItem.columnType || editDataItem.type
     }));
-  }, [availableDimensions, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasThresholds, hasTooltip, hasUnit, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard, mergedI18n, onAddAggregations, selectedDimensionFilter, setEditDataItem, testId, type]);
+  }, [availableDimensions, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasThresholds, hasTooltip, hasUnit, i18n, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard, mergedI18n, onAddAggregations, selectedDimensionFilter, setEditDataItem, shouldUseTranslatedLabels, testId, type]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showEditor && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(baseClassName, "--modal-wrapper")
   }, /*#__PURE__*/React__default.createElement(ComposedModal, {
@@ -806,6 +812,17 @@ DataSeriesFormItemModal.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "editDataSeries": {
       "defaultValue": {
         "value": "[]",

package/es/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.js

@@ -29,6 +29,7 @@ import ComboBox from '../../../../ComboBox/ComboBox.js';
 import DataSeriesFormItemModal from '../DataSeriesFormItemModal.js';
 import { BAR_CHART_TYPES, CARD_TYPES } from '../../../../../constants/LayoutConstants.js';
 import ContentFormItemTitle from '../ContentFormItemTitle.js';
+import { getTranslatedLabel } from '../../../../../utils/cardUtilityFunctions.js';
 import BarChartDataSeriesContent from './BarChartDataSeriesContent.js';
 import { Dropdown } from 'carbon-components-react';
 
@@ -126,6 +127,9 @@ var propTypes = {
     incrementNumberText: PropTypes.string,
     decrementNumberText: PropTypes.string
   }),
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
   translateWithId: PropTypes.func.isRequired,
   actions: DashboardEditorActionsPropTypes
 };
@@ -159,6 +163,7 @@ var defaultProps = {
     incrementNumberText: 'Increment number',
     decrementNumberText: 'Decrement number'
   },
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   dataItems: [],
   selectedDataItems: [],
@@ -260,6 +265,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
       selectedTimeRange = _ref2.selectedTimeRange,
       availableDimensions = _ref2.availableDimensions,
       i18n = _ref2.i18n,
+      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
       dataSeriesItemLinks = _ref2.dataSeriesItemLinks,
       translateWithId = _ref2.translateWithId,
       actions = _ref2.actions;
@@ -401,7 +407,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
       return {
         id: dataItem.dataSourceId,
         content: {
-          value: dataItem.label || dataItem.dataItemId,
+          value: getTranslatedLabel(dataItem.label || dataItem.dataItemId, shouldUseTranslatedLabels, i18n),
           icon: cardConfig.type === CARD_TYPES.TIMESERIES || cardConfig.type === CARD_TYPES.BAR ? /*#__PURE__*/React__default.createElement("div", {
             className: "".concat(baseClassName, "--data-item-list--item-color-icon"),
             style: {
@@ -438,7 +444,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
         }
       };
     });
-  }, [cardConfig.type, dataSection, handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]);
+  }, [cardConfig.type, dataSection, handleEditButton, handleRemoveButton, i18n, mergedI18n.edit, mergedI18n.remove, shouldUseTranslatedLabels]);
   return !isEmpty(validDataItems) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DataSeriesFormItemModal, {
     cardConfig: cardConfig,
     isSummaryDashboard: isSummaryDashboard,
@@ -453,6 +459,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
     dataSection: dataSection,
     onChange: _onChange,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     actions: actions,
     options: {
       hasColorDropdown: type === CARD_TYPES.TIMESERIES || type === CARD_TYPES.BAR,
@@ -765,6 +772,17 @@ DataSeriesFormItem.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "getValidDataItems": {
       "defaultValue": {
         "value": "null",

package/es/components/CardEditor/CardEditForm/CommonCardEditFormFields.js

@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
 import { ALLOWED_CARD_SIZES_PER_TYPE, CARD_SIZES, CARD_DIMENSIONS } from '../../../constants/LayoutConstants.js';
 import { settings } from '../../../constants/Settings.js';
 import { timeRangeToJSON } from '../../DashboardEditor/editorUtils.js';
+import { getTranslatedLabel } from '../../../utils/cardUtilityFunctions.js';
 import { TextInput, TextArea, Dropdown } from 'carbon-components-react';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -77,6 +78,9 @@ var propTypes = {
     thisYearLabel: PropTypes.string
   }),
 
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
+
   /** if provided, returns an array of strings which are the timeRanges to be allowed
    * on each card
    * getValidTimeRanges(card, selectedDataItems)
@@ -111,6 +115,7 @@ var defaultProps = {
     thisQuarterLabel: 'This quarter',
     thisYearLabel: 'This year'
   },
+  shouldUseTranslatedLabels: false,
   selectedDataItems: [],
   getValidTimeRanges: null,
   currentBreakpoint: 'xl',
@@ -136,6 +141,7 @@ var CommonCardEditFormFields = function CommonCardEditFormFields(_ref) {
   var cardConfig = _ref.cardConfig,
       _onChange = _ref.onChange,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       getValidTimeRanges = _ref.getValidTimeRanges,
       currentBreakpoint = _ref.currentBreakpoint,
       selectedDataItems = _ref.selectedDataItems,
@@ -168,7 +174,7 @@ var CommonCardEditFormFields = function CommonCardEditFormFields(_ref) {
         title: evt.target.value
       }));
     },
-    value: title
+    value: getTranslatedLabel(title, shouldUseTranslatedLabels, mergedI18n)
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(baseClassName, "--input")
   }, /*#__PURE__*/React__default.createElement(TextArea, {
@@ -463,6 +469,17 @@ CommonCardEditFormFields.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "selectedDataItems": {
       "defaultValue": {
         "value": "[]",

package/es/components/CardEditor/CardEditor.js

@@ -154,6 +154,9 @@ var propTypes = {
     searchPlaceHolderText: PropTypes.string,
     editDataItems: PropTypes.string
   }),
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
   currentBreakpoint: PropTypes.string,
   isSummaryDashboard: PropTypes.bool,
 
@@ -189,6 +192,7 @@ var defaultProps = {
     modalHelpText: 'The JSON definition for this card is provided below.  You can modify this data directly to update the card configuration.',
     modalIconDescription: 'Close'
   },
+  shouldUseTranslatedLabels: false,
   getValidDimensions: null,
   getValidDataItems: null,
   getValidTimeRanges: null,
@@ -354,6 +358,7 @@ var CardEditor = function CardEditor(_ref) {
       onRenderCardEditForm = _ref.onRenderCardEditForm,
       icons = _ref.icons,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       currentBreakpoint = _ref.currentBreakpoint,
       testId = _ref.testId,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
@@ -422,6 +427,7 @@ var CardEditor = function CardEditor(_ref) {
     getValidTimeRanges: getValidTimeRanges,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -588,6 +594,17 @@ CardEditor.__docgenInfo = {
       "required": false,
       "description": "i18n must include the label for each `supportedCardTypes`\nex:\n[\n TIMESERIES: 'ITEM 1',\n ALERT: 'ITEM 8',\n CUSTOM: 'ITEM 10',\n COOL_NEW_CARD: 'Missing Icon',\n]"
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "getValidDimensions": {
       "defaultValue": {
         "value": "null",

package/es/components/DashboardEditor/DashboardEditor.js

@@ -25,6 +25,7 @@ import { CARD_TYPES, DASHBOARD_EDITOR_CARD_TYPES } from '../../constants/LayoutC
 import DashboardGrid from '../Dashboard/DashboardGrid.js';
 import CardEditor from '../CardEditor/CardEditor.js';
 import ImageGalleryModal, { ImagePropTypes } from '../ImageGalleryModal/ImageGalleryModal.js';
+import { getTranslatedLabel } from '../../utils/cardUtilityFunctions.js';
 import DashboardEditorHeader from './DashboardEditorHeader/DashboardEditorHeader.js';
 import DashboardEditorCardRenderer from './DashboardEditorCardRenderer.js';
 import { DataItemsPropTypes, DashboardEditorActionsPropTypes, getDefaultCard, getDuplicateCard, renderBreakpointInfo, renderDefaultIconByName } from './editorUtils.js';
@@ -331,6 +332,9 @@ var propTypes = {
     editDataItems: PropTypes.string
   }),
 
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
+
   /** locale data */
   locale: PropTypes.string,
 
@@ -424,6 +428,7 @@ var defaultProps = {
     saveTitleButton: 'Save title',
     editDataItems: 'Edit data items'
   },
+  shouldUseTranslatedLabels: false,
   locale: 'en',
   dataSeriesItemLinks: null,
   onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
@@ -502,6 +507,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
       isSummaryDashboard = _ref.isSummaryDashboard,
       isLoading = _ref.isLoading,
       i18n = _ref.i18n,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       locale = _ref.locale,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
       isTitleEditable = _ref.isTitleEditable,
@@ -768,7 +774,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     className: classnames("".concat(baseClassName, "--content"), _defineProperty({}, "".concat(baseClassName, "__overflow"), selectedBreakpointIndex !== LAYOUTS.FIT_TO_SCREEN.index)),
     ref: scrollContainerRef
   }, renderHeader ? renderHeader() : /*#__PURE__*/React__default.createElement(DashboardEditorHeader, {
-    title: (dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title) || title,
+    title: getTranslatedLabel(dashboardJson === null || dashboardJson === void 0 ? void 0 : dashboardJson.title, shouldUseTranslatedLabels, i18n) || title,
     breadcrumbs: headerBreadcrumbs,
     onImport: onImport,
     onExport: function onExport() {
@@ -852,6 +858,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
       key: cardConfig.id,
       isResizable: isCardResizable,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       isSelected: isSelected,
       availableDimensions: availableDimensions,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -896,6 +903,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     getValidDimensions: getValidDimensions,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -1819,6 +1827,17 @@ DashboardEditor.__docgenInfo = {
       "required": false,
       "description": "internationalization strings"
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "locale": {
       "defaultValue": {
         "value": "'en'",

package/es/components/DashboardEditor/DashboardEditorCardRenderer.js

@@ -102,7 +102,8 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default.memo(function (_re
       baseClassName = _ref2.baseClassName,
       renderCardPreview = _ref2.renderCardPreview,
       style = _ref2.style,
-      cardConfig = _objectWithoutProperties(_ref2, ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style"]);
+      shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
+      cardConfig = _objectWithoutProperties(_ref2, ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style", "shouldUseTranslatedLabels"]);
 
   // We have to keep track of our dynamic hotspots here
   var _useState5 = useState([]),
@@ -137,6 +138,7 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default.memo(function (_re
       key: cardConfig.id,
       tooltip: cardConfig.description,
       i18n: i18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       availableActions: availableActions,
       onCardAction: handleOnCardAction,
       renderIconByName: renderIconByName,
@@ -149,7 +151,7 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default.memo(function (_re
       onBrowseClick: cardConfig.type === CARD_TYPES.IMAGE && isNil((_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.src) ? onShowImageGallery : undefined,
       validateUploadedImage: cardConfig.type === CARD_TYPES.IMAGE ? onValidateUploadedImage : undefined
     });
-  }, [baseClassName, cardConfig, handleOnCardAction, handleOnCardKeyDown, handleOnCardMouseDown, i18n, isSelected, onShowImageGallery, onValidateUploadedImage, renderIconByName, style]);
+  }, [baseClassName, cardConfig, handleOnCardAction, handleOnCardKeyDown, handleOnCardMouseDown, i18n, isSelected, onShowImageGallery, onValidateUploadedImage, renderIconByName, shouldUseTranslatedLabels, style]);
   useEffect(function () {
     var _cardProps$values, _cardProps$values$hot;
 

package/es/components/ValueCard/Attribute.js

@@ -11,6 +11,7 @@ import { TooltipDefinition, Link } from 'carbon-components-react';
 import { CARD_LAYOUTS } from '../../constants/LayoutConstants.js';
 import CardIcon from '../ImageCard/CardIcon.js';
 import useMatchingThreshold from '../../hooks/useMatchingThreshold.js';
+import { getTranslatedLabel } from '../../utils/cardUtilityFunctions.js';
 import ValueRenderer from './ValueRenderer.js';
 import UnitRenderer from './UnitRenderer.js';
 import { BASE_CLASS_NAME } from './valueCardUtils.js';
@@ -35,6 +36,10 @@ var propTypes = {
   isEditable: PropTypes.bool,
   layout: PropTypes.oneOf(Object.values(CARD_LAYOUTS)),
   locale: PropTypes.string,
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
+  i18n: PropTypes.objectOf(PropTypes.any),
   renderIconByName: PropTypes.func,
 
   /** Optional trend information */
@@ -66,6 +71,8 @@ var defaultProps = {
   locale: 'en',
   customFormatter: null,
   isEditable: false,
+  shouldUseTranslatedLabels: false,
+  i18n: {},
   testId: 'attribute',
   onValueClick: null
 };
@@ -91,6 +98,8 @@ var Attribute = function Attribute(_ref) {
       isEditable = _ref.isEditable,
       layout = _ref.layout,
       locale = _ref.locale,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
+      i18n = _ref.i18n,
       renderIconByName = _ref.renderIconByName,
       secondaryValue = _ref.secondaryValue,
       value = _ref.value,
@@ -106,7 +115,9 @@ var Attribute = function Attribute(_ref) {
   var matchingThreshold = thresholds ? isEditable ? thresholds[0] : matchedThreshold : null;
   var valueColor = matchingThreshold && matchingThreshold.icon === undefined ? matchingThreshold.color : null; // need to reduce the width size to fit multiple attributes when card layout is horizontal
 
-  var attributeWidthPercentage = layout === CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100;
+  var attributeWidthPercentage = layout === CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100; // Get translated label if shouldUseTranslatedLabels is true
+
+  var displayLabel = getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classnames("".concat(BEM_BASE, "-wrapper"), (_classnames = {}, _defineProperty(_classnames, "".concat(BEM_BASE, "-wrapper--vertical"), layout === CARD_LAYOUTS.VERTICAL), _defineProperty(_classnames, "".concat(BEM_BASE, "-wrapper--horizontal"), layout === CARD_LAYOUTS.HORIZONTAL), _classnames)),
     style: {
@@ -126,9 +137,9 @@ var Attribute = function Attribute(_ref) {
   }) : null, tooltip ? /*#__PURE__*/React__default.createElement(TooltipDefinition, {
     direction: "right",
     tooltipText: tooltip
-  }, label) : /*#__PURE__*/React__default.createElement("span", {
+  }, displayLabel) : /*#__PURE__*/React__default.createElement("span", {
     "data-testid": "".concat(testId, "-threshold-label")
-  }, label)), /*#__PURE__*/React__default.createElement("div", {
+  }, displayLabel)), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(BEM_BASE)
   }, /*#__PURE__*/React__default.createElement(ValueRenderer, {
     value: value,
@@ -305,6 +316,31 @@ Attribute.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
+    "i18n": {
+      "defaultValue": {
+        "value": "{}",
+        "computed": false
+      },
+      "type": {
+        "name": "objectOf",
+        "value": {
+          "name": "any"
+        }
+      },
+      "required": false,
+      "description": ""
+    },
     "testId": {
       "defaultValue": {
         "value": "'attribute'",