@pareto-engineering/design-system 4.0.0-alpha.63 → 4.0.0-alpha.65

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

@@ -37,11 +37,7 @@ const QuerySelect = _ref => {
     color,
     loadingOption,
     defaultOption,
-    validate,
-    labelSpan,
-    desktopLabelSpan,
-    inputSpan,
-    desktopInputSpan
+    validate
     // ...otherProps
   } = _ref;
   const [,, helpers] = (0, _formik.useField)({
@@ -100,11 +96,7 @@ const QuerySelect = _ref => {
     description: description,
     disabled: isFetching || disabled,
     options: options,
-    isLoading: isFetching,
-    labelSpan: labelSpan,
-    desktopLabelSpan: desktopLabelSpan,
-    inputSpan: inputSpan,
-    desktopInputSpan: desktopInputSpan
+    isLoading: isFetching
   });
 };
 QuerySelect.propTypes = {

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

@@ -8,9 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
 var _common = require("./common");
 var _common2 = require("../../common");
-require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -38,27 +38,21 @@ const RatingsInput = _ref => {
     labelMax,
     labelMin,
     displayRatingsLabel,
-    optional,
-    labelSpan,
-    desktopLabelSpan,
-    inputSpan,
-    desktopInputSpan
+    optional
     // ...otherProps
   } = _ref;
   const [hover, setHover] = (0, _react.useState)(null);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_common2.FormLabel, {
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(_common2.FormLabel, {
     name: name,
     color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
+    optional: optional
     // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(_common2.InputWrapper, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'stars'].filter(e => e).join(' '),
-    style: style,
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "stars"
   }, displayRatingsLabel && /*#__PURE__*/React.createElement("p", {
     className: "label-text s-2 x-metadata c-x"
   }, labelMin), [...Array(ratingCount)].map((_, index) => {
@@ -129,23 +123,7 @@ RatingsInput.propTypes = {
   /**
   * String that will represent color for the label
   */
-  labelColor: _propTypes.default.string,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: _propTypes.default.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: _propTypes.default.number
+  labelColor: _propTypes.default.string
 };
 RatingsInput.defaultProps = {
   labelMin: 'not satisfied.',

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

@@ -9,7 +9,11 @@ $default-padding: .2em;
 $default-transition: all .2s;
 
 .#{bem.$base}.ratings-input {
-  &.stars {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+
+  >.stars {
     display: flex;
 
     >:not(:last-child) {

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

@@ -39,31 +39,23 @@ const SelectInput = _ref => {
     description,
     disabled,
     isLoading,
-    autoComplete,
-    labelSpan,
-    desktopLabelSpan,
-    inputSpan,
-    desktopInputSpan
+    autoComplete
     // ...otherProps
   } = _ref;
   const [field] = (0, _formik.useField)({
     name,
     validate
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_common.FormLabel, {
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
     name: name,
     color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
+    optional: optional
     // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style,
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("div", {
+  }, label), /*#__PURE__*/React.createElement("div", {
     className: `select-wrapper${disabled ? ' disabled' : ''}`
   }, /*#__PURE__*/React.createElement("select", _extends({
     className: `input y-${color}`
@@ -89,7 +81,7 @@ const SelectInput = _ref => {
     className: "s-1",
     description: description,
     name: name
-  })));
+  }));
 };
 SelectInput.propTypes = {
   /**
@@ -149,22 +141,6 @@ SelectInput.propTypes = {
    */
   autoComplete: _propTypes.default.string,
   /**
-  * The number of columns the label should span
-  */
-  labelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: _propTypes.default.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: _propTypes.default.number,
-  /**
   * Whether the input is optional or not
   */
   optional: _propTypes.default.bool

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

@@ -16,8 +16,11 @@ $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.select-input {
-  &.#{bem.$base}.label {
-    margin-bottom: $default-spacing-size;
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
   }
 
   .select-wrapper {

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

@@ -14,9 +14,7 @@ require("./styles.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /* @pareto-engineering/generator-front 1.0.12 */
-// Local Definitions
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); } /* @pareto-engineering/generator-front 1.0.12 */ // Local Definitions
 const baseClassName = _exports.default.base;
 const componentClassName = 'text-input';
 
@@ -39,10 +37,6 @@ const TextInput = _ref => {
     placeholder,
     optional,
     autoComplete,
-    labelSpan,
-    desktopLabelSpan,
-    inputSpan,
-    desktopInputSpan,
     symbol,
     ...otherProps
   } = _ref;
@@ -53,34 +47,34 @@ const TextInput = _ref => {
   const symbolStyle = symbol ? {
     '--symbol': symbol
   } : {};
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
+  const InputWrapper = symbol ? 'div' : React.Fragment;
+  const inputWrapperProps = symbol ? {
+    className: 'input-wrapper'
+  } : {};
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color} ${symbol ? 'has-symbol' : ''}`].filter(e => e).join(' '),
     style: {
       ...symbolStyle,
       ...style
-    },
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("input", _extends({
+    }
+  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+    // {...otherProps}
+  }, label), /*#__PURE__*/React.createElement(InputWrapper, inputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input",
     type: type,
     disabled: disabled,
     placeholder: placeholder,
     autoComplete: autoComplete
-  }, field, otherProps)), /*#__PURE__*/React.createElement(_common.FormDescription, {
+  }, field, otherProps))), /*#__PURE__*/React.createElement(_common.FormDescription, {
     className: "s-1",
     description: description,
     name: name
-  })));
+  }));
 };
 TextInput.propTypes = {
   /**
@@ -144,22 +138,6 @@ TextInput.propTypes = {
    * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
    */
   autoComplete: _propTypes.default.string,
-  /**
-   * The number of columns the label should span
-   */
-  labelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: _propTypes.default.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: _propTypes.default.number,
   /**
    * A symbol to be set inside the input field
    */

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

@@ -19,12 +19,18 @@ $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.text-input {
-  &.#{bem.$base}.input-wrapper {
-    display: flex;
-    flex-direction: column;
-    position: relative;
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+
+  &.has-symbol {
+    > .input-wrapper {
+      position: relative;
 
-    &.has-symbol {
       &::before {
         color: var(--y);
         content: var(--symbol);
@@ -33,39 +39,40 @@ $disabled-background: var(--background-inputs-30);
         top: 50%;
         transform: translate(-50%, -50%);
       }
+    }
 
-      input {
-        padding: $default-padding-with-symbol;
-      }
+    input {
+      padding: $default-padding-with-symbol;
     }
+  }
 
-    > input {
-      background-color: $default-background;
-      border: $default-border;
-      border-radius: $default-input-border-radius;
-      color: var(--y);
-      outline: none;
-      padding: $default-padding;
-      width: 100%;
+  .input {
+    background-color: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    color: var(--y);
+    outline: none;
+    padding: $default-padding;
+    width: 100%;
 
-      &::placeholder {
-        color: var(--metadata);
-      }
+    &::placeholder {
+      color: var(--metadata);
+    }
 
-      &:disabled {
-        background-color: $disabled-background;
-      }
+    &:disabled {
+      background-color: $disabled-background;
+    }
 
-      &:not(:disabled) {
-        &:hover,
-        &:active {
-          border: $hover-border;
-        }
+    &:not(:disabled) {
+      &:hover,
+      &:active {
+        border: $hover-border;
+      }
 
-        &:focus {
-          border: $focus-border;
-        }
+      &:focus {
+        border: $focus-border;
       }
     }
   }
 }
+

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

@@ -9,8 +9,8 @@ var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _formik = require("formik");
-var _common = require("../../common");
 require("./styles.scss");
+var _common = require("../../common");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -37,31 +37,23 @@ const TextareaInput = _ref => {
     disabled,
     placeholder,
     autoComplete,
-    resize,
-    labelSpan,
-    desktopLabelSpan,
-    inputSpan,
-    desktopInputSpan
+    resize
     // ...otherProps
   } = _ref;
   const [field] = (0, _formik.useField)({
     name,
     validate
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_common.FormLabel, {
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
     name: name,
     color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
+    optional: optional
     // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(_common.InputWrapper, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
-    style: style,
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("textarea", _extends({
+  }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: name,
     className: "textarea"
   }, field, {
@@ -76,7 +68,7 @@ const TextareaInput = _ref => {
     className: "s-1",
     description: description,
     name: name
-  })));
+  }));
 };
 TextareaInput.propTypes = {
   /**
@@ -147,23 +139,7 @@ TextareaInput.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: _propTypes.default.bool,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: _propTypes.default.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: _propTypes.default.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: _propTypes.default.number
+  optional: _propTypes.default.bool
 };
 TextareaInput.defaultProps = {
   rows: 10,

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

@@ -14,36 +14,39 @@ $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.text-area-input {
-  &.#{bem.$base}.input-wrapper {
-    display: flex;
-    flex-direction: column;
-
-    > .textarea {
-      background: $default-background;
-      border: $default-border;
-      border-radius: $default-input-border-radius;
-      color: var(--y);
-      outline: none;
-      padding: $default-padding;
-      width: 100%;
-
-      &::placeholder {
-        color: var(--metadata);
-      }
+  display: flex;
+  flex-direction: column;
 
-      &:disabled {
-        background-color: $disabled-background;
-      }
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+
+  > .textarea {
+    background: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    color: var(--y);
+    outline: none;
+    padding: $default-padding;
+    width: 100%;
 
-      &:not(:disabled) {
-        &:hover,
-        &:active {
-          border: $hover-border;
-        }
+    &::placeholder {
+      color: var(--metadata);
+    }
+
+    &:disabled {
+      background-color: $disabled-background;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &:active {
+        border: $hover-border;
+      }
 
-        &:focus {
-          border: $focus-border;
-        }
+      &:focus {
+        border: $focus-border;
       }
     }
   }

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

@@ -3,19 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  TextInput: true,
-  SelectInput: true,
-  ChoicesInput: true,
-  TextareaInput: true,
-  RatingsInput: true,
-  QueryCombobox: true,
-  QuerySelect: true,
-  Checkbox: true,
-  QueryChoices: true,
-  LinkInput: true,
-  EditorInput: true
-};
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -92,16 +79,4 @@ var _QuerySelect = require("./QuerySelect");
 var _Checkbox = require("./Checkbox");
 var _QueryChoices = require("./QueryChoices");
 var _LinkInput = require("./LinkInput");
-var _EditorInput = require("./EditorInput");
-var _V = require("./V2");
-Object.keys(_V).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _V[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _V[key];
-    }
-  });
-});
+var _EditorInput = require("./EditorInput");

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import * as React from 'react';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput as TextInputV1, TextareaInput as TextareaInputV1, ChoicesInput as ChoicesInputV1, SelectInput as SelectInputV1, QueryCombobox as QueryComboboxV1, QuerySelect as QuerySelectV1, RatingsInput as RatingsInputV1, Checkbox as CheckboxV1, QueryChoices as QueryChoicesV1, LinkInput as LinkInputV1, EditorInput as EditorInputV1, TextInputV2, TextareaInputV2, ChoicesInputV2, SelectInputV2, QueryComboboxV2, QuerySelectV2, RatingsInputV2, CheckboxV2, QueryChoicesV2, LinkInputV2, EditorInputV2 } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput } from "../fields";
 import "./styles.scss";
 
 // Local Definitions
@@ -20,34 +20,9 @@ const FormInput = ({
   type,
   extraTypes,
   disabled,
-  isVersionTwo,
   ...otherProps
 }) => {
   const newClassName = [className, componentClassName].filter(Boolean).join(' ');
-  let TextInput = TextInputV1;
-  let TextareaInput = TextareaInputV1;
-  let ChoicesInput = ChoicesInputV1;
-  let SelectInput = SelectInputV1;
-  let QueryCombobox = QueryComboboxV1;
-  let QuerySelect = QuerySelectV1;
-  let RatingsInput = RatingsInputV1;
-  let Checkbox = CheckboxV1;
-  let QueryChoices = QueryChoicesV1;
-  let LinkInput = LinkInputV1;
-  let EditorInput = EditorInputV1;
-  if (isVersionTwo) {
-    TextInput = TextInputV2;
-    TextareaInput = TextareaInputV2;
-    ChoicesInput = ChoicesInputV2;
-    SelectInput = SelectInputV2;
-    QueryCombobox = QueryComboboxV2;
-    QuerySelect = QuerySelectV2;
-    RatingsInput = RatingsInputV2;
-    Checkbox = CheckboxV2;
-    QueryChoices = QueryChoicesV2;
-    LinkInput = LinkInputV2;
-    EditorInput = EditorInputV2;
-  }
   if (type === 'textarea') {
     return /*#__PURE__*/React.createElement(TextareaInput, _extends({
       className: newClassName,
@@ -138,14 +113,9 @@ FormInput.propTypes = {
   /**
    * Whether the Form input input should be disabled
    */
-  disabled: PropTypes.bool,
-  /**
-   * Whethe the Form input is version 2
-   */
-  isVersionTwo: PropTypes.bool
+  disabled: PropTypes.bool
 };
 FormInput.defaultProps = {
-  disabled: false,
-  isVersionTwo: false
+  disabled: false
 };
 export default /*#__PURE__*/memo(FormInput);

package/dist/es/f/common/Description/Description.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
 
 // Local Definitions
 
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'description';