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

package/dist/es/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/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js

@@ -43,7 +43,7 @@ const TaskRecommendationInput = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "v1 p-v task"
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: `uc mb-v ${isOptionSelected ? styleNames.modifierActive : ''}`,
+    className: `uc mb-v ${isOptionSelected ? 'c-on-x' : 'c-x'}`,
     name: name
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
     value: value,

package/dist/es/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/es/utils/relay/EnvironmentProvider.js

@@ -0,0 +1,11 @@
+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); }
+
+import React from 'react';
+import { RelayEnvironmentProvider } from 'react-relay/hooks';
+import environment from "./environment";
+
+const RelayEnvProvider = props => /*#__PURE__*/React.createElement(RelayEnvironmentProvider, _extends({
+  environment: environment
+}, props));
+
+export default RelayEnvProvider;

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

@@ -0,0 +1,3 @@
+import { createMockEnvironment } from 'relay-test-utils';
+const environment = createMockEnvironment();
+export default environment;

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

@@ -0,0 +1,4 @@
+export { default as RelayEnvironmentProvider } from "./EnvironmentProvider";
+export { default as environment } from "./environment";
+export { default as mockResolvers } from "./mockResolvers";
+export { default as mockRelayOperation } from "./mockRelayOperation";

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

@@ -0,0 +1,9 @@
+import { MockPayloadGenerator } from 'relay-test-utils';
+import relayEnvironment from "./environment";
+import mockResolvers from "./mockResolvers";
+
+function mockRelayOperation(overrideMockResolvers = null) {
+  relayEnvironment.mock.queueOperationResolver(operation => MockPayloadGenerator.generate(operation, overrideMockResolvers || mockResolvers));
+}
+
+export default mockRelayOperation;

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

@@ -0,0 +1,275 @@
+const 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 => {
+    const {
+      args: {
+        first,
+        offset
+      }
+    } = allArgs;
+    const 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'
+        }
+      }
+    }]
+  })
+};
+export default customMockResolvers;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.67",
+  "version": "2.0.0-alpha.69",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -3729,7 +3729,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  about 2 months ago
+  2 months ago
 </p>
 `;
 
@@ -11254,6 +11254,48 @@ exports[`Storyshots c/Hero Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots c/Modal Base 1`] = `
+<div
+  className="base modal"
+>
+  <div
+    className="base modal-header"
+  >
+    <p>
+      Modal Title
+    </p>
+    <button
+      className="base button close-button x-anchor modifierCompact"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="f-icons"
+      >
+        Y
+      </span>
+    </button>
+  </div>
+  <div
+    className="modal-body"
+  >
+    <div>
+      This is a modal.
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots c/Modal Functional Modal 1`] = `
+<button
+  className="base button x-anchor"
+  onClick={[Function]}
+  type="button"
+>
+  Click to open modal
+</button>
+`;
+
 exports[`Storyshots c/Shortener Base 1`] = `
 <span
   className="base shortener"

package/src/stories/c/Modal.stories.jsx

@@ -0,0 +1,66 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import { Button, Modal } from 'ui'
+
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title        :'c/Modal',
+  component    :Modal,
+  subcomponents:{
+    // Item:ModalButton.Item
+  },
+  decorators:[
+    // (storyfn) => <ModalContextProvider>{storyfn()}</ModalContextProvider>,
+  ],
+  argTypes:{
+    children:{ control: { type: 'text' } },
+    color   :{ control: { type: 'select', options: ALL_COLORS } },
+    title   :{ control: { type: 'text' } },
+  },
+}
+
+const Template = (args) => {
+  const { children } = args
+
+  return (
+    <Modal {...args}>
+      {children}
+    </Modal>
+  )
+}
+
+const FunctionalTemplate = (args) => {
+  const { children } = args
+  const [isOpen, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(!isOpen)} color="anchor">
+        Click to open modal
+      </Button>
+      {isOpen && (
+        <Modal {...args} setOpen={setOpen}>
+          {children}
+        </Modal>
+      )}
+    </>
+  )
+}
+
+export const Base = Template.bind({})
+Base.args = {
+  children:<div>This is a modal.</div>,
+  color   :'anchor',
+  title   :'Modal Title',
+}
+
+export const FunctionalModal = FunctionalTemplate.bind({})
+FunctionalModal.args = {
+  color   :'anchor',
+  title   :'Modal Title',
+  children:<div>This is a modal.</div>,
+}

package/src/ui/a/ContentTree/ContentTree.jsx

@@ -77,7 +77,7 @@ ContentTree.propTypes = {
    */
   target:PropTypes.oneOfType([
     PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(String) }),
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]),
 }
 

package/src/ui/a/Popover/Popover.jsx

@@ -141,7 +141,7 @@ Popover.propTypes = {
    */
   parentRef:PropTypes.oneOfType([
     PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(String) }),
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]),
 }
 

package/src/ui/c/Modal/Modal.jsx

@@ -0,0 +1,112 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+import { ModalHeader } from './common'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'modal'
+
+/**
+ * This is the component description.
+ */
+const Modal = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  title,
+  setOpen,
+  color,
+  onClose,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const close = () => {
+    setOpen?.(false)
+    onClose?.()
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      <ModalHeader
+        title={title}
+        close={close}
+        color={color}
+      />
+      <div className="modal-body">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+Modal.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   *  The title to pass to the header
+   */
+  title:PropTypes.string.isRequired,
+
+  /**
+   *  The color for the button to open and close the modal
+   */
+  color:PropTypes.string.isRequired,
+
+  /**
+   *  The function to open the modal
+   */
+  setOpen:PropTypes.func.isRequired,
+
+  /**
+   *  The function to run upon closing the modal, if any
+   */
+  onClose:PropTypes.func,
+}
+
+Modal.defaultProps = {
+  //
+}
+
+export default Modal