contentoh-components-library 21.4.69 → 21.4.70

package/dist/components/pages/ProductEditionv2/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  flex: 1;\n  overflow: auto;\n\n  .data-container {\n    display: flex;\n    flex-direction:row-reverse;\n    flex: 0%;\n    height: calc(100% - ", "px);\n    margin-top:15px;\n    .image-data-panel {\n      width: 192px;\n      height: 192px;\n\n      & + * {\n        margin-left: 10px;\n      }\n    }\n\n    .product-information {\n      width: 100%;\n      display: flex;\n      flex-direction: column;\n\n      .services-information-container {\n        height: 100%;\n        overflow: auto;\n        padding: 0 20px;\n      }\n\n      .product-information-image{\n        display:flex;\n        width: 100%;\n        margin-bottom:10px;\n      }\n\n      .product-image{\n        display:flex;\n        flex-direction: column;\n        justify-content: space-between;\n        padding: 0 20px;\n        gap:20px;\n        width:100%;\n      }\n\n      .image-services {\n        aside {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, 179px);\n          column-gap: 15px;\n          row-gap: 15px;\n          padding: 20px;\n        }\n      }\n\n      .commentary-box {\n        display: flex;\n        justify-content: space-between;\n        align-items: flex-end;\n        padding: 10px;\n        padding-left: 0;\n\n        .commentary {\n          display: flex;\n          align-items: flex-end;\n\n          .input-container {\n            width: 500px;\n\n            .quill {\n              height: 100px;\n            }\n\n            & + * {\n              margin-left: 5px;\n            }\n          }\n\n          .buttons-box {\n            display: flex;\n            width: 210px;\n            flex-wrap: wrap;\n\n            .general-transparent-button {\n              & + * {\n                margin-top: 5px;\n              }\n            }\n\n            .general-transparent-button,\n            .general-green-button,\n            .general-button-disabled {\n              width: fit-content;\n              min-width: 201px;\n              height: 40px;\n            }\n          }\n        }\n      }\n\n      .feedback-box {\n        display: flex;\n      }\n\n      .required-inputs-message {\n        font-family: ", ";\n        font-size: 13px;\n        color: ", ";\n        padding: 10px;\n        display: flex;\n        align-items: center;\n\n        p + * {\n          margin-top: 10px;\n        }\n\n        button {\n          min-width: fit-content;\n        }\n      }\n    }\n  }\n  #modal-message-box {\n    width: 400px;\n    height: 100px;\n  }\n  .container {\n    width: 100%;\n    height: auto;\n    border:1px solid ", ";\n    .dropzone {\n      height: 100%;\n      width: 100%;\n    }\n  }\n\n  .container-imagesM{\n    display:flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .container-bars{\n    display:flex;\n    gap:20px;\n    margin:10px 0;\n  }\n"])), function (_ref) {
+  var headerTop = _ref.headerTop;
+  return headerTop;
+}, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.gray_light);
+
+exports.Container = Container;

package/dist/global-files/variables.js

@@ -24,7 +24,9 @@ var GlobalColors = {
   gray_light: "#F0F0F0",
   gray: "#707070",
   blue_light: "#F7F7FC",
-  purple: "#8A6CAA"
+  purple: "#8A6CAA",
+  gray_medium: "#CBCBCB",
+  black: "#262626"
 };
 exports.GlobalColors = GlobalColors;
 var FontFamily = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.69",
+  "version": "21.4.70",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/assets/images/Icons/infoNR.svg

@@ -0,0 +1,8 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_37_379" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="8" height="8">
+<rect width="8" height="8" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_37_379)">
+<path d="M3.63807 5.98825H4.40893V3.62867H3.63807V5.98825ZM3.99596 3.07403C4.124 3.07403 4.2311 3.03169 4.31727 2.947C4.40345 2.86232 4.44653 2.75738 4.44653 2.6322C4.44653 2.49463 4.40331 2.38347 4.31685 2.29871C4.2304 2.21394 4.12327 2.17156 3.99547 2.17156C3.86061 2.17156 3.75166 2.21394 3.66863 2.29871C3.58559 2.38347 3.54407 2.49307 3.54407 2.6275C3.54407 2.7566 3.58737 2.8633 3.67398 2.94759C3.7606 3.03188 3.86792 3.07403 3.99596 3.07403ZM3.9991 8C3.44212 8 2.92156 7.89633 2.43741 7.68899C1.95324 7.48165 1.52964 7.19646 1.16659 6.83341C0.803541 6.47036 0.518349 6.04696 0.311013 5.5632C0.103671 5.07943 0 4.5588 0 4.0013C0 3.44379 0.103671 2.92273 0.311013 2.4381C0.518349 1.95348 0.803049 1.53104 1.16511 1.1708C1.52718 0.810554 1.95032 0.525358 2.43455 0.315215C2.91877 0.105072 3.43989 0 3.99792 0C4.55595 0 5.07764 0.10483 5.56301 0.314491C6.04837 0.524146 6.47094 0.80868 6.83072 1.16809C7.1905 1.52751 7.47533 1.95015 7.6852 2.43603C7.89507 2.92191 8 3.44396 8 4.0022C8 4.56004 7.89493 5.08098 7.68479 5.56504C7.47464 6.04909 7.18945 6.47169 6.8292 6.83282C6.46896 7.19395 6.04646 7.47876 5.56169 7.68726C5.07694 7.89575 4.55607 8 3.9991 8ZM4 7.11633C4.86173 7.11633 5.59499 6.81435 6.19977 6.21037C6.80454 5.60639 7.10693 4.8696 7.10693 4C7.10693 3.13827 6.80513 2.40501 6.20153 1.80024C5.59793 1.19546 4.86095 0.893067 3.9906 0.893067C3.12887 0.893067 2.39561 1.19487 1.79083 1.79847C1.18606 2.40207 0.883666 3.13905 0.883666 4.0094C0.883666 4.87113 1.18565 5.60439 1.78963 6.20917C2.39361 6.81394 3.1304 7.11633 4 7.11633Z" fill="#707070"/>
+</g>
+</svg>

package/src/assets/images/flagsv2/highPriority.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16H7.375V11H10L11 13H16V7H13L12 5H6V16ZM10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.02917 3.825 2.9375 2.925C3.84583 2.025 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.975 16.1542 17.075 17.0625C16.175 17.9708 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z" fill="#FC3030"/>
+</svg>

package/src/assets/images/flagsv2/lowPriority.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16H7.375V11H10L11 13H16V7H13L12 5H6V16ZM10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.02917 3.825 2.9375 2.925C3.84583 2.025 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.975 16.1542 17.075 17.0625C16.175 17.9708 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z" fill="#71DE56"/>
+</svg>

package/src/assets/images/flagsv2/mediumPriority.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16H7.375V11H10L11 13H16V7H13L12 5H6V16ZM10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.02917 3.825 2.9375 2.925C3.84583 2.025 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.975 16.1542 17.075 17.0625C16.175 17.9708 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z" fill="#EFD963"/>
+</svg>

package/src/assets/images/flagsv2/noPriority.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16H7.375V11H10L11 13H16V7H13L12 5H6V16ZM10 20C8.63333 20 7.34167 19.7375 6.125 19.2125C4.90833 18.6875 3.84583 17.9708 2.9375 17.0625C2.02917 16.1542 1.3125 15.0917 0.7875 13.875C0.2625 12.6583 0 11.3667 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.02917 3.825 2.9375 2.925C3.84583 2.025 4.90833 1.3125 6.125 0.7875C7.34167 0.2625 8.63333 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3667 19.7375 12.6583 19.2125 13.875C18.6875 15.0917 17.975 16.1542 17.075 17.0625C16.175 17.9708 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z" fill="#CBCBCB"/>
+</svg>

package/src/assets/images/generalButton/closeIconWhite.svg

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="13.3585" y1="12.1333" x2="39.8661" y2="38.641" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.8672 12.1333L13.8672 38.1333" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/generalButton/closeIconv2.svg

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="13.3585" y1="12.1333" x2="39.8661" y2="38.641" stroke="#707070" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M39.8672 12.1333L13.8672 38.1333" stroke="#707070" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/atoms/CharsMissing/Wysiwyg.stories.js

@@ -0,0 +1,12 @@
+import { CharsMissing } from "./index";
+
+export default {
+  title: "Components/atoms/CharsMissing",
+  component: CharsMissing,
+};
+
+const Template = (args) => <CharsMissing {...args} />;
+
+export const DefaultCharsMissing = Template.bind({});
+
+DefaultCharsMissing.args = { text: "hola mundo" };

package/src/components/atoms/CharsMissing/index.js

@@ -0,0 +1,60 @@
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import { useState } from "react";
+import { Container } from "./styles";
+
+export const CharsMissing = ({
+  mainValue = "",
+  inputId,
+  articleId,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  isRequired,
+  maxChar,
+}) => {
+  const [inputValue, setInputValue] = useState(mainValue);
+  const [selection, setSelection] = useState(false);
+  const [position, setPosition] = useState({ left: 0, top: 0 });
+  const [charsCounter, setCharsCounter] = useState(0);
+  const [quillState, setQuillState] = useState({});
+  const maxLength = maxChar ? maxChar : 999;
+
+  const getValue = (value) => {
+    let temp = value
+      .replace(/\n/gm, "<br>")
+      .replace(/\&nbsp;/gm, " ")
+      .replace(/\&amp;/gm, "&");
+    return temp;
+  };
+
+  //const quillRef = useRef();
+  const setQuill = (ref) => {
+    if (!ref || ref === null) return;
+    if (typeof ref.getEditor !== "function") return;
+    setQuillState(ref.getEditor());
+  };
+
+  const valueFormater = (value) => {
+    return value
+      .replace(/<\/p><p>/gm, "\n")
+      .replace(/<\/?br>|<\/?p>/gm, "")
+      .replace(/\&nbsp;/gm, " ")
+      .replace(/\&amp;/gm, "&");
+  };
+
+
+  return (
+    <Container
+      isRequired={
+        isRequired &&
+        (inputValue.replace(/<.*?>/gm, "").length === 0 || !inputValue)
+      }
+      selection={selection}
+      position={position}
+    >
+      <p className="description-limit">
+        C. {charsCounter}/{maxLength}
+      </p>
+    </Container>
+  );
+};

package/src/components/atoms/CharsMissing/styles.js

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  .description-limit {
+    font-size: 8px;
+    font-family: ${FontFamily.Roboto}, sans-serif;
+    color: ${GlobalColors.gray_medium};
+  }
+  .quill {
+    background-color: ${GlobalColors.white};
+    border: 1px solid
+      ${({ focus, isRequired }) =>
+        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.gray_light};
+    position: relative;
+    border-radius: 5px;
+
+    .ql-toolbar {
+      background-color: ${GlobalColors.s2};
+      position: absolute;
+      z-index: 10;
+      border: 1px solid ${GlobalColors.gray_light};
+      width: 45px;
+      height: 45px;
+      border-radius: 4px;
+      visibility: ${({ selection }) => (selection ? "visible" : "hidden")};
+      top: ${({ position }) => position.top}px;
+      left: ${({ position }) => position.left}px;
+    }
+
+    .ql-container {
+      border: none;
+      font-family: ${FontFamily.AvenirNext};
+      color: ${GlobalColors.deep_gray};
+      strong {
+        font-family: ${FontFamily.Raleway_900};
+      }
+
+      .ql-editor{
+        padding: 8px 10px;
+      }
+    }
+  }
+`;

package/src/components/atoms/FeatureTagv2/FeatureTagv2.stories.js

@@ -0,0 +1,16 @@
+import { FeatureTagv2 } from "./index";
+
+export default {
+  title: "Components/atoms/FeatureTagv2",
+  label: "Feature Tag",
+  component: FeatureTagv2,
+};
+
+const Template = (args) => <FeatureTagv2 {...args} />;
+
+export const FeatureTagDefault = Template.bind({});
+
+FeatureTagDefault.args = {
+  feature: "Feature",
+  value: "Value",
+};

package/src/components/atoms/FeatureTagv2/index.js

@@ -0,0 +1,10 @@
+import { Container } from "./styles";
+
+export const FeatureTagv2 = ({ feature, value, contClassName ,tagClassName }) => {
+  return (
+    <Container className={`${contClassName}`}>
+      <p className={`feature-name ${tagClassName}`}>{feature}</p>
+      <p className="feature-value">{value}</p>
+    </Container>
+  );
+};

package/src/components/atoms/FeatureTagv2/styles.js

@@ -0,0 +1,56 @@
+import styled from "styled-components";
+import "../../../global-files/global-styles.css";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  border-radius: 3px;
+  display: flex;
+  width: fit-content;
+  height: 20px;
+  padding: 4px 5px;
+  align-items: center;
+
+  .feature-name {
+    font-size: 10px;
+    font-family: ${FontFamily.Raleway_500};
+    font-style: normal;
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 12px;
+    color: ${GlobalColors.gray};
+
+    & + * {
+      margin-left: 5px;
+    }
+    &.bar-container {
+      background-color: #f0eef2;
+      border-radius: 3px;
+      height: 20px;
+      padding: 4px 5px;
+      min-width: 70px;
+      text-align: center;
+    }
+  }
+  .feature-value {
+    font-family: ${FontFamily.AvenirNext};
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    height: 12px;
+    letter-spacing: -0.015em;
+    color: ${GlobalColors.gray};
+  }
+
+  &:last-of-type {
+    p {
+      font-size: 10px;
+    }
+  }
+  &.bar-sku-cont {
+    background-color: ${GlobalColors.purple};
+    p{
+      color: ${GlobalColors.white};
+    }
+  }
+`;

package/src/components/atoms/GeneralButton/styles.js

@@ -5,6 +5,8 @@ import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
 import nullIcon from "../../../assets/images/generalButton/nullIcon.svg";
 import openModalIcon from "../../../assets/images/generalButton/openModal.svg";
 import closeIcon from "../../../assets/images/generalButton/closeIcon.svg";
+import closeIconv2 from "../../../assets/images/generalButton/closeIconv2.svg";
+import closeIconWhite from "../../../assets/images/generalButton/closeIconWhite.svg";
 import rowsLayout from "../../../assets/images/generalButton/rowLayout.svg";
 import gridLayout from "../../../assets/images/generalButton/gridLayout.svg";
 import arrowIcon from "../../../assets/images/arrow/arrowIcon.svg";
@@ -144,6 +146,24 @@ export const Container = styled.button`
     background-image: url(${closeIcon});
   }
 
+  &.close-buttonv2 {
+    width: 52px;
+    height: 52px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url(${closeIconv2});
+  }
+
+  &.close-button-white {
+    width: 52px;
+    height: 52px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url(${closeIconWhite});
+  }
+
   &.open-modal-button {
     background-color: transparent;
     border: none;
@@ -186,4 +206,30 @@ export const Container = styled.button`
       opacity: 1;
     }
   }
+  &.general-button-rec {
+    background:#85BC5B;
+    color: ${GlobalColors.white};
+    padding: 4px 5px;
+    border-radius: 3px;
+    font-size: 10px;
+    height: 20px;
+    line-height: 12px;
+    text-align: center;
+  }
+
+  &.general-button-sol {
+    background-color: #e33aa9;
+    border: none;
+    border-radius: 50px;
+    color: ${GlobalColors.white};
+    height: 34px;
+    font-family: Avenir Next;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 14px;
+    padding: 10px 15px;
+    cursor: pointer;
+  }
 `;
+

package/src/components/atoms/GeneralInputv2/GeneralInputv2.stories.js

@@ -0,0 +1,33 @@
+import { GeneralInputv2 } from "./index";
+
+export default {
+  title: "Components/atoms/GeneralInputv2",
+  component: GeneralInputv2,
+  argTypes: {
+    inputType: {
+      options: ["text", "textarea"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <GeneralInputv2 {...args} />;
+
+export const Input = Template.bind({});
+
+Input.args = {
+  inputId: "default-input",
+  inputType: "text",
+  inputPlaceholder: "placeholder text",
+};
+
+export const TextArea = Template.bind({});
+
+TextArea.args = {
+  inputType: "textarea",
+  inputId: "default-input",
+  inputCols: "50",
+  inputRows: "5",
+  inputName: "text-area-name",
+  inputPlaceholder: "textarea placeholder",
+};

package/src/components/atoms/GeneralInputv2/index.js

@@ -0,0 +1,155 @@
+import { useEffect, useState } from "react";
+import { Container } from "./styles";
+import { CheckBox } from "../CheckBox";
+import { InputFormatterv2 } from "../InputFormatterv2";
+
+export const GeneralInputv2 = ({
+  inputType,
+  inputId,
+  inputName,
+  inputValue = "",
+  inputPlaceholder,
+  validateInput,
+  position,
+  inputsArray,
+  inputSize,
+  articleId,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  maxChar,
+  isRequired,
+  version,
+  optionList = [],
+  description,
+  inputOnChange,
+  disabled,
+  onKeyDown,
+  auditClass,
+}) => {
+  const [textValue, setTextValue] = useState({
+    value: inputValue,
+  });
+  const [requiredEmpty, setRequiredEmpty] = useState(false);
+
+  const onHandleChange = (evt) => {
+    if (validateInput) {
+      setTextValue({ value: validateInput(evt, position, inputsArray) });
+    } else if (
+      updatedDatasheets ||
+      updatedDescriptions ||
+      inputType === "textarea"
+    ) {
+      let generalValue;
+      if (optionList?.length > 0) {
+        let valueSelected = evt.target.value;
+        generalValue = valueSelected;
+        setTextValue({ value: generalValue });
+      } else {
+        generalValue =
+          inputType === "checkbox" ? evt.target.checked : evt.target.value;
+        setTextValue({
+          value: generalValue,
+        });
+      }
+      let dataSave = updatedDatasheets?.slice();
+
+      if (dataSave?.length > 0) {
+        const index = dataSave.findIndex((e) => e.attributeId === inputId);
+        if (index !== -1) {
+          if (generalValue !== inputValue) dataSave[index].value = generalValue;
+          else dataSave.splice(index, 1);
+        } else {
+          dataSave.push({
+            articleId: articleId,
+            attributeId: inputId,
+            value: generalValue,
+          });
+        }
+      } else {
+        if (generalValue !== inputValue) {
+          dataSave.push({
+            articleId: articleId,
+            attributeId: inputId,
+            value: generalValue,
+          });
+        }
+      }
+      setUpdatedDatasheets(dataSave);
+    } else {
+      setTextValue({ value: evt.target.value });
+      inputOnChange && inputOnChange(evt);
+    }
+  };
+
+  useEffect(() => {
+    setRequiredEmpty(
+      isRequired &&
+        (textValue.value?.length === 0 || textValue.value === undefined)
+    );
+  }, [textValue]);
+
+  const numberInputOnWheelPreventChange = (e) => {
+    // Prevent the input value change
+    e.target.blur();
+    // Prevent the page/container scrolling
+    e.stopPropagation();
+    // Refocus immediately, on the next tick (after the current function is done)
+    setTimeout(() => e.target.focus(), 0);
+  };
+
+  return (
+    <Container isRequired={requiredEmpty} className={auditClass}>
+      {optionList?.length > 0 ? (
+        <select
+          key={`dropdownK${inputId}`}
+          id={`dropdown${inputId}`}
+          onChange={(e) => onHandleChange(e)}
+          defaultValue={textValue.value}
+        >
+          <option value="">{description}</option>
+          {JSON.parse(optionList || "[]").map((element, index) => (
+            <option key={element + "-" + index} value={element}>
+              {element}
+            </option>
+          ))}
+        </select>
+      ) : inputType === "checkbox" ? (
+        <CheckBox
+          id={inputId}
+          onChange={(e) => onHandleChange(e)}
+          defaultChecked={textValue.value === "true" ? true : false}
+        />
+      ) : inputType !== "textarea" ? (
+        <input
+          type={inputType}
+          disabled={disabled}
+          id={inputId}
+          size={inputSize}
+          className="general-input"
+          placeholder={inputPlaceholder}
+          value={textValue.value}
+          onInput={(e) => onHandleChange(e)}
+          maxLength={maxChar}
+          required={isRequired}
+          onKeyDown={onKeyDown}
+          onWheel={numberInputOnWheelPreventChange}
+        />
+      ) : (
+        <InputFormatterv2
+          name={inputName}
+          inputId={inputId}
+          placeholder={inputPlaceholder}
+          mainValue={textValue.value}
+          onChange={onHandleChange}
+          articleId={articleId}
+          updatedDescriptions={updatedDescriptions}
+          setUpdatedDescriptions={setUpdatedDescriptions}
+          maxChar={maxChar}
+          isRequired={isRequired}
+        />
+      )}
+    </Container>
+  );
+};

package/src/components/atoms/GeneralInputv2/styles.js

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  > div {
+    label {
+      &:before {
+        outline: 1px solid ${({ isRequired }) => (isRequired ? "red" : "none")};
+      }
+    }
+  }
+
+  input,
+  textarea {
+    width: 100%;
+    border: 1px solid
+      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
+
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.deep_gray};
+    font-weight: normal;
+    font-size: 12px;
+    line-height: 15px;
+    padding: 10px;
+    outline: none;
+    border-radius: 5px;
+    resize: none;
+
+    &:focus {
+      border: 1px solid ${GlobalColors.purple};
+    }
+  }
+
+  select {
+    background: #fafafa;
+    outline: none;
+    border: 1px solid
+      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
+    width: 100%;
+    cursor: pointer;
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.deep_gray};
+    font-size: 12px;
+    line-height: 21px;
+    padding: 10px;
+    border-right: 2px solid #e33aa9;
+
+    &:focus {
+      border: 1px solid ${GlobalColors.magenta_s2};
+    }
+  }
+
+  p {
+    font-family: ${FontFamily.Raleway};
+    font-size: 12px;
+    color: ${GlobalColors.deep_gray};
+  }
+
+  &.audit-class {
+    input,
+    .quill {
+      border: 1px solid #8a6caa;
+      background-color: #ededfc;
+    }
+  }
+`;

package/src/components/atoms/InputFormatter/styles.js

@@ -6,15 +6,15 @@ export const Container = styled.div`
     background-color: ${GlobalColors.white};
     border: 1px solid
       ${({ focus, isRequired }) =>
-        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.s3};
+        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.gray_light};
     position: relative;
-    border-radius: 2px;
+    border-radius: 5px;
 
     .ql-toolbar {
       background-color: ${GlobalColors.s2};
       position: absolute;
       z-index: 10;
-      border: 1px solid ${GlobalColors.s3};
+      border: 1px solid ${GlobalColors.gray_light};
       width: 45px;
       height: 45px;
       border-radius: 4px;
@@ -30,6 +30,10 @@ export const Container = styled.div`
       strong {
         font-family: ${FontFamily.Raleway_900};
       }
+
+      .ql-editor{
+        padding: 8px 10px;
+      }
     }
   }
   .description-limit {

package/src/components/atoms/InputFormatterv2/Wysiwyg.stories.js

@@ -0,0 +1,12 @@
+import { InputFormatterv2 } from "./index";
+
+export default {
+  title: "Components/atoms/InputFormatterv2",
+  component: InputFormatterv2,
+};
+
+const Template = (args) => <InputFormatterv2 {...args} />;
+
+export const DefaultInputFormatterv2 = Template.bind({});
+
+DefaultInputFormatterv2.args = { text: "hola mundo" };