@pareto-engineering/design-system 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/cjs/experimental/GradientBackground/GradientBackground.js

@@ -0,0 +1,98 @@
+"use strict";
+
+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"));
+
+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; }
+
+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 _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';
+/**
+ * This is the component description.
+ */
+
+var GradientBackground = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    pin,
+    shape // ...otherProps
+
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  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"
+  })));
+};
+
+GradientBackground.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),
+
+  /**
+   * Where to pin the shapes
+   */
+  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   *
+   */
+  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'spiral', 'diamonds', 'circles', 'ellipses'])
+};
+GradientBackground.defaultProps = {
+  pin: 'center',
+  shape: 'triangle'
+};
+var _default = GradientBackground;
+exports.default = _default;

package/dist/cjs/experimental/GradientBackground/index.js

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

package/dist/cjs/experimental/GradientBackground/styles.scss

@@ -0,0 +1,64 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-triangle-dimension:30em;
+$default-ellipses-dimension:50em;
+$default-ellipse-dimension:80em;
+$default-shapes-opacity:.8;
+
+.#{bem.$base}.gradient-background {
+  align-items: center;
+  background: var(--light-y);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: var(--pin);
+  position: absolute;
+  width: 100%;
+
+  .shapes {
+    display: flex;
+    justify-content: center;
+
+    .triangle {
+      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      clip-path: polygon(0 0, 50% 100%, 100% 0);
+      height: $default-triangle-dimension * .86;
+      opacity: $default-shapes-opacity;
+      width: $default-triangle-dimension;
+    }
+
+    .ellipses {
+
+      height: $default-ellipses-dimension / 2;
+      width: $default-ellipses-dimension;
+      opacity: $default-shapes-opacity;
+
+      .up {
+        background-image: linear-gradient(var(--light-y), var(--y));
+        clip-path: ellipse(40% 100% at 50% 0%);
+        height:50%;
+      }
+
+      .down {
+        background-image: linear-gradient(to top, var(--light-y), var(--y));
+        clip-path: ellipse(40% 100% at 50% 100%);
+        height:50%;
+      }
+
+    }
+
+    .ellipse {
+      height: $default-ellipse-dimension / 1.5;
+      width: $default-ellipse-dimension;
+      background-image: linear-gradient( to top left, var(--dark-y), var(--light-y),var(--dark-y));
+      clip-path: ellipse(50% 25% at 50% 50%);
+      opacity: $default-shapes-opacity;
+      transform: rotate3d(0, 0, -1, 10deg);
+    }
+
+  }
+}
+
+

package/dist/cjs/experimental/index.js

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

package/dist/cjs/f/common/Debugger/Debugger.js

@@ -47,7 +47,7 @@ var Debugger = _ref => {
     style: style
   }, /*#__PURE__*/React.createElement(_b.Button, {
     onClick: toggleDebugger,
-    color: "main1"
+    color: "main2"
   }, isOpen ? 'Close FormDebugger' : 'Open FormDebugger'), isOpen && /*#__PURE__*/React.createElement("pre", {
     className: "debuger-content"
   }, JSON.stringify(formikContext, null, 2)));

package/dist/cjs/f/common/Label/Label.js

@@ -86,7 +86,7 @@ Label.propTypes = {
 Label.defaultProps = {
   // someProp:false
   as: 'label',
-  color: 'main1'
+  color: 'main2'
 };
 var _default = Label;
 exports.default = _default;

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

@@ -149,8 +149,8 @@ ChoicesInput.propTypes = {
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
-  color: 'background',
-  colorChecked: 'main1',
+  color: 'background2',
+  colorChecked: 'main2',
   disabled: false
 };
 

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

@@ -121,8 +121,8 @@ Rating.propTypes = {
   showRatingValue: _propTypes.default.bool
 };
 Rating.defaultProps = {
-  activeBackgroundColor: 'secondary2',
-  inactiveBackgroundColor: 'background',
+  activeBackgroundColor: 'main1',
+  inactiveBackgroundColor: 'background2',
   showRatingValue: false
 };
 var _default = Rating;

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

@@ -38,13 +38,18 @@ var SelectInput = _ref => {
     name,
     label,
     options,
+    validate,
+    description,
     disabled // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  var [field, meta] = (0, _formik.useField)(name);
+  var [field, meta] = (0, _formik.useField)({
+    name,
+    validate
+  });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -56,6 +61,7 @@ var SelectInput = _ref => {
   }, label), /*#__PURE__*/React.createElement("select", _extends({
     className: "input v25 pv-v"
   }, field, {
+    value: field.value || '',
     id: name,
     disabled: disabled
   }), options.map(option => {
@@ -66,11 +72,13 @@ var SelectInput = _ref => {
     } : option;
     return /*#__PURE__*/React.createElement("option", {
       key: newOption.value,
-      value: newOption.value
+      value: newOption.value,
+      disabled: (newOption === null || newOption === void 0 ? void 0 : newOption.disabled) || false
     }, newOption.label);
-  })), meta.error && meta.touched && /*#__PURE__*/React.createElement(_common.FormDescription, {
-    error: true
-  }, meta.error));
+  })), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
+    isError: !!meta.error,
+    className: "v50 mt-v s-1"
+  }, meta.error || description));
 };
 
 SelectInput.propTypes = {
@@ -99,12 +107,23 @@ SelectInput.propTypes = {
    */
   label: _propTypes.default.string,
 
+  /**
+   * The input field validator function
+   */
+  validate: _propTypes.default.func,
+
+  /**
+   * The select input description
+   */
+  description: _propTypes.default.string,
+
   /**
    * The options of the select input
    */
   options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
     value: _propTypes.default.string,
-    label: _propTypes.default.string
+    label: _propTypes.default.string,
+    disabled: _propTypes.default.bool
   })])),
 
   /**

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

@@ -14,16 +14,16 @@ $default-padding: 0.75em 0.75em 0.55em;
 
 
   .input-label {
-    color: var(--main1);
+    color: var(--main2);
   }
 
   .input {
-    background: var(--light-background);
-    color: var(--on-background);
+    background: var(--light-background2);
+    color: var(--on-background2);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background);
+      background: var(--dark-background2);
     }
   }
 }

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

@@ -60,7 +60,7 @@ var TaskRecommendationInput = _ref => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "v1 p-v task"
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: "uc mb-v ".concat(isOptionSelected ? 'c-on-x' : 'c-x'),
+    className: "uc mb-v ".concat(isOptionSelected ? _bem.default.modifierActive : ''),
     name: name
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
     value: value,

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

@@ -16,6 +16,10 @@
       align-items: center;
       height: 100%;
 
+      .#{bem.$modifier-active} {
+        color: var(--on-x);
+      }
+
       .input {
         appearance: none;
         position: absolute;

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

@@ -38,10 +38,12 @@ var TextInput = _ref => {
     type,
     name,
     label,
+    labelColor,
     validate,
     oneInputLabel,
     description,
-    disabled // ...otherProps
+    disabled,
+    placeholder // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -57,13 +59,15 @@ var TextInput = _ref => {
     style: style // {...otherProps}
 
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
-    name: name
+    className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
+    name: name,
+    color: labelColor
   }, label), /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input ".concat(meta.touched && meta.error ? 'input-border-error' : 'input-border'),
     type: type,
-    disabled: disabled
+    disabled: disabled,
+    placeholder: placeholder
   }, field)), (description || meta.touched && meta.error) && /*#__PURE__*/React.createElement(_common.FormDescription, {
     isError: !!meta.error,
     className: "v50 mt-v s-1"
@@ -96,6 +100,11 @@ TextInput.propTypes = {
    */
   label: _propTypes.default.string.isRequired,
 
+  /**
+   * The input label color
+   */
+  labelColor: _propTypes.default.string,
+
   /**
    * The type of the input (html)
    */
@@ -119,7 +128,12 @@ TextInput.propTypes = {
   /**
    * Whether the text input should be disabled
    */
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: _propTypes.default.string
 };
 TextInput.defaultProps = {
   type: 'text',

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

@@ -9,17 +9,13 @@ $default-padding: 0.75em 0.75em 0.55em;
   display: flex;
   flex-direction: column;
 
-  .input-label {
-    color: var(--main1);
-  }
-
   .input {
-    background: var(--light-background);
-    color: var(--on-background);
+    background: var(--light-background2);
+    color: var(--on-background2);
     padding: $default-padding;
 
     &:focus {
-      background: var(--dark-background);
+      background: var(--dark-background2);
     }
   }
 }

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

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

package/dist/cjs/form.scss

@@ -1,6 +1,6 @@
 @use "form-reset.scss";
 
-$form-input-border-bottom: 1px solid var(--dark-background);
+$form-input-border-bottom: 1px solid var(--dark-background1);
 $form-input-on-focus-border-bottom: 1px solid var(--light-main1);
 $form-input-on-error-border-bottom: 1px solid var(--error);
 $label-input-heigth-width: 100%;

package/dist/es/a/AnimatedCounter/AnimatedCounter.js

@@ -1,6 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import { useLayoutEffect } from 'react';
+import { useLayoutEffect, useCallback } from 'react';
 import CountUp from 'react-countup';
 import VisibilitySensor from 'react-visibility-sensor';
 import PropTypes from 'prop-types';
@@ -18,28 +18,29 @@ const AnimatedCounter = ({
   style,
   color,
   number,
-  unit,
-  description,
-  descriptionPosition,
-  unitPosition,
+  before,
+  after,
   delay // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
+  const countDecimals = useCallback(value => {
+    if (value % 1 !== 0) return value.toString().split('.')[1].length;
+    return 0;
+  }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, descriptionPosition === 'top' && /*#__PURE__*/React.createElement("p", {
-    className: "info top-description uc s-1 md-s0"
-  }, description), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "count s3"
-  }, unitPosition === 'before' && /*#__PURE__*/React.createElement("span", null, unit), /*#__PURE__*/React.createElement(CountUp, {
+  }, before && /*#__PURE__*/React.createElement("span", null, before), /*#__PURE__*/React.createElement(CountUp, {
     end: number,
     delay: delay,
+    decimals: countDecimals(number),
     redraw: true
   }, ({
     countUpRef,
@@ -49,9 +50,7 @@ const AnimatedCounter = ({
     delayedCall: true
   }, /*#__PURE__*/React.createElement("span", {
     ref: countUpRef
-  }))), unitPosition === 'after' && /*#__PURE__*/React.createElement("span", null, unit)), descriptionPosition === 'bottom' && /*#__PURE__*/React.createElement("p", {
-    className: "info uc s-1 md-s0 v50 mt-v"
-  }, description));
+  }))), after && /*#__PURE__*/React.createElement("span", null, after)));
 };
 
 AnimatedCounter.propTypes = {
@@ -81,33 +80,21 @@ AnimatedCounter.propTypes = {
   number: PropTypes.number,
 
   /**
-   *  The review count unit
+   *  The unit before the number
    */
-  unit: PropTypes.string,
+  before: PropTypes.string,
 
   /**
-   *  The review description
+   *  The unit after the number
    */
-  description: PropTypes.string,
+  after: PropTypes.string,
 
   /**
    *  react counter delay
    */
-  delay: PropTypes.number,
-
-  /**
-   *  If the animated counter description should be at the top
-   */
-  descriptionPosition: PropTypes.oneOf(['top', 'bottom']),
-
-  /**
-   * If the unit should be before or after the animated numbers
-   */
-  unitPosition: PropTypes.string
+  delay: PropTypes.number
 };
 AnimatedCounter.defaultProps = {
-  color: 'main1',
-  descriptionPosition: 'bottom',
-  unitPosition: 'after'
+  color: 'main1'
 };
 export default AnimatedCounter;

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

@@ -1,24 +1,16 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-
+//@use "@aztlan/stylebook/src/mixins";
+//@use "@aztlan/stylebook/src/globals" as *;
 
 .#{bem.$base}.animated-counter {
-  align-items: center;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
 
   .count {
     color: var(--x);
   }
-
-  .top-description {
-    margin-bottom: .5em;
-  }
-
-  .info {
-    color: var(--metadata);
-  }
 }
 
 

package/dist/es/a/BackgroundGradient/BackgroundGradient.js

@@ -0,0 +1,55 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'background-gradient';
+/**
+ * This is the component description.
+ */
+
+const BackgroundGradient = ({
+  id,
+  className: userClassName,
+  style,
+  height // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: { ...style,
+      '--gradient-height': height
+    }
+  });
+};
+
+BackgroundGradient.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 height of the shape.
+   */
+  height: PropTypes.string
+};
+BackgroundGradient.defaultProps = {// someProp: false,
+};
+export default BackgroundGradient;

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

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