contentoh-components-library 21.4.72 → 21.4.74

package/src/components/organisms/Chatv2/Footer/styles.js

@@ -1,290 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../../global-files/variables";
-
-export const Container = styled.div`
-  width: 100%;
-  //height: 100%; // modo dev
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  align-items: flex-start;
-  background: white;
-  padding: 15px 14px 14px 14px;
-  //border: 1px solid red;
-
-  .container-chatDisabled {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    background-color: #f7f7f7;
-    border-radius: 17px;
-    padding: 10px 15px;
-
-    .label-chatDisabled {
-      flex-grow: 2;
-      font-family: ${FontFamily.RobotoRegular}, sans-serif;
-      font-size: 12px;
-      text-align: center;
-      color: #a2a2a2;
-    }
-  }
-
-  .tooltipErrorUpdate {
-    > div {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 5px;
-
-      .label-title {
-        font-family: ${FontFamily.RobotoMedium}, sans-serif;
-        font-size: 13px;
-        text-align: center;
-        color: #262626;
-      }
-
-      .label-detail {
-        font-family: ${FontFamily.RobotoRegular}, sans-serif;
-        font-size: 11px;
-        text-align: center;
-        color: #262626;
-      }
-    }
-  }
-
-  .container-ErrorUpdate {
-    width: 20px;
-    height: 20px;
-    display: grid;
-    place-items: center;
-    overflow: hidden;
-    padding: 0px;
-  }
-
-  @media (max-width: 600px) { 
-    width: 90%;
-  }
-`;
-
-export const ContainerMain = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-end;
-  gap: 7px;
-  flex-wrap: nowrap;
-  background-color: #f7f7f7;
-  border-radius: 17px;
-  padding: 10px 7px 10px 15px;
-
-  .input-itemMessage {
-    flex-grow: 2;
-    min-width: 80px;
-    padding: 0px;
-  }
-
-  .btn-chooserFiles,
-  .btn-sendMessage {
-    width: 20px;
-    height: 20px;
-    display: grid;
-    place-items: center;
-    overflow: hidden;
-    padding: 0px;
-  }
-
-  .btn-chooserFiles {
-    .button {
-      .icon:hover {
-        color: #a2a2a2 !important;
-      }
-    }
-  }
-`;
-
-export const ContainerSecondary = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 5px;
-  flex-wrap: nowrap;
-  background-color: white;
-  border-radius: 0px;
-  padding: 0px;
-
-  // container del preview files
-  + .tooltip-previewFiles {
-    width: 100%;
-    padding: 15px 14px 0px 14px;
-    background-color: transparent;
-    z-index: 9;
-    /*
-    &[data-popper-placement*="bottom"] > .MuiTooltip-tooltip {
-      margin-top: 5px;
-    }
-    &[data-popper-placement*="top"] > .MuiTooltip-tooltip {
-      margin-bottom: 5px;
-    }
-    */
-
-    > .MuiTooltip-tooltip {
-      --background: #f7f7f7;
-      width: 100%;
-      background-color: var(--background);
-      padding: 5px;
-      border-radius: 15px;
-      font-family: ${FontFamily.RobotoMedium}, sans-serif;
-      font-size: 12px;
-      text-align: left;
-      color: #262626;
-      max-width: unset;
-      margin: 0px !important;
-
-      .MuiTooltip-arrow {
-        color: var(--background);
-      }
-
-      // container del carrusel de files
-      .container-carrouselFiles {
-        width: 100%;
-        //border: 1px solid blue;
-
-        // carrusel de files
-        .carrousel-files {
-          --sizePagination: 0px;
-          width: 100%;
-          padding-top: var(--sizePagination);
-          border-radius: inherit;
-
-          .swiper-pagination-progressbar {
-            height: var(--sizePagination);
-            border-radius: inherit;
-
-            span {
-              background-color: #e33aa9;
-            }
-          }
-
-          .item-carrousel {
-            width: 154px;
-            height: 154px;
-            background-color: white;
-            display: grid;
-            place-items: center;
-            border-radius: 10px;
-          }
-        }
-
-        // tooltip fileName
-        + .tooltip-previewFileName {
-          background-color: transparent;
-          //transform: none !important;
-          //inset: 0px auto auto auto !important;
-
-          > .MuiTooltip-tooltip {
-            --background: white;
-            background-color: var(--background);
-            padding: 5px;
-            border-radius: 15px;
-            font-family: ${FontFamily.RobotoMedium}, sans-serif;
-            font-size: 12px;
-            text-align: left;
-            color: #262626;
-            max-width: 154px;
-          }
-
-          &[data-popper-placement*="bottom"] .MuiTooltip-tooltip {
-            margin-top: 15px;
-          }
-          &[data-popper-placement*="top"] .MuiTooltip-tooltip {
-            margin-bottom: 15px;
-          }
-        }
-      }
-    }
-  }
-
-  .btn-chooserFiles {
-    width: 34px;
-    height: 34px;
-    display: grid;
-    place-items: center;
-    .button {
-      background-color: #f7f7f7 !important;
-      border: none !important;
-      &:hover {
-        background-color: #e7e7e7 !important;
-      }
-    }
-  }
-
-  .slide-btnSendFiles {
-    flex-grow: 2;
-
-    .btn-sendFiles {
-      width: 100%;
-      .button {
-        padding: 10px 15px;
-      }
-    }
-  }
-`;
-
-export const ContainerItemCarrousel = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: grid;
-  place-items: center;
-  border-radius: inherit;
-  background-color: inherit;
-
-  .container-img {
-    border-radius: inherit;
-    width: 100%;
-    height: 100%;
-    background-color: inherit;
-    transition: all 0.25s;
-    z-index: 10;
-  }
-
-  .container-delete {
-    position: absolute;
-    border-radius: inherit;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    display: grid;
-    place-items: center;
-    background-color: inherit;
-    z-index: 11;
-    opacity: 0;
-    transition: all 0.3s;
-    background-color: rgba(0, 0, 0, 0.35);
-    overflow: hidden;
-
-    .btn-delete .button {
-      border: none;
-      padding: 4px 8px;
-      color: #262626 !important;
-      .icon {
-        font-size: 8px;
-      }
-    }
-  }
-
-  &:hover {
-    .container-delete {
-      opacity: 1;
-    }
-  }
-`;

package/src/components/organisms/Chatv2/Header/Header.stories.js

@@ -1,66 +0,0 @@
-import { Header } from "./index";
-
-export default {
-  title: "Components/organisms/Chat/Header",
-  component: Header,
-};
-
-const Template = (args) => <Header {...args} />;
-
-// companies de prueba multiple
-const multipleCompanies = {
-  100: { name: "Fábrica", statusChat: "enabled" },
-  200: { name: "Proveedor", statusChat: "current" },
-  300: { name: "Cadena", statusChat: "disabled" },
-};
-
-const twoCompanies = {
-  100: { name: "Fábrica", statusChat: "enabled" },
-  200: { name: "Proveedor", statusChat: "current" },
-};
-
-export const headerChatMultiple = Template.bind({});
-headerChatMultiple.args = {
-  showChatsList: false,
-  multipleCompanies: true,
-  chatCompany: {
-    id: 101,
-    name: "The Home Depot",
-    src: "",
-  },
-  onClickBtnChooseChat: () => {
-    console.log("showAllChats:", true);
-  },
-  onClickBtnClose: () => {
-    console.log("click en boton X");
-  },
-};
-
-export const headerChatSimple = Template.bind({});
-headerChatSimple.args = {
-  showChatsList: false,
-  multipleCompanies: false,
-  chatCompany: {
-    id: 101,
-    name: "The Home Depot",
-    src: "",
-  },
-  onClickBtnChooseChat: () => {
-    console.log("showAllChats:", true);
-  },
-  onClickBtnClose: () => {
-    console.log("click en boton X");
-  },
-};
-
-export const headerChatEmpty = Template.bind({});
-headerChatEmpty.args = {
-  showChatsList: false,
-  multipleCompanies: true,
-  onClickBtnChooseChat: () => {
-    console.log("showAllChats:", true);
-  },
-  onClickBtnClose: () => {
-    console.log("click en boton X");
-  },
-};

package/src/components/organisms/Chatv2/Header/index.js

@@ -1,93 +0,0 @@
-import { Container } from "./styles";
-import { useEffect, useState } from "react";
-import { CustomIcon } from "../../../atoms/CustomIcon";
-import { ButtonV2 } from "../../../atoms/ButtonV2";
-import { Image } from "../../../atoms/Image";
-import {
-  faComments as IconChat,
-  faClose as IconX,
-  faImage as IconImage,
-} from "@fortawesome/free-solid-svg-icons";
-
-export const Header = (props) => {
-  const {
-    showBtnClose, // boolean
-    showChatsList, // boolean
-    chatCompany /* {id , name , src} */,
-    multipleCompanies, // boolean
-    onClickBtnChooseChat, // () => {}
-    onClickBtnClose, // () => {}
-  } = props;
-
-  return (
-    <>
-      <Container>
-        {showChatsList ? (
-          <>
-            <CustomIcon
-              className="icon-chooseChat"
-              type={"pink"}
-              borderType={"circle"}
-              size={10}
-              icon={IconChat}
-            />
-            <label className="title"> Todos los chats </label>
-          </>
-        ) : (
-          chatCompany &&
-          chatCompany.id &&
-          chatCompany.name && (
-            <>
-              {/* logo de la compañia */}
-              <Image
-                className="logoCompany"
-                width={"24px"}
-                sizeLoading={20}
-                colorLoading={undefined}
-                src={chatCompany.src}
-                componentDefault={
-                  <CustomIcon
-                    className="icon-logoCompany"
-                    type={"white"}
-                    borderType={"circle"}
-                    size={12}
-                    icon={IconImage}
-                  />
-                }
-              />
-
-              {/* nombre de la compañia */}
-              <label className="title"> {chatCompany.name} </label>
-
-              {/* boton de chat */}
-              {multipleCompanies && (
-                <ButtonV2
-                  className="btn-chooseChat"
-                  type={"pink"}
-                  size={10}
-                  borderType={"circle"}
-                  icon={IconChat}
-                  onClick={(event) =>
-                    onClickBtnChooseChat && onClickBtnChooseChat()
-                  }
-                />
-              )}
-            </>
-          )
-        )}
-
-        {/* boton X */}
-        {showBtnClose && (
-          <ButtonV2
-            className={"btn-X"}
-            type={"white"}
-            size={11}
-            borderType={"circle"}
-            icon={IconX}
-            onClick={(event) => onClickBtnClose && onClickBtnClose()}
-          />
-        )}
-      </Container>
-    </>
-  );
-};

package/src/components/organisms/Chatv2/Header/styles.js

@@ -1,49 +0,0 @@
-import styled from "styled-components";
-import { GlobalColors, FontFamily } from "../../../../global-files/variables";
-
-export const Container = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-  background: #f9f9f9;
-  padding: 12px 15px;
-  //overflow: auto;
-  //border: 1px solid red;
-
-  .logoCompany {
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    overflow: hidden;
-
-    .icon-logoCompany {
-      padding: 5px;
-    }
-  }
-
-  .title {
-    flex-grow: 2;
-    min-width: min-content;
-    text-align: left;
-    font-family: ${FontFamily.RobotoMedium}, sans-serif;
-    font-size: 15px;
-    color: #262626;
-  }
-
-  .btn-chooseChat,
-  .icon-chooseChat {
-    width: 24px;
-    height: 24px;
-    padding: 0px;
-  }
-
-  .btn-X {
-    width: 24px;
-    height: 24px;
-    padding: 0px;
-  }
-`;