carbon-addons-iot-react 2.149.0-next.32 → 2.149.0-next.35

package/es/index.js

@@ -53,6 +53,7 @@ export { default as suiteHeaderData } from './components/SuiteHeader/util/suiteH
 export { default as useUiResources } from './components/SuiteHeader/hooks/useUiResources.js';
 export { default as uiresources } from './components/SuiteHeader/util/uiresources.js';
 export { default as Walkme } from './components/Walkme/Walkme.js';
+export { default as ReadOnlyValue } from './components/ReadOnlyValue/ReadOnlyValue.js';
 export { default as Dashboard } from './components/Dashboard/Dashboard.js';
 export { default as DashboardHeader } from './components/Dashboard/DashboardHeader.js';
 export { default as DashboardGrid } from './components/Dashboard/DashboardGrid.js';
@@ -68,6 +69,7 @@ export { default as ImageCard } from './components/ImageCard/ImageCard.js';
 export { default as TableCard } from './components/TableCard/TableCard.js';
 export { default as GaugeCard } from './components/GaugeCard/GaugeCard.js';
 export { DragAndDrop } from './utils/DragAndDropUtils.js';
+export { default as ValueContent } from './components/ValueCard/ValueContent.js';
 export { default as ListCard } from './components/ListCard/ListCard.js';
 export { default as PageWizard } from './components/PageWizard/PageWizard.js';
 export { default as PageWizardStep } from './components/PageWizard/PageWizardStep/PageWizardStep.js';

package/lib/components/Card/DataStateRenderer.js

@@ -35,7 +35,7 @@ var TooltipContent = function TooltipContent(_ref) {
   }, label), /*#__PURE__*/React__default['default'].createElement("p", null, description), extraTooltipText && /*#__PURE__*/React__default['default'].createElement("p", null, extraTooltipText), learnMoreElement);
 };
 TooltipContent.propTypes = {
-  tooltipContent: CardPropTypes.ValueCardPropTypes.dataState.isRequired
+  tooltipContent: CardPropTypes.ValueContentPropTypes.dataState.isRequired
 };
 
 var DataStateRenderer = function DataStateRenderer(_ref2) {
@@ -105,7 +105,7 @@ var DataStateRenderer = function DataStateRenderer(_ref2) {
 DataStateRenderer.propTypes = {
   size: CardPropTypes.CardPropTypes.size,
   id: CardPropTypes.CardPropTypes.id,
-  dataState: CardPropTypes.ValueCardPropTypes.dataState.isRequired
+  dataState: CardPropTypes.ValueContentPropTypes.dataState.isRequired
 };
 DataStateRenderer.defaultProps = {
   size: LayoutConstants.CARD_SIZES.MEDIUM,
@@ -143,7 +143,7 @@ DataStateRenderer.__docgenInfo = {
     "dataState": {
       "type": {
         "name": "custom",
-        "raw": "ValueCardPropTypes.dataState.isRequired"
+        "raw": "ValueContentPropTypes.dataState.isRequired"
       },
       "required": false,
       "description": ""
@@ -158,7 +158,7 @@ TooltipContent.__docgenInfo = {
     "tooltipContent": {
       "type": {
         "name": "custom",
-        "raw": "ValueCardPropTypes.dataState.isRequired"
+        "raw": "ValueContentPropTypes.dataState.isRequired"
       },
       "required": false,
       "description": ""

package/lib/components/ReadOnlyValue/ReadOnlyValue.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var PropTypes = require('prop-types');
+var classnames = require('classnames');
+var Settings = require('../../constants/Settings.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+var iotPrefix = Settings.settings.iotPrefix;
+var propTypes = {
+  type: PropTypes__default['default'].oneOf(['stacked', 'inline', 'inline_small']),
+  label: PropTypes__default['default'].string,
+  value: PropTypes__default['default'].string,
+  testId: PropTypes__default['default'].string
+};
+var defaultProps = {
+  type: 'stacked',
+  label: '',
+  value: '',
+  testId: 'read-only-value'
+};
+
+var ReadOnlyValue = function ReadOnlyValue(_ref) {
+  var _classnames;
+
+  var type = _ref.type,
+      label = _ref.label,
+      value = _ref.value,
+      className = _ref.className,
+      testId = _ref.testId;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    "data-testid": testId,
+    className: classnames__default['default'](className, "".concat(iotPrefix, "--read-only-value"), (_classnames = {}, _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--read-only-value__inline"), type === 'inline' || type === 'inline_small'), _defineProperty__default['default'](_classnames, "".concat(iotPrefix, "--read-only-value__inline_small"), type === 'inline_small'), _classnames))
+  }, /*#__PURE__*/React__default['default'].createElement("label", {
+    "data-testid": "".concat(testId, "--label"),
+    htmlFor: "readonly-".concat(label)
+  }, label, /*#__PURE__*/React__default['default'].createElement("textarea", {
+    "data-testid": "".concat(testId, "--value"),
+    type: "text",
+    id: "readonly-".concat(label),
+    name: value,
+    value: value,
+    readOnly: true
+  })));
+};
+
+ReadOnlyValue.propTypes = propTypes;
+ReadOnlyValue.defaultProps = defaultProps;
+ReadOnlyValue.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ReadOnlyValue",
+  "props": {
+    "type": {
+      "defaultValue": {
+        "value": "'stacked'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'stacked'",
+          "computed": false
+        }, {
+          "value": "'inline'",
+          "computed": false
+        }, {
+          "value": "'inline_small'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "label": {
+      "defaultValue": {
+        "value": "''",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "value": {
+      "defaultValue": {
+        "value": "''",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "testId": {
+      "defaultValue": {
+        "value": "'read-only-value'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
+module.exports = ReadOnlyValue;

package/lib/components/ValueCard/Attribute.js

@@ -15,6 +15,7 @@ var useMatchingThreshold = require('../../hooks/useMatchingThreshold.js');
 var ValueRenderer = require('./ValueRenderer.js');
 var UnitRenderer = require('./UnitRenderer.js');
 var valueCardUtils = require('./valueCardUtils.js');
+var carbonComponentsReact = require('carbon-components-react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -28,6 +29,7 @@ var propTypes = {
     label: PropTypes__default['default'].string,
     unit: PropTypes__default['default'].string,
     dataSourceId: PropTypes__default['default'].string,
+    measurementUnitLabel: PropTypes__default['default'].string,
     // decimal precision
     precision: PropTypes__default['default'].number,
     thresholds: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
@@ -47,7 +49,9 @@ var propTypes = {
   secondaryValue: PropTypes__default['default'].shape({
     color: PropTypes__default['default'].string,
     trend: PropTypes__default['default'].oneOf(['up', 'down']),
-    value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].bool, PropTypes__default['default'].number])
+    value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].bool, PropTypes__default['default'].number]),
+    href: PropTypes__default['default'].string,
+    onClick: PropTypes__default['default'].func
   }),
   value: PropTypes__default['default'].oneOfType([PropTypes__default['default'].string, PropTypes__default['default'].bool, PropTypes__default['default'].number]),
   fontSize: PropTypes__default['default'].number.isRequired,
@@ -88,6 +92,7 @@ var Attribute = function Attribute(_ref) {
       thresholds = _ref$attribute.thresholds,
       precision = _ref$attribute.precision,
       dataSourceId = _ref$attribute.dataSourceId,
+      measurementUnitLabel = _ref$attribute.measurementUnitLabel,
       attributeCount = _ref.attributeCount,
       customFormatter = _ref.customFormatter,
       isEditable = _ref.isEditable,
@@ -140,6 +145,7 @@ var Attribute = function Attribute(_ref) {
     isNumberValueCompact: isNumberValueCompact,
     testId: "".concat(testId, "-value"),
     dataSourceId: dataSourceId,
+    measurementUnitLabel: measurementUnitLabel,
     onClick: onValueClick
   }), /*#__PURE__*/React__default['default'].createElement(UnitRenderer, {
     unit: unit,
@@ -150,7 +156,7 @@ var Attribute = function Attribute(_ref) {
     style: {
       '--secondary-value-color': colors.gray60
     }
-  }, secondaryValue.trend && secondaryValue.trend === 'up' ? /*#__PURE__*/React__default['default'].createElement(iconsReact.CaretUp16, {
+  }, secondaryValue.trend === 'up' ? /*#__PURE__*/React__default['default'].createElement(iconsReact.CaretUp16, {
     className: "".concat(BEM_BASE, "_trend-icon"),
     "aria-label": "trending up",
     "data-testid": "".concat(testId, "-trending-up"),
@@ -160,7 +166,18 @@ var Attribute = function Attribute(_ref) {
     "aria-label": "trending down",
     "data-testid": "".concat(testId, "-trending-down"),
     fill: secondaryValue.color || colors.gray60
-  }) : null, secondaryValue.value) : null));
+  }) : null, secondaryValue.href || secondaryValue.onClick ? /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.Link, {
+    "data-testid": "".concat(testId, "-secondary-value--link"),
+    className: "".concat(BEM_BASE, "-secondary-value--link"),
+    href: secondaryValue === null || secondaryValue === void 0 ? void 0 : secondaryValue.href,
+    rel: "noopener noreferrer",
+    onClick: function onClick() {
+      return secondaryValue === null || secondaryValue === void 0 ? void 0 : secondaryValue.onClick({
+        dataSourceId: dataSourceId,
+        secondaryValue: secondaryValue
+      });
+    }
+  }, secondaryValue.value) : secondaryValue.value) : null));
 };
 
 Attribute.propTypes = propTypes;
@@ -245,6 +262,14 @@ Attribute.__docgenInfo = {
               "name": "number"
             }],
             "required": false
+          },
+          "href": {
+            "name": "string",
+            "required": false
+          },
+          "onClick": {
+            "name": "func",
+            "required": false
           }
         }
       },
@@ -322,6 +347,10 @@ Attribute.__docgenInfo = {
             "name": "string",
             "required": false
           },
+          "measurementUnitLabel": {
+            "name": "string",
+            "required": false
+          },
           "precision": {
             "name": "number",
             "required": false

package/lib/components/ValueCard/ValueCard.js

@@ -1,11 +1,5 @@
 'use strict';
 
-require('core-js/modules/es.object.keys.js');
-require('core-js/modules/es.symbol.js');
-require('core-js/modules/es.array.filter.js');
-require('core-js/modules/es.object.get-own-property-descriptor.js');
-require('core-js/modules/web.dom-collections.for-each.js');
-require('core-js/modules/es.object.get-own-property-descriptors.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -13,17 +7,20 @@ var isEmpty = require('../../node_modules/lodash-es/isEmpty.js');
 require('core-js/modules/es.array.iterator.js');
 require('core-js/modules/es.object.to-string.js');
 require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/es.array.map.js');
-require('core-js/modules/es.array.concat.js');
+require('core-js/modules/es.object.keys.js');
+require('core-js/modules/es.symbol.js');
+require('core-js/modules/es.array.filter.js');
+require('core-js/modules/es.object.get-own-property-descriptor.js');
+require('core-js/modules/web.dom-collections.for-each.js');
+require('core-js/modules/es.object.get-own-property-descriptors.js');
 var React = require('react');
 var classnames = require('classnames');
 var CardPropTypes = require('../../constants/CardPropTypes.js');
 var LayoutConstants = require('../../constants/LayoutConstants.js');
 var Card = require('../Card/Card.js');
 var cardUtilityFunctions = require('../../utils/cardUtilityFunctions.js');
-var DataStateRenderer = require('../Card/DataStateRenderer.js');
 var valueCardUtils = require('./valueCardUtils.js');
-var Attribute = require('./Attribute.js');
+var ValueContent = require('./ValueContent.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -80,7 +77,6 @@ var ValueCard = function ValueCard(_ref) {
       values = _handleCardVariables.values;
 
   var layout = valueCardUtils.determineLayout(newSize);
-  var attributeCount = content.attributes.length;
   return /*#__PURE__*/React__default['default'].createElement(Card['default'], _extends__default['default']({
     title: title,
     size: newSize,
@@ -95,41 +91,25 @@ var ValueCard = function ValueCard(_ref) {
     className: classnames__default['default']((_classnames = {}, _defineProperty__default['default'](_classnames, "".concat(valueCardUtils.BASE_CLASS_NAME, "__horizontal"), layout === LayoutConstants.CARD_LAYOUTS.HORIZONTAL), _defineProperty__default['default'](_classnames, "".concat(valueCardUtils.BASE_CLASS_NAME, "__vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL), _classnames)) // TODO: remove deprecated 'testID' in v3.
     ,
     testId: testID || testId
-  }, others), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classnames__default['default']("".concat(valueCardUtils.BASE_CLASS_NAME, "__content-wrapper"), _defineProperty__default['default']({}, "".concat(valueCardUtils.BASE_CLASS_NAME, "__content-wrapper--vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL))
-  }, !dataState ? content.attributes.map(function (attribute, index) {
-    return /*#__PURE__*/React__default['default'].createElement(Attribute, {
-      key: "fragment-".concat(attribute.dataSourceId, "-").concat(JSON.stringify(attribute.dataFilter || {})),
-      attribute: attribute,
-      attributeCount: attributeCount,
-      layout: layout,
-      locale: locale,
-      isEditable: isEditable,
-      title: title,
-      renderIconByName: others.renderIconByName,
-      value: // When the card is in the editable state, we will show a preview
-      isEditable ? valueCardUtils.PREVIEW_DATA : valueCardUtils.determineValue(attribute.dataSourceId, values, attribute.dataFilter),
-      secondaryValue: attribute.secondaryValue && _objectSpread(_objectSpread({}, attribute.secondaryValue), {}, {
-        // When the card is in the editable state, we will show a preview
-        value: isEditable ? valueCardUtils.PREVIEW_DATA : valueCardUtils.determineValue(attribute.secondaryValue.dataSourceId, values)
-      }),
-      customFormatter: customFormatter,
-      fontSize: fontSize,
-      isNumberValueCompact: isNumberValueCompact // TODO: remove deprecated 'testID' in v3.
-      ,
-      testId: "".concat(testID || testId, "-attribute-").concat(index),
-      onValueClick: onAttributeClick
-    });
-  }) : /*#__PURE__*/React__default['default'].createElement(DataStateRenderer['default'], {
+  }, others), /*#__PURE__*/React__default['default'].createElement(ValueContent, _extends__default['default']({
+    id: id,
+    layout: layout,
     dataState: dataState,
+    content: content,
+    locale: locale,
+    title: title,
+    customFormatter: customFormatter,
+    testId: testID || testId,
+    onAttributeClick: onAttributeClick,
     size: newSize,
-    id: id // TODO: remove deprecated 'testID' in v3.
-    ,
-    testId: "".concat(testID || testId, "-data-state")
-  })), resizeHandles);
+    values: values,
+    isEditable: isEditable,
+    fontSize: fontSize,
+    isNumberValueCompact: isNumberValueCompact
+  }, others)), resizeHandles);
 };
 
-ValueCard.propTypes = _objectSpread(_objectSpread({}, CardPropTypes.CardPropTypes), CardPropTypes.ValueCardPropTypes);
+ValueCard.propTypes = _objectSpread(_objectSpread({}, CardPropTypes.CardPropTypes), CardPropTypes.ValueContentPropTypes);
 ValueCard.defaultProps = {
   size: LayoutConstants.CARD_SIZES.MEDIUM,
   locale: 'en',

package/lib/components/ValueCard/ValueContent.js

@@ -0,0 +1,240 @@
+'use strict';
+
+require('core-js/modules/es.object.keys.js');
+require('core-js/modules/es.symbol.js');
+require('core-js/modules/es.array.filter.js');
+require('core-js/modules/es.object.get-own-property-descriptor.js');
+require('core-js/modules/web.dom-collections.for-each.js');
+require('core-js/modules/es.object.get-own-property-descriptors.js');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/es.array.iterator.js');
+require('core-js/modules/es.object.to-string.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/es.array.map.js');
+require('core-js/modules/es.array.concat.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var classnames = require('classnames');
+var LayoutConstants = require('../../constants/LayoutConstants.js');
+var CardPropTypes = require('../../constants/CardPropTypes.js');
+var DataStateRenderer = require('../Card/DataStateRenderer.js');
+var valueCardUtils = require('./valueCardUtils.js');
+var Attribute = require('./Attribute.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var propTypes = _objectSpread({
+  id: PropTypes__default['default'].string,
+  title: PropTypes__default['default'].string,
+  layout: PropTypes__default['default'].oneOf(['HORIZONTAL', 'VERTICAL']),
+  locale: PropTypes__default['default'].string,
+  isEditable: PropTypes__default['default'].bool
+}, CardPropTypes.ValueContentPropTypes);
+
+var defaultProps = {
+  id: 'valueContent-id',
+  title: '',
+  layout: 'VERTICAL',
+  locale: 'en',
+  isEditable: false,
+  dataState: null,
+  values: null,
+  fontSize: valueCardUtils.DEFAULT_FONT_SIZE,
+  customFormatter: null,
+  isNumberValueCompact: false,
+  testId: 'ValueContent',
+  onAttributeClick: null,
+  size: LayoutConstants.CARD_SIZES.MEDIUM
+};
+
+var ValueContent = function ValueContent(_ref) {
+  var id = _ref.id,
+      title = _ref.title,
+      content = _ref.content,
+      values = _ref.values,
+      layout = _ref.layout,
+      dataState = _ref.dataState,
+      locale = _ref.locale,
+      isEditable = _ref.isEditable,
+      customFormatter = _ref.customFormatter,
+      fontSize = _ref.fontSize,
+      isNumberValueCompact = _ref.isNumberValueCompact,
+      testId = _ref.testId,
+      onAttributeClick = _ref.onAttributeClick,
+      size = _ref.size,
+      others = _objectWithoutProperties__default['default'](_ref, ["id", "title", "content", "values", "layout", "dataState", "locale", "isEditable", "customFormatter", "fontSize", "isNumberValueCompact", "testId", "onAttributeClick", "size"]);
+
+  var attributeCount = content.attributes.length;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: classnames__default['default']("".concat(valueCardUtils.BASE_CLASS_NAME, "__content-wrapper"), _defineProperty__default['default']({}, "".concat(valueCardUtils.BASE_CLASS_NAME, "__content-wrapper--vertical"), layout === LayoutConstants.CARD_LAYOUTS.VERTICAL))
+  }, !dataState ? content.attributes.map(function (attribute, index) {
+    return /*#__PURE__*/React__default['default'].createElement(Attribute, {
+      key: "fragment-".concat(attribute.dataSourceId, "-").concat(JSON.stringify(attribute.dataFilter || {})),
+      attribute: attribute,
+      attributeCount: attributeCount,
+      layout: layout,
+      locale: locale,
+      isEditable: isEditable,
+      title: title,
+      renderIconByName: others.renderIconByName,
+      value: // When the card is in the editable state, we will show a preview
+      isEditable ? valueCardUtils.PREVIEW_DATA : valueCardUtils.determineValue(attribute.dataSourceId, values, attribute.dataFilter),
+      secondaryValue: attribute.secondaryValue && _objectSpread(_objectSpread({}, attribute.secondaryValue), {}, {
+        // When the card is in the editable state, we will show a preview
+        value: isEditable ? valueCardUtils.PREVIEW_DATA : valueCardUtils.determineValue(attribute.secondaryValue.dataSourceId, values)
+      }),
+      customFormatter: customFormatter,
+      fontSize: fontSize,
+      isNumberValueCompact: isNumberValueCompact,
+      testId: "".concat(testId, "-attribute-").concat(index),
+      onValueClick: onAttributeClick
+    });
+  }) : /*#__PURE__*/React__default['default'].createElement(DataStateRenderer['default'], {
+    dataState: dataState,
+    size: size,
+    id: id,
+    testId: "".concat(testId, "-data-state")
+  }));
+};
+
+ValueContent.propTypes = propTypes;
+ValueContent.defaultProps = defaultProps;
+ValueContent.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ValueContent",
+  "props": {
+    "id": {
+      "defaultValue": {
+        "value": "'valueContent-id'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "title": {
+      "defaultValue": {
+        "value": "''",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "layout": {
+      "defaultValue": {
+        "value": "'VERTICAL'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "'HORIZONTAL'",
+          "computed": false
+        }, {
+          "value": "'VERTICAL'",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "locale": {
+      "defaultValue": {
+        "value": "'en'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isEditable": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "dataState": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "values": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "fontSize": {
+      "defaultValue": {
+        "value": "DEFAULT_FONT_SIZE",
+        "computed": true
+      },
+      "required": false
+    },
+    "customFormatter": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "isNumberValueCompact": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "required": false
+    },
+    "testId": {
+      "defaultValue": {
+        "value": "'ValueContent'",
+        "computed": false
+      },
+      "required": false
+    },
+    "onAttributeClick": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "required": false
+    },
+    "size": {
+      "defaultValue": {
+        "value": "CARD_SIZES.MEDIUM",
+        "computed": true
+      },
+      "required": false
+    }
+  },
+  "composes": ["../../constants/CardPropTypes"]
+};
+
+module.exports = ValueContent;