@pingux/astro 2.17.0-alpha.4 → 2.17.0-alpha.6

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;

package/lib/cjs/index.d.ts

@@ -80,6 +80,7 @@ export * from './components/ListItem';
 export { default as ListView } from './components/ListView';
 export * from './components/ListView';
 export { default as ListViewItem } from './components/ListViewItem';
+export { default as ListViewItemChart } from './components/ListViewItem/controls/chart/ListViewItemChart';
 export { default as ListViewItemEditButton } from './components/ListViewItem/controls/ListViewItemEditButton';
 export { default as ListViewItemMenu } from './components/ListViewItem/controls/ListViewItemMenu';
 export { default as ListViewItemSwitchField } from './components/ListViewItem/controls/ListViewItemSwitchField';

package/lib/cjs/index.js

@@ -58,6 +58,7 @@ var _exportNames = {
   ListItem: true,
   ListView: true,
   ListViewItem: true,
+  ListViewItemChart: true,
   ListViewItemEditButton: true,
   ListViewItemMenu: true,
   ListViewItemSwitchField: true,
@@ -451,6 +452,12 @@ _Object$defineProperty(exports, "ListViewItem", {
     return _ListViewItem["default"];
   }
 });
+_Object$defineProperty(exports, "ListViewItemChart", {
+  enumerable: true,
+  get: function get() {
+    return _ListViewItemChart["default"];
+  }
+});
 _Object$defineProperty(exports, "ListViewItemEditButton", {
   enumerable: true,
   get: function get() {
@@ -1210,6 +1217,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_ListView)).call(_context36,
   });
 });
 var _ListViewItem = _interopRequireDefault(require("./components/ListViewItem"));
+var _ListViewItemChart = _interopRequireDefault(require("./components/ListViewItem/controls/chart/ListViewItemChart"));
 var _ListViewItemEditButton = _interopRequireDefault(require("./components/ListViewItem/controls/ListViewItemEditButton"));
 var _ListViewItemMenu = _interopRequireDefault(require("./components/ListViewItem/controls/ListViewItemMenu"));
 var _ListViewItemSwitchField = _interopRequireDefault(require("./components/ListViewItem/controls/ListViewItemSwitchField"));

package/lib/cjs/styles/variants/variants.js

@@ -33,6 +33,7 @@ var _HelpHint = _interopRequireDefault(require("../../components/HelpHint/HelpHi
 var _imageUpload = _interopRequireDefault(require("../../components/ImageUploadField/imageUpload"));
 var _ListBox = _interopRequireDefault(require("../../components/ListBox/ListBox.styles"));
 var _ListItem = _interopRequireDefault(require("../../components/ListItem/ListItem.styles"));
+var _ListViewItemChart = _interopRequireDefault(require("../../components/ListViewItem/controls/chart/ListViewItemChart.styles"));
 var _ListViewItem = _interopRequireDefault(require("../../components/ListViewItem/ListViewItem.styles"));
 var _Loader = _interopRequireDefault(require("../../components/Loader/Loader.styles"));
 var _Menu = _interopRequireDefault(require("../../components/Menu/Menu.styles"));
@@ -74,6 +75,7 @@ var _default = _objectSpread({
   listBox: _ListBox["default"],
   listItem: _ListItem["default"],
   listViewItem: _ListViewItem["default"],
+  lisViewItemChart: _ListViewItemChart["default"],
   loader: _Loader["default"],
   menu: _Menu["default"],
   menuItem: _MenuItem["default"],

package/lib/components/ArrayField/ArrayField.stories.js

@@ -85,9 +85,7 @@ export var Uncontrolled = function Uncontrolled(_ref) {
       hintText: 'Example Hint',
       isRequired: true,
       helpHintProps: {
-        tooltipProps: {
-          direction: 'top'
-        }
+        direction: 'top'
       }
     },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {

package/lib/components/HelpHint/HelpHint.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps"];
+var _excluded = ["align", "arrowCrossOffset", "children", "className", "closeDelay", "direction", "hasNoArrow", "iconButtonProps", "isDarkMode", "isNotFlippable", "offset", "popoverProps", "tooltipProps"];
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -43,6 +43,7 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     isNotFlippable = props.isNotFlippable,
     offset = props.offset,
     popoverProps = props.popoverProps,
+    tooltipProps = props.tooltipProps,
     others = _objectWithoutProperties(props, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -152,7 +153,7 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     onClose: close,
     placement: placement,
     ref: overlayRef
-  }, mergeProps(overlayProps, positionProps, popoverProps, overlayHoverProps, focusWithinProps)), ___EmotionJSX(FocusScope, {
+  }, mergeProps(overlayProps, positionProps, popoverProps || tooltipProps, overlayHoverProps, focusWithinProps)), ___EmotionJSX(FocusScope, {
     restoreFocus: true,
     autoFocus: isFocusVisible
   }, ___EmotionJSX(Box, {
@@ -162,6 +163,8 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
 HelpHint.propTypes = {
   /** Props object that is spread directly into the popover element. */
   popoverProps: PropTypes.shape({}),
+  /** @ignore Alias for `popoverProps` prop. Exists for backwards-compatibility. */
+  tooltipProps: PropTypes.shape({}),
   /** Props object that is spread directly into the IconButton element. */
   iconButtonProps: PropTypes.shape({}),
   /** Defaults to true, displays dark popover with white text */

package/lib/components/HelpHint/HelpHint.stories.js

@@ -45,11 +45,12 @@ export var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProp
     p: 50
   }, ___EmotionJSX(HelpHint, {
     popoverProps: {
-      direction: 'bottom'
+      'data-id': 'popover-container'
     },
     iconButtonProps: {
       'aria-label': 'Help hint'
-    }
+    },
+    direction: "bottom"
   }, "Text of the popover right here..."));
 };
 export var ContentWithLink = function ContentWithLink() {

package/lib/components/HelpHint/HelpHint.styles.js

@@ -50,7 +50,11 @@ var popoverContainer = _objectSpread(_objectSpread({}, container), {}, {
   p: '10px',
   fontSize: 'sm',
   fontWeight: 1,
-  width: '117px'
+  maxWidth: '300px',
+  overflow: 'visible',
+  textOverflow: '',
+  maxHeight: 'unset',
+  display: 'flex'
 });
 export default {
   hintButton: hintButton,

package/lib/components/HelpHint/HelpHint.test.js

@@ -151,6 +151,19 @@ test('applies popoverProps', function () {
   });
   expect(screen.getByText(popoverValue)).toBeInTheDocument();
 });
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true,
+      maxWidth: 'unset',
+      width: '1000px'
+    }
+  });
+  var popover = screen.queryByRole('presentation');
+  expect(popover).toBeInTheDocument();
+  expect(popover).toHaveStyle('width: 1000px');
+  expect(popover).toHaveStyle('maxWidth: unset');
+});
 test('applies iconButtonProps', function () {
   var newLabel = 'New label';
   getComponent({

package/lib/components/ListView/ListView.stories.js

@@ -15,14 +15,15 @@ import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import React from 'react';
+import React, { useRef } from 'react';
 import { Item, useAsyncList } from 'react-stately';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import { action } from '@storybook/addon-actions';
 import isChromatic from 'chromatic/isChromatic';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Box, ListView, ListViewItem, ListViewItemMenu, ListViewItemSwitchField } from '../..';
+import { Box, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField } from '../..';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
+import { chartData } from '../ListViewItem/controls/chart/chartData';
 import ListViewReadme from './ListView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -720,4 +721,33 @@ export var MultipleSelection = function MultipleSelection(_ref5) {
       }
     }, ___EmotionJSX(Controls, null)));
   });
+};
+export var WithCharts = function WithCharts(_ref6) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
+  var chartContainerRef = useRef();
+  return ___EmotionJSX(ListView, _extends({}, args, {
+    items: items,
+    selectionMode: "multiple"
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, ___EmotionJSX(ListViewItem, {
+      ref: chartContainerRef,
+      data: {
+        text: item.name,
+        subtext: item.subtext,
+        icon: FormSelectIcon
+      }
+    }, ___EmotionJSX(ListViewItemChart, {
+      containerRef: chartContainerRef,
+      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"
+    }), ___EmotionJSX(Controls, null)));
+  });
 };

package/lib/components/ListViewItem/ListViewItem.mdx

@@ -38,6 +38,7 @@ styled control components to easily match Ping specs.
 - [ListViewItemEditButton](./?path=/docs/components-listviewitem-controls-listviewitemeditbutton--docs)
 - [ListViewItemMenu](./?path=/docs/components-listviewitem-controls-listviewitemmenu--docs)
 - [ListViewItemSwitchField](./?path=/docs/components-listviewitem-controls-listviewitemswitchfield--docs)
+- [ListViewItemChart](./?path=/docs/components-listviewitem-controls-listviewitemchart--docs)
 
 ### Note:
 The nature of components that have been styled to match design specs is that as design specs are updated, so will the matching component. Be aware that styles 

package/lib/components/ListViewItem/ListViewItem.stories.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Badge, Box, ListViewItem, ListViewItemEditButton, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
+import { Badge, Box, ListViewItem, ListViewItemChart, ListViewItemEditButton, ListViewItemMenu, ListViewItemSwitchField, Separator, Text } from '../..';
 import { pingImg } from '../../utils/devUtils/constants/images';
+import { chartData } from './controls/chart/chartData';
 import ListViewItemReadMe from './ListViewItem.mdx';
 import { listViewItemArgTypes } from './listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -140,6 +141,33 @@ export var WithLeftOfDataSlot = function WithLeftOfDataSlot() {
     key: "delete"
   }, "Delete user"))));
 };
+export var WithCharts = function WithCharts() {
+  var containerRef = useRef();
+  return ___EmotionJSX(Wrapper, null, ___EmotionJSX(ListViewItem, {
+    ref: containerRef,
+    data: {
+      text: 'Kangaroo',
+      subtext: 'kangaroo@example.com',
+      icon: FormSelectIcon
+    }
+  }, ___EmotionJSX(ListViewItemChart, {
+    containerRef: containerRef,
+    chartData: chartData,
+    title: "Avg daily sign-ons:",
+    chartDataKey: "fullData",
+    contentCount: "31",
+    contentCountLabel: "Past 7 days",
+    chartLabel: "12 wk trend",
+    trend: "+115.0%",
+    tooltipText: "See Contributing Data"
+  }), ___EmotionJSX(ListViewItemSwitchField, null), ___EmotionJSX(ListViewItemMenu, null, ___EmotionJSX(Item, {
+    key: "enable"
+  }, "Enable user"), ___EmotionJSX(Item, {
+    key: "disable"
+  }, "Disable user"), ___EmotionJSX(Item, {
+    key: "delete"
+  }, "Delete user"))));
+};
 export var WithExtraLongText = function WithExtraLongText() {
   var renderRightOfData = ___EmotionJSX(Box, {
     isRow: true,

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -81,7 +81,7 @@ var controls = {
   alignSelf: 'center',
   flexShrink: 0,
   ml: 'auto',
-  pr: 'sm'
+  pr: 'md'
 };
 var iconWrapper = {
   cursor: 'pointer',

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

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useCallback, useMemo } from 'react';
+import { useVisuallyHidden } from 'react-aria';
+import { Line, LineChart, ResponsiveContainer } from 'recharts';
+import useResizeObserver from 'use-resize-observer';
+import { Box, Button, Text, Tooltip, TooltipTrigger } from '../../../../index';
+import { neutral } from '../../../../styles/colors';
+import { listViewItemChartPropTypes } from './ListViewItemChartAttributes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+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 = useResizeObserver({
+      ref: containerRef
+    }),
+    width = _useResizeObserver.width;
+  var _useVisuallyHidden = useVisuallyHidden(),
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
+  var isTablet = useMemo(function () {
+    return width <= tabletBreakPoint;
+  }, [tabletBreakPoint, width]);
+  var isMobile = useMemo(function () {
+    return width <= mobileBreakPoint;
+  }, [mobileBreakPoint, width]);
+  var hideIfTablet = useCallback(function () {
+    return isTablet && visuallyHiddenProps;
+  }, [isTablet, visuallyHiddenProps]);
+  var hideIfMobile = useCallback(function () {
+    return isMobile && visuallyHiddenProps;
+  }, [isMobile, visuallyHiddenProps]);
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
+    height: 0,
+    mr: "md"
+  }, ___EmotionJSX(Box, _extends({
+    variant: "lisViewItemChart.titleContainer"
+  }, hideIfMobile()), ___EmotionJSX(Text, {
+    variant: "variants.lisViewItemChart.title"
+  }, title)), ___EmotionJSX(Box, _extends({
+    variant: "lisViewItemChart.content"
+  }, hideIfTablet()), ___EmotionJSX(Text, {
+    variant: "variants.lisViewItemChart.count"
+  }, contentCount), ___EmotionJSX(Text, {
+    variant: "variants.lisViewItemChart.countLabel"
+  }, contentCountLabel)), ___EmotionJSX(TooltipTrigger, null, ___EmotionJSX(Button, _extends({
+    variant: "variants.lisViewItemChart.chartButton",
+    "aria-label": "line-chart button"
+  }, buttonProps, hideIfMobile()), ___EmotionJSX(Box, {
+    variant: "lisViewItemChart.divider"
+  }), ___EmotionJSX(Box, {
+    ml: "md"
+  }, ___EmotionJSX(Box, {
+    variant: "lisViewItemChart.chartContainer"
+  }, ___EmotionJSX(ResponsiveContainer, {
+    variant: "lisViewItemChart.responsiveContainer"
+  }, ___EmotionJSX(LineChart, {
+    data: chartData,
+    variant: "lisViewItemChart.chart"
+  }, ___EmotionJSX(Line, {
+    type: "monotone",
+    dataKey: chartDataKey,
+    dot: false,
+    stroke: neutral[20]
+  })))), ___EmotionJSX(Text, {
+    variant: "variants.lisViewItemChart.chartLabel"
+  }, chartLabel)), ___EmotionJSX(Box, {
+    size: "sm",
+    variant: "lisViewItemChart.trendContainer"
+  }, ___EmotionJSX(Text, {
+    variant: "variants.lisViewItemChart.trend"
+  }, trend))), ___EmotionJSX(Tooltip, null, tooltipText)));
+};
+ListViewItemChart.propTypes = listViewItemChartPropTypes;
+ListViewItemChart.displayName = 'ListViewItemChart';
+export default ListViewItemChart;

package/lib/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/components/ListViewItem/controls/chart/ListViewItemChart.stories.js

@@ -0,0 +1,35 @@
+import React, { useRef } from 'react';
+import DocsLayout from '../../../../../.storybook/storybookDocsLayout';
+import { Box, ListViewItemChart } from '../../../../index';
+import { chartData } from './chartData';
+import ListViewItemChartReadMe from './ListViewItemChart.mdx';
+import { listViewItemChartArgTypes } from './ListViewItemChartAttributes';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/ListViewItem/Controls/ListViewItemChart',
+  component: ListViewItemChart,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ListViewItemChartReadMe, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
+  argTypes: listViewItemChartArgTypes
+};
+export var Default = function Default() {
+  var ref = useRef();
+  return ___EmotionJSX(Box, {
+    ref: ref
+  }, ___EmotionJSX(ListViewItemChart, {
+    containerRef: ref,
+    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"
+  }));
+};