carbon-addons-iot-react 5.9.2 → 5.10.1

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';
@@ -36,7 +36,7 @@ import CardToolbar from './CardToolbar.js';
 import { CardTitle } from './CardTitle.js';
 
 var _excluded = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
-  _excluded2 = ["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", "extraHeaderContent"];
+  _excluded2 = ["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", "extraHeaderContent", "shouldUseTranslatedLabels"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var prefix = settings.prefix,
@@ -252,7 +252,8 @@ var defaultProps = {
   overrides: undefined,
   type: null,
   data: null,
-  content: null
+  content: null,
+  shouldUseTranslatedLabels: false
 };
 
 /** Dumb component that renders the card basics */
@@ -260,7 +261,7 @@ var Card = function Card(props) {
   var _overrides$errorMessa, _overrides$errorMessa2, _overrides$errorMessa3;
   var size = props.size,
     children = props.children,
-    title = props.title,
+    titleProp = props.title,
     subtitleProp = props.subtitle,
     hasTitleWrap = props.hasTitleWrap;
     props.layout;
@@ -274,7 +275,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,
@@ -299,8 +300,13 @@ var Card = function Card(props) {
     data = props.data,
     content = props.content,
     extraHeaderContent = props.extraHeaderContent,
+    shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
     others = _objectWithoutProperties(props, _excluded2);
 
+  // Get translated title if shouldUseTranslatedLabels is true
+  var title = getTranslatedLabel(titleProp, shouldUseTranslatedLabels, i18n);
+  var tooltip = getTranslatedLabel(tooltipProp, 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') {
@@ -788,6 +794,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

@@ -51,6 +51,8 @@ var propTypes = {
     modalHelpText: PropTypes.string,
     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)
@@ -112,6 +114,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: [],
@@ -133,6 +136,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);
@@ -149,6 +153,7 @@ var CardEditForm = function CardEditForm(_ref) {
     onChange: onChange,
     isSummaryDashboard: isSummaryDashboard,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     dataItems: dataItems,
     availableDimensions: availableDimensions,
     getValidDataItems: getValidDataItems,
@@ -296,6 +301,17 @@ CardEditForm.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "getValidDataItems": {
       "defaultValue": {
         "value": "null",

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

@@ -78,6 +78,8 @@ var propTypes = {
     thisQuarterLabel: PropTypes.string,
     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)
@@ -114,6 +116,7 @@ var propTypes = {
 var defaultProps = {
   cardConfig: {},
   i18n: {},
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   getValidTimeRanges: null,
   dataItems: [],
@@ -143,6 +146,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,
@@ -177,6 +181,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     ,
     onChange: onChange,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     getValidTimeRanges: getValidTimeRanges,
     currentBreakpoint: currentBreakpoint,
     selectedDataItems: selectedDataItems,
@@ -223,6 +228,7 @@ var CardEditFormContent = function CardEditFormContent(_ref) {
     getValidDataItems: getValidDataItems,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     dataSeriesItemLinks: dataSeriesItemLinks,
     translateWithId: handleTranslation,
     actions: actions
@@ -461,6 +467,17 @@ CardEditFormContent.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "getValidDataItems": {
       "defaultValue": {
         "value": "null",

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

@@ -25,7 +25,7 @@ import { settings } from '../../../../constants/Settings.js';
 import { DataItemsPropTypes, DashboardEditorActionsPropTypes, defaultDashboardEditorActionsProps, handleDefaultDataItemEdit } from '../../../DashboardEditor/editorUtils.js';
 import ColorDropdown from '../../../ColorDropdown/ColorDropdown.js';
 import { CARD_TYPES } from '../../../../constants/LayoutConstants.js';
-import { isTimeBasedCard } from '../../../../utils/cardUtilityFunctions.js';
+import { isTimeBasedCard, getTranslatedLabel } from '../../../../utils/cardUtilityFunctions.js';
 import ThresholdsFormItem from './ThresholdsFormItem.js';
 import ComposedModal from '../../../ComposedModal/ComposedModal.js';
 import { WarningAlt } from '@carbon/icons-react';
@@ -127,6 +127,8 @@ var propTypes = {
     primaryButtonLabelText: PropTypes.string,
     secondaryButtonLabelText: PropTypes.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
   actions: DashboardEditorActionsPropTypes,
   /**
    * Used to override the default behaviour of handleDataItemEdit. if we dont pass any function then it uses handleDefaultDataItemEdit function by default
@@ -180,6 +182,7 @@ var defaultProps = {
     secondaryButtonLabelText: 'Cancel',
     decimalPlacesLabel: 'Decimal places'
   },
+  shouldUseTranslatedLabels: false,
   editDataSeries: [],
   showEditor: false,
   setShowEditor: null,
@@ -250,6 +253,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
     availableDimensions = _ref.availableDimensions,
     onChange = _ref.onChange,
     i18n = _ref.i18n,
+    shouldUseTranslatedLabels = _ref.shouldUseTranslatedLabels,
     isLarge = _ref.isLarge,
     _ref$actions$dataSeri = _ref.actions.dataSeriesFormActions,
     hasAggregationsDropDown = _ref$actions$dataSeri.hasAggregationsDropDown,
@@ -406,7 +410,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__*/
@@ -453,7 +457,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
           unit: evt.target.value
         }));
       },
-      value: editDataItem.unit
+      value: getTranslatedLabel(editDataItem.unit, shouldUseTranslatedLabels, i18n)
     })), /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(baseClassName, "--input-group--item")
     }, hasDecimalPlacesDropdown && /*#__PURE__*/React__default.createElement(Dropdown, {
@@ -551,7 +555,7 @@ var DataSeriesFormItemModal = function DataSeriesFormItemModal(_ref) {
       },
       columnType: editDataItem.columnType || editDataItem.type
     }));
-  }, [availableDimensions, availableDimensionsItems, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, type]);
+  }, [availableDimensions, availableDimensionsItems, availableGrains, baseClassName, cardConfig, editDataItem, handleTranslation, hasAggregationsDropDown, hasColorDropdown, hasDataFilterDropdown, hasDecimalPlacesDropdown, hasGrainsDropDown, hasThresholds, hasTooltip, hasUnit, i18n, id, initialAggregation, initialGrain, isSummaryDashboard, isTimeBasedCard$1, mergedI18n, selectedDimensionFilter, setEditDataItem, shouldUseTranslatedLabels, 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, {
@@ -781,6 +785,17 @@ DataSeriesFormItemModal.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "editDataSeries": {
       "defaultValue": {
         "value": "[]",

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

@@ -30,6 +30,7 @@ import DataSeriesFormItemModal from '../DataSeriesFormItemModal.js';
 import { BAR_CHART_TYPES, CARD_TYPES } from '../../../../../constants/LayoutConstants.js';
 import ContentFormItemTitle from '../ContentFormItemTitle.js';
 import HierarchyDataFormItems, { isHierarchyDataItem } from '../HierarchyDataFormItems/HierarchyDataFormItems.js';
+import { getTranslatedLabel } from '../../../../../utils/cardUtilityFunctions.js';
 import BarChartDataSeriesContent from './BarChartDataSeriesContent.js';
 import { Edit, MisuseOutline } from '@carbon/icons-react';
 
@@ -117,6 +118,8 @@ var propTypes = {
     incrementNumberText: PropTypes.string,
     decrementNumberText: PropTypes.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
   translateWithId: PropTypes.func.isRequired,
   actions: DashboardEditorActionsPropTypes
 };
@@ -150,6 +153,7 @@ var defaultProps = {
     incrementNumberText: 'Increment number',
     decrementNumberText: 'Decrement number'
   },
+  shouldUseTranslatedLabels: false,
   getValidDataItems: null,
   dataItems: [],
   selectedDataItems: [],
@@ -237,6 +241,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;
@@ -382,7 +387,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: {
@@ -419,7 +424,7 @@ var DataSeriesFormItem = function DataSeriesFormItem(_ref2) {
         }
       };
     })) || [];
-  }, [cardConfig.type, handleEditButton, handleRemoveButton, mergedI18n.edit, mergedI18n.remove]);
+  }, [cardConfig.type, handleEditButton, handleRemoveButton, i18n, mergedI18n.edit, mergedI18n.remove, shouldUseTranslatedLabels]);
   var dataItemListItems = useMemo(function () {
     return generateListItems(dataSection);
   }, [dataSection, generateListItems]);
@@ -440,6 +445,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,
@@ -761,6 +767,17 @@ DataSeriesFormItem.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "getValidDataItems": {
       "defaultValue": {
         "value": "null",

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

@@ -17,6 +17,7 @@ import { TextInput, TextArea, Dropdown } from '@carbon/react';
 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';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -75,6 +76,8 @@ var propTypes = {
     thisQuarterLabel: PropTypes.string,
     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)
@@ -108,6 +111,7 @@ var defaultProps = {
     thisQuarterLabel: 'This quarter',
     thisYearLabel: 'This year'
   },
+  shouldUseTranslatedLabels: false,
   selectedDataItems: [],
   getValidTimeRanges: null,
   currentBreakpoint: 'xl',
@@ -131,6 +135,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,
@@ -161,7 +166,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, {
@@ -173,7 +178,7 @@ var CommonCardEditFormFields = function CommonCardEditFormFields(_ref) {
         description: evt.target.value
       }));
     },
-    value: description
+    value: getTranslatedLabel(description, shouldUseTranslatedLabels, mergedI18n)
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(baseClassName, "--input")
   }, /*#__PURE__*/React__default.createElement(Dropdown, {
@@ -454,6 +459,17 @@ CommonCardEditFormFields.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "selectedDataItems": {
       "defaultValue": {
         "value": "[]",

package/es/components/CardEditor/CardEditor.js

@@ -136,6 +136,8 @@ var propTypes = {
     searchPlaceHolderText: PropTypes.string,
     editDataItems: PropTypes.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
   currentBreakpoint: PropTypes.string,
   isSummaryDashboard: PropTypes.bool,
   /** Id that can be used for testing */
@@ -169,6 +171,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,
@@ -314,6 +317,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,
@@ -379,6 +383,7 @@ var CardEditor = function CardEditor(_ref) {
     getValidTimeRanges: getValidTimeRanges,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -544,6 +549,17 @@ CardEditor.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "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, defaultDashboardEditorActionsProps } from './editorUtils.js';
@@ -291,6 +292,8 @@ var propTypes = {
     abbreviateNumbersTooltip: PropTypes.string,
     editDataItems: PropTypes.string
   }),
+  /** whether to use translated labels in cards */
+  shouldUseTranslatedLabels: PropTypes.bool,
   /** locale data */
   locale: PropTypes.string,
   /** optional link href's for each card type that will appear in a tooltip */
@@ -381,6 +384,7 @@ var defaultProps = {
     saveTitleButton: 'Save title',
     editDataItems: 'Edit data items'
   },
+  shouldUseTranslatedLabels: false,
   locale: 'en',
   dataSeriesItemLinks: null,
   onFetchDynamicDemoHotspots: function onFetchDynamicDemoHotspots() {
@@ -450,6 +454,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,
@@ -706,7 +711,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() {
@@ -790,6 +795,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
       key: cardConfig.id,
       isResizable: isCardResizable,
       i18n: mergedI18n,
+      shouldUseTranslatedLabels: shouldUseTranslatedLabels,
       isSelected: isSelected,
       availableDimensions: availableDimensions,
       onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -834,6 +840,7 @@ var DashboardEditor = function DashboardEditor(_ref) {
     getValidDimensions: getValidDimensions,
     availableDimensions: availableDimensions,
     i18n: mergedI18n,
+    shouldUseTranslatedLabels: shouldUseTranslatedLabels,
     currentBreakpoint: currentBreakpoint,
     dataSeriesItemLinks: dataSeriesItemLinks,
     onFetchDynamicDemoHotspots: onFetchDynamicDemoHotspots,
@@ -1756,6 +1763,17 @@ DashboardEditor.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "locale": {
       "defaultValue": {
         "value": "'en'",

package/es/components/DashboardEditor/DashboardEditorCardRenderer.js

@@ -26,7 +26,7 @@ import { handleKeyDown, handleOnClick } from './editorUtils.js';
 import DashboardEditorDefaultCardRenderer from './DashboardEditorDefaultCardRenderer.js';
 
 var _excluded = ["style", "children"],
-  _excluded2 = ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style"];
+  _excluded2 = ["isSelected", "availableDimensions", "i18n", "onRemove", "onDuplicate", "onCardChange", "setSelectedCardId", "renderIconByName", "onShowImageGallery", "onValidateUploadedImage", "baseClassName", "renderCardPreview", "style", "shouldUseTranslatedLabels"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
@@ -98,6 +98,7 @@ var DashboardEditorCardRenderer = /*#__PURE__*/React__default.memo(function (_re
     baseClassName = _ref2.baseClassName,
     renderCardPreview = _ref2.renderCardPreview,
     style = _ref2.style,
+    shouldUseTranslatedLabels = _ref2.shouldUseTranslatedLabels,
     cardConfig = _objectWithoutProperties(_ref2, _excluded2);
   // We have to keep track of our dynamic hotspots here
   var _useState5 = useState([]),
@@ -131,6 +132,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,
@@ -143,7 +145,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;
     var originalDynamicHotspot = (_cardProps$values = cardProps.values) === null || _cardProps$values === void 0 || (_cardProps$values = _cardProps$values.hotspots) === null || _cardProps$values === void 0 ? void 0 : _cardProps$values.find(function (hotspot) {

package/es/components/ValueCard/Attribute.js

@@ -11,6 +11,7 @@ import { CARD_LAYOUTS } from '../../constants/LayoutConstants.js';
 import CardIcon from '../ImageCard/CardIcon.js';
 import useMatchingThreshold from '../../hooks/useMatchingThreshold.js';
 import { Tooltip } from '../Tooltip/index.js';
+import { getTranslatedLabel } from '../../utils/cardUtilityFunctions.js';
 import ValueRenderer from './ValueRenderer.js';
 import UnitRenderer from './UnitRenderer.js';
 import { BASE_CLASS_NAME } from './valueCardUtils.js';
@@ -39,6 +40,9 @@ 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 */
   secondaryValue: PropTypes.shape({
@@ -67,6 +71,8 @@ var defaultProps = {
   customFormatter: null,
   formatter: null,
   isEditable: false,
+  shouldUseTranslatedLabels: false,
+  i18n: {},
   testId: 'attribute',
   onValueClick: null
 };
@@ -93,6 +99,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,
@@ -112,6 +120,10 @@ var Attribute = function Attribute(_ref) {
   // need to reduce the width size to fit multiple attributes when card layout is horizontal
   var attributeWidthPercentage = layout === CARD_LAYOUTS.HORIZONTAL ? 100 / attributeCount : 100;
 
+  // Get translated label if shouldUseTranslatedLabels is true
+  var displayLabel = getTranslatedLabel(label, shouldUseTranslatedLabels, i18n);
+  var displayUnitLabel = getTranslatedLabel(unit, shouldUseTranslatedLabels, i18n);
+
   // Render threshold icon component
   var renderThresholdIcon = function renderThresholdIcon() {
     if (!(matchingThreshold !== null && matchingThreshold !== void 0 && matchingThreshold.icon)) return null;
@@ -137,10 +149,10 @@ var Attribute = function Attribute(_ref) {
   }, thresholdsIconPosition === 'label' && renderThresholdIcon(), tooltip ? /*#__PURE__*/React__default.createElement(Tooltip, {
     direction: "right",
     showIcon: false,
-    triggerText: label
+    triggerText: displayLabel
   }, /*#__PURE__*/React__default.createElement("p", null, tooltip)) : /*#__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,
@@ -160,7 +172,7 @@ var Attribute = function Attribute(_ref) {
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(BEM_BASE, "-unit-with-icon")
   }, thresholdsIconPosition === 'unit' && renderThresholdIcon(), /*#__PURE__*/React__default.createElement(UnitRenderer, {
-    unit: measurementUnitLabel || unit,
+    unit: measurementUnitLabel || displayUnitLabel,
     testId: "".concat(testId, "-unit")
   }))), !isNil(secondaryValue) ? /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "".concat(testId, "-secondary-value"),
@@ -331,6 +343,31 @@ Attribute.__docgenInfo = {
       },
       "required": false
     },
+    "shouldUseTranslatedLabels": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "whether to use translated labels in cards",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "i18n": {
+      "defaultValue": {
+        "value": "{}",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "objectOf",
+        "value": {
+          "name": "any"
+        }
+      },
+      "required": false
+    },
     "testId": {
       "defaultValue": {
         "value": "'attribute'",