carbon-addons-iot-react 2.155.13 → 2.156.1

package/es/components/ValueCard/ValueCard.js

@@ -50,7 +50,8 @@ var ValueCard = function ValueCard(_ref) {
       testID = _ref.testID,
       testId = _ref.testId,
       onAttributeClick = _ref.onAttributeClick,
-      others = _objectWithoutProperties(_ref, ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick"]);
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
+      others = _objectWithoutProperties(_ref, ["title", "content", "size", "values", "isEditable", "isResizable", "i18n", "dataState", "id", "locale", "customFormatter", "children", "fontSize", "isNumberValueCompact", "testID", "testId", "onAttributeClick", "shouldUseTranslatedLabels"]);
 
   var availableActions = _objectSpread({
     expand: false
@@ -76,6 +77,7 @@ var ValueCard = function ValueCard(_ref) {
     isResizable: isResizable,
     resizeHandles: resizeHandles,
     i18n: i18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     locale: locale,
     id: id,
     className: classnames((_classnames = {}, _defineProperty(_classnames, "".concat(BASE_CLASS_NAME, "__horizontal"), layout === CARD_LAYOUTS.HORIZONTAL), _defineProperty(_classnames, "".concat(BASE_CLASS_NAME, "__vertical"), layout === CARD_LAYOUTS.VERTICAL), _classnames)) // TODO: remove deprecated 'testID' in v3.
@@ -95,7 +97,9 @@ var ValueCard = function ValueCard(_ref) {
     values: values,
     isEditable: isEditable,
     fontSize: fontSize,
-    isNumberValueCompact: isNumberValueCompact
+    isNumberValueCompact: isNumberValueCompact,
+    i18n: i18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels
   }, others)), resizeHandles);
 };
 
@@ -112,7 +116,8 @@ ValueCard.defaultProps = {
   isNumberValueCompact: false,
   // TODO: fix this default in V3, so that cards are unique not inherited from the base Card
   testId: 'Card',
-  onAttributeClick: null
+  onAttributeClick: null,
+  shouldUseTranslatedLabels: false
 };
 ValueCard.__docgenInfo = {
   "description": "This components responsibilities include:\nRendering the attribute groups\nDetermining the layout\ndetermines the data to render",
@@ -188,6 +193,13 @@ ValueCard.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/es/components/ValueCard/ValueContent.js

@@ -29,7 +29,10 @@ var propTypes = _objectSpread({
   title: PropTypes.string,
   layout: PropTypes.oneOf(['HORIZONTAL', 'VERTICAL']),
   locale: PropTypes.string,
-  isEditable: PropTypes.bool
+  isEditable: PropTypes.bool,
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool
 }, ValueContentPropTypes);
 
 var defaultProps = {
@@ -38,6 +41,7 @@ var defaultProps = {
   layout: 'VERTICAL',
   locale: 'en',
   isEditable: false,
+  shouldUseTranslatedLabels: false,
   dataState: null,
   values: null,
   fontSize: DEFAULT_FONT_SIZE,
@@ -57,13 +61,14 @@ var ValueContent = function ValueContent(_ref) {
       dataState = _ref.dataState,
       locale = _ref.locale,
       isEditable = _ref.isEditable,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       customFormatter = _ref.customFormatter,
       fontSize = _ref.fontSize,
       isNumberValueCompact = _ref.isNumberValueCompact,
       testId = _ref.testId,
       onAttributeClick = _ref.onAttributeClick,
       size = _ref.size,
-      others = _objectWithoutProperties(_ref, ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"]);
+      others = _objectWithoutProperties(_ref, ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "shouldUseTranslatedLabels", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"]);
 
   var attributeCount = content.attributes.length;
   return /*#__PURE__*/React__default.createElement("div", {
@@ -77,6 +82,8 @@ var ValueContent = function ValueContent(_ref) {
       locale: locale,
       isEditable: isEditable,
       title: title,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
+      i18n: others.i18n,
       renderIconByName: others.renderIconByName,
       value: determineValue(attribute.dataSourceId, values, attribute.dataFilter),
       secondaryValue: attribute.secondaryValue && _objectSpread(_objectSpread({}, attribute.secondaryValue), {}, {
@@ -165,6 +172,17 @@ ValueContent.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "whether to use translated labels in cards"
+    },
     "dataState": {
       "defaultValue": {
         "value": "null",

package/es/constants/CardPropTypes.js

@@ -184,6 +184,9 @@ var TableCardPropTypes = {
     defaultFilterStringPlaceholdText: PropTypes.string,
     downloadIconDescription: PropTypes.string
   }),
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
   cardVariables: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.number, PropTypes.bool])),
 
   /** default date format pattern that follows the dayjs formatting patterns */

package/es/utils/cardUtilityFunctions.js

@@ -7,6 +7,7 @@ import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import mapValues from '../node_modules/lodash-es/mapValues.js';
 import isNil from '../node_modules/lodash-es/isNil.js';
+import isEmpty from '../node_modules/lodash-es/isEmpty.js';
 import 'core-js/modules/es.array.includes.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/es.array.concat.js';
@@ -611,5 +612,20 @@ var handleTooltip = function handleTooltip(dataOrHoveredElement, defaultTooltip,
   });
   return defaultTooltipDOM.innerHTML;
 };
+/**
+ * Get translated label or title from i18n object, fallback to original if not found
+ * @param {string} label - The label or title key to translate
+ * @param {boolean} shouldUseTranslatedLabels - Flag to determine if translation should be used
+ * @param {Object} i18n - The i18n object containing translations
+ * @returns {string} - The translated label or original label if translation not found
+ */
+
+var getTranslatedLabel = function getTranslatedLabel(label, shouldUseTranslatedLabels, i18n) {
+  if (!isEmpty(label) && shouldUseTranslatedLabels && i18n && i18n[label]) {
+    return i18n[label];
+  }
+
+  return label;
+};
 
-export { chartValueFormatter, compareGrains, determineCardRange, determinePrecision, fetchDataURL, findMatchingAlertRange, findMatchingThresholds, formatNumberWithPrecision, getCardVariables, getResizeHandles, getUpdatedCardSize, getVariables, handleCardVariables, handleTooltip, increaseSmallCardSize, replaceVariables, useCardResizing };
+export { chartValueFormatter, compareGrains, determineCardRange, determinePrecision, fetchDataURL, findMatchingAlertRange, findMatchingThresholds, formatNumberWithPrecision, getCardVariables, getResizeHandles, getTranslatedLabel, getUpdatedCardSize, getVariables, handleCardVariables, handleTooltip, increaseSmallCardSize, replaceVariables, useCardResizing };

package/lib/components/Card/Card.js

@@ -278,7 +278,8 @@ var defaultProps = {
   overrides: undefined,
   type: null,
   data: null,
-  content: null
+  content: null,
+  shouldUseTranslatedLabels: false
 };
 /** Dumb component that renders the card basics */
 
@@ -287,7 +288,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;
@@ -301,7 +302,7 @@ var Card = function Card(props) {
       error = props.error,
       hideHeader = props.hideHeader,
       id = props.id,
-      tooltip = props.tooltip,
+      tooltipProp = props.tooltip,
       titleTextTooltip = props.titleTextTooltip,
       timeRange = props.timeRange,
       timeRangeOptions = props.timeRangeOptions,
@@ -325,9 +326,13 @@ var Card = function Card(props) {
       type = props.type,
       data = props.data,
       content = props.content,
-      others = _objectWithoutProperties__default["default"](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__default["default"](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 = cardUtilityFunctions.getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
+  var tooltip = cardUtilityFunctions.getTranslatedLabel(tooltipProp, shouldUseTranslatedLabels, i18n); // TODO: remove once final version of range prop is supported
+
   React.useEffect(function () {
     if (typeof (availableActions === null || availableActions === void 0 ? void 0 : availableActions.range) === 'string') {
       warning__default["default"](false, 'The Card components availableActions.range is an experimental property and may be subject to change.') ;
@@ -823,6 +828,13 @@ Card.__docgenInfo = {
         "computed": false
       },
       "required": false
+    },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
     }
   },
   "composes": ["../../constants/CardPropTypes"]

package/lib/components/CardEditor/CardEditForm/CardEditForm.js

@@ -65,6 +65,9 @@ var propTypes = {
     modalIconDescription: PropTypes__default["default"].string
   }),
 
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+
   /** if provided, returns an array of strings which are the dataItems to be allowed
    * on each card
    * getValidDataItems(card, selectedTimeRange)
@@ -130,6 +133,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: [],
@@ -159,6 +163,7 @@ var CardEditForm = function CardEditForm(_ref) {
       availableDimensions = _ref.availableDimensions,
       dataSeriesItemLinks = _ref.dataSeriesItemLinks,
       onFetchDynamicDemoHotspots = _ref.onFetchDynamicDemoHotspots,
+      shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
       actions = _ref.actions;
   var mergedI18n = React.useMemo(function () {
     return _objectSpread(_objectSpread({}, defaultProps.i18n), i18n);
@@ -176,6 +181,7 @@ var CardEditForm = function CardEditForm(_ref) {
     onChange: onChange,
     isSummaryDashboard: isSummaryDashboard,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     dataItems: dataItems,
     availableDimensions: availableDimensions,
     getValidDataItems: getValidDataItems,
@@ -326,6 +332,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/lib/components/CardEditor/CardEditForm/CardEditFormContent.js

@@ -94,6 +94,9 @@ var propTypes = {
     thisYearLabel: PropTypes__default["default"].string
   }),
 
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+
   /** if provided, returns an array of strings which are the timeRanges to be allowed
    * on each card
    * getValidTimeRanges(card, selectedDataItems)
@@ -134,6 +137,7 @@ var propTypes = {
 var defaultProps = {
   cardConfig: {},
   i18n: {},
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   getValidTimeRanges: null,
   dataItems: [],
@@ -175,6 +179,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,
@@ -212,6 +217,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     ,
     onChange: onChange,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     getValidTimeRanges: getValidTimeRanges,
     currentBreakpoint: currentBreakpoint,
     selectedDataItems: selectedDataItems,
@@ -258,6 +264,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     getValidDataItems: getValidDataItems,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     dataSeriesItemLinks: dataSeriesItemLinks,
     translateWithId: handleTranslation,
     actions: actions
@@ -499,6 +506,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/lib/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItemModal.js

@@ -29,6 +29,7 @@ var editorUtils = require('../../../DashboardEditor/editorUtils.js');
 var ColorDropdown = require('../../../ColorDropdown/ColorDropdown.js');
 var LayoutConstants = require('../../../../constants/LayoutConstants.js');
 var Button = require('../../../Button/Button.js');
+var cardUtilityFunctions = require('../../../../utils/cardUtilityFunctions.js');
 var ThresholdsFormItem = require('./ThresholdsFormItem.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -146,6 +147,9 @@ var propTypes = {
     primaryButtonLabelText: PropTypes__default["default"].string,
     secondaryButtonLabelText: PropTypes__default["default"].string
   }),
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
   actions: editorUtils.DashboardEditorActionsPropTypes,
 
   /**
@@ -200,6 +204,7 @@ var defaultProps = {
     secondaryButtonLabelText: 'Cancel',
     decimalPlacesLabel: 'Decimal places'
   },
+  shouldUseTranslatedLabels: false,
   editDataSeries: [],
   showEditor: false,
   setShowEditor: null,
@@ -282,6 +287,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,
@@ -452,7 +458,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
           label: evt.target.value
         }));
       },
-      value: editDataItem.label,
+      value: cardUtilityFunctions.getTranslatedLabel(editDataItem.label, shouldUseTranslatedLabels, i18n),
       helperText: mergedI18n.dataItemEditorDataItemHelperText(mergedI18n.dataItemSource, editDataItem.dataItemId)
     })), hasColorDropdown &&
     /*#__PURE__*/
@@ -499,7 +505,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
           unit: evt.target.value
         }));
       },
-      value: editDataItem.unit
+      value: cardUtilityFunctions.getTranslatedLabel(editDataItem.unit, shouldUseTranslatedLabels, i18n)
     })), hasDecimalPlacesDropdown && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(baseClassName, "--input-group--item-end")
     }, /*#__PURE__*/React__default["default"].createElement(carbonComponentsReact.Dropdown, {
@@ -586,7 +592,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["default"].createElement(React__default["default"].Fragment, null, showEditor && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(baseClassName, "--modal-wrapper")
   }, /*#__PURE__*/React__default["default"].createElement(ComposedModal["default"], {
@@ -816,6 +822,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/lib/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.js

@@ -33,6 +33,7 @@ var ComboBox = require('../../../../ComboBox/ComboBox.js');
 var DataSeriesFormItemModal = require('../DataSeriesFormItemModal.js');
 var LayoutConstants = require('../../../../../constants/LayoutConstants.js');
 var ContentFormItemTitle = require('../ContentFormItemTitle.js');
+var cardUtilityFunctions = require('../../../../../utils/cardUtilityFunctions.js');
 var BarChartDataSeriesContent = require('./BarChartDataSeriesContent.js');
 var carbonComponentsReact = require('carbon-components-react');
 
@@ -141,6 +142,9 @@ var propTypes = {
     incrementNumberText: PropTypes__default["default"].string,
     decrementNumberText: PropTypes__default["default"].string
   }),
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
   translateWithId: PropTypes__default["default"].func.isRequired,
   actions: editorUtils.DashboardEditorActionsPropTypes
 };
@@ -174,6 +178,7 @@ var defaultProps = {
     incrementNumberText: 'Increment number',
     decrementNumberText: 'Decrement number'
   },
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   dataItems: [],
   selectedDataItems: [],
@@ -275,6 +280,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;
@@ -416,7 +422,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
       return {
         id: dataItem.dataSourceId,
         content: {
-          value: dataItem.label || dataItem.dataItemId,
+          value: cardUtilityFunctions.getTranslatedLabel(dataItem.label || dataItem.dataItemId, shouldUseTranslatedLabels, i18n),
           icon: cardConfig.type === LayoutConstants.CARD_TYPES.TIMESERIES || cardConfig.type === LayoutConstants.CARD_TYPES.BAR ? /*#__PURE__*/React__default["default"].createElement("div", {
             className: "".concat(baseClassName, "--data-item-list--item-color-icon"),
             style: {
@@ -453,7 +459,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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DataSeriesFormItemModal, {
     cardConfig: cardConfig,
     isSummaryDashboard: isSummaryDashboard,
@@ -468,6 +474,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
     dataSection: dataSection,
     onChange: _onChange,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     actions: actions,
     options: {
       hasColorDropdown: type === LayoutConstants.CARD_TYPES.TIMESERIES || type === LayoutConstants.CARD_TYPES.BAR,
@@ -780,6 +787,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/lib/components/CardEditor/CardEditForm/CommonCardEditFormFields.js

@@ -19,6 +19,7 @@ var PropTypes = require('prop-types');
 var LayoutConstants = require('../../../constants/LayoutConstants.js');
 var Settings = require('../../../constants/Settings.js');
 var editorUtils = require('../../DashboardEditor/editorUtils.js');
+var cardUtilityFunctions = require('../../../utils/cardUtilityFunctions.js');
 var carbonComponentsReact = require('carbon-components-react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -87,6 +88,9 @@ var propTypes = {
     thisYearLabel: PropTypes__default["default"].string
   }),
 
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
+
   /** if provided, returns an array of strings which are the timeRanges to be allowed
    * on each card
    * getValidTimeRanges(card, selectedDataItems)
@@ -121,6 +125,7 @@ var defaultProps = {
     thisQuarterLabel: 'This quarter',
     thisYearLabel: 'This year'
   },
+  shouldUseTranslatedLabels: false,
   selectedDataItems: [],
   getValidTimeRanges: null,
   currentBreakpoint: 'xl',
@@ -146,6 +151,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,
@@ -178,7 +184,7 @@ var CommonCardEditFormFields = function CommonCardEditFormFields(_ref) {
         title: evt.target.value
       }));
     },
-    value: title
+    value: cardUtilityFunctions.getTranslatedLabel(title, shouldUseTranslatedLabels, mergedI18n)
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(baseClassName, "--input")
   }, /*#__PURE__*/React__default["default"].createElement(carbonComponentsReact.TextArea, {
@@ -190,7 +196,7 @@ var CommonCardEditFormFields = function CommonCardEditFormFields(_ref) {
         description: evt.target.value
       }));
     },
-    value: description
+    value: cardUtilityFunctions.getTranslatedLabel(description, shouldUseTranslatedLabels, mergedI18n)
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(baseClassName, "--input")
   }, /*#__PURE__*/React__default["default"].createElement(carbonComponentsReact.Dropdown, {
@@ -473,6 +479,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/lib/components/CardEditor/CardEditor.js

@@ -167,6 +167,9 @@ var propTypes = {
     searchPlaceHolderText: PropTypes__default["default"].string,
     editDataItems: PropTypes__default["default"].string
   }),
+
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes__default["default"].bool,
   currentBreakpoint: PropTypes__default["default"].string,
   isSummaryDashboard: PropTypes__default["default"].bool,
 
@@ -202,6 +205,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,
@@ -367,6 +371,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,
@@ -435,6 +440,7 @@ var CardEditor = function CardEditor(_ref) {
     getValidTimeRanges: getValidTimeRanges,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -601,6 +607,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",