@pingux/astro 2.17.0 → 2.18.0-alpha.0

package/lib/cjs/components/ListViewItem/controls/chart/ListViewItemChart.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAria = require("react-aria");
+var _recharts = require("recharts");
+var _useResizeObserver2 = _interopRequireDefault(require("use-resize-observer"));
+var _index = require("../../../../index");
+var _colors = require("../../../../styles/colors");
+var _ListViewItemChartAttributes = require("./ListViewItemChartAttributes");
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ListViewItemChart = function ListViewItemChart(props) {
+  var buttonProps = props.buttonProps,
+    chartData = props.chartData,
+    chartLabel = props.chartLabel,
+    containerRef = props.containerRef,
+    title = props.title,
+    tooltipText = props.tooltipText,
+    contentCount = props.contentCount,
+    contentCountLabel = props.contentCountLabel,
+    trend = props.trend,
+    chartDataKey = props.chartDataKey,
+    _props$tabletBreakPoi = props.tabletBreakPoint,
+    tabletBreakPoint = _props$tabletBreakPoi === void 0 ? 605 : _props$tabletBreakPoi,
+    _props$mobileBreakPoi = props.mobileBreakPoint,
+    mobileBreakPoint = _props$mobileBreakPoi === void 0 ? 350 : _props$mobileBreakPoi;
+  var _useResizeObserver = (0, _useResizeObserver2["default"])({
+      ref: containerRef
+    }),
+    width = _useResizeObserver.width;
+  var _useVisuallyHidden = (0, _reactAria.useVisuallyHidden)(),
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+  var isTablet = (0, _react.useMemo)(function () {
+    return width <= tabletBreakPoint;
+  }, [tabletBreakPoint, width]);
+  var isMobile = (0, _react.useMemo)(function () {
+    return width <= mobileBreakPoint;
+  }, [mobileBreakPoint, width]);
+  var hideIfTablet = (0, _react.useCallback)(function () {
+    return isTablet && visuallyHiddenProps;
+  }, [isTablet, visuallyHiddenProps]);
+  var hideIfMobile = (0, _react.useCallback)(function () {
+    return isMobile && visuallyHiddenProps;
+  }, [isMobile, visuallyHiddenProps]);
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center",
+    height: 0,
+    mr: "md"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "lisViewItemChart.titleContainer"
+  }, hideIfMobile()), (0, _react2.jsx)(_index.Text, {
+    variant: "variants.lisViewItemChart.title"
+  }, title)), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    variant: "lisViewItemChart.content"
+  }, hideIfTablet()), (0, _react2.jsx)(_index.Text, {
+    variant: "variants.lisViewItemChart.count"
+  }, contentCount), (0, _react2.jsx)(_index.Text, {
+    variant: "variants.lisViewItemChart.countLabel"
+  }, contentCountLabel)), (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    variant: "variants.lisViewItemChart.chartButton",
+    "aria-label": "line-chart button"
+  }, buttonProps, hideIfMobile()), (0, _react2.jsx)(_index.Box, {
+    variant: "lisViewItemChart.divider"
+  }), (0, _react2.jsx)(_index.Box, {
+    ml: "md"
+  }, (0, _react2.jsx)(_index.Box, {
+    variant: "lisViewItemChart.chartContainer"
+  }, (0, _react2.jsx)(_recharts.ResponsiveContainer, {
+    variant: "lisViewItemChart.responsiveContainer"
+  }, (0, _react2.jsx)(_recharts.LineChart, {
+    data: chartData,
+    variant: "lisViewItemChart.chart"
+  }, (0, _react2.jsx)(_recharts.Line, {
+    type: "monotone",
+    dataKey: chartDataKey,
+    dot: false,
+    stroke: _colors.neutral[20]
+  })))), (0, _react2.jsx)(_index.Text, {
+    variant: "variants.lisViewItemChart.chartLabel"
+  }, chartLabel)), (0, _react2.jsx)(_index.Box, {
+    size: "sm",
+    variant: "lisViewItemChart.trendContainer"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "variants.lisViewItemChart.trend"
+  }, trend))), (0, _react2.jsx)(_index.Tooltip, null, tooltipText)));
+};
+ListViewItemChart.propTypes = _ListViewItemChartAttributes.listViewItemChartPropTypes;
+ListViewItemChart.displayName = 'ListViewItemChart';
+var _default = ListViewItemChart;
+exports["default"] = _default;

package/lib/cjs/components/ListViewItem/controls/chart/ListViewItemChart.mdx

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Experimental/controls/ListViewItemChart" />
+
+# ListViewItemChart
+
+The ListViewItemChart allows easy creation of chart inside ListViewItem. Styles have been included to match Ping specs.
+
+### Recommended Use
+This component is intended to be used inside a ListViewItem component. See the [ListViewItem](./?path=/docs/experimental-listviewitem--docs)
+docs for a more detailed examples.

package/lib/cjs/components/ListViewItem/controls/chart/ListViewItemChart.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../../../.storybook/storybookDocsLayout"));
+var _index = require("../../../../index");
+var _chartData = require("./chartData");
+var _ListViewItemChart = _interopRequireDefault(require("./ListViewItemChart.mdx"));
+var _ListViewItemChartAttributes = require("./ListViewItemChartAttributes");
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = {
+  title: 'Components/ListViewItem/Controls/ListViewItemChart',
+  component: _index.ListViewItemChart,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ListViewItemChart["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    }
+  },
+  argTypes: _ListViewItemChartAttributes.listViewItemChartArgTypes
+};
+exports["default"] = _default;
+var Default = function Default() {
+  var ref = (0, _react.useRef)();
+  return (0, _react2.jsx)(_index.Box, {
+    ref: ref
+  }, (0, _react2.jsx)(_index.ListViewItemChart, {
+    containerRef: ref,
+    chartData: _chartData.chartData,
+    chartDataKey: "fullData",
+    title: "Avg daily sign-ons:",
+    contentCount: "31",
+    contentCountLabel: "Past 7 days",
+    chartLabel: "12 wk trend",
+    trend: "+115.0%",
+    tooltipText: "See Contributing Data"
+  }));
+};
+exports.Default = Default;

package/lib/cjs/components/ListViewItem/controls/chart/ListViewItemChart.styles.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var expandableRowSharedStyle = {
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+};
+var alignCellRightWrapper = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end'
+};
+var responsiveContainer = {
+  width: '100%',
+  height: '100%'
+};
+var chart = {
+  width: '50',
+  height: '18'
+};
+var chartContainer = {
+  width: '50px',
+  height: '18px'
+};
+var divider = {
+  backgroundColor: 'neutral.50',
+  height: '41px',
+  width: '1px'
+};
+var chartLabel = {
+  fontSize: 'sm',
+  color: 'neutral.40'
+};
+var trendContainer = {
+  ml: 'md',
+  width: '50px'
+};
+var trend = {
+  color: 'neutral.40',
+  fontSize: 'md',
+  fontWeight: 3,
+  whiteSpace: 'nowrap'
+};
+var chartButton = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  color: 'black',
+  background: 'none',
+  cursor: 'pointer',
+  height: '44px',
+  padding: 0,
+  ml: 'md',
+  pr: 'md',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '#4462ED1A'
+  }
+};
+var titleContainer = _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
+  mr: 'md'
+});
+var title = _objectSpread({
+  fontSize: 'sm',
+  color: 'neutral.40',
+  maxWidth: '100%'
+}, expandableRowSharedStyle);
+var content = _objectSpread(_objectSpread({}, alignCellRightWrapper), {}, {
+  height: '44px',
+  justifyContent: 'center'
+});
+var count = {
+  color: 'neutral.40',
+  fontSize: 'xx',
+  fontWeight: 3
+};
+var countLabel = {
+  fontSize: 'sm',
+  color: 'neutral.40'
+};
+var _default = {
+  chart: chart,
+  responsiveContainer: responsiveContainer,
+  chartContainer: chartContainer,
+  divider: divider,
+  chartLabel: chartLabel,
+  trendContainer: trendContainer,
+  trend: trend,
+  chartButton: chartButton,
+  titleContainer: titleContainer,
+  title: title,
+  content: content,
+  count: count,
+  countLabel: countLabel
+};
+exports["default"] = _default;

package/lib/cjs/components/ListViewItem/controls/chart/ListViewItemChart.test.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _useResizeObserver = _interopRequireDefault(require("use-resize-observer"));
+var _testAxe = _interopRequireDefault(require("../../../../utils/testUtils/testAxe"));
+var _testWrapper = require("../../../../utils/testUtils/testWrapper");
+var _Box = _interopRequireDefault(require("../../../Box/Box"));
+var _chartData = require("./chartData");
+var _ListViewItemChart = _interopRequireDefault(require("./ListViewItemChart"));
+var _react2 = require("@emotion/react");
+jest.mock('use-resize-observer');
+var Chart = function Chart(props) {
+  var ref = _react["default"].useRef();
+  return (0, _react2.jsx)(_Box["default"], {
+    ref: ref
+  }, (0, _react2.jsx)(_ListViewItemChart["default"], (0, _extends2["default"])({
+    containerRef: ref,
+    chartData: _chartData.chartData,
+    chartDataKey: "fullData",
+    title: "Avg daily sign-ons:",
+    contentCount: "1,234,234",
+    contentCountLabel: "Past 7 days",
+    chartLabel: "12 wk trend",
+    trend: "+ 8.6%",
+    tooltipText: "See Contributing Data"
+  }, props)));
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(Chart, props));
+};
+var _window = window,
+  ResizeObserver = _window.ResizeObserver;
+beforeEach(function () {
+  _useResizeObserver["default"].mockReturnValue({
+    width: 800
+  });
+  jest.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(400);
+  jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(800);
+  delete window.ResizeObserver;
+  window.ResizeObserver = jest.fn().mockImplementation(function () {
+    return {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    };
+  });
+});
+afterEach(function () {
+  window.ResizeObserver = ResizeObserver;
+  jest.restoreAllMocks();
+});
+
+// Need to be added to each test file to test accessibility using axe.
+(0, _testAxe["default"])(getComponent);
+test('renders ListViewItemChart component', function () {
+  getComponent();
+  var chart = _testWrapper.screen.getByRole('region');
+  var content = _testWrapper.screen.getByText('Past 7 days');
+  expect(chart).toBeInTheDocument();
+  expect(content).toBeInTheDocument();
+  expect(!!content.parentNode.getAttribute('style')).toBeFalsy();
+});
+test('renders ListViewItemChart component for tablet', function () {
+  _useResizeObserver["default"].mockReturnValue({
+    width: 500
+  });
+  getComponent();
+  var chart = _testWrapper.screen.getByRole('region');
+  var content = _testWrapper.screen.getByText('Past 7 days');
+  expect(chart).toBeInTheDocument();
+  expect(content).toBeInTheDocument();
+  expect(!!content.parentNode.getAttribute('style')).toBeTruthy();
+});

package/lib/cjs/components/ListViewItem/controls/chart/ListViewItemChartAttributes.js

@@ -0,0 +1,127 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.listViewItemChartPropTypes = exports.listViewItemChartArgTypes = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _docArgTypes = require("../../../../utils/docUtils/docArgTypes");
+var _buttonAttributes = require("../../../Button/buttonAttributes");
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+var descriptions = {
+  buttonProps: 'Object includes same props as `Button` component',
+  chartData: 'Array with objects `{ id, keyName }` for chart',
+  chartDataKey: 'Name of the `keyName` in `chartData`',
+  chartLabel: 'Label under chart',
+  mobileBreakPoint: 'Container width breakpoint to hide all ListViewItemChart',
+  tabletBreakPoint: 'Container width breakpoint to hide content (counter and counter label)',
+  title: 'Main title of chart',
+  tooltipText: 'Text inside tooltip',
+  contentCount: 'Number of events',
+  contentCountLabel: 'Label under `contentCount`',
+  trend: 'Text for trend'
+};
+var listViewItemChartArgTypes = {
+  buttonProps: _objectSpread(_objectSpread({}, _buttonAttributes.buttonArgTypes), {}, {
+    type: {
+      summary: _docArgTypes.docArgTypes.object
+    },
+    description: descriptions.buttonProps,
+    control: 'object'
+  }),
+  chartData: {
+    description: descriptions.chartData,
+    type: {
+      summary: _docArgTypes.docArgTypes.object
+    },
+    control: 'object'
+  },
+  chartDataKey: {
+    description: descriptions.chartDataKey,
+    type: {
+      summary: _docArgTypes.docArgTypes.string
+    },
+    control: 'text'
+  },
+  chartLabel: {
+    description: descriptions.chartLabel,
+    type: {
+      summary: _docArgTypes.docArgTypes.string
+    },
+    control: 'text'
+  },
+  mobileBreakPoint: {
+    description: descriptions.mobileBreakPoint,
+    type: {
+      summary: _docArgTypes.docArgTypes.number
+    },
+    control: 'number'
+  },
+  tabletBreakPoint: {
+    description: descriptions.tabletBreakPoint,
+    type: {
+      summary: _docArgTypes.docArgTypes.number
+    },
+    control: 'number'
+  },
+  title: {
+    description: descriptions.title,
+    type: {
+      summary: _docArgTypes.docArgTypes.string
+    },
+    control: 'text'
+  },
+  tooltipText: {
+    description: descriptions.tooltipText,
+    type: {
+      summary: _docArgTypes.docArgTypes.string
+    },
+    control: 'text'
+  },
+  contentCount: {
+    description: descriptions.contentCount,
+    type: {
+      summary: _docArgTypes.docArgTypes.string
+    },
+    control: 'text'
+  },
+  contentCountLabel: {
+    description: descriptions.contentCountLabel,
+    type: {
+      summary: _docArgTypes.docArgTypes.string
+    },
+    control: 'text'
+  },
+  trend: {
+    description: descriptions.trend,
+    type: {
+      summary: _docArgTypes.docArgTypes.string
+    },
+    control: 'text'
+  }
+};
+exports.listViewItemChartArgTypes = listViewItemChartArgTypes;
+var listViewItemChartPropTypes = {
+  chartData: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
+  chartLabel: _propTypes["default"].string,
+  chartDataKey: _propTypes["default"].string,
+  contentCount: _propTypes["default"].string,
+  contentCountLabel: _propTypes["default"].string,
+  mobileBreakPoint: _propTypes["default"].number,
+  tabletBreakPoint: _propTypes["default"].number,
+  title: _propTypes["default"].string,
+  tooltipText: _propTypes["default"].string,
+  trend: _propTypes["default"].string
+};
+exports.listViewItemChartPropTypes = listViewItemChartPropTypes;

package/lib/cjs/components/ListViewItem/controls/chart/chartData.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartData = void 0;
+var chartData = [{
+  id: 1,
+  fullData: 1
+}, {
+  id: 2,
+  fullData: 5
+}, {
+  id: 3,
+  fullData: 3
+}, {
+  id: 4,
+  fullData: 2
+}, {
+  id: 5,
+  fullData: 5
+}, {
+  id: 6,
+  fullData: 1
+}, {
+  id: 7,
+  fullData: 5
+}, {
+  id: 8,
+  fullData: 5
+}, {
+  id: 9,
+  fullData: 1
+}, {
+  id: 10,
+  fullData: 2
+}, {
+  id: 11,
+  fullData: 4
+}, {
+  id: 12,
+  fullData: 11
+}];
+exports.chartData = chartData;