@elliemae/ds-mobile 2.3.0-alpha.9 → 2.3.0-next.0

package/cjs/MobileCard/Card.js

@@ -0,0 +1,142 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var styledComponents = require('@xstyled/styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var GroupItem = require('@elliemae/ds-shared/GroupContext/GroupItem');
+var dsGrid = require('@elliemae/ds-grid');
+var StyledCard = require('./StyledCard.js');
+var ExpandChevron = require('./ExpandChevron.js');
+var useHeight = require('./useHeight.js');
+var ExpandableRegion = require('./ExpandableRegion.js');
+var props = require('./props.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var GroupItem__default = /*#__PURE__*/_interopDefaultLegacy(GroupItem);
+
+const TitleEllipsis = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10tpzm8-0"
+})(["", ""], dsSystem.truncate());
+const Title = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10tpzm8-1"
+})(["", " ", " font-weight:", ";font-size:", ";width:100%;", ""], styledComponents.space, dsSystem.truncate(), props => props.theme.fontWeights.semibold, props => dsSystem.toMobile(props.theme.fontSizes.title[600]), dsSystem.color('neutral', 800));
+const Detail = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-10tpzm8-2"
+})(["", " ", " font-size:", ";font-weight:", ";"], styledComponents.space, dsSystem.truncate(), props => dsSystem.toMobile(props.theme.fontSizes.title[500]), props => props.theme.fontWeights.regular);
+const SubText = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-10tpzm8-3"
+})(["margin-top:", ";", " &:nth-child(2){padding-left:", ";}"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), dsSystem.truncate(), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s));
+const SubTextWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10tpzm8-4"
+})(["", " border-top:", ";margin-top:6px;margin-bottom:2px;padding-bottom:", ";font-size:", ";", " font-weight:", ";display:flex;justify-content:space-between;"], dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => dsSystem.toMobile(props.theme.fontSizes.subTitle[400]), dsSystem.color('neutral', 500), props => props.theme.fontWeights.regular);
+const LeftIcon = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-10tpzm8-5"
+})(["& > span{height:", ";width:", ";}& > span > svg,svg:not([fill]){height:", ";width:", ";}"], props => props.halfM, props => props.halfM, props => props.halfM, props => props.halfM);
+const CenterWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-10tpzm8-6"
+})(["display:flex;align-items:center;", ""], dsSystem.truncate());
+
+const MobileCard = _ref => {
+  var _TitleEllipsis, _SubText, _Grid;
+
+  let {
+    children,
+    height = 'm',
+    leftAddOn,
+    leftProp,
+    rightProp,
+    subText,
+    subIcons,
+    details,
+    theme,
+    expandable = false,
+    expandedContent,
+    value,
+    cardContent
+  } = _ref;
+  const subTextRef = React.useRef(null);
+  const subTextHeight = useHeight.useHeight(subTextRef);
+  const isJustChildren = !(subText || subIcons || details);
+  const halfM = dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 2);
+  return /*#__PURE__*/_jsx__default["default"](GroupItem__default["default"], {
+    render: function () {
+      let context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        activeValue,
+        onChange
+      } = context;
+      const selected = activeValue !== undefined && (activeValue === value || (activeValue === null || activeValue === void 0 ? void 0 : activeValue.length) && (activeValue === null || activeValue === void 0 ? void 0 : activeValue.includes(value)));
+      return /*#__PURE__*/_jsx__default["default"](StyledCard.StyledCard, {
+        "data-testid": "card-wrapper",
+        minHeight: height === 'm' ? dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxl) : dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xl)
+      }, void 0, expandable && /*#__PURE__*/_jsx__default["default"](ExpandChevron.ExpandChevron, {
+        isExpanded: selected,
+        onClick: e => {
+          e.stopPropagation();
+          onChange({
+            target: {
+              value
+            }
+          });
+        },
+        align: subText || subIcons ? 'top' : 'center'
+      }), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        pb: (subText || subIcons) && subTextHeight,
+        cols: ['auto', 'auto'],
+        alignItems: "center"
+      }, void 0, leftProp && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+      }, void 0, leftProp), leftAddOn && /*#__PURE__*/_jsx__default["default"](LeftIcon, {
+        ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+        halfM: halfM
+      }, void 0, leftAddOn)), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        pl: !leftAddOn ? dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xs),
+        pr: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+        width: "100%"
+      }, void 0, /*#__PURE__*/_jsx__default["default"](CenterWrap, {}, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
+        pt: !isJustChildren && halfM,
+        "data-testid": "card-title"
+      }, void 0, _TitleEllipsis || (_TitleEllipsis = /*#__PURE__*/_jsx__default["default"](TitleEllipsis, {}, void 0, children)), details && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        "data-testid": "card-details",
+        cols: details.map(() => 'min-content'),
+        mb: !(subText || subIcons) && halfM || 0,
+        pt: dsSystem.op('/', dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs), 2)
+      }, void 0, details.map((d, i) => /*#__PURE__*/_jsx__default["default"](Detail, {}, i, d, i < details.length - 1 && /*#__PURE__*/_jsx__default["default"](Detail, {
+        px: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.xxs)
+      }, void 0, "\u2022"))))), rightProp && rightProp.map((prop, i) => /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+        ml: dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+      }, i, prop))), subIcons && /*#__PURE__*/jsxRuntime.jsxs(SubTextWrap, {
+        ref: subTextRef,
+        children: [_SubText || (_SubText = /*#__PURE__*/_jsx__default["default"](SubText, {}, void 0, subIcons)), subText && subText[1] && /*#__PURE__*/_jsx__default["default"](SubText, {
+          "data-testid": "card-subText"
+        }, void 0, subText[1])]
+      }), subText && !subIcons && /*#__PURE__*/jsxRuntime.jsx(SubTextWrap, {
+        ref: subTextRef,
+        children: subText.map((s, i) => /*#__PURE__*/_jsx__default["default"](SubText, {
+          "data-testid": "card-subText"
+        }, i, s))
+      }), /*#__PURE__*/_jsx__default["default"](ExpandableRegion.ExpandableRegion, {
+        show: selected,
+        content: expandedContent
+      }), cardContent && (_Grid || (_Grid = /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, cardContent)))));
+    }
+  });
+};
+
+const DSMobileCardWithSchema = reactDesc.describe(MobileCard);
+DSMobileCardWithSchema.propTypes = props.cardPropsTypes;
+var MobileCard$1 = dsSystem.withTheme(MobileCard);
+
+exports.DSMobileCardWithSchema = DSMobileCardWithSchema;
+exports["default"] = MobileCard$1;

package/cjs/MobileCard/CardIcons.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('react');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const CardIconsWrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-1vqygz1-0"
+})(["align-items:center;span,svg{width:12px !important;height:12px !important;}span.icon-color-muted svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-warn svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-error svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-success svg,svg:not([fill]){fill:", ";height:12px !important;width:12px !important;& *{fill:", ";}}span.icon-color-primary svg,svg:not([fill]){fill:", ";}span.icon-color-primary svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.neutral['600'], props => props.theme.colors.neutral['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.warning['600'], props => props.theme.colors.danger['900'], props => props.theme.colors.danger['900'], props => props.theme.colors.success['900'], props => props.theme.colors.success['900'], props => props.theme.colors.brand[600], props => props.theme.colors.brand[600]);
+const SubIcons = _ref => {
+  let {
+    icons = [],
+    colors = []
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](CardIconsWrapper, {
+    cols: icons.map(() => '12px'),
+    gutter: "6px",
+    height: "14px",
+    "data-testid": "card-subIcons"
+  }, void 0, icons.map((Icon, i) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _jsx__default["default"](Icon, {
+    className: "icon-color-".concat(colors[i] || 'muted')
+  }, i)));
+};
+
+exports.SubIcons = SubIcons;

package/cjs/MobileCard/ExpandChevron.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+var dsIcons = require('@elliemae/ds-icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const ChevronWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1l0ask2-0"
+})(["margin-top:", ";align-self:", ";margin-left:", ";"], props => props.align === 'top' ? '18px' : '0', props => props.align === 'top' ? 'flex-start' : 'center', props => props.theme.space.xs);
+const ExpandChevron = _ref => {
+  let {
+    isExpanded,
+    onClick,
+    align
+  } = _ref;
+  const Chevron = isExpanded ? dsIcons.ChevronDown : dsIcons.ChevronRight;
+  return /*#__PURE__*/_jsx__default["default"](ChevronWrap, {
+    "data-testid": "ds-card-expand-chevron",
+    align: align
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Chevron, {
+    size: "s",
+    color: ['brand-primary', 800],
+    onClick: onClick
+  }));
+};
+
+exports.ExpandChevron = ExpandChevron;

package/cjs/MobileCard/ExpandableRegion.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const RegionWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-mduzz9-0"
+})(["width:100%;height:100%;"]);
+const Region = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-mduzz9-1"
+})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '', dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
+const ExpandableRegion = _ref => {
+  var _ref$current;
+
+  let {
+    show,
+    content
+  } = _ref;
+  const ref = React.useRef(null); // triggers transition
+
+  const [animate, setAnimate] = React.useState(show); // needed to properly handle the transition. Hide after transition ends
+
+  const [hide, setHide] = React.useState(!show);
+  React.useEffect(() => {
+    setAnimate(show);
+    if (show) setHide(false);
+  }, [show]);
+
+  const hideOnAnimationEnd = () => {
+    if (!show) setHide(true);
+  };
+
+  return /*#__PURE__*/_jsx__default["default"](Region, {
+    hide: hide // needed to handle transition, `auto` max-height isn't supported
+    ,
+    refHeight: (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 9999,
+    onTransitionEnd: hideOnAnimationEnd,
+    animate: animate
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(RegionWrapper, {
+    ref: ref,
+    children: content
+  }));
+};
+
+exports.ExpandableRegion = ExpandableRegion;

package/cjs/MobileCard/Group.js

@@ -0,0 +1,98 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var Group = require('@elliemae/ds-shared/GroupContext/Group');
+var dsGrid = require('@elliemae/ds-grid');
+var dsSystem = require('@elliemae/ds-system');
+var StyledCard = require('./StyledCard.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Group__default = /*#__PURE__*/_interopDefaultLegacy(Group);
+
+const GroupGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-17xukaf-0"
+})(["", "{border-top:none;}", ""], StyledCard.StyledCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(dsSystem.border(theme.colors.neutral['100'])) : '';
+});
+const GroupTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-17xukaf-1"
+})(["", ""], dsSystem.truncate());
+const GroupTitleGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-17xukaf-2"
+})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => "calc(".concat(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), dsSystem.color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => dsSystem.border(props.theme.colors.brand['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => dsSystem.border(props.theme.colors.neutral['080']));
+
+const MobileCardGroup = _ref2 => {
+  let {
+    children,
+    theme,
+    title,
+    action,
+    activeValue,
+    allowMultipleOpen = false,
+    onChange = () => null
+  } = _ref2;
+  const rows = !title ? ['auto'] : [dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
+  return /*#__PURE__*/_jsx__default["default"](Group__default["default"], {
+    activeValue: activeValue,
+    multiple: allowMultipleOpen,
+    onChange: onChange
+  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupGrid, {
+    withTopBorder: !title,
+    rows: rows
+  }, void 0, !!title && /*#__PURE__*/_jsx__default["default"](GroupTitleGrid, {
+    pl: "xxs"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, React__default["default"].Children.map(children, (child, idx) => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    key: idx,
+    value: idx,
+    idx
+  }), null))));
+};
+
+const props = {
+  theme: reactDesc.PropTypes.object.isRequired.description(''),
+
+  /**
+   * Defines group title
+   */
+  title: reactDesc.PropTypes.string.description(''),
+
+  /**
+   * Pass one or more Mobile Cards to render as a group
+   */
+  children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.element, reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element)]).isRequired.description(''),
+
+  /**
+   * Group header addon
+   */
+  action: reactDesc.PropTypes.element.description(''),
+
+  /**  */
+  activeValue: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number)]).description(''),
+
+  /**  */
+  allowMultipleOpen: reactDesc.PropTypes.bool.description(''),
+
+  /**  */
+  onChange: reactDesc.PropTypes.func.description('')
+};
+const DSMobileCardGroupWithSchema = reactDesc.describe(MobileCardGroup);
+DSMobileCardGroupWithSchema.propTypes = props;
+var MobileGroup = dsSystem.withTheme(MobileCardGroup);
+
+exports.DSMobileCardGroupWithSchema = DSMobileCardGroupWithSchema;
+exports["default"] = MobileGroup;

package/cjs/MobileCard/StyledCard.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledCard = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-28g2t3-0"
+})(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], props => props.minHeight, props => dsSystem.border(props.theme.colors.neutral['100']), props => dsSystem.border('.5px', props.theme.colors.neutral['500']));
+
+exports.StyledCard = StyledCard;

package/cjs/MobileCard/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Card = require('./Card.js');
+var Group = require('./Group.js');
+var ActionAddon = require('./ActionAddon.js');
+var CardIcons = require('./CardIcons.js');
+
+Card["default"].Group = Group["default"];
+const DSMobileCard = Card["default"];
+
+exports.DSMobileCardWithSchema = Card.DSMobileCardWithSchema;
+exports["default"] = Card["default"];
+exports.DSMobileCardGroupWithSchema = Group.DSMobileCardGroupWithSchema;
+exports.ActionAddon = ActionAddon.ActionAddon;
+exports.SubIcons = CardIcons.SubIcons;
+exports.DSMobileCard = DSMobileCard;

package/cjs/MobileCard/props.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const cardPropsTypes = {
+  /**
+   * card height
+   */
+  height: reactDesc.PropTypes.oneOf(['s', 'm']).description('card height'),
+
+  /**
+   * Defines mobile card title
+   */
+  children: reactDesc.PropTypes.string.description('Defines mobile card title').isRequired,
+
+  /**
+   * Wheter if the card is expandable or not
+   */
+  expandable: reactDesc.PropTypes.bool.description('Wheter if the card is expandable or not'),
+
+  /**
+   * content to display in expand card section
+   */
+  expandedContent: reactDesc.PropTypes.element.description('content to display in expand card section'),
+
+  /**
+   * Icon to the left of the card. Size is adjusted automatically.
+   */
+  leftAddOn: reactDesc.PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
+
+  /**
+   * Pass an element to render left. For example a Button with an icon
+   */
+  leftProp: reactDesc.PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
+   */
+  rightProp: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 strings
+   */
+  subText: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1 or 2 strings'),
+
+  /**
+   * SubIcons component
+   */
+  subIcons: reactDesc.PropTypes.element.description('SubIcons component'),
+
+  /**
+   * Pass an array of 1, 2 or 3 strings
+   */
+  details: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
+  theme: reactDesc.PropTypes.object.description('').isRequired,
+  value: reactDesc.PropTypes.number.description(''),
+  cardContent: reactDesc.PropTypes.node.description('JSX content for the card')
+};
+
+exports.cardPropsTypes = cardPropsTypes;

package/cjs/MobileCard/useHeight.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var polished = require('polished');
+
+function getCurrentFont() {
+  return Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
+}
+
+function useHeight(ref) {
+  const [height, setHeight] = React.useState('0rem');
+  const [currentFont, setCurrentFont] = React.useState(13);
+  React.useEffect(() => {
+    setCurrentFont(getCurrentFont());
+  }, []);
+  React.useEffect(() => {
+    if (ref.current && height !== polished.rem(ref.current.clientHeight, currentFont)) {
+      setHeight(polished.rem(ref.current.clientHeight, currentFont));
+    }
+  }, [ref.current, currentFont]);
+  return height;
+}
+
+exports.useHeight = useHeight;