contentoh-components-library 21.0.31 → 21.0.34

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

@@ -1,5 +1,4 @@
 import { Container } from "./styles";
-import React from "react";
 
 export const Button = ({
   buttonType,
@@ -10,15 +9,9 @@ export const Button = ({
   onClick,
 }) => {
   return (
-    <Container
-      className={buttonType}
-      buttonFont={buttonFont}
-      onClick={onClick}
-      key={`button-${buttonType}`}
-      disabled={buttonType === "general-button-disabled"}
-    >
+    <Container className={buttonType} buttonFont={buttonFont} onClick={onClick} key={`button-${buttonType}`}>
       {buttonType.includes("general") && label}
-      {image && <img src={image} alt={altText} />}
+      {image && <img src={image} alt={altText}/>}
     </Container>
   );
 };

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

@@ -12,7 +12,6 @@ import saveIcon from "../../../assets/images/generalButton/saveIcon.svg";
 import saveIconHover from "../../../assets/images/generalButton/saveIconHover.svg";
 import deleteIcon from "../../../assets/images/generalButton/deleteIcon.svg";
 import deleteIconHover from "../../../assets/images/generalButton/deleteIconHover.svg";
-import downloadIcon from "../../../assets/images/generalButton/downloadIcon.svg";
 import { GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.button`
@@ -93,19 +92,6 @@ export const Container = styled.button`
         border: 1px solid ${GlobalColors.magenta_s2};
       }
     }
-
-    &.download-button {
-      background-image: url(${downloadIcon});
-      border: 1px solid ${GlobalColors.s3};
-      border-radius: 15px;
-      background-size: 15px;
-
-      &:hover {
-        color: white;
-        background-color: ${GlobalColors.magenta_s2};
-        border: 1px solid ${GlobalColors.magenta_s2};
-      }
-    }
   }
 
   &.general-arrow-button {
@@ -159,13 +145,4 @@ export const Container = styled.button`
   &.row-layout {
     background-image: url(${gridLayout});
   }
-
-  &.general-button-disabled {
-    background-color: grey;
-    color: ${GlobalColors.white};
-
-    &:hover {
-      opacity: 1;
-    }
-  }
 `;

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

@@ -1,84 +1,38 @@
 import { useEffect, useState } from "react";
 import { Container } from "./styles";
-import { InputFormatter } from "../InputFormatter";
-import { CheckBox } from "../CheckBox";
 
 export const GeneralInput = ({
   inputType,
   inputId,
+  inputCols,
+  inputRows,
   inputName,
   inputValue,
   inputPlaceholder,
   validateInput,
   position,
   inputsArray,
+  maxLength,
   inputSize,
-  articleId,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  maxChar,
-  isRequired,
-  version,
 }) => {
-  const [textValue, setTextValue] = useState({
-    value: inputValue,
-  });
-  const [requiredEmpty, setRequiredEmpty] = useState(false);
+  const [textValue, setTextValue] = useState({ value: inputValue ?? "" });
 
-  const onHandleChange = (evt) => {
-    if (validateInput) {
-      setTextValue({ value: validateInput(evt, position, inputsArray) });
-    } else {
-      setTextValue({
-        value: inputType === "checkbox" ? evt.target.checked : evt.target.value,
-      });
-      let dataSave = updatedDatasheets.slice();
-      if (dataSave.length === 0)
-        dataSave.push({
-          articleId: articleId,
-          versionId: version,
-          attributeId: inputId,
-          value:
-            inputType === "checkbox" ? evt.target.checked : evt.target.value,
-        });
-      else if (dataSave.some((e) => e.attributeId === inputId)) {
-        dataSave.forEach((e) => {
-          if (e.attributeId === inputId) {
-            e.value =
-              inputType === "checkbox" ? evt.target.checked : evt.target.value;
-          }
-        });
-      } else {
-        dataSave.push({
-          articleId: articleId,
-          versionId: version,
-          attributeId: inputId,
-          value:
-            inputType === "checkbox" ? evt.target.checked : evt.target.value,
-        });
-      }
-      setUpdatedDatasheets(dataSave);
-    }
+  const onHandleChange = (e) => {
+    validateInput
+      ? setTextValue({ value: validateInput(e, position, inputsArray) })
+      : setTextValue(({ value }) => (value = e.target.value));
   };
 
   useEffect(() => {
-    setRequiredEmpty(
-      isRequired &&
-        (textValue.value?.length === 0 || textValue.value === undefined)
-    );
+    const input = document.querySelector(`textarea#${inputId}`);
+    if (input) {
+      input.style.cssText = "height:" + input.scrollHeight + "px";
+    }
   }, [textValue]);
 
   return (
-    <Container isRequired={requiredEmpty}>
-      {inputType === "checkbox" ? (
-        <CheckBox
-          id={inputId}
-          onChange={(e) => onHandleChange(e)}
-          defaultChecked={textValue.value === "true" ? true : false}
-        />
-      ) : inputType !== "textarea" ? (
+    <Container>
+      {inputType !== "textarea" ? (
         <input
           type={inputType}
           id={inputId}
@@ -87,22 +41,18 @@ export const GeneralInput = ({
           placeholder={inputPlaceholder}
           value={textValue.value}
           onInput={(e) => onHandleChange(e)}
-          required={isRequired}
-          maxLength={maxChar}
+          maxLength={maxLength && maxLength}
         />
       ) : (
-        <InputFormatter
+        <textarea
           name={inputName}
-          inputId={inputId}
+          id={inputId}
+          cols={inputCols}
+          rows={inputRows}
           placeholder={inputPlaceholder}
-          mainValue={textValue.value}
+          value={textValue.value}
           onChange={onHandleChange}
-          articleId={articleId}
-          updatedDescriptions={updatedDescriptions}
-          setUpdatedDescriptions={setUpdatedDescriptions}
-          maxChar={maxChar}
-          isRequired={isRequired}
-        />
+        ></textarea>
       )}
     </Container>
   );

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

@@ -4,20 +4,10 @@ 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}`)};
-
+    border: 1px solid ${GlobalColors.s2};
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.s4};
     font-weight: normal;

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

@@ -1,10 +1,10 @@
 import { Container } from "./styles";
 
-export const GenericModal = ({ componentsArray = [], buttonType, onClick }) => {
+export const GenericModal = ({ componentsArray = [], buttonType }) => {
   return (
     <Container>
       <div className={"global-styles " + buttonType}>
-        <button className="close-button" onClick={onClick} />
+        <button className="close-button" />
         {componentsArray?.map((component) => component)}
       </div>
     </Container>

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

@@ -12,13 +12,6 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
-  top: 0;
-  left: 0;
-  z-index: 100;
-
-  h2 {
-    overflow: initial;
-  }
 
   .global-styles {
     background-color: ${GlobalColors.deep_gray};
@@ -75,10 +68,9 @@ export const Container = styled.div`
           margin-top: 30px;
         }
       }
-      .product-name-header,
-      .retailer-name-header {
+      .product-name-header {
         & + * {
-          margin-top: 30px;
+          margin-bottom: 30px;
         }
       }
     }

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

@@ -0,0 +1,10 @@
+import { Loading } from "./index";
+
+export default {
+  title: "Components/atoms/Loading",
+  component: Loading,
+};
+const Template = (args) => <Loading {...args} />;
+export const LoadingDefault = Template.bind({});
+
+LoadingDefault.args = {};

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

@@ -1,12 +1,13 @@
-import { Container, Loader } from "./styles";
+import { Container } from "./styles";
+
 export const Loading = () => {
   return (
-    <Container>
-      <Loader>
+    <Container >
+      <div className="loader">
         <span className="first"></span>
         <span className="second"></span>
         <span className="third"></span>
-      </Loader>
+      </div>
     </Container>
   );
 };

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

@@ -6,52 +6,52 @@ export const Container = styled.div`
   align-items: center;
   height: 100%;
   width: 100%;
-`;
-export const Loader = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-  span {
-    display: inline-block;
-    border-radius: 100%;
-    margin: 35px 5px;
-    opacity: 1;
-  }
-  .first {
-    background-color: #ff75cf;
-  }
-  .second {
-    background-color: #e33aa9;
-  }
-  .third {
-    background-color: #b12d84;
-  }
-  span:nth-child(1) {
-    width: 16px;
-    height: 16px;
-    animation: opacitychange 1s ease-in-out infinite;
-  }
-  span:nth-child(2) {
-    width: 18px;
-    height: 18px;
+  .loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    span {
+      display: inline-block;
+      border-radius: 100%;
+      margin-left: 5px;
+      opacity: 1;
+    }
+    .first {
+      background-color: #ff75cf;
+    }
+    .second {
+      background-color: #e33aa9;
+    }
+    .third {
+      background-color: #b12d84;
+    }
+    span:nth-child(1) {
+      width: 16px;
+      height: 16px;
+      animation: opacitychange 1s ease-in-out infinite;
+    }
+    span:nth-child(2) {
+      width: 18px;
+      height: 18px;
 
-    animation: opacitychange 1s ease-in-out 0.33s infinite;
-  }
-  span:nth-child(3) {
-    width: 20px;
-    height: 20px;
+      animation: opacitychange 1s ease-in-out 0.33s infinite;
+    }
+    span:nth-child(3) {
+      width: 20px;
+      height: 20px;
 
-    animation: opacitychange 1s ease-in-out 0.66s infinite;
-  }
-  @keyframes opacitychange {
-    0%,
-    100% {
-      opacity: 0;
+      animation: opacitychange 1s ease-in-out 0.66s infinite;
     }
-    60% {
-      opacity: 1;
+    @keyframes opacitychange {
+      0%,
+      100% {
+        opacity: 0;
+      }
+      60% {
+        opacity: 1;
+      }
     }
   }
 `;

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

@@ -6,7 +6,7 @@ import low from "../../../assets/images/flags/lowPriority.svg";
 
 export const PriorityFlag = ({ priority }) => {
   const PriorityFlags = {
-    ["none"]: without,
+    ["no priority"]: without,
     ["low"]: low,
     ["medium"]: medium,
     ["high"]: high,

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

@@ -4,7 +4,7 @@ export const Container = styled.div`
   width: fit-content;
 
   img {
-    object-fit: contain;
+    object-fit: cover;
   }
 
   &.carousel-image {

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

@@ -1,8 +1,8 @@
 import { Container } from "./styles";
 
-export const ProgressBar = ({ percent, progressBarType }) => {
+export const ProgressBar = ({ percent, backgroundColor }) => {
   return (
-    <Container className={`status-${progressBarType}`}>
+    <Container backgroundColor={backgroundColor}>
       <p>{percent}%</p>
     </Container>
   );

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  background-color: ${GlobalColors.s3};
+  background-color: ${(props) => GlobalColors[props.backgroundColor]};
   width: fit-content;
   height: 27px;
   padding: 4px;
@@ -11,59 +11,8 @@ export const Container = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: ${(backgroundColor) =>
-    backgroundColor === "s2" || backgroundColor === "s1"
+  color: ${(props) =>
+    props.backgroundColor === "s2" || props.backgroundColor === "s1"
       ? GlobalColors.s4
       : GlobalColors.white};
-
-  &.status-As,
-  &.status-P {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-Pr,
-  &.status-Rr {
-    background-color: ${GlobalColors.reception};
-  }
-
-  &.status-AA,
-  &.status-AP,
-  &.status-AC,
-  &.status-AF {
-    background-color: ${GlobalColors.finished};
-  }
-
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
-  &.status-Dat,
-  &.status-Dsc,
-  &.status-Imgs {
-    background-color: ${GlobalColors.s4};
-  }
-
-  &.status-Ex {
-    background-color: ${GlobalColors.exported};
-  }
-
-  &.status-DDI {
-    background-color: ${GlobalColors.original_purpura};
-  }
-
-  &.status-GLD {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-TAB {
-    background-color: ${GlobalColors.deep_gray};
-  }
-
-  &.status-Pt {
-    background-color: ${GlobalColors.s2};
-    color: ${GlobalColors.s4};
-  }
 `;

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

@@ -8,16 +8,12 @@ export const ScreenHeader = ({
   color,
   headerType,
   Paragraph,
+
 }) => {
   return (
-    <Container
-      fontFamily={fontFamily}
-      color={color}
-      className={headerType}
-      key={`title-${text}`}
-    >
+    <Container fontFamily={fontFamily} color={color} className={headerType} key={`title-${text}`}>
       {text} {boldText && <span> {boldText}</span>}
-      {Paragraph && <p>{Paragraph}</p>}
+      {<p>{Paragraph}</p>}
     </Container>
   );
 };

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

@@ -52,11 +52,6 @@ export const Container = styled.h2`
     font-weight: 400;
     font-size: 11px;
     line-height: 18px;
-
-    &:last-child {
-      min-width: 50px;
-      text-align: center;
-    }
   }
 
   &.gray-table-row {
@@ -68,14 +63,12 @@ export const Container = styled.h2`
     background-color: ${GlobalColors.s2};
     padding: 1px 3px;
     border-radius: 3px;
-    min-width: 50px;
-    text-align: center;
   }
-  &.header-and-paragraph {
+  &.header-and-paragraph{
     font-family: ${FontFamily.Raleway};
     font-size: 36px;
     color: ${GlobalColors.s5};
-    p {
+    p{
       font-family: ${FontFamily.AvenirNext};
       font-size: 14px;
       color: ${GlobalColors.s4};

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

@@ -1,37 +1,9 @@
 import { Container } from "./styles";
 
 export const StatusTag = ({ statusType, ovalForm }) => {
-  const getShortStatus = (status) => {
-    switch (status) {
-      case "COMPLETED":
-        return "C";
-      case "RECEPTION":
-        return "Pr";
-      case "NULL":
-        return "-";
-      case "RECEIVED":
-        return "Rc";
-      case "IN_PROGRESS":
-        return "P";
-      case "ASSIGNED":
-        return "As";
-      case "APPROVED":
-        return "Ap";
-      case "VALIDATING":
-        return "V";
-      case "PAID_OUT":
-        return "Po";
-      default:
-        return status;
-    }
-  };
   return (
-    <Container
-      className={`status-${getShortStatus(statusType)} ${
-        ovalForm && "oval-form"
-      }`}
-    >
-      <p>{getShortStatus(statusType)}</p>
+    <Container className={`status-${statusType} ${ovalForm && "oval-form"}`}>
+      <p>{statusType}</p>
     </Container>
   );
 };

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

@@ -2,8 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  width: fit-content;
-  padding: 0 10px;
+  width: 30px;
   height: 20px;
   background-color: ${GlobalColors.s3};
   border-radius: 3px;
@@ -17,9 +16,7 @@ export const Container = styled.div`
   }
 
   &.status-As,
-  &.status-P,
-  &.status-IN_PROGRESS,
-  &.status-QF {
+  &.status-P {
     background-color: ${GlobalColors.in_progress};
   }
 
@@ -29,19 +26,10 @@ export const Container = styled.div`
   }
 
   &.status-AA,
-  &.status-AP,
-  &.status-AC,
-  &.status-AF {
+  &.status-AP {
     background-color: ${GlobalColors.finished};
   }
 
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
   &.status-Dat,
   &.status-Dsc,
   &.status-Imgs {

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

@@ -7,8 +7,8 @@ export const ValidationPanel = ({
   id,
   setOptionClicked,
   setShowValidationPanel,
-  sendToFacilitator,
 }) => {
+
   const optionSelected = (option) => {
     setOptionClicked(`${option}-button`);
     setShowValidationPanel(false);
@@ -18,7 +18,7 @@ export const ValidationPanel = ({
     <Container id={id}>
       <button
         onClick={() => {
-          sendToFacilitator("A");
+          optionSelected("accept");
         }}
         className="validation-option"
       >
@@ -27,7 +27,7 @@ export const ValidationPanel = ({
       </button>
       <button
         onClick={() => {
-          sendToFacilitator("R");
+          optionSelected("reject");
         }}
         className="validation-option"
       >