@pareto-engineering/design-system 2.0.0-alpha.5 → 2.0.0-alpha.50

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

@@ -38,10 +38,14 @@ var TextInput = _ref => {
     type,
     name,
     label,
+    color,
+    labelColor,
     validate,
     oneInputLabel,
     description,
-    disabled // ...otherProps
+    disabled,
+    placeholder,
+    optional // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -53,17 +57,20 @@ var TextInput = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor,
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("input", _extends({
     id: name,
-    className: "input ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border'),
+    className: "input",
     type: type,
-    disabled: disabled
+    disabled: disabled,
+    placeholder: placeholder
   }, field)), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
     isError: !!meta.error,
     className: "v50 mt-v s-1"
@@ -96,6 +103,11 @@ TextInput.propTypes = {
    */
   label: _propTypes.default.string.isRequired,
 
+  /**
+   * The input label color
+   */
+  labelColor: _propTypes.default.string,
+
   /**
    * The type of the input (html)
    */
@@ -119,10 +131,26 @@ TextInput.propTypes = {
   /**
    * Whether the text input should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: _propTypes.default.string,
+
+  /**
+   * The text input color
+   */
+  color: _propTypes.default.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 TextInput.defaultProps = {
   type: 'text',
+  color: 'background2',
   disabled: false
 };
 

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

@@ -9,17 +9,26 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main1);
-  }
-
   .input {
-    background: var(--light-background1);
-    color: var(--on-background1);
+    border: var(--theme-border-style) var(--dark-y);
+    background: var(--light-y);
+    color: var(--on-y);
     padding: $default-padding;
 
+    &::placeholder{
+      color: var(--metadata);
+    }
+
+    &:not(:disabled):hover{
+      border: var(--theme-border-style) var(--light-background4);
+    }
+
+    &:disabled {
+      background-color: var(--dark-y);
+    }
+
     &:focus {
-      background: var(--dark-background1);
+      background: var(--light-background4);
     }
   }
 }

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

@@ -43,7 +43,8 @@ var TextareaInput = _ref => {
     textAreaColor,
     labelColor,
     description,
-    disabled // ...otherProps
+    disabled,
+    placeholder // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -55,16 +56,18 @@ var TextareaInput = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(textAreaColor), "y-".concat(labelColor)].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, "y-".concat(textAreaColor)].filter(e => e).join(' '),
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['c-y', labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [labelAsDescription ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: textAreaId,
-    className: "textarea v50 pv-v ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border')
+    className: "textarea"
   }, field, {
+    placeholder: placeholder,
     rows: rows,
     disabled: disabled
   })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
@@ -137,12 +140,16 @@ TextareaInput.propTypes = {
   /**
    * Whether the text area should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * The textarea placeholder text
+   */
+  placeholder: _propTypes.default.string
 };
 TextareaInput.defaultProps = {
   rows: 3,
-  textAreaColor: 'background1',
-  labelColor: 'main1',
+  textAreaColor: 'background2',
   disabled: false
 };
 

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,34 @@ Object.defineProperty(exports, "SelectInput", {
     return _SelectInput.SelectInput;
   }
 });
-Object.defineProperty(exports, "RadioInput", {
-  enumerable: true,
-  get: function get() {
-    return _RadioInput.RadioInput;
-  }
-});
-Object.defineProperty(exports, "CheckboxInput", {
+Object.defineProperty(exports, "ChoicesInput", {
   enumerable: true,
   get: function get() {
-    return _CheckboxInput.CheckboxInput;
+    return _ChoicesInput.ChoicesInput;
   }
 });
-Object.defineProperty(exports, "TaskRecommendationInput", {
+Object.defineProperty(exports, "TextareaInput", {
   enumerable: true,
   get: function get() {
-    return _TaskRecommendationInput.TaskRecommendationInput;
+    return _TextareaInput.TextareaInput;
   }
 });
-Object.defineProperty(exports, "ChoicesInput", {
+Object.defineProperty(exports, "RatingsInput", {
   enumerable: true,
   get: function get() {
-    return _ChoicesInput.ChoicesInput;
+    return _RatingsInput.RatingsInput;
   }
 });
-Object.defineProperty(exports, "TextareaInput", {
+Object.defineProperty(exports, "QueryCombobox", {
   enumerable: true,
   get: function get() {
-    return _TextareaInput.TextareaInput;
+    return _QueryCombobox.QueryCombobox;
   }
 });
-Object.defineProperty(exports, "RatingsInput", {
+Object.defineProperty(exports, "QuerySelect", {
   enumerable: true,
   get: function get() {
-    return _RatingsInput.RatingsInput;
+    return _QuerySelect.QuerySelect;
   }
 });
 
@@ -56,14 +50,12 @@ var _TextInput = require("./TextInput");
 
 var _SelectInput = require("./SelectInput");
 
-var _RadioInput = require("./RadioInput");
-
-var _CheckboxInput = require("./CheckboxInput");
-
-var _TaskRecommendationInput = require("./TaskRecommendationInput");
-
 var _ChoicesInput = require("./ChoicesInput");
 
 var _TextareaInput = require("./TextareaInput");
 
-var _RatingsInput = require("./RatingsInput");
+var _RatingsInput = require("./RatingsInput");
+
+var _QueryCombobox = require("./QueryCombobox");
+
+var _QuerySelect = require("./QuerySelect");

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/test/QueryLoader/styles.scss

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.query-loader{
+
+}
+
+
+

package/dist/cjs/test/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "QueryLoader", {
+  enumerable: true,
+  get: function get() {
+    return _QueryLoader.QueryLoader;
+  }
+});
+
+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 }; }