@pingux/astro 2.17.0-alpha.5 → 2.17.0-alpha.7

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/cjs/utils/testUtils/testAxe.js

@@ -31,13 +31,14 @@ var axeTest = /*#__PURE__*/function () {
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
+                  jest.useRealTimers();
                   _getComponent = getComponent(), container = _getComponent.container;
-                  _context.next = 3;
+                  _context.next = 4;
                   return (0, _jestAxe.axe)(container, rules);
-                case 3:
+                case 4:
                   results = _context.sent;
                   expect(results).toHaveNoViolations();
-                case 5:
+                case 6:
                 case "end":
                   return _context.stop();
               }

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -25,7 +25,6 @@ import React from 'react';
 import { Section } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import { EnvironmentBreadcrumb, Item, OverlayProvider } from '../..';
-import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen, within } from '../../utils/testUtils/testWrapper';
 import { breadCrumbDataIds } from './EnvironmentBreadcrumb';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -84,7 +83,7 @@ var defaultWithSectionsProps = {
   items: itemsWithSections
 };
 var onSelectionChange = jest.fn();
-var getComponent = function getComponent(props) {
+export var getComponent = function getComponent(props) {
   return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultProps, props), function (item) {
     return ___EmotionJSX(Item, {
       key: item.name,
@@ -92,7 +91,7 @@ var getComponent = function getComponent(props) {
     }, item.name);
   })));
 };
-var getSectionsComponent = function getSectionsComponent() {
+export var getSectionsComponent = function getSectionsComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultWithSectionsProps, props), function (section) {
     return (
@@ -126,6 +125,7 @@ beforeAll(function () {
   jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
     return cb();
   });
+  jest.useFakeTimers();
 });
 afterEach(function () {
   jest.clearAllMocks();
@@ -287,7 +287,6 @@ test('should show empty state in search if there are no results', function () {
   userEvent.type(screen.getByRole('searchbox'), '111');
   expect(screen.getByText(testEmptySearchText)).toBeInTheDocument();
 });
-axeTest(getComponent);
 test('should be open when isDefaultOpen is true', function () {
   getComponent({
     isDefaultOpen: true

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumbAxe.test.js

@@ -0,0 +1,4 @@
+import axeTest from '../../utils/testUtils/testAxe';
+import { getComponent, getSectionsComponent } from './EnvironmentBreadcrumb.test';
+axeTest(getComponent);
+axeTest(getSectionsComponent);

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"
+  }));
+};

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

@@ -0,0 +1,104 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/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) { _defineProperty(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'
+};
+export 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
+};