@pareto-engineering/design-system 2.0.0-alpha.52 → 2.0.0-alpha.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/dist/cjs/a/AppContext/Context.js +16 -0
  2. package/dist/cjs/a/AppContext/ContextProvider.js +96 -0
  3. package/dist/cjs/a/AppContext/index.js +39 -0
  4. package/dist/cjs/a/AppContext/useApp.js +16 -0
  5. package/dist/cjs/a/AppContext/useTheme.js +45 -0
  6. package/dist/cjs/a/index.js +8 -8
  7. package/dist/cjs/b/Page/common/PageHelmet/PageHelmet.js +1 -1
  8. package/dist/cjs/b/SocialMediaButton/SocialMediaButton.js +4 -4
  9. package/dist/cjs/b/ThemeSelector/ThemeSelector.js +1 -1
  10. package/dist/cjs/f/FormInput/FormInput.js +1 -1
  11. package/dist/cjs/f/common/Description/Description.js +20 -14
  12. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +0 -2
  13. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +5 -9
  14. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +5 -9
  15. package/dist/cjs/f/fields/SelectInput/SelectInput.js +16 -8
  16. package/dist/cjs/f/fields/TextInput/TextInput.js +18 -9
  17. package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +16 -8
  18. package/dist/es/a/AppContext/Context.js +2 -0
  19. package/dist/es/a/AppContext/ContextProvider.js +78 -0
  20. package/dist/es/a/AppContext/index.js +5 -0
  21. package/dist/es/a/AppContext/useApp.js +3 -0
  22. package/dist/es/a/AppContext/useTheme.js +34 -0
  23. package/dist/es/a/index.js +1 -1
  24. package/dist/es/b/Page/common/PageHelmet/PageHelmet.js +2 -2
  25. package/dist/es/b/SocialMediaButton/SocialMediaButton.js +5 -5
  26. package/dist/es/b/ThemeSelector/ThemeSelector.js +2 -2
  27. package/dist/es/f/FormInput/FormInput.js +1 -1
  28. package/dist/es/f/common/Description/Description.js +19 -14
  29. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +0 -2
  30. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +5 -9
  31. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +5 -9
  32. package/dist/es/f/fields/SelectInput/SelectInput.js +16 -8
  33. package/dist/es/f/fields/TextInput/TextInput.js +18 -9
  34. package/dist/es/f/fields/TextareaInput/TextareaInput.js +16 -8
  35. package/package.json +1 -1
  36. package/src/__snapshots__/Storyshots.test.js.snap +1528 -1385
  37. package/src/stories/a/{SiteContext.stories.jsx → AppContext.stories.jsx} +8 -8
  38. package/src/stories/a/DotInfo.stories.jsx +12 -12
  39. package/src/stories/a/ProgressBar.stories.jsx +12 -6
  40. package/src/stories/a/Timestamp.stories.jsx +32 -38
  41. package/src/stories/b/Logo.stories.jsx +13 -13
  42. package/src/stories/b/QuestionDropdown.stories.jsx +17 -30
  43. package/src/stories/b/SocialMediaButton.stories.jsx +34 -52
  44. package/src/stories/b/ThemeSelector.stories.jsx +5 -5
  45. package/src/stories/b/Title.stories.jsx +11 -13
  46. package/src/stories/c/ContentSlides.stories.jsx +30 -300
  47. package/src/stories/f/ChoicesInput.stories.jsx +62 -129
  48. package/src/stories/f/Description.stories.jsx +12 -2
  49. package/src/stories/f/RatingsInput.stories.jsx +21 -22
  50. package/src/stories/f/SelectInput.stories.jsx +35 -75
  51. package/src/stories/f/TextInput.stories.jsx +55 -52
  52. package/src/stories/f/TextareaInput.stories.jsx +31 -46
  53. package/src/ui/a/{SiteContext → AppContext}/Context.js +0 -0
  54. package/src/ui/a/{SiteContext → AppContext}/ContextProvider.jsx +8 -7
  55. package/src/ui/a/AppContext/index.js +5 -0
  56. package/src/ui/a/{SiteContext/useSite.js → AppContext/useApp.js} +0 -0
  57. package/src/ui/a/{SiteContext → AppContext}/useTheme.js +0 -0
  58. package/src/ui/a/index.js +4 -4
  59. package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx +2 -2
  60. package/src/ui/b/SocialMediaButton/SocialMediaButton.jsx +4 -4
  61. package/src/ui/b/ThemeSelector/ThemeSelector.jsx +2 -2
  62. package/src/ui/f/FormInput/FormInput.jsx +1 -0
  63. package/src/ui/f/common/Description/Description.jsx +34 -29
  64. package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +1 -2
  65. package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +1 -11
  66. package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +1 -11
  67. package/src/ui/f/fields/SelectInput/SelectInput.jsx +16 -9
  68. package/src/ui/f/fields/TextInput/TextInput.jsx +13 -7
  69. package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +9 -8
  70. package/src/ui/a/SiteContext/index.js +0 -5
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ 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); }
11
+
12
+ 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; }
13
+
14
+ var _default = /*#__PURE__*/React.createContext({});
15
+
16
+ exports.default = _default;
@@ -0,0 +1,96 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _useTheme = _interopRequireDefault(require("./useTheme"));
13
+
14
+ var _Context = _interopRequireDefault(require("./Context"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ 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); }
19
+
20
+ 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; }
21
+
22
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
23
+
24
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
25
+
26
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
27
+
28
+ // Component-level imports
29
+ // Helper Definitions
30
+ var reducer = (state, action) => {
31
+ switch (action.type) {
32
+ case 'UPDATE_STATE':
33
+ return _objectSpread(_objectSpread({}, state), action.payload);
34
+
35
+ default:
36
+ return state;
37
+ }
38
+ };
39
+
40
+ var AppContextProvider = _ref => {
41
+ var {
42
+ children,
43
+ initialTheme,
44
+ config,
45
+ initialState // ...otherProps
46
+
47
+ } = _ref;
48
+ var theme = (0, _useTheme.default)(initialTheme);
49
+ var [state, dispatch] = (0, React.useReducer)(reducer, initialState);
50
+ return /*#__PURE__*/React.createElement(_Context.default.Provider, {
51
+ value: _objectSpread(_objectSpread({
52
+ state,
53
+ dispatch
54
+ }, config), theme)
55
+ }, children);
56
+ };
57
+
58
+ AppContextProvider.propTypes = {
59
+ /**
60
+ * The children JSX
61
+ */
62
+ children: _propTypes.default.node,
63
+
64
+ /**
65
+ * The initial theme for the website. If undefined, fallbacks on system preference.
66
+ */
67
+ initialTheme: _propTypes.default.string,
68
+
69
+ /**
70
+ * A dictionnary containing settings and preferences to be used application-wide
71
+ */
72
+ config: _propTypes.default.shape({
73
+ APP: _propTypes.default.shape({
74
+ NAME: _propTypes.default.string.isRequired,
75
+ CANONICAL: _propTypes.default.string.isRequired,
76
+ SUPPORT_EMAIL: _propTypes.default.string,
77
+ TITLE_SUFFIX: _propTypes.default.string
78
+ }),
79
+ SOCIAL: _propTypes.default.shape({
80
+ FACEBOOK: _propTypes.default.string,
81
+ INSTAGRAM: _propTypes.default.string,
82
+ YOUTUBE: _propTypes.default.string
83
+ }),
84
+ CONSTANTS: _propTypes.default.shape({})
85
+ }).isRequired,
86
+
87
+ /**
88
+ * Application context initial state
89
+ */
90
+ initialState: _propTypes.default.objectOf(_propTypes.default.string)
91
+ };
92
+ AppContextProvider.defaultProps = {
93
+ initialState: {}
94
+ };
95
+ var _default = AppContextProvider;
96
+ exports.default = _default;
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "AppContext", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Context.default;
10
+ }
11
+ });
12
+ Object.defineProperty(exports, "AppContextProvider", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _ContextProvider.default;
16
+ }
17
+ });
18
+ Object.defineProperty(exports, "useApp", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _useApp.default;
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "useTheme", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _useTheme.default;
28
+ }
29
+ });
30
+
31
+ var _Context = _interopRequireDefault(require("./Context"));
32
+
33
+ var _ContextProvider = _interopRequireDefault(require("./ContextProvider"));
34
+
35
+ var _useApp = _interopRequireDefault(require("./useApp"));
36
+
37
+ var _useTheme = _interopRequireDefault(require("./useTheme"));
38
+
39
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var _Context = _interopRequireDefault(require("./Context"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ var _default = () => (0, _react.useContext)(_Context.default);
15
+
16
+ exports.default = _default;
@@ -0,0 +1,45 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ var _default = function _default(initialTheme) {
11
+ var storageKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'theme';
12
+ var isClient = typeof window === 'object';
13
+ var [preferredTheme, setPreferredTheme] = (0, _react.useState)(initialTheme);
14
+ var [userTheme, setUserTheme] = (0, _react.useState)();
15
+ (0, _react.useEffect)(() => {
16
+ var storage = window.localStorage;
17
+
18
+ if (isClient) {
19
+ var storedTheme = window.localStorage.getItem(storageKey); // console.log(storedTheme, storedTheme != userTheme)
20
+
21
+ if (storedTheme && storedTheme !== userTheme) {
22
+ // console.warn('Theme load')
23
+ setPreferredTheme(storedTheme);
24
+ setUserTheme(storedTheme);
25
+ } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
26
+ setUserTheme(preferredTheme);
27
+ storage.setItem(storageKey, preferredTheme); // console.warn('theme change', preferredTheme)
28
+ } else {
29
+ setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
30
+ storage.removeItem(storageKey); // console.warn('theme reset')
31
+ }
32
+ } else {
33
+ setUserTheme('light');
34
+ }
35
+ }, [preferredTheme, isClient]);
36
+ var isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
37
+ return {
38
+ userTheme,
39
+ preferredTheme,
40
+ setPreferredTheme,
41
+ isTheme
42
+ };
43
+ };
44
+
45
+ exports.default = _default;
@@ -21,28 +21,28 @@ Object.defineProperty(exports, "IconList", {
21
21
  return _IconList.IconList;
22
22
  }
23
23
  });
24
- Object.defineProperty(exports, "SiteContext", {
24
+ Object.defineProperty(exports, "AppContext", {
25
25
  enumerable: true,
26
26
  get: function get() {
27
- return _SiteContext.SiteContext;
27
+ return _AppContext.AppContext;
28
28
  }
29
29
  });
30
- Object.defineProperty(exports, "SiteContextProvider", {
30
+ Object.defineProperty(exports, "AppContextProvider", {
31
31
  enumerable: true,
32
32
  get: function get() {
33
- return _SiteContext.SiteContextProvider;
33
+ return _AppContext.AppContextProvider;
34
34
  }
35
35
  });
36
- Object.defineProperty(exports, "useSite", {
36
+ Object.defineProperty(exports, "useApp", {
37
37
  enumerable: true,
38
38
  get: function get() {
39
- return _SiteContext.useSite;
39
+ return _AppContext.useApp;
40
40
  }
41
41
  });
42
42
  Object.defineProperty(exports, "useTheme", {
43
43
  enumerable: true,
44
44
  get: function get() {
45
- return _SiteContext.useTheme;
45
+ return _AppContext.useTheme;
46
46
  }
47
47
  });
48
48
  Object.defineProperty(exports, "ProgressBar", {
@@ -184,7 +184,7 @@ var _DashboardNavbar = require("./DashboardNavbar");
184
184
 
185
185
  var _IconList = require("./IconList");
186
186
 
187
- var _SiteContext = require("./SiteContext");
187
+ var _AppContext = require("./AppContext");
188
188
 
189
189
  var _ProgressBar = require("./ProgressBar");
190
190
 
@@ -132,7 +132,7 @@ var PageHelmet = _ref => {
132
132
  var props = _extends({}, _ref);
133
133
 
134
134
  // const intl = useIntl()
135
- var context = (0, _a.useSite)();
135
+ var context = (0, _a.useApp)();
136
136
  var HelmetContent = (0, React.useMemo)(() => helmetMap.reduce(
137
137
  /* eslint-disable no-unused-vars -- TODO add test or ssr mode */
138
138
  (a, _ref2) => {
@@ -51,11 +51,11 @@ var defaultsMap = {
51
51
  /**
52
52
  * This is the component description.
53
53
  * This component takes `y` as the default color and `x` as the hover color.
54
- * This components needs to be wrapped within a `SiteContextProvider`.
54
+ * This components needs to be wrapped within a `AppContextProvider`.
55
55
  */
56
56
 
57
57
  var SocialMediaButton = _ref => {
58
- var _siteContext$SOCIAL;
58
+ var _applicationContext$S;
59
59
 
60
60
  var {
61
61
  id,
@@ -69,12 +69,12 @@ var SocialMediaButton = _ref => {
69
69
  } = _ref,
70
70
  otherProps = _objectWithoutProperties(_ref, _excluded);
71
71
 
72
- var siteContext = (0, _a.useSite)();
72
+ var applicationContext = (0, _a.useApp)();
73
73
  (0, React.useLayoutEffect)(() => {
74
74
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
75
75
  }, []);
76
76
  var content = type && defaultsMap[type];
77
- var href = link || (siteContext === null || siteContext === void 0 ? void 0 : (_siteContext$SOCIAL = siteContext.SOCIAL) === null || _siteContext$SOCIAL === void 0 ? void 0 : _siteContext$SOCIAL[content.link]);
77
+ var href = link || (applicationContext === null || applicationContext === void 0 ? void 0 : (_applicationContext$S = applicationContext.SOCIAL) === null || _applicationContext$S === void 0 ? void 0 : _applicationContext$S[content.link]);
78
78
  return /*#__PURE__*/React.createElement("a", {
79
79
  href: href,
80
80
  target: "_blank",
@@ -38,7 +38,7 @@ var ThemeSelector = _ref => {
38
38
  var {
39
39
  userTheme,
40
40
  setPreferredTheme
41
- } = (0, _a.useSite)();
41
+ } = (0, _a.useApp)();
42
42
  (0, React.useLayoutEffect)(() => {
43
43
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
44
44
  }, []);
@@ -105,7 +105,7 @@ FormInput.propTypes = {
105
105
  /**
106
106
  * The HTML class names for this element
107
107
  */
108
- type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', // to be removed
108
+ type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'url', // to be removed
109
109
  'extendedTypeInput']),
110
110
 
111
111
  /**
@@ -7,6 +7,8 @@ exports.default = void 0;
7
7
 
8
8
  var React = _interopRequireWildcard(require("react"));
9
9
 
10
+ var _formik = require("formik");
11
+
10
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
13
 
12
14
  var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
@@ -29,20 +31,25 @@ var Description = _ref => {
29
31
  id,
30
32
  className: userClassName,
31
33
  style,
32
- children,
33
- isError,
34
+ description,
35
+ name,
34
36
  color // ...otherProps
35
37
 
36
38
  } = _ref;
37
39
  (0, React.useLayoutEffect)(() => {
38
40
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
39
41
  }, []);
40
- return /*#__PURE__*/React.createElement("div", {
41
- id: id,
42
- className: [baseClassName, componentClassName, userClassName, isError ? 'x-error' : "x-".concat(color)].filter(e => e).join(' '),
43
- style: style // {...otherProps}
42
+ var [field, meta] = (0, _formik.useField)(name);
43
+
44
+ if (description || (meta.touched || field.value) && meta.error) {
45
+ return /*#__PURE__*/React.createElement("div", {
46
+ id: id,
47
+ className: [baseClassName, componentClassName, userClassName, meta.error ? 'x-error' : "x-".concat(color)].filter(e => e).join(' '),
48
+ style: style
49
+ }, meta.error || description);
50
+ }
44
51
 
45
- }, children);
52
+ return null;
46
53
  };
47
54
 
48
55
  Description.propTypes = {
@@ -62,22 +69,21 @@ Description.propTypes = {
62
69
  style: _propTypes.default.objectOf(_propTypes.default.string),
63
70
 
64
71
  /**
65
- * The children JSX
72
+ * The base color for the description
66
73
  */
67
- children: _propTypes.default.node,
74
+ color: _propTypes.default.string,
68
75
 
69
76
  /**
70
- * The base color for the description
77
+ * Input description - extra description to guide a use in filling the input
71
78
  */
72
- color: _propTypes.default.string,
79
+ description: _propTypes.default.string,
73
80
 
74
81
  /**
75
- * isError
82
+ * The input name (html - and Formik state)
76
83
  */
77
- isError: _propTypes.default.bool
84
+ name: _propTypes.default.string.isRequired
78
85
  };
79
86
  Description.defaultProps = {
80
- isError: false,
81
87
  color: 'metadata'
82
88
  };
83
89
  var _default = Description;
@@ -59,7 +59,6 @@ var QueryCombobox = _ref => {
59
59
  setError
60
60
  } = helpers;
61
61
  var {
62
- error,
63
62
  value
64
63
  } = meta;
65
64
  var environment = (0, _reactRelay.useRelayEnvironment)();
@@ -116,7 +115,6 @@ var QueryCombobox = _ref => {
116
115
  label,
117
116
  description,
118
117
  setValue,
119
- error,
120
118
  value,
121
119
  color,
122
120
  isFetching,
@@ -43,7 +43,6 @@ var Combobox = _ref => {
43
43
  options: items,
44
44
  getOptions,
45
45
  setValue,
46
- error,
47
46
  description,
48
47
  value,
49
48
  color,
@@ -112,9 +111,11 @@ var Combobox = _ref => {
112
111
  getItemProps: getItemProps,
113
112
  highlightedIndex: highlightedIndex,
114
113
  items: items
115
- }, getMenuProps()))), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
116
- isError: !!error
117
- }, error || description));
114
+ }, getMenuProps()))), /*#__PURE__*/React.createElement(_.FormDescription, {
115
+ className: "v50 mt-v s-1",
116
+ description: description,
117
+ name: name
118
+ }));
118
119
  };
119
120
 
120
121
  Combobox.propTypes = {
@@ -166,11 +167,6 @@ Combobox.propTypes = {
166
167
  */
167
168
  description: _propTypes.default.string,
168
169
 
169
- /**
170
- * The error object
171
- */
172
- error: _propTypes.default.objectOf(_propTypes.default.string),
173
-
174
170
  /**
175
171
  * The value of the custom select input
176
172
  */
@@ -60,7 +60,6 @@ var MultipleCombobox = _ref => {
60
60
  options: items,
61
61
  getOptions,
62
62
  setValue,
63
- error,
64
63
  description,
65
64
  value,
66
65
  color,
@@ -211,9 +210,11 @@ var MultipleCombobox = _ref => {
211
210
  getItemProps: getItemProps,
212
211
  highlightedIndex: highlightedIndex,
213
212
  items: getFilteredItems()
214
- }, getMenuProps()))), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
215
- isError: !!error
216
- }, error || description));
213
+ }, getMenuProps()))), /*#__PURE__*/React.createElement(_.FormDescription, {
214
+ className: "v50 mt-v s-1",
215
+ description: description,
216
+ name: name
217
+ }));
217
218
  };
218
219
 
219
220
  MultipleCombobox.propTypes = {
@@ -265,11 +266,6 @@ MultipleCombobox.propTypes = {
265
266
  */
266
267
  description: _propTypes.default.string,
267
268
 
268
- /**
269
- * The error object
270
- */
271
- error: _propTypes.default.objectOf(_propTypes.default.string),
272
-
273
269
  /**
274
270
  * The value of the custom select input
275
271
  */
@@ -44,13 +44,14 @@ var SelectInput = _ref => {
44
44
  validate,
45
45
  description,
46
46
  disabled,
47
- isLoading // ...otherProps
47
+ isLoading,
48
+ autoComplete // ...otherProps
48
49
 
49
50
  } = _ref;
50
51
  (0, React.useLayoutEffect)(() => {
51
52
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
52
53
  }, []);
53
- var [field, meta] = (0, _formik.useField)({
54
+ var [field] = (0, _formik.useField)({
54
55
  name,
55
56
  validate
56
57
  });
@@ -68,7 +69,8 @@ var SelectInput = _ref => {
68
69
  }, field, {
69
70
  value: field.value || '',
70
71
  id: name,
71
- disabled: disabled
72
+ disabled: disabled,
73
+ autoComplete: autoComplete
72
74
  }), options.map(option => {
73
75
  // i.e if option is a string like "blah", return { value: "blah", label: "blah" }
74
76
  var newOption = typeof option === 'string' ? {
@@ -82,10 +84,11 @@ var SelectInput = _ref => {
82
84
  }, newOption.label);
83
85
  })), isLoading && /*#__PURE__*/React.createElement(_a.LoadingCircle, {
84
86
  className: "x-main2"
85
- })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
86
- isError: !!meta.error,
87
- className: "v50 mt-v s-1"
88
- }, meta.error || description));
87
+ })), /*#__PURE__*/React.createElement(_common.FormDescription, {
88
+ className: "v50 mt-v s-1",
89
+ description: description,
90
+ name: name
91
+ }));
89
92
  };
90
93
 
91
94
  SelectInput.propTypes = {
@@ -146,7 +149,12 @@ SelectInput.propTypes = {
146
149
  /*
147
150
  * Whether the query that is fetching the select options is still in flight
148
151
  */
149
- isLoading: _propTypes.default.bool
152
+ isLoading: _propTypes.default.bool,
153
+
154
+ /**
155
+ * The autoComplete value that the browser should watch for the input
156
+ */
157
+ autoComplete: _propTypes.default.string
150
158
  };
151
159
  SelectInput.defaultProps = {
152
160
  disabled: false,
@@ -45,13 +45,14 @@ var TextInput = _ref => {
45
45
  description,
46
46
  disabled,
47
47
  placeholder,
48
- optional // ...otherProps
48
+ optional,
49
+ autoComplete // ...otherProps
49
50
 
50
51
  } = _ref;
51
52
  (0, React.useLayoutEffect)(() => {
52
53
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
53
54
  }, []);
54
- var [field, meta] = (0, _formik.useField)({
55
+ var [field] = (0, _formik.useField)({
55
56
  name,
56
57
  validate
57
58
  });
@@ -70,11 +71,13 @@ var TextInput = _ref => {
70
71
  className: "input",
71
72
  type: type,
72
73
  disabled: disabled,
73
- placeholder: placeholder
74
- }, field)), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
75
- isError: !!meta.error,
76
- className: "v50 mt-v s-1"
77
- }, meta.error || description));
74
+ placeholder: placeholder,
75
+ autoComplete: autoComplete
76
+ }, field)), /*#__PURE__*/React.createElement(_common.FormDescription, {
77
+ className: "v50 mt-v s-1",
78
+ description: description,
79
+ name: name
80
+ }));
78
81
  };
79
82
 
80
83
  TextInput.propTypes = {
@@ -111,7 +114,7 @@ TextInput.propTypes = {
111
114
  /**
112
115
  * The type of the input (html)
113
116
  */
114
- type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'time', 'datetime', 'month', 'tel', 'hidden']),
117
+ type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'time', 'datetime', 'month', 'tel', 'hidden', 'url']),
115
118
 
116
119
  /**
117
120
  * The input field validator function
@@ -146,7 +149,13 @@ TextInput.propTypes = {
146
149
  /**
147
150
  * Whether the input is optional or not
148
151
  */
149
- optional: _propTypes.default.bool
152
+ optional: _propTypes.default.bool,
153
+
154
+ /**
155
+ * The autoComplete value that the browser should watch for the input
156
+ * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
157
+ */
158
+ autoComplete: _propTypes.default.string
150
159
  };
151
160
  TextInput.defaultProps = {
152
161
  type: 'text',
@@ -44,13 +44,14 @@ var TextareaInput = _ref => {
44
44
  labelColor,
45
45
  description,
46
46
  disabled,
47
- placeholder // ...otherProps
47
+ placeholder,
48
+ autoComplete // ...otherProps
48
49
 
49
50
  } = _ref;
50
51
  (0, React.useLayoutEffect)(() => {
51
52
  Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
52
53
  }, []);
53
- var [field, meta] = (0, _formik.useField)({
54
+ var [field] = (0, _formik.useField)({
54
55
  name,
55
56
  validate
56
57
  });
@@ -69,11 +70,13 @@ var TextareaInput = _ref => {
69
70
  }, field, {
70
71
  placeholder: placeholder,
71
72
  rows: rows,
72
- disabled: disabled
73
- })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
74
- isError: !!meta.error,
75
- className: "v50 mt-v s-1"
76
- }, meta.error || description), ' ');
73
+ disabled: disabled,
74
+ autoComplete: autoComplete
75
+ })), /*#__PURE__*/React.createElement(_common.FormDescription, {
76
+ className: "v50 mt-v s-1",
77
+ description: description,
78
+ name: name
79
+ }));
77
80
  };
78
81
 
79
82
  TextareaInput.propTypes = {
@@ -145,7 +148,12 @@ TextareaInput.propTypes = {
145
148
  /**
146
149
  * The textarea placeholder text
147
150
  */
148
- placeholder: _propTypes.default.string
151
+ placeholder: _propTypes.default.string,
152
+
153
+ /**
154
+ * The autoComplete value that the browser should watch for the input
155
+ */
156
+ autoComplete: _propTypes.default.string
149
157
  };
150
158
  TextareaInput.defaultProps = {
151
159
  rows: 3,
@@ -0,0 +1,2 @@
1
+ import * as React from 'react';
2
+ export default /*#__PURE__*/React.createContext({});