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

package/src/ui/f/fields/TextInput/styles.scss

@@ -10,12 +10,25 @@ $default-padding: 0.75em 0.75em 0.55em;
   flex-direction: column;
 
   .input {
-    background: var(--light-background2);
-    color: var(--on-background2);
+    border: var(--theme-border-style) var(--dark-y);
+    background: var(--light-y);
+    color: var(--on-y);
     padding: $default-padding;
 
+    &::placeholder{
+      color: var(--metadata);
+    }
+
+    &:not(:disabled):hover{
+      border: var(--theme-border-style) var(--light-background4);
+    }
+
+    &:disabled {
+      background-color: var(--dark-y);
+    }
+
     &:focus {
-      background: var(--dark-background2);
+      background: var(--light-background4);
     }
   }
 }

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -52,7 +52,7 @@ const TextareaInput = ({
 
         componentClassName,
         userClassName,
-        `x-${textAreaColor}`,
+        `y-${textAreaColor}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -70,7 +70,7 @@ const TextareaInput = ({
       </FormLabel>
       <textarea
         id={textAreaId}
-        className={`textarea v50 pv-v ${meta.touched && meta.error ? 'input-border-error' : 'input-border'}`}
+        className="textarea"
         {...field}
         placeholder={placeholder}
         rows={rows}
@@ -163,7 +163,7 @@ TextareaInput.propTypes = {
 
 TextareaInput.defaultProps = {
   rows         :3,
-  textAreaColor:'background1',
+  textAreaColor:'background2',
   disabled     :false,
 }
 

package/src/ui/f/fields/TextareaInput/styles.scss

@@ -1,19 +1,32 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 @use "@pareto-engineering/bem";
 
+$default-padding: .5em;
+
 .#{bem.$base}.text-area-input{
   display: flex;
   flex-direction: column;
 
   .textarea {
-    background: var(--light-x);
-    color: var(--on-x);
+    border: var(--theme-border-style) var(--dark-y);
+    background: var(--light-y);
+    color: var(--on-y);
+    padding: $default-padding;
 
-    &:focus {
-      background: var(--dark-x);
+    &::placeholder{
+      color: var(--metadata);
     }
-  }
-}
 
+    &:not(:disabled):hover{
+      border: var(--theme-border-style) var(--light-background4);
+    }
 
+     &:disabled {
+      background-color: var(--dark-y);
+    }
 
+    &:focus {
+      background: var(--light-background4);
+    }
+  }
+}

package/src/ui/f/fields/index.js

@@ -1,8 +1,5 @@
 export { TextInput } from './TextInput'
 export { SelectInput } from './SelectInput'
-export { RadioInput } from './RadioInput'
-export { CheckboxInput } from './CheckboxInput'
-export { TaskRecommendationInput } from './TaskRecommendationInput'
 export { ChoicesInput } from './ChoicesInput'
 export { TextareaInput } from './TextareaInput'
 export { RatingsInput } from './RatingsInput'

package/src/ui/form-reset.scss

@@ -19,7 +19,7 @@ button,
 textarea,
 label,
 select {
-  background-color: inherit;
+  // background-color: inherit;
   border: 0;
   display: inline-block;
   font: inherit;

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

@@ -1,88 +0,0 @@
-"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"));
-
-var _common = require("./common");
-
-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; }
-
-var baseClassName = _bem.default.base;
-var componentClassName = 'ratings-input';
-/**
- * This is the component description.
- */
-
-var RatingsInput = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    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: 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
-    });
-  }));
-};
-
-RatingsInput.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 number of ratings input stars to be displayed
-   */
-  ratingCount: _propTypes.default.number,
-
-  /**
-   * Name of the rating input
-   */
-  name: _propTypes.default.string
-};
-RatingsInput.defaultProps = {// someProp:false
-};
-var _default = RatingsInput;
-exports.default = _default;

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

@@ -1,120 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-"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

@@ -1,15 +0,0 @@
-"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

@@ -1,35 +0,0 @@
-/* @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/AcceptCookies/AcceptCookies.js

@@ -1,134 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _b = require("../../b");
-
-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; }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'accept-cookies';
-/**
- * This is the component description.
- */
-
-var AcceptCookies = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    color,
-    title,
-    subtitle,
-    onClickAllow,
-    onClickDecline,
-    defaultIsShown // ...otherProps
-
-  } = _ref;
-  var [isShown, setIsShown] = (0, React.useState)(defaultIsShown);
-  var hide = (0, React.useCallback)(() => setIsShown(false), []);
-  var allow = (0, React.useCallback)(() => {
-    onClickAllow === null || onClickAllow === void 0 ? void 0 : onClickAllow();
-    hide();
-  }, []);
-  var decline = (0, React.useCallback)(() => {
-    onClickDecline === null || onClickDecline === void 0 ? void 0 : onClickDecline();
-    hide();
-  }, []);
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  if (!isShown) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), 'u1'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: _bem.default.elementContent
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "s0"
-  }, title), /*#__PURE__*/React.createElement("p", {
-    className: "s-1"
-  }, subtitle), /*#__PURE__*/React.createElement("div", {
-    className: "buttons s-1"
-  }, /*#__PURE__*/React.createElement(_b.Button, {
-    className: "allow",
-    onClick: allow
-  }, "Allow"), /*#__PURE__*/React.createElement(_b.Button, {
-    className: "decline v1 ml-v",
-    onClick: decline
-  }, "Decline"))));
-};
-
-AcceptCookies.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 children JSX
-   */
-  // children:PropTypes.node,
-
-  /**
-   *  The title
-   */
-  title: _propTypes.default.string,
-
-  /**
-   *  The sub-title
-   */
-  subtitle: _propTypes.default.string,
-
-  /**
-   *  The color
-   */
-  color: _propTypes.default.string,
-
-  /**
-   *  Allow cookies function
-   */
-  onClickAllow: _propTypes.default.func,
-
-  /**
-   *  Allow cookies function
-   */
-  onClickDecline: _propTypes.default.func,
-
-  /**
-   *  Condition to show or hide the component
-   */
-  defaultIsShown: _propTypes.default.bool
-};
-AcceptCookies.defaultProps = {
-  color: 'main1',
-  defaultIsShown: true
-};
-var _default = AcceptCookies;
-exports.default = _default;

package/dist/cjs/c/AcceptCookies/index.js

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

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

@@ -1,49 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$default-padding:var(--u, 1em);
-
-.#{bem.$base}.accept-cookies {
-  padding: $default-padding;
-
-  .#{bem.$element-content} {
-    align-items: center;
-    background-color: var(--on-x);
-    border-radius: var(--theme-border-radius);
-    display: flex;
-    justify-content: space-between;
-    padding: $default-padding;
-
-    .buttons {
-      display: flex;
-
-      .allow,
-      .decline {
-        min-width: 100px;
-      }
-
-      .decline {
-        background-color: var(--on-x);
-        border: 1px solid var(--x);
-        color: var(--x);
-      }
-    }
-  }
-
-  @include mixins.media($to:$sm-md) {
-    .content {
-      flex-direction: column;
-    }
-  }
-
-  @include mixins.media($from:$sm-md) {
-    .content {
-      p {
-        margin-bottom: 0;
-      }
-    }
-  }
-}