contentoh-components-library 21.1.63 → 21.1.66

package/dist/global-files/customHooks.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.closeModals = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var closeModals = function closeModals(id) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var closeModal = function closeModal(e) {
+    if ((!e.target.closest("#".concat(id)) || e.target.closest("#close-button") || e.target.closest("#add-version")) && showModal) {
+      document.removeEventListener("click", closeModal);
+      setShowModal(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    if (showModal) {
+      document.addEventListener("click", closeModal);
+    }
+  }, [showModal]);
+  return [showModal, setShowModal];
+};
+
+exports.closeModals = closeModals;

package/dist/global-files/data.js

@@ -280,18 +280,18 @@ var getNewStatus = function getNewStatus(statusArray) {
   statusArray.forEach(function (element) {
     return lookupString += element + "/";
   });
-  if (lookupString.includes("RCA")) return "RCA";
-  if (lookupString.includes("RC")) return "RC";
+  if (lookupString.includes("RF")) return "RF";
   if (lookupString.includes("RA")) return "RA";
   if (lookupString.includes("RP")) return "RP";
-  if (lookupString.includes("ACA")) return "ACA";
-  if (lookupString.includes("PA")) return "PA";
-  if (lookupString.includes("CA")) return "CA";
-  if (lookupString.includes("IE")) return "IE";
-  if (lookupString.includes("AC")) return "AC";
+  if (lookupString.includes("RC")) return "RC";
+  if (lookupString.includes("UNASSIGNED")) return "IN_PROGRESS";
+  if (lookupString.includes("IN_PROGRESS")) return "IN_PROGRESS";
+  if (lookupString.includes("QF")) return "QF";
+  if (lookupString.includes("AF")) return "AF";
   if (lookupString.includes("AA")) return "AA";
   if (lookupString.includes("AP")) return "AP";
-  if (lookupString.includes("R")) return "R";
+  if (lookupString.includes("AC")) return "AC";
+  if (lookupString.includes("RECEIVED")) return "RECEIVED";
   if (lookupString.includes("NA")) return "NA";
   return new Error("Status not found");
 };

package/dist/global-files/global-styles.css

@@ -12,6 +12,7 @@ body.sb-main-padded.sb-show-main {
   padding: 0;
   height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .sb-main-padded.sb-show-main #root {

package/package.json

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

package/src/assets/images/versionSelector/acceptIcon.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 fill-rule="evenodd" clip-rule="evenodd" d="M0 10C0 4.48578 4.48578 0 10 0C15.5142 0 20 4.48578 20 10C20 15.5142 15.5142 20 10 20C4.48578 20 0 15.5142 0 10ZM9.65054 13.2973L15.0673 7.88074C15.393 7.55481 15.393 7.02823 15.0673 6.70245C14.7413 6.37653 14.2148 6.37653 13.889 6.70245L9.0614 11.5299L6.94226 9.41074C6.61633 9.08481 6.08975 9.08481 5.76398 9.41074C5.43805 9.73651 5.43805 10.2632 5.76398 10.589L8.47226 13.2973C8.63477 13.4598 8.84808 13.5416 9.0614 13.5416C9.27472 13.5416 9.48804 13.4598 9.65054 13.2973Z" fill="#71DE56"/>
+</svg>

package/src/assets/images/versionSelector/addVersion.svg

@@ -0,0 +1,5 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="6.72461" y1="10" x2="14.7246" y2="10" stroke="#E33AA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="10.7246" y1="6" x2="10.7246" y2="14" stroke="#E33AA9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="1.22461" y="0.5" width="19.2749" height="19" rx="9.5" stroke="#D4D1D7"/>
+</svg>

package/src/assets/images/versionSelector/closeVersionSelector.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="0.707107" y1="1" x2="16" y2="16.2929" stroke="#E33AA9" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="16" y1="1.70711" x2="1.70711" y2="16" stroke="#E33AA9" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/images/versionSelector/createVersion.svg

@@ -0,0 +1,3 @@
+<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1666 18.2497H6.08325V60.833C6.08325 64.1788 8.82075 66.9163 12.1666 66.9163H54.7499V60.833H12.1666V18.2497ZM60.8332 6.08301H24.3333C20.9874 6.08301 18.2499 8.82051 18.2499 12.1663V48.6663C18.2499 52.0122 20.9874 54.7497 24.3333 54.7497H60.8332C64.1791 54.7497 66.9166 52.0122 66.9166 48.6663V12.1663C66.9166 8.82051 64.1791 6.08301 60.8332 6.08301ZM57.7916 33.458H45.6249V45.6247H39.5416V33.458H27.3749V27.3747H39.5416V15.208H45.6249V27.3747H57.7916V33.458Z" fill="#817393"/>
+</svg>

package/src/assets/images/versionSelector/nullIcon.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="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM15 11H5V9H15V11Z" fill="#817393"/>
+</svg>

package/src/assets/images/versionSelector/versionSelected.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 0C6 0 1.73 3.11 0 7.5C1.73 11.89 6 15 11 15C16 15 20.27 11.89 22 7.5C20.27 3.11 16 0 11 0ZM11 12.5C8.24 12.5 6 10.26 6 7.5C6 4.74 8.24 2.5 11 2.5C13.76 2.5 16 4.74 16 7.5C16 10.26 13.76 12.5 11 12.5ZM11 4.5C9.34 4.5 8 5.84 8 7.5C8 9.16 9.34 10.5 11 10.5C12.66 10.5 14 9.16 14 7.5C14 5.84 12.66 4.5 11 4.5Z" fill="#D4D1D7"/>
+</svg>

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

@@ -2,6 +2,7 @@ import { Container } from "./styles";
 import React from "react";
 
 export const Button = ({
+  id,
   buttonType,
   label,
   image,
@@ -11,6 +12,7 @@ export const Button = ({
 }) => {
   return (
     <Container
+      id={id}
       className={buttonType}
       buttonFont={buttonFont}
       onClick={onClick}

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

@@ -57,6 +57,7 @@ export const Container = styled.button`
     background-color: transparent;
     background-repeat: no-repeat;
     background-position: center;
+
     &.accept-button {
       background-image: url(${acceptIcon});
     }
@@ -106,6 +107,23 @@ export const Container = styled.button`
         border: 1px solid ${GlobalColors.magenta_s2};
       }
     }
+
+    &.disabled {
+      opacity: 0.5;
+    }
+
+    img {
+      width: 100%;
+    }
+
+    &.version-button {
+      color: ${GlobalColors.s3};
+      border: 1px solid ${GlobalColors.s3};
+      border-radius: 15px;
+      font-size: 12px;
+      line-height: 25px;
+      text-align: center;
+    }
   }
 
   &.general-arrow-button {

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

@@ -22,7 +22,7 @@ export const InputFormatter = ({
   const maxLength = maxChar ? maxChar : 999;
 
   const getValue = (value) => {
-    let temp = value.replace(/\n/gm, "<br>");
+    let temp = value.replace(/\n/gm, "<br>").replace(/&/gm, "&amp;");
     return temp;
   };
 
@@ -34,7 +34,10 @@ export const InputFormatter = ({
   };
 
   const valueFormater = (value) => {
-    return value.replace(/<\/p><p>/gm, "\n").replace(/<\/?br>|<\/?p>/gm, "");
+    return value
+      .replace(/<\/p><p>/gm, "\n")
+      .replace(/<\/?br>|<\/?p>/gm, "")
+      .replace(/&amp;/gm, "&");
   };
 
   const onChange = (valueInput, delta, user, h) => {
@@ -109,7 +112,7 @@ export const InputFormatter = ({
       <ReactQuill
         id={inputId + ""}
         ref={(el) => setQuill(el)}
-        value={getValue(inputValue)}
+        defaultValue={getValue(inputValue)}
         //disabled={!props.enableInputs}
         modules={{ toolbar: ["bold"] }}
         onKeyPress={(e) => {

package/src/components/atoms/ProductPercentCard/Percent.stories.js

@@ -3,18 +3,18 @@ import { ProductPercentCard } from "./index";
 const status = [
   "-",
   "Pr",
-  "R",
-  "AS",
-  "CA",
-  "IE",
-  "AC",
+  "Rc",
+  "As",
+  "P",
+  "QF",
+  "AF",
   "AA",
   "AP",
-  "ACA",
+  "AC",
   "RA",
-  "RC",
+  "RF",
   "RP",
-  "RCA",
+  "RC",
   "Ex",
 ];
 
@@ -29,12 +29,13 @@ export default {
   },
 };
 
-const Template = (args) => <ProductPercentCard {...args} />;
+const Template = (args) => <ProductPercentCard {...args}/>;
 
-export const ProductPercentCardDefault = Template.bind({});
+export const ProductPercentCardDefault = Template.bind ({});
 
 ProductPercentCardDefault.args = {
   statusType: "-",
   productsInStatus: 0,
   totalProcucts: 0,
-};
+
+};

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

@@ -8,8 +8,8 @@ export const Container = styled.div`
   height: 83px;
   padding: 10px;
 
-  &.status-PA,
-  &.status-RC {
+  &.status-Pr,
+  &.status-Rc {
     border: 1px solid ${GlobalColors.reception};
     .span {
       color: ${GlobalColors.reception};
@@ -22,19 +22,19 @@ export const Container = styled.div`
     }
   }
 
-  &.status-AS,
-  &.status-CA,
-  &.status-IE {
+  &.status-As,
+  &.status-P,
+  &.status-QF {
     border: 1px solid ${GlobalColors.in_progress};
     .span {
       color: ${GlobalColors.in_progress};
     }
   }
 
-  &.status-AC,
+  &.status-AF,
   &.status-AA,
   &.status-AP,
-  &.status-ACA {
+  &.status-AC {
     border: 1px solid ${GlobalColors.finished};
     .span {
       color: ${GlobalColors.finished};
@@ -42,9 +42,9 @@ export const Container = styled.div`
   }
 
   &.status-RA,
-  &.status-RC,
+  &.status-RF,
   &.status-RP,
-  &.status-RCA {
+  &.status-RC {
     border: 1px solid #d74ded;
     .span {
       color: #d74ded;

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

@@ -0,0 +1,69 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background-color: ${GlobalColors.s3};
+  width: fit-content;
+  height: 27px;
+  padding: 4px;
+  border-radius: 15px;
+  font-family: ${FontFamily.AvenirNext};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: ${(backgroundColor) =>
+    backgroundColor === "s2" || 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/Select/VersionSelect.js

@@ -0,0 +1,25 @@
+import { VrsnSelect } from "./style";
+
+export const VersionSelect = ({
+  id,
+  selectedVersions,
+  onChange,
+  label,
+  versions = [],
+}) => {
+  return (
+    <VrsnSelect>
+      <label htmlFor={id}>{label}</label>
+      <select
+        id={id}
+        name={id}
+        value={`Version ${selectedVersions[id]}`}
+        onChange={onChange}
+      >
+        {versions.map((item, index) => (
+          <option key={`${id}-${index}`}>Version {item.version}</option>
+        ))}
+      </select>
+    </VrsnSelect>
+  );
+};

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

@@ -8,6 +8,7 @@ export default function Select(props) {
         width={props.width}
         onChange={props.onChange}
         defaultValue={props.valueSelected ? props.valueSelected : ""}
+        className={props.className}
       >
         <option value="" disabled>
           {props.placeholder}
@@ -29,7 +30,6 @@ export default function Select(props) {
             </option>
           ))}
       </SelectCustom>
-      <BackgroundEnd />
     </Container>
   );
 }

package/src/components/atoms/Select/style.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
 export const Container = styled.div`
   position: relative;
@@ -73,4 +74,22 @@ export const SelectCustom = styled.select`
       color: gray;
     }
   }
+
+  &.version-selector {
+  }
+`;
+
+export const VrsnSelect = styled.div`
+  background-color: ${GlobalColors.deep_gray};
+
+  select {
+    border: 1px solid ${GlobalColors.s3} !important;
+    background-color: transparent;
+    color: ${GlobalColors.white};
+    width: 100%;
+    text-align: center;
+    padding: 5px;
+    border-radius: 15px;
+    text-decoration: none;
+  }
 `;

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

@@ -5,10 +5,14 @@ export const Container = styled.div`
   background: transparent;
   cursor: pointer;
   position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
   & + * {
     margin-left: 10px;
   }
   img {
+    margin: auto 0;
     &.small-image {
       width: 20px;
       height: 20px;
@@ -101,22 +105,22 @@ export const Slider = styled.div`
         }
       }
       span {
-      font-family: "Avenir Next";
-      font-style: normal;
-      font-weight: 500;
-      font-size: 15px;
-      line-height: 15px;
-      text-align: center;
-      letter-spacing: -0.015em;
-      color: #fafafa;
-      display: flex;
-      justify-content: center;
-      background-color: #281f33;
-      & + * {
-        margin-top: 10px;
+        font-family: "Avenir Next";
+        font-style: normal;
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 15px;
+        text-align: center;
+        letter-spacing: -0.015em;
+        color: #fafafa;
+        display: flex;
+        justify-content: center;
+        background-color: #281f33;
+        & + * {
+          margin-top: 10px;
+        }
       }
     }
-    }
     .end-div {
       div {
         height: 130px;

package/src/components/molecules/AssignedWork/AssignedWork.stories.js

@@ -5,18 +5,18 @@ import assignedImage2 from "../../../assets/images/componentAssigned/assignedIma
 const status = [
   "-",
   "Pr",
-  "R",
-  "AS",
-  "CA",
-  "IE",
-  "AC",
+  "Rc",
+  "As",
+  "P",
+  "QF",
+  "AF",
   "AA",
   "AP",
-  "ACA",
+  "AC",
   "RA",
-  "RC",
+  "RF",
   "RP",
-  "RCA",
+  "RC",
   "Ex",
 ];
 

package/src/components/molecules/AssignedWork/styles.js

@@ -9,8 +9,8 @@ export const Container = styled.div`
   padding-bottom: 5px;
   position: relative;
 
-  &.status-PA,
-  &.status-R {
+  &.status-Pr,
+  &.status-Rc {
     border: 1px solid ${GlobalColors.reception};
     .header-and-paragraph {
       color: ${GlobalColors.reception};
@@ -23,19 +23,19 @@ export const Container = styled.div`
     }
   }
 
-  &.status-AA,
-  &.status-CA,
-  &.status-IE {
+  &.status-As,
+  &.status-P,
+  &.status-QF {
     border: 1px solid ${GlobalColors.in_progress};
     .header-and-paragraph {
       color: ${GlobalColors.in_progress};
     }
   }
 
-  &.status-AC,
+  &.status-AF,
   &.status-AA,
   &.status-AP,
-  &.status-ACA {
+  &.status-AC {
     border: 1px solid ${GlobalColors.finished};
     .header-and-paragraph {
       color: ${GlobalColors.finished};
@@ -43,9 +43,9 @@ export const Container = styled.div`
   }
 
   &.status-RA,
-  &.status-RC,
+  &.status-RF,
   &.status-RP,
-  &.status-RCA {
+  &.status-RC {
     border: 1px solid #d74ded;
     .header-and-paragraph {
       color: #d74ded;
@@ -56,6 +56,7 @@ export const Container = styled.div`
     border: 1px solid ${GlobalColors.exported};
     .header-and-paragraph {
       color: ${GlobalColors.exported};
+      
     }
   }
 

package/src/components/molecules/StatusAsignationInfo/index.js

@@ -26,6 +26,8 @@ export const StatusAsignationInfo = ({
   onClickSave,
   showSaveButton,
   canAssign,
+  version,
+  setShowVersionSelector,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
   const [layout, setLayout] = useState(false);
@@ -71,7 +73,14 @@ export const StatusAsignationInfo = ({
         slidefront={slidefront}
         iconSize={"medium-image"}
         slidePosition={"bottom-slide"}
-      ></SliderToolTip>
+      />
+      <Button
+        buttonType={"general circular-button version-button"}
+        onClick={() => {
+          setShowVersionSelector(true);
+        }}
+        label={`V${version}`}
+      />
       {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
       {showSaveButton && (
         <Button

package/src/components/molecules/VersionItem/VersionItem.stories.js

@@ -0,0 +1,14 @@
+import { VersionItem } from "./index";
+
+export default {
+  title: "Components/molecules/VersionItem",
+  component: VersionItem,
+};
+
+const Template = (args) => <VersionItem {...args} />;
+
+export const VersionItemDefault = Template.bind({});
+
+VersionItemDefault.args = {
+  
+};

package/src/components/molecules/VersionItem/index.js

@@ -0,0 +1,47 @@
+import { Avatar } from "../../atoms/Avatar/index";
+import { Container } from "./styles";
+import nullIcon from "../../../assets/images/versionSelector/nullIcon.svg";
+import acceptIcon from "../../../assets/images/versionSelector/acceptIcon.svg";
+import versionSelected from "../../../assets/images/versionSelector/versionSelected.svg";
+import { Button } from "../../atoms/GeneralButton";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const VersionItem = ({
+  version = "",
+  articleStatus,
+  currentVersion,
+  productOwner = "owner test",
+  setVersion,
+}) => {
+  return (
+    <Container>
+      <div className="header">
+        <Button
+          buttonType={"circular-button" + (currentVersion ? " disabled" : "")}
+          image={versionSelected}
+          onClick={() => setVersion && setVersion(version)}
+        />
+        <img
+          src={articleStatus ? acceptIcon : nullIcon}
+          alt={articleStatus ? "Validated version" : "Unvalidated version"}
+        />
+      </div>
+      <div className="version-info">
+        <ScreenHeader
+          text={"Version " + version}
+          headerType={"input-name-header"}
+          color={GlobalColors.magenta_s2}
+        />
+        <p>
+          {currentVersion
+            ? "Version actual"
+            : articleStatus
+            ? "Edición Content-oh!"
+            : "Version de " + productOwner}
+        </p>
+        <p>{articleStatus ? "Content-oh! Digital" : productOwner}</p>
+      </div>
+    </Container>
+  );
+};