@pingux/astro 2.17.0 → 2.18.0-alpha.0

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

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
+}];