@popmenu/dashboard 0.42.0 → 0.44.0

package/build/components/ClickableTile/ClickableTile.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ClickableTileProps } from './ClickableTileProps';
+export declare const ClickableTile: {
+    (props: ClickableTileProps): JSX.Element;
+    defaultProps: {
+        link: boolean;
+    };
+};

package/build/components/ClickableTile/ClickableTileProps.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TileProps } from '../Tile';
+export interface ClickableTileProps extends TileProps {
+    /** transforms the root DOM node an anchor element when true */
+    link: boolean;
+    /** callback invoked for a click event */
+    onClick: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement>) => void;
+}

package/build/components/ClickableTile/ClickableTileStyles.d.ts

@@ -0,0 +1 @@
+export declare const useClickableTileStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root" | "content">;

package/build/components/KpiMetricTile/KpiMetricTileProps.d.ts

@@ -1,5 +1,6 @@
-import { TileProps } from '../Tile/TileProps';
+import { ClickableTileProps } from '../ClickableTile/ClickableTileProps';
 import { KpiMetricProps } from '../KpiMetric/KpiMetricProps';
+import { TileProps } from '../Tile';
 export interface KpiMetricTileProps extends KpiMetricProps {
-    TileProps: TileProps;
+    TileProps: TileProps | ClickableTileProps;
 }

package/build/components/Tile/TileProps.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { CardProps, CardContentProps } from '@popmenu/common-ui';
 export interface TileProps extends CardProps {
-    /** Props for the built in Card Content component */
+    /** Props applied to the built in CardContent component */
     CardContentProps?: CardContentProps;
+    /** Content of the Tile */
     children?: React.ReactNode;
 }

package/build/index.es.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { createElement, forwardRef } from 'react';
 import '@material-ui/lab/Alert';
-import { makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box } from '@material-ui/core';
+import { makeStyles, Typography as Typography$1, Link as Link$1, Paper as Paper$1, Box, Card as Card$1, CardActionArea, CardContent as CardContent$1 } from '@material-ui/core';
 import '@material-ui/core/AppBar';
 import MuiAvatar from '@material-ui/core/Avatar';
 import { makeStyles as makeStyles$1, useTheme } from '@material-ui/core/styles';
@@ -124,19 +124,19 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$2;
+var _path$F;
 
-function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+function _extends$1s() { _extends$1s = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1s.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
+  return /*#__PURE__*/React.createElement("svg", _extends$1s({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$F || (_path$F = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z",
     stroke: "currentColor"
   })));
@@ -856,19 +856,19 @@ var LeaderboardTile = function (props) {
         React__default.createElement(Leaderboard, __assign$1({}, restProps))));
 };
 
-var _g$1;
+var _g$P;
 
-function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+function _extends$1v() { _extends$1v = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1v.apply(this, arguments); }
 
 function SvgTrend(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
+  return /*#__PURE__*/React.createElement("svg", _extends$1v({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$P || (_g$P = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M15.333 4L9 10.333 5.667 7l-5 5"
@@ -877,19 +877,19 @@ function SvgTrend(props) {
   }))));
 }
 
-var _g;
+var _g$O;
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends$1u() { _extends$1u = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1u.apply(this, arguments); }
 
 function SvgTrendDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
+  return /*#__PURE__*/React.createElement("svg", _extends$1u({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+  }, props), _g$O || (_g$O = /*#__PURE__*/React.createElement("g", {
     stroke: "currentColor"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M15.333 12L9 5.667 5.667 9l-5-5"
@@ -944,9 +944,33 @@ var KpiMetric = function (props) {
 };
 KpiMetric.defaultProps = defaultProps;
 
+var useClickableTileStyles = makeStyles(function (theme) { return ({
+    root: {
+        textDecoration: 'none',
+        borderRadius: theme.spacing(1),
+        width: '100%',
+    },
+    content: {
+        padding: theme.spacing(3),
+        height: '100%',
+    },
+}); });
+
+var ClickableTile = function (props) {
+    var children = props.children, CardContentProps = props.CardContentProps, link = props.link, restProps = __rest$1(props, ["children", "CardContentProps", "link"]);
+    var classes = useClickableTileStyles(props);
+    return (React__default.createElement(Card$1, __assign$1({ classes: { root: classes.root } }, restProps),
+        React__default.createElement(CardActionArea, { component: link ? 'a' : 'div' },
+            React__default.createElement(CardContent$1, __assign$1({ classes: { root: classes.content } }, CardContentProps), children))));
+};
+ClickableTile.defaultProps = {
+    link: false,
+};
+
 var KpiMetricTile = function (props) {
     var TileProps = props.TileProps, restProps = __rest$1(props, ["TileProps"]);
-    return (React__default.createElement(Tile, __assign$1({}, TileProps),
+    var DynamicTile = typeof (TileProps === null || TileProps === void 0 ? void 0 : TileProps.onClick) === 'function' ? ClickableTile : Tile;
+    return (React__default.createElement(DynamicTile, __assign$1({}, TileProps),
         React__default.createElement(KpiMetric, __assign$1({}, restProps))));
 };