@pareto-engineering/design-system 2.0.0-alpha.8 → 3.0.0-alpha.18

package/dist/cjs/f/fields/{CheckboxInput/CheckboxInput.js → Checkbox/Checkbox.js}

@@ -4,102 +4,97 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
-var _formik = require("formik");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _formik = require("formik");
 var _common = require("../../common");
-
 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); }
-
+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); }
 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; }
-
 // Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'checkbox-input';
+
+var baseClassName = _exports.default.base;
+var componentClassName = 'checkbox';
+
 /**
  * This is the component description.
  */
-
-var CheckboxInput = _ref => {
-  var _field$value;
-
+var Checkbox = _ref => {
   var {
     id,
     className: userClassName,
     style,
-    children,
-    value,
-    name // ...otherProps
-
+    name,
+    label,
+    description,
+    disabled,
+    optional
+    // ...otherProps
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  var [field, meta] = (0, _formik.useField)(name);
-  var isOptionSelected = !!(((_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.length) > 0 && field.value.includes(value));
+  var [field] = (0, _formik.useField)({
+    name,
+    type: 'checkbox'
+  });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(isOptionSelected ? 'selected' : 'not-selected', " input-content uc v1 pv-v")
-  }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    name: name
-  }, /*#__PURE__*/React.createElement("input", _extends({}, field, {
+    style: style
+    // {...otherProps}
+  }, label && /*#__PURE__*/React.createElement(_common.FormLabel, {
+    name: name,
+    optional: optional
+  }, label), /*#__PURE__*/React.createElement("input", _extends({
     id: name,
-    value: value,
     className: "input",
-    type: "checkbox"
-  })), /*#__PURE__*/React.createElement("span", null, children))), meta.error && meta.touched && /*#__PURE__*/React.createElement(_common.FormDescription, {
-    error: true
-  }, meta.error));
+    type: "checkbox",
+    disabled: disabled
+  }, field)), /*#__PURE__*/React.createElement(_common.FormDescription, {
+    className: "v50 mt-v s-1",
+    description: description,
+    name: name
+  }));
 };
-
-CheckboxInput.propTypes = {
+Checkbox.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
   /**
    * The input name (html - and Formik state)
    */
   name: _propTypes.default.string.isRequired,
-
   /**
-   * The input value
+   * The Input description to guide the user if it's not obvious
    */
-  value: _propTypes.default.string.isRequired,
-
+  description: _propTypes.default.string,
   /**
-   * The React-written, css properties for this element.
+   * Whether the input should be disabled
    */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
+  disabled: _propTypes.default.bool,
   /**
-   *  The children JSX
+   * The input label
    */
-  children: _propTypes.default.node
+  label: _propTypes.default.string,
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: _propTypes.default.bool
 };
-CheckboxInput.defaultProps = {// someProp:false
+Checkbox.defaultProps = {
+  disabled: false
 };
-
-var _default = /*#__PURE__*/(0, React.memo)(CheckboxInput);
-
+var _default = Checkbox;
 exports.default = _default;

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

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

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

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.checkbox {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .#{bem.$base}.label {
+        margin-bottom: $default-margin
+    }
+}

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

@@ -4,37 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _common = require("./common");
-
 var _common2 = require("../../common");
-
 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); }
-
-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; }
-
-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; }
-
-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; }
-
+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); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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 baseClassName = _bem.default.base;
+var baseClassName = _exports.default.base;
 var componentClassName = 'choices-input';
+
 /**
  * This is the component description.
  */
-
 var ChoicesInput = _ref => {
   var {
     id,
@@ -49,8 +38,9 @@ var ChoicesInput = _ref => {
     color,
     colorChecked,
     label,
-    disabled // ...otherProps
-
+    optional,
+    disabled
+    // ...otherProps
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
@@ -61,48 +51,43 @@ var ChoicesInput = _ref => {
     style: _objectSpread({
       '--grid-columns-desktop': gridColumnsDesktop,
       '--grid-columns-mobile': gridColumnsMobile
-    }, style) // {...otherProps}
-
+    }, style)
+    // {...otherProps}
   }, label && /*#__PURE__*/React.createElement(_common2.FormLabel, {
-    as: "p"
+    as: "p",
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "choices"
   }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
     key: choice.value,
     name: name,
-    id: "".concat(id, "-").concat(choice.value),
+    id: "".concat(name, "-").concat(choice.value),
     multiple: multiple,
     validate: validate,
     disabled: disabled
   }, choice)))));
 };
-
 ChoicesInput.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    * The choices name
    */
   name: _propTypes.default.string.isRequired,
-
   /**
    * The input field validator function
    */
   validate: _propTypes.default.string,
-
   /**
    * The choices input options
    */
@@ -110,50 +95,45 @@ ChoicesInput.propTypes = {
     value: _propTypes.default.string,
     label: _propTypes.default.string
   })),
-
   /**
    * If the input should be multiple - checkbox
    */
   multiple: _propTypes.default.bool,
-
   /**
    * how many columns should be displayed on the mobile grid
    */
   gridColumnsMobile: _propTypes.default.number,
-
   /**
    * how many columns should be displayed on the desktop grid
    */
   gridColumnsDesktop: _propTypes.default.number,
-
   /**
    * The choice color
    */
   color: _propTypes.default.string,
-
   /**
    * The selected choice color
    */
   colorChecked: _propTypes.default.string,
-
   /**
    * The label of the choices input
    */
   label: _propTypes.default.string,
-
   /**
    * Whether all the Choices inputs should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
   color: 'background2',
-  colorChecked: 'main1',
+  colorChecked: 'main2',
   disabled: false
 };
-
 var _default = /*#__PURE__*/(0, React.memo)(ChoicesInput);
-
 exports.default = _default;

package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js

@@ -4,29 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _formik = require("formik");
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 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; }
-
-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 baseClassName = _bem.default.base;
+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); }
+var baseClassName = _exports.default.base;
 var componentClassName = 'choice';
+
 /**
  * This is the component description.
  */
-
 var Choice = _ref => {
   var {
     id,
@@ -41,15 +32,18 @@ var Choice = _ref => {
     validate,
     disabled
   } = _ref;
+  var type = multiple ? 'checkbox' : 'radio';
   var [field] = (0, _formik.useField)({
     name,
-    validate
+    validate,
+    type,
+    value
   });
   return /*#__PURE__*/React.createElement("div", {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("input", _extends({
-    type: multiple ? 'checkbox' : 'radio',
+    type: type,
     id: id,
     name: name
   }, field, {
@@ -61,58 +55,47 @@ var Choice = _ref => {
     style: labelStyle
   }, label));
 };
-
 Choice.propTypes = {
   /**
    * The HTML id for this element
    */
   id: _propTypes.default.string,
-
   /**
    * The HTML class names for this element
    */
   className: _propTypes.default.string,
-
   /**
    * The React-written, css properties for this element.
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    * The input name.
    */
   name: _propTypes.default.string.isRequired,
-
   /**
    * The input label.
    */
   label: _propTypes.default.string.isRequired,
-
   /**
    * The input label class name.
    */
   labelClassName: _propTypes.default.string,
-
   /**
    * The input label styles.
    */
   labelStyle: _propTypes.default.objectOf(_propTypes.default.string),
-
   /**
    * The input value.
    */
   value: _propTypes.default.string.isRequired,
-
   /**
    * If the input should be multiple - checkbox
    */
   multiple: _propTypes.default.bool,
-
   /**
    * The input field validator function
    */
   validate: _propTypes.default.func,
-
   /**
    * Whether the radio or checkbox choice should be disabled
    */

package/dist/cjs/f/fields/ChoicesInput/common/Choice/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "Choice", {
     return _Choice.default;
   }
 });
-
 var _Choice = _interopRequireDefault(require("./Choice"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Choice", {
     return _Choice.Choice;
   }
 });
-
 var _Choice = require("./Choice");

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

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "ChoicesInput", {
     return _ChoicesInput.default;
   }
 });
-
 var _ChoicesInput = _interopRequireDefault(require("./ChoicesInput"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 $default-grid-gap:var(--u, 1em);
 $default-padding:var(--u, 1em);
@@ -29,10 +29,21 @@ $default-transition:all .3s;
         z-index: -1;
       }
 
+      input:disabled + label {
+        background-color: var(--hard-x);
+      }
+
+      input:not(:disabled) + label {
+        &:hover {
+          border-color: var(--soft-y);
+        }
+      }
+
       label {
-        background: var(--x);
-        border-radius: var(--theme-border-radius);
+        border: var(--theme-border-style) var(--hard-x);
+        background: var(--soft-x);
         color: var(--on-x);
+        border-radius: var(--theme-border-radius);
         display: block;
         height: 100%;
         padding: $default-padding;
@@ -44,6 +55,10 @@ $default-transition:all .3s;
       input:checked + label {
         background: var(--y);
         color: var(--on-y);
+
+        &:hover {
+          border-color: var(--y);
+        }
       }
     }
   }