@pareto-engineering/design-system 2.0.0-alpha.67 → 2.0.0-alpha.68

package/dist/cjs/{c/BlogPostsList/common/Card → d/Modal}/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Card", {
+Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
-    return _Card.default;
+    return _Modal.default;
   }
 });
 
-var _Card = _interopRequireDefault(require("./Card"));
+var _Modal = _interopRequireDefault(require("./Modal"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/d/Modal/styles.scss

@@ -0,0 +1,52 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding: 1em;
+$default-margin: 2em;
+
+.#{bem.$base}.modal{
+    display: flex;
+    background: #ffffff;
+    box-shadow: 0 10px 20px rgba(black, 0.2);
+    flex-direction: column;
+    left: 50%;
+    max-height: 90vh;
+    max-width: 90%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    min-width: 20em;
+    
+  .modal-header {
+    display: flex;
+    justify-content: center;
+    padding: $default-padding;
+
+    > span {
+      margin: 0 $default-margin;
+    }
+
+    > .button {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      position: absolute;
+      right: 0px;
+      top: 0px;
+    }
+  }
+
+  .modal-content {
+    border-bottom: 1px solid #e0e0e0;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: center;
+    padding: $default-padding;
+  }
+
+  .modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: $default-padding;
+  }
+}

package/dist/cjs/f/fields/TaskRecommendationInput/TaskRecommendationInput.js

@@ -60,7 +60,7 @@ var TaskRecommendationInput = _ref => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "v1 p-v task"
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: "uc mb-v ".concat(isOptionSelected ? _bem.default.modifierActive : ''),
+    className: "uc mb-v ".concat(isOptionSelected ? 'c-on-x' : 'c-x'),
     name: name
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
     value: value,

package/dist/cjs/f/fields/TaskRecommendationInput/styles.scss

@@ -16,10 +16,6 @@
       align-items: center;
       height: 100%;
 
-      .#{bem.$modifier-active} {
-        color: var(--on-x);
-      }
-
       .input {
         appearance: none;
         position: absolute;

package/dist/cjs/utils/relay/EnvironmentProvider.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _hooks = require("react-relay/hooks");
+
+var _environment = _interopRequireDefault(require("./environment"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+var RelayEnvProvider = props => /*#__PURE__*/_react.default.createElement(_hooks.RelayEnvironmentProvider, _extends({
+  environment: _environment.default
+}, props));
+
+var _default = RelayEnvProvider;
+exports.default = _default;

package/dist/cjs/utils/relay/environment.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _relayTestUtils = require("relay-test-utils");
+
+var environment = (0, _relayTestUtils.createMockEnvironment)();
+var _default = environment;
+exports.default = _default;

package/dist/cjs/utils/relay/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RelayEnvironmentProvider", {
+  enumerable: true,
+  get: function get() {
+    return _EnvironmentProvider.default;
+  }
+});
+Object.defineProperty(exports, "environment", {
+  enumerable: true,
+  get: function get() {
+    return _environment.default;
+  }
+});
+Object.defineProperty(exports, "mockResolvers", {
+  enumerable: true,
+  get: function get() {
+    return _mockResolvers.default;
+  }
+});
+Object.defineProperty(exports, "mockRelayOperation", {
+  enumerable: true,
+  get: function get() {
+    return _mockRelayOperation.default;
+  }
+});
+
+var _EnvironmentProvider = _interopRequireDefault(require("./EnvironmentProvider"));
+
+var _environment = _interopRequireDefault(require("./environment"));
+
+var _mockResolvers = _interopRequireDefault(require("./mockResolvers"));
+
+var _mockRelayOperation = _interopRequireDefault(require("./mockRelayOperation"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/utils/relay/mockRelayOperation.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _relayTestUtils = require("relay-test-utils");
+
+var _environment = _interopRequireDefault(require("./environment"));
+
+var _mockResolvers = _interopRequireDefault(require("./mockResolvers"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function mockRelayOperation() {
+  var overrideMockResolvers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+  _environment.default.mock.queueOperationResolver(operation => _relayTestUtils.MockPayloadGenerator.generate(operation, overrideMockResolvers || _mockResolvers.default));
+}
+
+var _default = mockRelayOperation;
+exports.default = _default;

package/dist/cjs/utils/relay/mockResolvers.js

@@ -0,0 +1,282 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var customMockResolvers = {
+  String: () => 'Test string',
+  UserNode: () => ({
+    id: 'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+    firstName: 'Collins',
+    isSuperuser: false
+  }),
+  TaskNode: () => ({
+    id: 'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+    title: 'Task1',
+    status: {
+      id: 'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+      status: 'In Review'
+    },
+    requester: {
+      id: 'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+      firstName: 'Collins'
+    },
+    userTeam: {
+      id: 'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+      name: 'Team 1'
+    },
+    manager: {
+      id: 'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+      firstName: 'manager'
+    },
+    createdAt: '2021-09-23',
+    updatedAt: '2021-09-23',
+    dueDate: '2021-10-30',
+    requestDate: '2020-01-01',
+    description: 'First task'
+  }),
+  TeamNode: () => ({
+    id: 'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+    name: 'Team 1',
+    credits: 20.12,
+    billingEmail: 'team1@hellopareto.com',
+    hourlyRate: 20,
+    partner: {
+      firstName: 'Test1',
+      lastName: 'assd'
+    }
+  }),
+  GroupNode: () => ({
+    id: 'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlk',
+    name: 'admin'
+  }),
+  TaskNodeConnection: () => ({
+    pageInfo: {
+      hasNextPage: true,
+      hasPreviousPage: true
+    },
+    edges: [{
+      node: {
+        id: 'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+        title: 'Task1',
+        status: {
+          id: 'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+          status: 'In Review'
+        },
+        requester: {
+          id: 'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+          firstName: 'Collins'
+        },
+        userTeam: {
+          id: 'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+          name: 'Team 1'
+        },
+        manager: {
+          id: 'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+          firstName: 'manager'
+        },
+        createdAt: '2021-09-23',
+        dueDate: '2021-10-30',
+        requestDate: '2020-01-01',
+        description: 'First task'
+      }
+    }, {
+      node: {
+        id: 'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+        title: 'Task2',
+        status: {
+          id: 'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+          status: 'In Review'
+        },
+        requester: {
+          id: 'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+          firstName: 'Collins'
+        },
+        userTeam: {
+          id: 'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+          name: 'Team 2'
+        },
+        manager: {
+          id: 'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+          firstName: 'manager'
+        },
+        createdAt: '2021-09-23',
+        dueDate: '2021-10-30',
+        requestDate: '2020-01-01',
+        description: 'Second task'
+      }
+    }]
+  }),
+  UserNodeConnection: allArgs => {
+    var {
+      args: {
+        first,
+        offset
+      }
+    } = allArgs;
+    var edges = [{
+      node: {
+        id: 'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+        firstName: 'Collins'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6MDEyN2E1NmItYjAxOS00NmQxLTg2NTEtYWEzOGIxZTUwNTA5',
+        firstName: 'Amritha'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6YzcwYWIxMDItZWE2Yy00ZWNhLTk0M2ItOTA2OWQwN2RiMDQ0',
+        firstName: 'Marsya'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6OTUyNjg1NWYtZTg3NC00ZTlkLWFlZTgtZDZjODc3NDNlNTRh',
+        firstName: 'James'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6OTFmOTE4NTYtNjg0Yi00ODhhLWE0YzktZGU5ZDQ5YmJjM2Mz',
+        firstName: 'Adrian'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6OTNkZGU3NGEtYTA2Yi00MDMzLWIwMDAtMTFkZDY0N2Y3OWE4',
+        firstName: 'Melissa'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6MjgyYTk1MjctMDI4OS00MDlhLWFjNTktYWJkNTFkODAyMjFj',
+        firstName: 'Beto'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6YmIxYzI5YmEtYTk0OS00M2I3LWIxMWEtZDQxMjM5ZWI0ZWI2',
+        firstName: 'Romie'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6ZjZhNzBiZTgtY2FkMC00NzNjLWEyODUtNDdkMGVmYjQxYTRl',
+        firstName: 'Miguel'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6Y2JlOGM4ZTYtY2Q2Zi00M2RlLWI4YmQtODU3YWRhZjYyMzVj',
+        firstName: 'Phoebe'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6NDA5MWM1MDUtYjY1MC00M2Y1LTg3NTEtMDc1NTBkMzJhYTcy',
+        firstName: 'Kim'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6ZjE0MGUxYTItM2I4My00NmY1LWIzMDQtYmFiOGZjMTc5ZmU4',
+        firstName: 'Liz'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6ZGYyOGE5MDYtM2NhMS00NTVmLWIzZmUtNjY5YWFkZTNiZjRk',
+        firstName: 'Deepanshu'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6MjBhMDBkYjgtZDExNi00YzAyLWEyOTUtYWM5MzIwMjUwMWU3',
+        firstName: 'Jennica'
+      }
+    }, {
+      node: {
+        id: 'VXNlck5vZGU6MjczNDllYjMtYzNmYi00ZmVkLWE1N2YtNTFjZGJlODI0MWU2',
+        firstName: 'Michelle'
+      }
+    }];
+    return {
+      pageInfo: {
+        hasNextPage: true,
+        hasPreviousPage: true
+      },
+      edges: edges.slice(offset, offset + first)
+    };
+  },
+  WorkHoursNodeConnection: () => ({
+    pageInfo: {
+      hasNextPage: true,
+      hasPreviousPage: true
+    },
+    edges: [{
+      node: {
+        id: 'V29ya0hvdXJzTm9kZTplYWJlYmEyNC0wNTlmLTQxMjEtODIzYi0yYmU2YzMxMmZlNzA=',
+        associate: {
+          firstName: 'Des',
+          lastName: 'assd'
+        },
+        timeSpent: 15,
+        log: 'asd',
+        paidOut: false,
+        sentInvoice: true,
+        createdAt: '2021-09-05T17:08:49.000-0430',
+        startedAt: '2021-09-05T17:08:49.000-0430'
+      }
+    }, {
+      node: {
+        id: 'V29ya0hvdXJzTm9kZTplYmZiZTllZS04NWNkLTRhNDktYTZhMi0zNmNhMTU0M2EwMDU=',
+        associate: {
+          firstName: 'Ella',
+          lastName: 'asdasd'
+        },
+        timeSpent: 25,
+        log: 'aasdasdsd',
+        paidOut: true,
+        sentInvoice: false,
+        createdAt: '2021-09-15T17:08:49.000-0430',
+        startedAt: '2021-09-15T17:08:49.000-0430'
+      }
+    }]
+  }),
+  TeamNodeConnection: () => ({
+    pageInfo: {
+      hasNextPage: true,
+      hasPreviousPage: true
+    },
+    edges: [{
+      node: {
+        id: 'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+        name: 'Team 1',
+        credits: 20.12,
+        billingEmail: 'team1@hellopareto.com',
+        hourlyRate: 20,
+        partner: {
+          firstName: 'Test1',
+          lastName: 'assd'
+        }
+      }
+    }, {
+      node: {
+        id: 'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
+        name: 'Team 2',
+        credits: 20.12,
+        billingEmail: 'team2@hellopareto.com',
+        hourlyRate: 20,
+        partner: {
+          firstName: 'Test2',
+          lastName: 'assd'
+        }
+      }
+    }, {
+      node: {
+        id: 'VGVhbU5vZGU6MDExMmEyZmEtYzE0YS00MGRhLThiNWQtMDMzNTkyNDQ3ZDI2',
+        name: 'Team 3',
+        credits: 20.12,
+        billingEmail: 'team3@hellopareto.com',
+        hourlyRate: 20,
+        partner: {
+          firstName: 'Test3',
+          lastName: 'assd'
+        }
+      }
+    }]
+  })
+};
+var _default = customMockResolvers;
+exports.default = _default;

package/dist/es/{v3/Button/Button.js → a/ColumnLabel/ColumnLabel.js}

@@ -5,30 +5,38 @@ import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'button';
+const componentClassName = 'column-label';
 /**
  * This is the component description.
  */
 
-const Button = ({
+const ColumnLabel = ({
   id,
   className: userClassName,
   style,
-  children // ...otherProps
-
+  value,
+  color: FontColor,
+  getColor,
+  image
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
+  const color = getColor ? getColor(value) : FontColor;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, children);
+    style: { ...style,
+      color
+    }
+  }, image && /*#__PURE__*/React.createElement("img", {
+    className: "image v50 mr-v",
+    src: image,
+    alt: `${value}`
+  }), value);
 };
 
-Button.propTypes = {
+ColumnLabel.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -45,10 +53,26 @@ Button.propTypes = {
   style: PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   *  The value to display for the label
+   */
+  value: PropTypes.string,
+
+  /**
+   *  The default font color to display for the label
+   */
+  color: PropTypes.string,
+
+  /**
+   * The function passed to decide the color of the label
+   */
+  getColor: PropTypes.func,
+
+  /**
+   * The image to be displayed if passed
    */
-  children: PropTypes.node
+  image: PropTypes.string
 };
-Button.defaultProps = {// someProp:false
+ColumnLabel.defaultProps = {
+  color: 'var(--on-x)'
 };
-export default Button;
+export default ColumnLabel;

package/dist/es/a/ColumnLabel/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as ColumnLabel } from "./ColumnLabel";

package/dist/es/a/ColumnLabel/styles.scss

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-image-size: 2em;
+$default-font-size: calc(1 em * var(--s-1));
+$default-padding: .5em;
+
+.#{bem.$base}.column-label{
+    align-items: center;
+    background: var(--x);
+    border-radius: 3em;
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    img {
+        border-radius: 50%;
+        height: $default-image-size;
+        width: $default-image-size;
+    }
+}

package/dist/es/a/ContentTree/ContentTree.js

@@ -58,7 +58,7 @@ ContentTree.propTypes = {
    * The reference to the parent element.
    */
   target: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(String)
+    current: PropTypes.instanceOf(Element)
   })])
 };
 ContentTree.defaultProps = {

package/dist/es/a/ModalContextProvider/ModalContextProvider.js

@@ -0,0 +1,47 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+import PropTypes from 'prop-types'; // Package-level Imports
+
+import ModalContext from "./Context";
+import { ModalRoot } from "./common";
+/**
+ * This is the component description.
+ */
+
+const ModalContextProvider = ({
+  children
+}) => {
+  const [isOpen, setModalState] = useState(false);
+  const [modal, setModal] = useState({});
+  const setOpen = useCallback(() => setModalState(true), []);
+  const setClose = useCallback(() => setModalState(false), []);
+
+  const openModal = component => {
+    setModal(() => component);
+    setOpen();
+  };
+
+  return /*#__PURE__*/React.createElement(ModalContext.Provider, {
+    value: {
+      isOpen,
+      modal,
+      setOpen,
+      setClose,
+      setModal,
+      openModal
+    }
+  }, children, modal && /*#__PURE__*/React.createElement(ModalRoot, {
+    modal: modal
+  }));
+};
+
+ModalContextProvider.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node
+};
+ModalContextProvider.defaultProps = {// someProp:false
+};
+export default ModalContextProvider;

package/dist/es/a/ModalContextProvider/common/ModalRoot/ModalRoot.js

@@ -0,0 +1,36 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import styleNames from '@pareto-engineering/bem';
+import PropTypes from 'prop-types';
+import { useModal } from "../../../..";
+const baseClassName = styleNames.base;
+const componentClassName = 'modal-root'; // Local Definitions
+
+/**
+ * This is the component description.
+ */
+
+const ModalRoot = ({
+  modal: ModalComponent
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const {
+    isOpen
+  } = useModal();
+  return isOpen ? /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement(ModalComponent, null)) : null;
+};
+
+ModalRoot.propTypes = {
+  /**
+   *  The component to render
+   */
+  modal: PropTypes.oneOfType([PropTypes.elementType, PropTypes.object])
+};
+ModalRoot.defaultProps = {// someProp:false
+};
+export default ModalRoot;

package/dist/es/a/ModalContextProvider/common/ModalRoot/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as ModalRoot } from "./ModalRoot";