norma-library 0.5.68 → 0.5.70

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

@@ -2,10 +2,10 @@ import React 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;
-    return (React.createElement(S.ChatMessageBalloonContainerStyle, null,
+    var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children, className = _a.className, onMouseOver = _a.onMouseOver;
+    return (React.createElement(S.ChatMessageBalloonContainerStyle, { className: className },
         React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction },
-            React.createElement(S.ChatMessageBalloonStyle, { direction: direction },
+            React.createElement(S.ChatMessageBalloonStyle, { onMouseOver: onMouseOver, direction: direction, className: !!onMouseOver ? 'is-interactive' : "" },
                 React.createElement(Typography, { variant: "subtitle2", style: {
                         fontSize: "1rem",
                         fontWeight: "600",

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,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAG/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAAiD;QAA/C,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IACnH,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC;QACjC,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,uBAAuB,IAAC,SAAS,EAAE,SAAS;gBAC7C,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,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAG/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAAyE;QAAvE,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,WAAW,iBAAA;IAC3I,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC,IAAC,SAAS,EAAE,SAAS;QACtD,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,uBAAuB,IAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;gBACzH,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"}

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

@@ -6,7 +6,7 @@ export var ChatMessageBalloonContainerStyle = styled(Box)({
     flexDirection: "column",
 });
 export var ChatMessageBalloonRowStyle = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n  flex-direction: ", ";\n\n  &:last-child {\n    margin-bottom: 0px;\n  }\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n  flex-direction: ", ";\n\n  &:last-child {\n    margin-bottom: 0px;\n  }\n"])), function (props) { return (props.direction === "I") ? "row-reverse" : "row"; });
-export var ChatMessageBalloonStyle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  width: 60%;\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  width: 60%;\n"])), function (props) { return (props.direction === "I") ? "#FFF" : "#E18B50"; }, function (props) { return (props.direction === "I") ? "20px 20px 0px 20px" : "20px 20px 20px 0px"; }, function (props) { return (props.direction === "I") ? "#4D4F5B" : "#FFF"; });
+export var ChatMessageBalloonStyle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  width: 60%;\n  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n  &.is-interactive {\n    cursor: pointer;\n\n    &:hover {\n      border: 1px solid #000;\n    }\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid transparent;\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  width: 60%;\n  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n  &.is-interactive {\n    cursor: pointer;\n\n    &:hover {\n      border: 1px solid #000;\n    }\n  }\n"])), function (props) { return (props.direction === "I") ? "#FFF" : "#E18B50"; }, function (props) { return (props.direction === "I") ? "20px 20px 0px 20px" : "20px 20px 20px 0px"; }, function (props) { return (props.direction === "I") ? "#4D4F5B" : "#FFF"; });
 export var ChatMessageDateStyle = styled(Typography)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #43425D;\n  opacity: .5;\n"], ["\n  color: #43425D;\n  opacity: .5;\n"])));
 export var ChatMessageChildrenStyle = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  justify-content: ", ";\n  padding: 8px;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  justify-content: ", ";\n  padding: 8px;\n"])), function (props) { return (props.direction === "I") ? "end" : "start"; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1 +1 @@
-{"version":3,"file":"ChatMessageBalloon.style.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,IAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,CAAC,2LAAuB,+DAG1D,EAA4D,uDAK/E,KALmB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,EAAjD,CAAiD,CAK/E,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,wPAAuB,wBACrD,EAAyD,sBAC5D,EAAkF,yCAE1F,EAAyD,wFAKnE,KARqB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAA9C,CAA8C,EAC5D,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAAvE,CAAuE,EAE1F,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAA9C,CAA8C,CAKnE,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,0GAAA,uCAGrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,mMAAuB,wGAKvD,EAAsD,sBAE1E,KAFoB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAA3C,CAA2C,CAE1E,CAAC"}
+{"version":3,"file":"ChatMessageBalloon.style.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,IAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,CAAC,2LAAuB,+DAG1D,EAA4D,uDAK/E,KALmB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,EAAjD,CAAiD,CAK/E,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,8bAAuB,wBACrD,EAAyD,wDAE5D,EAAkF,yCAE1F,EAAyD,4PAcnE,KAlBqB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAA9C,CAA8C,EAE5D,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAAvE,CAAuE,EAE1F,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAA9C,CAA8C,CAcnE,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,0GAAA,uCAGrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,mMAAuB,wGAKvD,EAAsD,sBAE1E,KAFoB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAA3C,CAA2C,CAE1E,CAAC"}

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

@@ -1,9 +1,11 @@
-import { ReactNode } from "react";
+import { ReactNode, MouseEventHandler } from "react";
 export interface ChatMessageBalloonProps {
     label: string;
     description: ReactNode;
     date: string;
     direction: "I" | "O";
+    onMouseOver?: MouseEventHandler<HTMLDivElement>;
     attachments?: string[];
     children?: ReactNode;
+    className?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.68",
+  "version": "0.5.70",
   "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.style.ts

@@ -18,6 +18,7 @@ export const ChatMessageBalloonRowStyle = styled('div')<{ direction: string }>`
 
 export const ChatMessageBalloonStyle = styled('div')<{ direction: string }>`
   background-color: ${(props) => (props.direction === "I") ? "#FFF" : "#E18B50"};
+  border: 1px solid transparent;
   border-radius: ${(props) => (props.direction === "I") ? "20px 20px 0px 20px" : "20px 20px 20px 0px"};
   box-sizing: border-box;
   color: ${(props) => (props.direction === "I") ? "#4D4F5B" : "#FFF"};
@@ -25,6 +26,15 @@ export const ChatMessageBalloonStyle = styled('div')<{ direction: string }>`
   flex-direction: column;
   padding: 12px 24px;
   width: 60%;
+  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &.is-interactive {
+    cursor: pointer;
+
+    &:hover {
+      border: 1px solid #000;
+    }
+  }
 `
 
 export const ChatMessageDateStyle = styled(Typography)`

package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx

@@ -4,11 +4,11 @@ import { ChatMessageBalloonProps } from '@/interfaces';
 import * as S from './ChatMessageBalloon.style'
 
 
-export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ label, description, date, direction, children }) => {
+export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ label, description, date, direction, children, className, onMouseOver }) => {
   return (
-    <S.ChatMessageBalloonContainerStyle>
+    <S.ChatMessageBalloonContainerStyle className={className}>
       <S.ChatMessageBalloonRowStyle direction={direction}>
-        <S.ChatMessageBalloonStyle direction={direction}>
+        <S.ChatMessageBalloonStyle onMouseOver={onMouseOver} direction={direction} className={!!onMouseOver ? 'is-interactive' : ""}>
           <Typography
             variant="subtitle2"
             style={{

package/src/interfaces/ChatMessageBalloon.ts

@@ -1,10 +1,12 @@
-import { ReactNode } from "react";
+import { ReactNode, MouseEventHandler } from "react";
 
 export interface ChatMessageBalloonProps {
   label: string;
   description: ReactNode;
   date: string;
   direction: "I" | "O";
+  onMouseOver?: MouseEventHandler<HTMLDivElement>;
   attachments?: string[];
   children?:ReactNode;
+  className?:string;
 }

package/src/stories/ChatMessageBalloon.stories.tsx

@@ -21,6 +21,7 @@ export const ChatMessageBalloonBasic = () => {
   return (
     <div style={{backgroundColor: "#F0F0F0", boxSizing: "border-box", padding: "20px"}}>
       <ChatMessageBalloon 
+        onMouseOver={ () => console.log('onMouseOver') }
         label="Agente Marcos" 
         description={
           <Typography