@elliemae/ds-mobile 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/MobileCard/Group.js

@@ -1,76 +1,86 @@
-import * as React from "react";
-import React2 from "react";
-import { describe, PropTypes } from "react-desc";
-import styled from "styled-components";
-import Group from "@elliemae/ds-shared/GroupContext/Group";
-import { Grid } from "@elliemae/ds-grid";
-import { color, border, withTheme, truncate, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import { StyledCard as Card } from "./StyledCard";
-const GroupGrid = styled(Grid)`
-  ${Card} {
-    border-top: none;
-  }
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React from 'react';
+import { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import Group from '@elliemae/ds-shared/GroupContext/Group';
+import { Grid } from '@elliemae/ds-grid';
+import { truncate, __UNSAFE_SPACE_TO_DIMSUM, color, border, withTheme } from '@elliemae/ds-system';
+import { StyledCard } from './StyledCard.js';
 
-  ${({ theme, withTopBorder }) => withTopBorder ? `border-top: ${border(theme.colors.neutral["100"])}` : ""}
-`;
-const GroupTitle = styled.span`
-  ${truncate()}
-`;
-const GroupTitleGrid = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 0 ${(props2) => props2.theme.space.xs};
-  font-size: ${(props2) => `calc(${__UNSAFE_SPACE_TO_DIMSUM(props2.theme.space.m)} / 2)`};
-  ${color("neutral", "700")}
-  font-weight: ${(props2) => props2.theme.fontWeights.semibold};
-  background-color: ${(props2) => props2.theme.colors.brand["200"]};
-  border-top: ${(props2) => border(props2.theme.colors.brand["300"])};
-  line-height: ${(props2) => __UNSAFE_SPACE_TO_DIMSUM(props2.theme.space.m)};
-  @media (min-width: 1024px) {
-    background-color: ${(props2) => props2.theme.colors.neutral["080"]};
-    border-top: ${(props2) => border(props2.theme.colors.neutral["080"])};
-  }
-`;
-const MobileCardGroup = ({
-  children,
-  theme,
-  title,
-  action,
-  activeValue,
-  allowMultipleOpen = false,
-  onChange = () => null
-}) => {
-  const rows = !title ? ["auto"] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), "auto"];
-  return /* @__PURE__ */ React2.createElement(Group, {
+const GroupGrid = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-17xukaf-0"
+})(["", "{border-top:none;}", ""], StyledCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
+  return withTopBorder ? "border-top: ".concat(border(theme.colors.neutral['100'])) : '';
+});
+const GroupTitle = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-17xukaf-1"
+})(["", ""], truncate());
+const GroupTitleGrid = /*#__PURE__*/styled.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(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => border(props.theme.colors.brand['300']), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => border(props.theme.colors.neutral['080']));
+
+const MobileCardGroup = _ref2 => {
+  let {
+    children,
+    theme,
+    title,
+    action,
     activeValue,
+    allowMultipleOpen = false,
+    onChange = () => null
+  } = _ref2;
+  const rows = !title ? ['auto'] : [__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
+  return /*#__PURE__*/_jsx(Group, {
+    activeValue: activeValue,
     multiple: allowMultipleOpen,
-    onChange
-  }, /* @__PURE__ */ React2.createElement(GroupGrid, {
+    onChange: onChange
+  }, void 0, /*#__PURE__*/_jsx(GroupGrid, {
     withTopBorder: !title,
-    rows
-  }, !!title && /* @__PURE__ */ React2.createElement(GroupTitleGrid, {
+    rows: rows
+  }, void 0, !!title && /*#__PURE__*/_jsx(GroupTitleGrid, {
     pl: "xxs"
-  }, /* @__PURE__ */ React2.createElement(GroupTitle, null, title), action), /* @__PURE__ */ React2.createElement(Grid, null, React2.Children.map(children, (child, idx) => React2.cloneElement(child, {
+  }, void 0, /*#__PURE__*/_jsx(GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx(Grid, {}, void 0, React.Children.map(children, (child, idx) => /*#__PURE__*/React.cloneElement(child, {
     key: idx,
     value: idx,
     idx
   }), null))));
 };
+
 const props = {
-  theme: PropTypes.object.isRequired.description(""),
-  title: PropTypes.string.description(""),
-  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(""),
-  action: PropTypes.element.description(""),
-  activeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(""),
-  allowMultipleOpen: PropTypes.bool.description(""),
-  onChange: PropTypes.func.description("")
+  theme: PropTypes.object.isRequired.description(''),
+
+  /**
+   * Defines group title
+   */
+  title: PropTypes.string.description(''),
+
+  /**
+   * Pass one or more Mobile Cards to render as a group
+   */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description(''),
+
+  /**
+   * Group header addon
+   */
+  action: PropTypes.element.description(''),
+
+  /**  */
+  activeValue: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]).description(''),
+
+  /**  */
+  allowMultipleOpen: PropTypes.bool.description(''),
+
+  /**  */
+  onChange: PropTypes.func.description('')
 };
-MobileCardGroup.propTypes = props;
 const DSMobileCardGroupWithSchema = describe(MobileCardGroup);
 DSMobileCardGroupWithSchema.propTypes = props;
-var Group_default = withTheme(MobileCardGroup);
-export {
-  DSMobileCardGroupWithSchema,
-  Group_default as default
-};
-//# sourceMappingURL=Group.js.map
+var MobileGroup = withTheme(MobileCardGroup);
+
+export { DSMobileCardGroupWithSchema, MobileGroup as default };

package/esm/MobileCard/StyledCard.js

@@ -1,15 +1,8 @@
-import * as React from "react";
-import styled from "styled-components";
-import { border } from "@elliemae/ds-system";
-const StyledCard = styled.div`
-  display: flex;
-  align-items: center;
-  height: fit-content;
-  min-height: ${(props) => props.minHeight};
-  border: ${(props) => border(props.theme.colors.neutral["100"])};
-  border-bottom: ${(props) => border(".5px", props.theme.colors.neutral["500"])};
-`;
-export {
-  StyledCard
-};
-//# sourceMappingURL=StyledCard.js.map
+import styled from 'styled-components';
+import { border } from '@elliemae/ds-system';
+
+const StyledCard = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-28g2t3-0"
+})(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], props => props.minHeight, props => border(props.theme.colors.neutral['100']), props => border('.5px', props.theme.colors.neutral['500']));
+
+export { StyledCard };

package/esm/MobileCard/index.js

@@ -1,16 +1,11 @@
-import * as React from "react";
-import MobileCard, { DSMobileCardWithSchema } from "./Card";
-import MobileGroup, { DSMobileCardGroupWithSchema } from "./Group";
-import { ActionAddon } from "./ActionAddon";
+import MobileCard from './Card.js';
+export { DSMobileCardWithSchema, default } from './Card.js';
+import MobileGroup from './Group.js';
+export { DSMobileCardGroupWithSchema } from './Group.js';
+export { ActionAddon } from './ActionAddon.js';
+export { SubIcons } from './CardIcons.js';
+
 MobileCard.Group = MobileGroup;
 const DSMobileCard = MobileCard;
-export * from "./CardIcons";
-var MobileCard_default = MobileCard;
-export {
-  ActionAddon,
-  DSMobileCard,
-  DSMobileCardGroupWithSchema,
-  DSMobileCardWithSchema,
-  MobileCard_default as default
-};
-//# sourceMappingURL=index.js.map
+
+export { DSMobileCard };

package/esm/MobileCard/props.js

@@ -1,21 +1,58 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const cardPropsTypes = {
-  height: PropTypes.oneOf(["s", "m"]).description("card height"),
-  children: PropTypes.string.description("Defines mobile card title").isRequired,
-  expandable: PropTypes.bool.description("Wheter if the card is expandable or not"),
-  expandedContent: PropTypes.element.description("content to display in expand card section"),
-  leftAddOn: PropTypes.element.description("Icon to the left of the card. Size is adjusted automatically."),
-  leftProp: PropTypes.element.description("Pass an element to render left. For example a Button with an icon"),
-  rightProp: PropTypes.arrayOf(PropTypes.element).description("Pass an array of 1 or 2 elements to render right. For example a Button with an icon"),
-  subText: PropTypes.arrayOf(PropTypes.string).description("Pass an array of 1 or 2 strings"),
-  subIcons: PropTypes.element.description("SubIcons component"),
-  details: PropTypes.arrayOf(PropTypes.string).description("Pass an array of 1, 2 or 3 strings"),
-  theme: PropTypes.object.description("").isRequired,
-  value: PropTypes.number.description(""),
-  cardContent: PropTypes.node.description("JSX content for the card")
+  /**
+   * card height
+   */
+  height: PropTypes.oneOf(['s', 'm']).description('card height'),
+
+  /**
+   * Defines mobile card title
+   */
+  children: PropTypes.string.description('Defines mobile card title').isRequired,
+
+  /**
+   * Wheter if the card is expandable or not
+   */
+  expandable: PropTypes.bool.description('Wheter if the card is expandable or not'),
+
+  /**
+   * content to display in expand card section
+   */
+  expandedContent: PropTypes.element.description('content to display in expand card section'),
+
+  /**
+   * Icon to the left of the card. Size is adjusted automatically.
+   */
+  leftAddOn: 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: 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: PropTypes.arrayOf(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: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1 or 2 strings'),
+
+  /**
+   * SubIcons component
+   */
+  subIcons: PropTypes.element.description('SubIcons component'),
+
+  /**
+   * Pass an array of 1, 2 or 3 strings
+   */
+  details: PropTypes.arrayOf(PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
+  theme: PropTypes.object.description('').isRequired,
+  value: PropTypes.number.description(''),
+  cardContent: PropTypes.node.description('JSX content for the card')
 };
-export {
-  cardPropsTypes
-};
-//# sourceMappingURL=props.js.map
+
+export { cardPropsTypes };

package/esm/MobileCard/useHeight.js

@@ -1,11 +1,13 @@
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { rem } from "polished";
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+import { rem } from 'polished';
+
 function getCurrentFont() {
-  return Number(window.getComputedStyle(document.querySelector(":root")).getPropertyValue("font-size").match(/\d+/)[0]);
+  return Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
 }
+
 function useHeight(ref) {
-  const [height, setHeight] = useState("0rem");
+  const [height, setHeight] = useState('0rem');
   const [currentFont, setCurrentFont] = useState(13);
   useEffect(() => {
     setCurrentFont(getCurrentFont());
@@ -17,7 +19,5 @@ function useHeight(ref) {
   }, [ref.current, currentFont]);
   return height;
 }
-export {
-  useHeight
-};
-//# sourceMappingURL=useHeight.js.map
+
+export { useHeight };