@pareto-engineering/design-system 2.0.0-alpha.7 → 2.0.0-alpha.71

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

@@ -1,19 +1,32 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 @use "@pareto-engineering/bem";
 
+$default-padding: .5em;
+
 .#{bem.$base}.text-area-input{
   display: flex;
   flex-direction: column;
 
   .textarea {
-    background: var(--light-x);
-    color: var(--on-x);
+    border: var(--theme-border-style) var(--dark-y);
+    background: var(--light-y);
+    color: var(--on-y);
+    padding: $default-padding;
 
-    &:focus {
-      background: var(--dark-x);
+    &::placeholder{
+      color: var(--metadata);
     }
-  }
-}
 
+    &:not(:disabled):hover{
+      border: var(--theme-border-style) var(--light-background4);
+    }
 
+     &:disabled {
+      background-color: var(--dark-y);
+    }
 
+    &:focus {
+      background: var(--light-background4);
+    }
+  }
+}

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

@@ -15,40 +15,46 @@ Object.defineProperty(exports, "SelectInput", {
     return _SelectInput.SelectInput;
   }
 });
-Object.defineProperty(exports, "RadioInput", {
+Object.defineProperty(exports, "ChoicesInput", {
   enumerable: true,
   get: function get() {
-    return _RadioInput.RadioInput;
+    return _ChoicesInput.ChoicesInput;
   }
 });
-Object.defineProperty(exports, "CheckboxInput", {
+Object.defineProperty(exports, "TextareaInput", {
   enumerable: true,
   get: function get() {
-    return _CheckboxInput.CheckboxInput;
+    return _TextareaInput.TextareaInput;
   }
 });
-Object.defineProperty(exports, "TaskRecommendationInput", {
+Object.defineProperty(exports, "RatingsInput", {
   enumerable: true,
   get: function get() {
-    return _TaskRecommendationInput.TaskRecommendationInput;
+    return _RatingsInput.RatingsInput;
   }
 });
-Object.defineProperty(exports, "ChoicesInput", {
+Object.defineProperty(exports, "QueryCombobox", {
   enumerable: true,
   get: function get() {
-    return _ChoicesInput.ChoicesInput;
+    return _QueryCombobox.QueryCombobox;
   }
 });
-Object.defineProperty(exports, "TextareaInput", {
+Object.defineProperty(exports, "QuerySelect", {
   enumerable: true,
   get: function get() {
-    return _TextareaInput.TextareaInput;
+    return _QuerySelect.QuerySelect;
   }
 });
-Object.defineProperty(exports, "RatingsInput", {
+Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function get() {
-    return _RatingsInput.RatingsInput;
+    return _Checkbox.Checkbox;
+  }
+});
+Object.defineProperty(exports, "QueryChoices", {
+  enumerable: true,
+  get: function get() {
+    return _QueryChoices.QueryChoices;
   }
 });
 
@@ -56,14 +62,16 @@ var _TextInput = require("./TextInput");
 
 var _SelectInput = require("./SelectInput");
 
-var _RadioInput = require("./RadioInput");
+var _ChoicesInput = require("./ChoicesInput");
 
-var _CheckboxInput = require("./CheckboxInput");
+var _TextareaInput = require("./TextareaInput");
 
-var _TaskRecommendationInput = require("./TaskRecommendationInput");
+var _RatingsInput = require("./RatingsInput");
 
-var _ChoicesInput = require("./ChoicesInput");
+var _QueryCombobox = require("./QueryCombobox");
 
-var _TextareaInput = require("./TextareaInput");
+var _QuerySelect = require("./QuerySelect");
+
+var _Checkbox = require("./Checkbox");
 
-var _RatingsInput = require("./RatingsInput");
+var _QueryChoices = require("./QueryChoices");

package/dist/cjs/form-reset.scss

@@ -19,7 +19,7 @@ button,
 textarea,
 label,
 select {
-  background-color: inherit;
+  // background-color: inherit;
   border: 0;
   display: inline-block;
   font: inherit;

package/dist/cjs/index.js

@@ -80,4 +80,30 @@ Object.keys(_f).forEach(function (key) {
       return _f[key];
     }
   });
+});
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
+    }
+  });
+});
+
+var _test = require("./test");
+
+Object.keys(_test).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _test[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _test[key];
+    }
+  });
 });

package/dist/cjs/test/QueryLoader/QueryLoader.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactRelay = require("react-relay");
+
+var _common = require("./common");
+
+var _QueryLoaderHelloQuery;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var testQuery = _QueryLoaderHelloQuery !== void 0 ? _QueryLoaderHelloQuery : (_QueryLoaderHelloQuery = require("./__generated__/QueryLoaderHelloQuery.graphql"), _QueryLoaderHelloQuery.hash && _QueryLoaderHelloQuery.hash !== "b92d001ab0208bd484a99f77c274d5ef" && console.error("The definition of 'QueryLoaderHelloQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _QueryLoaderHelloQuery);
+/**
+ * This is the component description.
+ */
+
+var QueryLoader = () => {
+  var [queryReference, loadQuery] = (0, _reactRelay.useQueryLoader)(testQuery);
+  (0, React.useEffect)(() => {
+    loadQuery({});
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: "loading"
+  }, queryReference ? /*#__PURE__*/React.createElement(_common.PreloadedTestData, {
+    queryReference: queryReference,
+    query: testQuery
+  }) : null);
+};
+
+QueryLoader.defaultProps = {// someProp:false
+};
+var _default = QueryLoader;
+exports.default = _default;

package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -0,0 +1,71 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+'use strict';
+/*::
+import type { ConcreteRequest } from 'relay-runtime';
+export type QueryLoaderHelloQueryVariables = {||};
+export type QueryLoaderHelloQueryResponse = {|
+  +hello: ?string
+|};
+export type QueryLoaderHelloQuery = {|
+  variables: QueryLoaderHelloQueryVariables,
+  response: QueryLoaderHelloQueryResponse,
+|};
+*/
+
+/*
+query QueryLoaderHelloQuery {
+  hello
+}
+*/
+
+var node
+/*: ConcreteRequest*/
+= function () {
+  var v0 = [{
+    "alias": null,
+    "args": null,
+    "kind": "ScalarField",
+    "name": "hello",
+    "storageKey": null
+  }];
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "QueryLoaderHelloQuery",
+      "selections": v0
+      /*: any*/
+      ,
+      "type": "Query",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "QueryLoaderHelloQuery",
+      "selections": v0
+      /*: any*/
+
+    },
+    "params": {
+      "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
+      "id": null,
+      "metadata": {},
+      "name": "QueryLoaderHelloQuery",
+      "operationKind": "query",
+      "text": "query QueryLoaderHelloQuery {\n  hello\n}\n"
+    }
+  };
+}(); // prettier-ignore
+
+
+node
+/*: any*/
+.hash = 'b92d001ab0208bd484a99f77c274d5ef';
+module.exports = node;

package/dist/cjs/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactRelay = require("react-relay");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* @pareto-engineering/generator-front 1.0.12 */
+
+/**
+ * This is the component description.
+ */
+var PreloadedTestData = _ref => {
+  var {
+    query,
+    queryReference // ...otherProps
+
+  } = _ref;
+  var data = (0, _reactRelay.usePreloadedQuery)(query, queryReference);
+  return /*#__PURE__*/React.createElement("pre", null, JSON.stringify(data, null, 2));
+};
+
+PreloadedTestData.propTypes = {
+  /**
+   * The query to be used to query the test data
+   */
+  query: _propTypes.default.objectOf(_propTypes.default.PropTypes.oneOfType([_propTypes.default.string, _propTypes.default.object])),
+
+  /**
+   *  The query reference to be used to access the preloaded data
+   */
+  queryReference: _propTypes.default.objectOf(_propTypes.default.PropTypes.oneOfType([_propTypes.default.string, _propTypes.default.object]))
+};
+PreloadedTestData.defaultProps = {// someProp:false
+};
+var _default = PreloadedTestData;
+exports.default = _default;

package/dist/cjs/test/QueryLoader/common/PreloadedTestData/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PreloadedTestData", {
+  enumerable: true,
+  get: function get() {
+    return _PreloadedTestData.default;
+  }
+});
+
+var _PreloadedTestData = _interopRequireDefault(require("./PreloadedTestData"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/test/QueryLoader/common/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PreloadedTestData", {
+  enumerable: true,
+  get: function get() {
+    return _PreloadedTestData.PreloadedTestData;
+  }
+});
+
+var _PreloadedTestData = require("./PreloadedTestData");

package/dist/cjs/test/QueryLoader/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "QueryLoader", {
+  enumerable: true,
+  get: function get() {
+    return _QueryLoader.default;
+  }
+});
+
+var _QueryLoader = _interopRequireDefault(require("./QueryLoader"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/{c/SiteFooter/common → test}/index.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Section", {
+Object.defineProperty(exports, "QueryLoader", {
   enumerable: true,
   get: function get() {
-    return _Section.Section;
+    return _QueryLoader.QueryLoader;
   }
 });
 
-var _Section = require("./Section");
+var _QueryLoader = require("./QueryLoader");

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useWindowSize", {
+  enumerable: true,
+  get: function get() {
+    return _useWindowSize.default;
+  }
+});
+Object.defineProperty(exports, "useDynamicPosition", {
+  enumerable: true,
+  get: function get() {
+    return _useDynamicPosition.default;
+  }
+});
+
+var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
+
+var _useDynamicPosition = _interopRequireDefault(require("./useDynamicPosition"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/utils/hooks/useDynamicPosition.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+
+var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var verticalPositions = ['top', 'bottom'];
+var horizontalPositions = ['left', 'right'];
+
+var findCompatiblePositions = (primary, secondaryArray) => {
+  if (verticalPositions.includes(primary)) {
+    return secondaryArray.filter(secondary => horizontalPositions.includes(secondary));
+  }
+
+  if (horizontalPositions.includes(primary)) {
+    return secondaryArray.filter(secondary => verticalPositions.includes(secondary));
+  }
+
+  return [];
+};
+
+var useDynamicPosition = _ref => {
+  var {
+    elementRef,
+    parentRef,
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    // offsetYPx,
+    offsetXPx,
+    throttleMs = 200
+  } = _ref;
+  var isClient = typeof window === 'object';
+  var {
+    height: currentHeight,
+    width: currentWidth
+  } = (0, _useWindowSize.default)();
+  var [primaryPosition, setPrimaryPosition] = (0, _react.useState)(preferredPrimaryOrder[0]);
+  var compatibleSecondaryPositions = (0, _react.useMemo)(() => findCompatiblePositions(primaryPosition, preferredSecondaryOrder), [primaryPosition, preferredSecondaryOrder]);
+  var [secondaryPosition, setSecondaryPosition] = (0, _react.useState)(compatibleSecondaryPositions[0]);
+  var handle = (0, _react.useCallback)((0, _throttle.default)(() => {
+    var parentNode = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current;
+    var elementNode = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current;
+    var {
+      top: parentTop,
+      bottom: parentBottom,
+      right: parentRight,
+      left: parentLeft
+    } = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.getBoundingClientRect()) || {};
+    var {
+      width: elementWidth,
+      height: elementHeight
+    } = (elementNode === null || elementNode === void 0 ? void 0 : elementNode.getBoundingClientRect()) || {};
+    var availablePositions = {
+      top: parentTop >= elementHeight,
+      bottom: currentHeight - parentBottom >= elementHeight,
+      right: parentRight >= elementWidth,
+      left: currentWidth - parentLeft >= elementWidth
+    };
+
+    for (var i = 0; i < preferredPrimaryOrder.length; i += 1) {
+      var position = preferredPrimaryOrder[i];
+
+      if (availablePositions[position]) {
+        setPrimaryPosition(position);
+        break;
+      }
+    }
+
+    for (var _i = 0; _i < compatibleSecondaryPositions.length; _i += 1) {
+      var _position = compatibleSecondaryPositions[_i];
+
+      if (availablePositions[_position]) {
+        setSecondaryPosition(_position);
+        break;
+      }
+    }
+  }, throttleMs), [elementRef, offsetXPx, throttleMs]);
+  (0, _react.useEffect)(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    handle();
+    window.addEventListener('scroll', handle);
+    window.addEventListener('resize', handle);
+    return () => {
+      window.removeEventListener('scroll', handle);
+      window.removeEventListener('resize', handle);
+    };
+  }, [handle]);
+  return {
+    primaryPosition,
+    secondaryPosition
+  };
+};
+
+var _default = useDynamicPosition;
+exports.default = _default;

package/dist/cjs/utils/hooks/useWindowSize.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useWindowSize = function useWindowSize() {
+  var debounceMs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 700;
+  var isClient = typeof window === 'object';
+
+  var getSize = () => ({
+    width: isClient ? window.innerWidth : undefined,
+    height: isClient ? window.innerHeight : undefined
+  });
+
+  var [windowSize, setWindowSize] = (0, _react.useState)(getSize);
+  var handle = (0, _react.useCallback)((0, _debounce.default)(() => {
+    setWindowSize(getSize());
+  }, debounceMs));
+  (0, _react.useEffect)(() => {
+    if (!isClient) {
+      return false;
+    }
+
+    window.addEventListener('resize', handle);
+    return () => window.removeEventListener('resize', handle);
+  }, [getSize, handle, isClient]);
+  return windowSize;
+};
+
+var _default = useWindowSize;
+exports.default = _default;

package/dist/cjs/utils/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useWindowSize", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useWindowSize;
+  }
+});
+Object.defineProperty(exports, "useDynamicPosition", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useDynamicPosition;
+  }
+});
+
+var _hooks = require("./hooks");

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 }; }