@pareto-engineering/design-system 2.0.0-alpha.21 → 2.0.0-alpha.22

package/dist/cjs/{experimental/GradientBackground/GradientBackground.js → a/RatingsInput/RatingsInput.js}

@@ -11,60 +11,52 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
+var _common = require("./common");
 
-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 _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; }
 
-// Local Definitions
 var baseClassName = _bem.default.base;
-var componentClassName = 'gradient-background';
+var componentClassName = 'ratings-input';
 /**
  * This is the component description.
  */
 
-var GradientBackground = _ref => {
+var RatingsInput = _ref => {
   var {
     id,
     className: userClassName,
     style,
-    pin,
-    shape // ...otherProps
+    name,
+    ratingCount // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
+  var [hover, setHover] = (0, React.useState)(null);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      '--pin': pin
-    }) // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shapes"
-  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
-    className: "triangle"
-  }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "up"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "down"
-  })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipse"
-  })));
+    style: style // {...otherProps}
+
+  }, [...Array(ratingCount)].map((_, index) => {
+    var ratingValue = index + 1;
+    return /*#__PURE__*/React.createElement(_common.Rating, {
+      key: ratingValue,
+      ratingId: "".concat(name, "-").concat(ratingValue),
+      value: ratingValue,
+      name: name,
+      hover: hover,
+      setHover: setHover
+    });
+  }));
 };
 
-GradientBackground.propTypes = {
+RatingsInput.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -81,18 +73,16 @@ GradientBackground.propTypes = {
   style: _propTypes.default.objectOf(_propTypes.default.string),
 
   /**
-   * Where to pin the shapes
+   * The number of ratings input stars to be displayed
    */
-  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+  ratingCount: _propTypes.default.number,
 
   /**
-   *
+   * Name of the rating input
    */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'spiral', 'diamonds', 'circles', 'ellipses'])
+  name: _propTypes.default.string
 };
-GradientBackground.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
+RatingsInput.defaultProps = {// someProp:false
 };
-var _default = GradientBackground;
+var _default = RatingsInput;
 exports.default = _default;

package/dist/cjs/a/RatingsInput/common/Rating/Rating.js

@@ -0,0 +1,120 @@
+"use strict";
+
+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"));
+
+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); }
+
+// Local Definitions
+var baseClassName = _bem.default.base;
+var componentClassName = 'rating';
+/**
+ * This is the component description.
+ */
+
+var Rating = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    value,
+    name,
+    ratingId,
+    hover,
+    setHover,
+    activeBackgroundColor,
+    inactiveBackgroundColor // ...otherProps
+
+  } = _ref;
+  var [field] = (0, _formik.useField)(name);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(activeBackgroundColor), "y-".concat(inactiveBackgroundColor)].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: ratingId,
+    onMouseEnter: () => setHover(value),
+    onMouseLeave: () => setHover(null)
+  }, ' ', /*#__PURE__*/React.createElement("span", {
+    className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-dark-y'].filter(e => e).join(' ')
+  }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
+    type: "radio",
+    id: ratingId,
+    name: name,
+    value: value
+  })));
+};
+
+Rating.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 value of each an every rating star
+   */
+  value: _propTypes.default.number,
+
+  /**
+   * The current hover value
+   */
+  hover: _propTypes.default.number,
+
+  /**
+   * Function to update the hover value
+   */
+  setHover: _propTypes.default.func,
+
+  /**
+   * Unique Id for each rating star
+   */
+  ratingId: _propTypes.default.string,
+
+  /**
+   * Name of the rating input
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * The start rating backgriund color when hovered or clicked
+   */
+  activeBackgroundColor: _propTypes.default.string,
+
+  /**
+   * The start rating backgriund color when not hovered and not clicked
+   */
+  inactiveBackgroundColor: _propTypes.default.string
+};
+Rating.defaultProps = {
+  activeBackgroundColor: 'secondary2',
+  inactiveBackgroundColor: 'background'
+};
+var _default = Rating;
+exports.default = _default;

package/dist/cjs/a/RatingsInput/common/Rating/index.js

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

package/dist/cjs/a/RatingsInput/common/index.js

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

package/dist/cjs/a/RatingsInput/index.js

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

package/dist/cjs/a/RatingsInput/styles.scss

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-rating-icon-margin: .5em;
+$default-padding: .2em;
+$default-transition: all .2s;
+
+.#{bem.$base}.ratings-input {
+  display: flex;
+
+  >:not(:first-child) {
+    margin-left: $default-rating-icon-margin;
+  }
+
+  .#{bem.$base}.rating {
+    display: flex;
+
+    input {
+      opacity: 0;
+      position: absolute;
+      visibility: none;
+      z-index: -1;
+    }
+
+    label {
+      padding: $default-padding;
+      transition: $default-transition;
+      cursor: pointer;
+    }
+  }
+}
+
+
+
+

package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -75,12 +75,12 @@ var HorizontalMenu = _ref => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "left"
   }, !isFirstStep && !hideBackIcon && /*#__PURE__*/React.createElement("span", {
-    className: "f-icons pointer",
+    className: "prev-button pointer",
     onClick: mobilePreviousStep,
     role: "button",
     onKeyDown: mobilePreviousStep,
     tabIndex: 0
-  }, "H")), /*#__PURE__*/React.createElement("div", {
+  }, '<--')), /*#__PURE__*/React.createElement("div", {
     className: "title"
   }, /*#__PURE__*/React.createElement("span", {
     className: "md-h lg-h"

package/dist/cjs/c/ContentSlides/styles.scss

@@ -124,6 +124,11 @@ $mobile-content-margin:6em;
 
       .left {
         text-align: left;
+
+        .prev-button {
+          font-family: var(--theme-default-paragraph);
+          font-size: calc(var(--s2) * 1em);
+        }
       }
 
       .right {
@@ -210,6 +215,7 @@ $mobile-content-margin:6em;
 
               .next {
                 flex-grow: 1;
+                justify-content: flex-end;
               }
             }
           }

package/dist/es/a/RatingsInput/RatingsInput.js

@@ -0,0 +1,72 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useState, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+import { Rating } from "./common";
+const baseClassName = styleNames.base;
+const componentClassName = 'ratings-input';
+/**
+ * This is the component description.
+ */
+
+const RatingsInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  ratingCount // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const [hover, setHover] = useState(null);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style // {...otherProps}
+
+  }, [...Array(ratingCount)].map((_, index) => {
+    const ratingValue = index + 1;
+    return /*#__PURE__*/React.createElement(Rating, {
+      key: ratingValue,
+      ratingId: `${name}-${ratingValue}`,
+      value: ratingValue,
+      name: name,
+      hover: hover,
+      setHover: setHover
+    });
+  }));
+};
+
+RatingsInput.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The number of ratings input stars to be displayed
+   */
+  ratingCount: PropTypes.number,
+
+  /**
+   * Name of the rating input
+   */
+  name: PropTypes.string
+};
+RatingsInput.defaultProps = {// someProp:false
+};
+export default RatingsInput;

package/dist/es/a/RatingsInput/common/Rating/Rating.js

@@ -0,0 +1,102 @@
+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); }
+
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useField } from 'formik';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'rating';
+/**
+ * This is the component description.
+ */
+
+const Rating = ({
+  id,
+  className: userClassName,
+  style,
+  value,
+  name,
+  ratingId,
+  hover,
+  setHover,
+  activeBackgroundColor,
+  inactiveBackgroundColor // ...otherProps
+
+}) => {
+  const [field] = useField(name);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${activeBackgroundColor}`, `y-${inactiveBackgroundColor}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: ratingId,
+    onMouseEnter: () => setHover(value),
+    onMouseLeave: () => setHover(null)
+  }, ' ', /*#__PURE__*/React.createElement("span", {
+    className: ['f-icons', value <= (hover || Number(field.value)) ? 'c-x' : 'c-dark-y'].filter(e => e).join(' ')
+  }, "[")), /*#__PURE__*/React.createElement("input", _extends({}, field, {
+    type: "radio",
+    id: ratingId,
+    name: name,
+    value: value
+  })));
+};
+
+Rating.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The value of each an every rating star
+   */
+  value: PropTypes.number,
+
+  /**
+   * The current hover value
+   */
+  hover: PropTypes.number,
+
+  /**
+   * Function to update the hover value
+   */
+  setHover: PropTypes.func,
+
+  /**
+   * Unique Id for each rating star
+   */
+  ratingId: PropTypes.string,
+
+  /**
+   * Name of the rating input
+   */
+  name: PropTypes.string,
+
+  /**
+   * The start rating backgriund color when hovered or clicked
+   */
+  activeBackgroundColor: PropTypes.string,
+
+  /**
+   * The start rating backgriund color when not hovered and not clicked
+   */
+  inactiveBackgroundColor: PropTypes.string
+};
+Rating.defaultProps = {
+  activeBackgroundColor: 'secondary2',
+  inactiveBackgroundColor: 'background'
+};
+export default Rating;

package/dist/es/a/RatingsInput/common/Rating/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Rating } from "./Rating";

package/dist/es/a/RatingsInput/common/index.js

@@ -0,0 +1 @@
+export { Rating } from "./Rating";

package/dist/es/a/RatingsInput/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as RatingsInput } from "./RatingsInput";

package/dist/es/a/RatingsInput/styles.scss

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-rating-icon-margin: .5em;
+$default-padding: .2em;
+$default-transition: all .2s;
+
+.#{bem.$base}.ratings-input {
+  display: flex;
+
+  >:not(:first-child) {
+    margin-left: $default-rating-icon-margin;
+  }
+
+  .#{bem.$base}.rating {
+    display: flex;
+
+    input {
+      opacity: 0;
+      position: absolute;
+      visibility: none;
+      z-index: -1;
+    }
+
+    label {
+      padding: $default-padding;
+      transition: $default-transition;
+      cursor: pointer;
+    }
+  }
+}
+
+
+
+

package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js

@@ -55,12 +55,12 @@ const HorizontalMenu = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "left"
   }, !isFirstStep && !hideBackIcon && /*#__PURE__*/React.createElement("span", {
-    className: "f-icons pointer",
+    className: "prev-button pointer",
     onClick: mobilePreviousStep,
     role: "button",
     onKeyDown: mobilePreviousStep,
     tabIndex: 0
-  }, "H")), /*#__PURE__*/React.createElement("div", {
+  }, '<--')), /*#__PURE__*/React.createElement("div", {
     className: "title"
   }, /*#__PURE__*/React.createElement("span", {
     className: "md-h lg-h"

package/dist/es/c/ContentSlides/styles.scss

@@ -124,6 +124,11 @@ $mobile-content-margin:6em;
 
       .left {
         text-align: left;
+
+        .prev-button {
+          font-family: var(--theme-default-paragraph);
+          font-size: calc(var(--s2) * 1em);
+        }
       }
 
       .right {
@@ -210,6 +215,7 @@ $mobile-content-margin:6em;
 
               .next {
                 flex-grow: 1;
+                justify-content: flex-end;
               }
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.22",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx

@@ -65,13 +65,13 @@ const HorizontalMenu = ({
         <div className="left">
           {(!isFirstStep && !hideBackIcon) && (
           <span
-            className="f-icons pointer"
+            className="prev-button pointer"
             onClick={mobilePreviousStep}
             role="button"
             onKeyDown={mobilePreviousStep}
             tabIndex={0}
           >
-            H
+            {'<--'}
           </span>
           )}
         </div>

package/src/ui/c/ContentSlides/styles.scss

@@ -124,6 +124,11 @@ $mobile-content-margin:6em;
 
       .left {
         text-align: left;
+
+        .prev-button {
+          font-family: var(--theme-default-paragraph);
+          font-size: calc(var(--s2) * 1em);
+        }
       }
 
       .right {
@@ -210,6 +215,7 @@ $mobile-content-margin:6em;
 
               .next {
                 flex-grow: 1;
+                justify-content: flex-end;
               }
             }
           }