contentoh-components-library 21.3.16 → 21.3.18

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

@@ -0,0 +1,286 @@
+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;
+  }
+`;
+
+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/Chat/Header/Header.stories.js

@@ -0,0 +1,66 @@
+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/Chat/Header/index.js

@@ -0,0 +1,94 @@
+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;
+
+  //console.log(chatCompany);
+  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/Chat/Header/styles.js

@@ -0,0 +1,49 @@
+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;
+  }
+`;