contentoh-components-library 21.4.74 → 21.4.77

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/Avatar/index.js

@@ -2,12 +2,18 @@ import { Container } from "./styles";
 import ReactImageFallback from "react-image-fallback";
 import defaultProfile from "../../../assets/images/defaultImages/defaultProfileImage.svg";
 
-export const Avatar = ({ image, altText, imageType, onClick }) => {
+export const Avatar = ({
+  image,
+  altText,
+  imageType,
+  onClick,
+  fallbackImage,
+}) => {
   return (
     <Container className={imageType}>
       <ReactImageFallback
         src={image}
-        fallbackImage={defaultProfile}
+        fallbackImage={fallbackImage || defaultProfile}
         alt={altText}
         onClick={onClick}
       />

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

@@ -17,6 +17,7 @@ export default {
         "purple",
         "purpleS2",
         "black",
+        "red"
       ],
       control: { type: "select" },
     },

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

@@ -53,6 +53,7 @@ export const ButtonV2 = (props) => {
             "purple",
             "purpleS2",
             "black",
+            "red"
           ].includes(type)
             ? type
             : "white") +

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

@@ -128,6 +128,14 @@ export const Container = styled.div`
           background-color: #61467e;
         }
       }
+      &.red {
+        background-color: #B64545;
+        color: white;
+        border-color: #B64545;
+        &:hover {
+          background-color: 9C4646;
+        }
+      }
     }
 
     // tipos de botones transparent
@@ -179,6 +187,14 @@ export const Container = styled.div`
           color: #7b7979;
         }
       }
+      &.red {
+        background-color: #B64545;
+        color: white;
+        border-color: #B64545;
+        &:hover {
+          background-color: 9C4646;
+        }
+      }
     }
 
     .icon,

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/CheckBox/CheckBox.stories.js

@@ -8,6 +8,10 @@ export default {
       options: [true, false],
       type: "boolean",
     },
+    typeColor: {
+        options: ["purple", "green", "pink"],
+        control: { type: "select" },
+      },
   },
 };
 
@@ -17,4 +21,5 @@ export const CheckBoxDefault = Template.bind({});
 CheckBoxDefault.args = {
   id: "chk-default",
   label: "chk-default",
+  typeColor: "purple",
 };

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { Container } from "./styles";
 
 export const CheckBox = ({
@@ -8,10 +10,11 @@ export const CheckBox = ({
   defaultChecked,
   disabled = false,
   checked,
+  typeColor,
   className = "",
 }) => {
   return (
-    <Container key={`check-${id}`} className={className}>
+    <Container key={`check-${id}`} className={className} typeColor={typeColor}>
       <input
         type="checkbox"
         name={id}
@@ -23,6 +26,7 @@ export const CheckBox = ({
       />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}
+        
       </label>
     </Container>
   );

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

@@ -1,5 +1,7 @@
 import styled from "styled-components";
-import checked from "../../../assets/images/checkBox/checked.svg";
+import checkedPurple from "../../../assets/images/checkBox/checked.svg";
+import checkedGreen from "../../../assets/images/checkBox/checkverde.svg";
+import checkedPink from "../../../assets/images/checkBox/checkrosa.svg";
 import unchecked from "../../../assets/images/checkBox/unchecked.svg";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
@@ -9,8 +11,10 @@ export const Container = styled.div`
     &:checked + label {
       &:before {
         background-color: ${GlobalColors.white};
-        background-image: url(${checked});
-      }
+        background-image: ${({ typeColor }) => ( typeColor === "purple" ? 
+        `url(${checkedPurple})` : typeColor === "green" 
+        ? `url(${checkedGreen})` : `url(${checkedPink})` )}
+      } 
     }
   }
 
@@ -46,6 +50,8 @@ export const Container = styled.div`
       top: 50%;
       transform: translateY(-50%);
       background-image: url(${unchecked});
+      z-index: 5;
+      cursor: pointer;
     }
   }
 `;

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>
+  );
+};