norma-library 0.5.134 → 0.5.135

package/dist/esm/components/Modal.js

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles';
 import { IconButton } from './IconButton';
 import { Button } from './Button';
 var ModalStyled = styled(MuiModal)({});
-var ModalContentStyled = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  background-color: #FFF;\n  box-shadow: 24px;\n"], ["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 421px;\n  transform: translate(-50%, -50%);\n  background-color: #FFF;\n  box-shadow: 24px;\n"])));
+var ModalContentStyled = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: ", ";\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n"], ["\n  border: 1px solid #00000033;\n  border-radius: 4px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: ", ";\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n"])), function (props) { return props.$w || '421px'; });
 var ModalHeaderStyled = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  justify-content: space-between;\n  display: flex;\n\n  & h2 {\n    font-style: normal;\n    font-weight: 600;\n    font-size: 18px;\n    color: #292929;\n  }\n"], ["\n  text-align: left;\n  border-bottom: 1px solid #00000033;\n  box-sizing: border-box;\n  margin: 0;\n  position: relative;\n  padding: 22px 26px 15px 26px;\n  justify-content: space-between;\n  display: flex;\n\n  & h2 {\n    font-style: normal;\n    font-weight: 600;\n    font-size: 18px;\n    color: #292929;\n  }\n"])));
 var ModalFooterStyled = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top: 1px solid #00000033;\n  box-sizing: border-box;\n  position: relative;\n  padding: 24px;\n  display: flex;\n  justify-content: end;\n  gap: 24px;\n"], ["\n  border-top: 1px solid #00000033;\n  box-sizing: border-box;\n  position: relative;\n  padding: 24px;\n  display: flex;\n  justify-content: end;\n  gap: 24px;\n"])));
 var ModalContainerChildrenStyled = styled(Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding: 24px;\n"], ["\n  box-sizing: border-box;\n  padding: 24px;\n"])));
@@ -17,10 +17,10 @@ export var Modal = function (_a) {
     var _b;
     var open = _a.open, children = _a.children, paperProps = _a.paperProps, props = __rest(_a, ["open", "children", "paperProps"]);
     return (React.createElement(ModalStyled, __assign({ open: true }, props),
-        React.createElement(ModalContentStyled, __assign({}, paperProps),
+        React.createElement(ModalContentStyled, __assign({}, paperProps, { "$w": props.width }),
             props.title && (React.createElement(ModalHeaderStyled, null,
-                React.createElement(Typography, { variant: 'h2' }, props.title),
-                React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: "0" } },
+                React.createElement(Typography, { variant: "h2" }, props.title),
+                React.createElement(IconButton, { onClick: props.onClose, size: "small", color: "inherit", variant: "text", cursor: "pointer", sx: { padding: '0' } },
                     React.createElement(Close, null)))),
             React.createElement(ModalContainerChildrenStyled, null, children),
             !!((_b = props.action) === null || _b === void 0 ? void 0 : _b.length) && (React.createElement(ModalFooterStyled, null, props.action.map(function (_a, key) {

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AAEzC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,sRAAA,mNAUvC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,qYAAA,kUAgBpC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,wOAAA,qKAQpC,IAAA,CAAC;AAEF,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,oHAAA,iDAG/C,IAAA,CAAC;AAEF,MAAM,UAAU,KAAK;IACnB,OAAO,CACL,6BACE,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI;QAEV,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+LAA+L,GACjM,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAAwD;;IAAtD,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAK,KAAK,cAAtC,kCAAwC,CAAF;IAC1D,OAAO,CACL,oBAAC,WAAW,aAAC,IAAI,UAAK,KAAK;QACzB,oBAAC,kBAAkB,eAAK,UAAU;YAC/B,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,iBAAiB;gBAChB,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,IAAE,KAAK,CAAC,KAAK,CAAc;gBACnD,oBAAC,UAAU,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,SAAS,EAChB,EAAE,EAAE,EAAC,OAAO,EAAE,GAAG,EAAC;oBAElB,oBAAC,KAAK,OAAG,CACE,CACK,CACrB;YACD,oBAAC,4BAA4B,QAC1B,QAAQ,CACoB;YAC9B,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAA,IAAK,CAC1B,oBAAC,iBAAiB,QACf,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,EAA8C,EAAE,GAAG;gBAAlD,IAAA,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAK,IAAI,cAA7C,+CAA8C,CAAD;gBAAW,OAAA,CACzE,oBAAC,MAAM,aACL,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,IACN,IAAI,GAEP,KAAK,CACC,CACV,CAAA;aAAA,CAAC,CACgB,CACrB,CACkB,CACT,CACf,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,IAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;AAEzC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,gQAAiB,sHAM9C,EAA4B,qEAGtC,KAHU,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,EAAE,IAAI,OAAO,EAAnB,CAAmB,CAGtC,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,qYAAA,kUAgBpC,IAAA,CAAC;AAEF,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,wOAAA,qKAQpC,IAAA,CAAC;AAEF,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,oHAAA,iDAG/C,IAAA,CAAC;AAEF,MAAM,UAAU,KAAK;IACnB,OAAO,CACL,6BACE,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,iBACtB,MAAM,EAClB,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI;QAEV,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+LAA+L,GACjM,CACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAAwD;;IAAtD,IAAA,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,UAAU,gBAAA,EAAK,KAAK,cAAtC,kCAAwC,CAAF;IAC1D,OAAO,CACL,oBAAC,WAAW,aAAC,IAAI,UAAK,KAAK;QACzB,oBAAC,kBAAkB,eAAK,UAAU,UAAM,KAAK,CAAC,KAAK;YAChD,KAAK,CAAC,KAAK,IAAI,CACd,oBAAC,iBAAiB;gBAChB,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,IAAE,KAAK,CAAC,KAAK,CAAc;gBACnD,oBAAC,UAAU,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,MAAM,EAAC,SAAS,EAChB,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;oBAEpB,oBAAC,KAAK,OAAG,CACE,CACK,CACrB;YACD,oBAAC,4BAA4B,QAAE,QAAQ,CAAgC;YACtE,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,MAAM,CAAA,IAAI,CACzB,oBAAC,iBAAiB,QACf,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,EAAgD,EAAE,GAAG;gBAAnD,IAAA,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAK,IAAI,cAA9C,+CAAgD,CAAF;gBAAY,OAAA,CAC3E,oBAAC,MAAM,aAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,IAAM,IAAI,GACpF,KAAK,CACC,CACV,CAAA;aAAA,CAAC,CACgB,CACrB,CACkB,CACT,CACf,CAAC;AACJ,CAAC,CAAC"}

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

@@ -9,8 +9,8 @@ export interface ModalBaseProps extends MuiModalBaseProps {
     onClose?: React.ReactEventHandler<{}>;
     action?: OnAction[];
     className?: string;
-    full?: boolean;
     title?: string;
     id?: string;
     paperProps?: MuiPaperBaseProps;
+    width?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.134",
+  "version": "0.5.135",
   "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/Modal.tsx

@@ -7,16 +7,15 @@ import { Button } from './Button';
 
 const ModalStyled = styled(MuiModal)({});
 
-const ModalContentStyled = styled(Paper)`
+const ModalContentStyled = styled(Paper)<{ $w?: string }>`
   border: 1px solid #00000033;
   border-radius: 4px;
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 421px;
+  width: ${props => props.$w || '421px'};
   transform: translate(-50%, -50%);
-  background-color: #FFF;
-  box-shadow: 24px;
+  background-color: #fff;
 `;
 
 const ModalHeaderStyled = styled(Box)`
@@ -74,36 +73,27 @@ export function Close() {
 export const Modal = ({ open, children, paperProps, ...props }: ModalBaseProps) => {
   return (
     <ModalStyled open {...props}>
-      <ModalContentStyled {...paperProps}>
+      <ModalContentStyled {...paperProps} $w={props.width}>
         {props.title && (
           <ModalHeaderStyled>
-            <Typography variant='h2'>{props.title}</Typography>
+            <Typography variant="h2">{props.title}</Typography>
             <IconButton
               onClick={props.onClose}
               size="small"
               color="inherit"
               variant="text"
               cursor="pointer"
-              sx={{padding: "0"}}
+              sx={{ padding: '0' }}
             >
               <Close />
             </IconButton>
           </ModalHeaderStyled>
         )}
-        <ModalContainerChildrenStyled>
-          {children}
-        </ModalContainerChildrenStyled>
-        {!!props.action?.length  && (
+        <ModalContainerChildrenStyled>{children}</ModalContainerChildrenStyled>
+        {!!props.action?.length && (
           <ModalFooterStyled>
-            {props.action.map(({color, variant, action, size, label, ...rest}, key) => (
-              <Button
-                color={color}
-                variant={variant}
-                key={key}
-                onClick={action}
-                size={size}
-                {...rest}
-              >
+            {props.action.map(({ color, variant, action, size, label, ...rest }, key) => (
+              <Button color={color} variant={variant} key={key} onClick={action} size={size} {...rest}>
                 {label}
               </Button>
             ))}

package/src/interfaces/Modal.ts

@@ -9,8 +9,8 @@ export interface ModalBaseProps extends MuiModalBaseProps {
   onClose?: React.ReactEventHandler<{}>;
   action?: OnAction[];
   className?: string;
-  full?: boolean;
   title?: string;
   id?: string;
   paperProps?: MuiPaperBaseProps;
+  width?: string;
 }

package/src/stories/Modal.stories.tsx

@@ -16,8 +16,6 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
-
 export const ModalBasic = () => {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
@@ -122,8 +120,8 @@ export const ModalAction = () => {
           action={defaultAction}
           paperProps={{
             sx: {
-              width: "90vw"
-            }
+              width: '90vw',
+            },
           }}
         >
           <>
@@ -193,3 +191,56 @@ export const ModalProps = () => {
 };
 
 ModalProps.storyName = 'Modal Title and Action';
+
+export const ModalSize = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const defaultAction = [
+    {
+      label: 'Cancelar',
+      action: handleClose,
+      color: 'error',
+      size: 'medium',
+      variant: 'outlined',
+    },
+    {
+      label: 'Confirmar',
+      action: handleClose,
+      color: 'primary',
+      size: 'medium',
+      variant: 'contained',
+    },
+  ];
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          action={defaultAction}
+          title="Select a company"
+          width='90vw'
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalSize.storyName = 'Modal width and height';