contentoh-components-library 21.4.135 → 21.4.136

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.135",
+  "version": "21.4.136",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -27,9 +27,12 @@
     "babel-preset-react-app": "^10.0.1",
     "caniuse-lite": "^1.0.30001472",
     "chart.js": "^3.7.1",
+    "contentoh-components-library": "^21.4.75",
     "draft-js": "^0.11.7",
     "file-saver": "^2.0.5",
+    "infinite-react-carousel": "^1.2.11",
     "js-base64": "^3.7.2",
+    "mapbox-gl": "^1.13.3",
     "moment": "^2.29.4",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

package/src/assets/images/Icons/save-white-gray.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="34" height="34" rx="17" fill="#F0F0F0"/>
+<mask id="mask0_346_670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="14" height="14">
+<rect x="10" y="10" width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_346_670)">
+<path d="M24 13.0528V22.8333C24 23.1444 23.8833 23.4167 23.65 23.65C23.4167 23.8833 23.1444 24 22.8333 24H11.1667C10.8556 24 10.5833 23.8833 10.35 23.65C10.1167 23.4167 10 23.1444 10 22.8333V11.1667C10 10.8556 10.1167 10.5833 10.35 10.35C10.5833 10.1167 10.8556 10 11.1667 10H20.9472L24 13.0528ZM22.8333 13.5778L20.4222 11.1667H11.1667V22.8333H22.8333V13.5778ZM16.9954 21.5694C17.5559 21.5694 18.0338 21.3733 18.4292 20.981C18.8245 20.5886 19.0222 20.1123 19.0222 19.5518C19.0222 18.9913 18.8261 18.5134 18.4337 18.1181C18.0414 17.7227 17.565 17.525 17.0046 17.525C16.4441 17.525 15.9662 17.7212 15.5708 18.1135C15.1755 18.5058 14.9778 18.9822 14.9778 19.5427C14.9778 20.1031 15.1739 20.581 15.5663 20.9764C15.9586 21.3718 16.435 21.5694 16.9954 21.5694ZM12.1972 14.9778H19.1583V12.1972H12.1972V14.9778Z" fill="white"/>
+</g>
+</svg>

package/src/assets/images/Icons/save-white.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="34" height="34" rx="17" fill="#E33AA9"/>
+<mask id="mask0_346_670" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="14" height="14">
+<rect x="10" y="10" width="14" height="14" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_346_670)">
+<path d="M24 13.0528V22.8333C24 23.1444 23.8833 23.4167 23.65 23.65C23.4167 23.8833 23.1444 24 22.8333 24H11.1667C10.8556 24 10.5833 23.8833 10.35 23.65C10.1167 23.4167 10 23.1444 10 22.8333V11.1667C10 10.8556 10.1167 10.5833 10.35 10.35C10.5833 10.1167 10.8556 10 11.1667 10H20.9472L24 13.0528ZM22.8333 13.5778L20.4222 11.1667H11.1667V22.8333H22.8333V13.5778ZM16.9954 21.5694C17.5559 21.5694 18.0338 21.3733 18.4292 20.981C18.8245 20.5886 19.0222 20.1123 19.0222 19.5518C19.0222 18.9913 18.8261 18.5134 18.4337 18.1181C18.0414 17.7227 17.565 17.525 17.0046 17.525C16.4441 17.525 15.9662 17.7212 15.5708 18.1135C15.1755 18.5058 14.9778 18.9822 14.9778 19.5427C14.9778 20.1031 15.1739 20.581 15.5663 20.9764C15.9586 21.3718 16.435 21.5694 16.9954 21.5694ZM12.1972 14.9778H19.1583V12.1972H12.1972V14.9778Z" fill="white"/>
+</g>
+</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/CustomChip/CustomChip.stories.js

@@ -0,0 +1,16 @@
+import { CustomChip } from "./index";
+
+export default {
+  title: "Components/atoms/CustomChip",
+  component: CustomChip,
+  argTypes: {
+  }
+};
+
+const Template = (args) => <CustomChip {...args} />;
+
+export const CustomChipDefault = Template.bind({});
+
+CustomChipDefault.args = {
+  name:"legal"
+}

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

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from "react";
+import { Container } from "./styles";
+import MuiChip from "@mui/material/Chip";
+import DeleteIcon from "@mui/icons-material/DeleteForeverOutlined";
+
+export const CustomChip = ({ key, label, onDelete, showDelete }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <MuiChip
+      key={key}
+      label={label}
+      onDelete={onDelete}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      deleteIcon={showDelete ? <DeleteIcon sx={{color:"#B64545!important",fontSize:"14px!important",cursor:"pointer",}}/> : <DeleteIcon sx={{display:"none"}}/> }
+      style={{
+        height:"30px",
+        borderRadius: "5px",
+        background: "transparent",
+        border: `1px solid ${showDelete && isHovered ? "#B64545" : "#F0F0F0"}`,
+        color: `${showDelete && isHovered ? "#B64545" : "#707070"}`,
+      }}
+    />
+  );
+};

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

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+
+`;

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

@@ -107,6 +107,7 @@ export const GeneralInput = ({
           id={`dropdown${inputId}`}
           onChange={(e) => onHandleChange(e)}
           defaultValue={textValue.value}
+          disabled={disabled}
         >
           <option value="">{description}</option>
           {JSON.parse(optionList || "[]").map((element, index) => (
@@ -120,6 +121,7 @@ export const GeneralInput = ({
           id={inputId}
           onChange={(e) => onHandleChange(e)}
           defaultChecked={textValue.value === "true" ? true : false}
+          disabled={disabled}
         />
       ) : inputType !== "textarea" ? (
         <input
@@ -148,6 +150,7 @@ export const GeneralInput = ({
           setUpdatedDescriptions={setUpdatedDescriptions}
           maxChar={maxChar}
           isRequired={isRequired}
+          disabled={disabled}
         />
       )}
       <p>{description}</p>

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

@@ -25,7 +25,7 @@ export const Container = styled.div`
     line-height: 15px;
     padding: 10px;
     outline: none;
-    border-radius: 2px;
+    border-radius: 5px;
     resize: none;
 
     &:focus {
@@ -65,4 +65,22 @@ export const Container = styled.div`
       background-color: #ededfc;
     }
   }
+
+  .btnReviewState {
+    display: "flex";
+    flex-direction: "column";
+    border: 1px solid lightgray;
+    border-radius: 3px;
+    z-index: 1000;
+    /* position: absolute; */
+  }
+
+  .btnReviewState button {
+    border: none;
+    background: white;
+    border-radius: 3px;
+  }
+  .btnReviewState button:hover {
+    background: lightgray;
+  }
 `;

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",
+};