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

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

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import useResizeObserver from 'use-resize-observer';
+import axeTest from '../../../../utils/testUtils/testAxe';
+import { render, screen } from '../../../../utils/testUtils/testWrapper';
+import Box from '../../../Box/Box';
+import { chartData } from './chartData';
+import ListViewItemChart from './ListViewItemChart';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+jest.mock('use-resize-observer');
+var Chart = function Chart(props) {
+  var ref = React.useRef();
+  return ___EmotionJSX(Box, {
+    ref: ref
+  }, ___EmotionJSX(ListViewItemChart, _extends({
+    containerRef: ref,
+    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 render(___EmotionJSX(Chart, props));
+};
+var _window = window,
+  ResizeObserver = _window.ResizeObserver;
+beforeEach(function () {
+  useResizeObserver.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.
+axeTest(getComponent);
+test('renders ListViewItemChart component', function () {
+  getComponent();
+  var chart = screen.getByRole('region');
+  var content = 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.mockReturnValue({
+    width: 500
+  });
+  getComponent();
+  var chart = screen.getByRole('region');
+  var content = screen.getByText('Past 7 days');
+  expect(chart).toBeInTheDocument();
+  expect(content).toBeInTheDocument();
+  expect(!!content.parentNode.getAttribute('style')).toBeTruthy();
+});

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

@@ -0,0 +1,118 @@
+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; }
+import PropTypes from 'prop-types';
+import { docArgTypes } from '../../../../utils/docUtils/docArgTypes';
+import { buttonArgTypes } from '../../../Button/buttonAttributes';
+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'
+};
+export var listViewItemChartArgTypes = {
+  buttonProps: _objectSpread(_objectSpread({}, buttonArgTypes), {}, {
+    type: {
+      summary: docArgTypes.object
+    },
+    description: descriptions.buttonProps,
+    control: 'object'
+  }),
+  chartData: {
+    description: descriptions.chartData,
+    type: {
+      summary: docArgTypes.object
+    },
+    control: 'object'
+  },
+  chartDataKey: {
+    description: descriptions.chartDataKey,
+    type: {
+      summary: docArgTypes.string
+    },
+    control: 'text'
+  },
+  chartLabel: {
+    description: descriptions.chartLabel,
+    type: {
+      summary: docArgTypes.string
+    },
+    control: 'text'
+  },
+  mobileBreakPoint: {
+    description: descriptions.mobileBreakPoint,
+    type: {
+      summary: docArgTypes.number
+    },
+    control: 'number'
+  },
+  tabletBreakPoint: {
+    description: descriptions.tabletBreakPoint,
+    type: {
+      summary: docArgTypes.number
+    },
+    control: 'number'
+  },
+  title: {
+    description: descriptions.title,
+    type: {
+      summary: docArgTypes.string
+    },
+    control: 'text'
+  },
+  tooltipText: {
+    description: descriptions.tooltipText,
+    type: {
+      summary: docArgTypes.string
+    },
+    control: 'text'
+  },
+  contentCount: {
+    description: descriptions.contentCount,
+    type: {
+      summary: docArgTypes.string
+    },
+    control: 'text'
+  },
+  contentCountLabel: {
+    description: descriptions.contentCountLabel,
+    type: {
+      summary: docArgTypes.string
+    },
+    control: 'text'
+  },
+  trend: {
+    description: descriptions.trend,
+    type: {
+      summary: docArgTypes.string
+    },
+    control: 'text'
+  }
+};
+export var listViewItemChartPropTypes = {
+  chartData: PropTypes.arrayOf(PropTypes.shape({})),
+  chartLabel: PropTypes.string,
+  chartDataKey: PropTypes.string,
+  contentCount: PropTypes.string,
+  contentCountLabel: PropTypes.string,
+  mobileBreakPoint: PropTypes.number,
+  tabletBreakPoint: PropTypes.number,
+  title: PropTypes.string,
+  tooltipText: PropTypes.string,
+  trend: PropTypes.string
+};

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

@@ -0,0 +1,37 @@
+export 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
+}];

package/lib/index.js

@@ -84,6 +84,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/styles/variants/variants.js

@@ -26,6 +26,7 @@ import helpHint from '../../components/HelpHint/HelpHint.styles';
 import imageUpload from '../../components/ImageUploadField/imageUpload';
 import listBox from '../../components/ListBox/ListBox.styles';
 import listItem from '../../components/ListItem/ListItem.styles';
+import lisViewItemChart from '../../components/ListViewItem/controls/chart/ListViewItemChart.styles';
 import listViewItem from '../../components/ListViewItem/ListViewItem.styles';
 import loader from '../../components/Loader/Loader.styles';
 import menu from '../../components/Menu/Menu.styles';
@@ -63,6 +64,7 @@ export default _objectSpread({
   listBox: listBox,
   listItem: listItem,
   listViewItem: listViewItem,
+  lisViewItemChart: lisViewItemChart,
   loader: loader,
   menu: menu,
   menuItem: menuItem,

package/lib/utils/testUtils/testAxe.js

@@ -24,13 +24,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 axe(container, rules);
-                case 3:
+                case 4:
                   results = _context.sent;
                   expect(results).toHaveNoViolations();
-                case 5:
+                case 6:
                 case "end":
                   return _context.stop();
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.17.0-alpha.5",
+  "version": "2.17.0-alpha.7",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -102,7 +102,7 @@
     "react-color": "^2.19.3",
     "react-dropzone": "^11.4.2",
     "react-stately": "^3.20.0",
-    "recharts": "^2.1.4",
+    "recharts": "^2.7.0",
     "regenerator-runtime": "^0.13.7",
     "styled-system": "^5.1.5",
     "theme-ui": "^0.10.0",