norma-library 0.5.806 → 0.5.807

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { Typography } from '@mui/material';
 import * as S from './ChatMessageBalloon.style';
 export var ChatMessageBalloon = function (_a) {
-    var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children, className = _a.className, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onRowMouseEnter = _a.onRowMouseEnter, onRowMouseLeave = _a.onRowMouseLeave, highlight = _a.highlight, rest = __rest(_a, ["label", "description", "date", "direction", "children", "className", "onMouseEnter", "onMouseLeave", "onRowMouseEnter", "onRowMouseLeave", "highlight"]);
+    var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children, className = _a.className, bottomChildren = _a.bottomChildren, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onRowMouseEnter = _a.onRowMouseEnter, onRowMouseLeave = _a.onRowMouseLeave, highlight = _a.highlight, rest = __rest(_a, ["label", "description", "date", "direction", "children", "className", "bottomChildren", "onMouseEnter", "onMouseLeave", "onRowMouseEnter", "onRowMouseLeave", "highlight"]);
     var ballonClassNames = useMemo(function () {
         var classNames = [];
         if (!!onMouseEnter)
@@ -23,6 +23,7 @@ export var ChatMessageBalloon = function (_a) {
                 description),
             React.createElement(S.ChatMessageChildrenStyle, { direction: direction }, children)),
         React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction },
-            React.createElement(S.ChatMessageDateStyle, { fontSize: "0.7rem" }, date))));
+            React.createElement(S.ChatMessageDateStyle, { fontSize: "0.7rem" }, date),
+            bottomChildren)));
 };
 //# sourceMappingURL=ChatMessageBalloon.js.map

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageBalloon.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAE/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAanE;IAZC,IAAA,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,eAAe,qBAAA,EACf,eAAe,qBAAA,EACf,SAAS,eAAA,EACN,IAAI,cAZ2D,yJAanE,CADQ;IAGT,IAAM,gBAAgB,GAAG,OAAO,CAAC;QAC/B,IAAM,UAAU,GAAG,EAAE,CAAA;QACrB,IAAG,CAAC,CAAC,YAAY;YAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACpD,IAAG,CAAC,CAAC,SAAS;YAAE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAC/C,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;IAE7B,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC,aAAC,SAAS,EAAE,SAAS,IAAM,IAAI;QAChE,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe;YAC9G,oBAAC,CAAC,CAAC,uBAAuB,IAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;gBAClI,oBAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,YAAY,EAAE,KAAK;qBACpB,IAEA,KAAK,CACK;gBACZ,WAAW,CACc;YAC5B,oBAAC,CAAC,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,IAC7C,QAAQ,CACkB,CACA;QAC/B,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAA0B,CAC9C,CACI,CACtC,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"ChatMessageBalloon.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAE/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAcnE;IAbC,IAAA,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,YAAY,kBAAA,EACZ,YAAY,kBAAA,EACZ,eAAe,qBAAA,EACf,eAAe,qBAAA,EACf,SAAS,eAAA,EACN,IAAI,cAb2D,2KAcnE,CADQ;IAGT,IAAM,gBAAgB,GAAG,OAAO,CAAC;QAC/B,IAAM,UAAU,GAAG,EAAE,CAAA;QACrB,IAAG,CAAC,CAAC,YAAY;YAAE,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACpD,IAAG,CAAC,CAAC,SAAS;YAAE,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAC/C,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAA;IAE7B,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC,aAAC,SAAS,EAAE,SAAS,IAAM,IAAI;QAChE,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe;YAC9G,oBAAC,CAAC,CAAC,uBAAuB,IAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB;gBAClI,oBAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,YAAY,EAAE,KAAK;qBACpB,IAEA,KAAK,CACK;gBACZ,WAAW,CACc;YAC5B,oBAAC,CAAC,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,IAC7C,QAAQ,CACkB,CACA;QAC/B,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAA0B;YAC1E,cAAc,CACc,CACI,CACtC,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/interfaces/ChatMessageBalloon.d.ts

@@ -11,5 +11,6 @@ export interface ChatMessageBalloonProps {
     highlight?: boolean;
     attachments?: string[];
     children?: ReactNode;
+    bottomChildren?: ReactNode;
     className?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.806",
+  "version": "0.5.807",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {

package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx

@@ -10,6 +10,7 @@ export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({
     direction,
     children,
     className,
+    bottomChildren,
     onMouseEnter,
     onMouseLeave,
     onRowMouseEnter,
@@ -47,6 +48,7 @@ export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({
       </S.ChatMessageBalloonRowStyle>
       <S.ChatMessageBalloonRowStyle direction={direction}>
         <S.ChatMessageDateStyle fontSize={"0.7rem"}>{date}</S.ChatMessageDateStyle>
+        {bottomChildren}
       </S.ChatMessageBalloonRowStyle>
     </S.ChatMessageBalloonContainerStyle>
   );

package/src/interfaces/ChatMessageBalloon.ts

@@ -12,5 +12,6 @@ export interface ChatMessageBalloonProps {
   highlight?: boolean;
   attachments?: string[];
   children?:ReactNode;
+  bottomChildren?:ReactNode;
   className?:string;
 }

package/src/stories/ChatMessageBalloon.stories.tsx

@@ -22,6 +22,7 @@ export const ChatMessageBalloonBasic = () => {
     <div style={{backgroundColor: "#F0F0F0", boxSizing: "border-box", padding: "20px"}}>
       <ChatMessageBalloon 
         onMouseEnter={ () => console.log('onMouseEnter') }
+        bottomChildren={<div>Bottom Children</div>}
         label="Agente Marcos" 
         description={
           <Typography
@@ -59,6 +60,49 @@ export const ChatMessageBalloonBasic = () => {
           justifyContent: "center"
         }}>{"2"}</span>
       </ChatMessageBalloon>
+
+      <ChatMessageBalloon 
+        onMouseEnter={ () => console.log('onMouseEnter') }
+        bottomChildren={<div>Bottom children</div>}
+        label="Agente Marcos" 
+        description={
+          <Typography
+            variant="body1"
+            style={{
+              fontSize: "16px"
+            }}
+          >
+            {"Olá, tudo bem? Meu nome é Ana e falo em nome do banco Bradesco. Eu gostaria de falar com Maria Conceição da Silva"}
+          </Typography>
+        }
+        date={"10:23"} 
+        direction="O"
+        attachments={[]}
+      >
+        <span style={{ 
+          height: "38px", 
+          width: "38px", 
+          border: "1px solid #FF8348", 
+          borderRadius: "38px", 
+          backgroundColor: "#FFF",
+          display: "flex", 
+          alignItems: "center",
+          justifyContent: "center",
+          marginRight: "10px"
+        }}>{"1"}</span>
+        <span style={{ 
+          height: "38px", 
+          width: "38px", 
+          border: "1px solid #FF8348", 
+          borderRadius: "38px", 
+          backgroundColor: "#FFF",
+          display: "flex", 
+          alignItems: "center",
+          justifyContent: "center"
+        }}>{"2"}</span>
+      </ChatMessageBalloon>
     </div>
+
+    
   );
 };