venice-ui 2.4.4 → 2.4.5

package/dist/cjs/components/Modal/Modal.js

@@ -31,7 +31,7 @@ const common_1 = require("../common");
 const Modal_styles_1 = require("./Modal.styles");
 const styled_components_1 = require("styled-components");
 const ButtonsFooter_1 = require("../ButtonsFooter");
-const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, }) => {
+const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, decorativeEdge = false, }) => {
     (0, react_1.useEffect)(() => {
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -47,7 +47,7 @@ const Modal = ({ isOpen, theme = Theme_1.mainTheme, children, title, handleConfi
     }, [isOpen]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Modal_styles_1.ModalOverlayer, null,
-            react_1.default.createElement(Modal_styles_1.ModalElement, { size: size },
+            react_1.default.createElement(Modal_styles_1.ModalElement, { size: size, decorativeEdge: decorativeEdge },
                 react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
                 react_1.default.createElement(common_1.ScrollCotainer, null, children),
                 react_1.default.createElement(ButtonsFooter_1.ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue, additionaNormalMode: additionaNormalMode, additionDisabled: additionDisabled })))));

package/dist/cjs/components/Modal/Modal.styles.js

@@ -32,8 +32,8 @@ exports.ModalElement = styled_components_1.default.div `
   position: relative;
   max-width: 60rem;
   box-shadow: ${Theme_1.Theme.shadow.m}
-  ${p => p.size === 'small' && `max-width:500px`}
-  ${p => p.size === 'medium' && `max-width:750px`}
-  ${p => p.size === 'large' && `max-width:100%`}
-
+  ${p => p.size === 'small' && `max-width:500px;`}
+  ${p => p.size === 'medium' && `max-width:750px;`}
+  ${p => p.size === 'large' && `max-width:100%;`}
+  ${p => p.decorativeEdge && `border-left: 4px solid ${Theme_1.Theme.colors.primary};`}
 `;

package/dist/cjs/components/Tile/Tile.js

@@ -8,8 +8,8 @@ const ElementHeader_1 = require("../ElementHeader");
 const react_1 = __importDefault(require("react"));
 const Tile_styles_1 = require("./Tile.styles");
 const Theme_1 = require("../../Theme");
-const Tile = ({ size = 'small', shadow = true, title, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false }) => {
-    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height },
+const Tile = ({ size = 'small', shadow = true, title, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false, decorativeEdge = false, }) => {
+    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height, decorativeEdge: decorativeEdge },
         title && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, backgroundColor: backgroundColor, bottomDivader: headerDivader })),
         children));
 };

package/dist/cjs/components/Tile/Tile.styles.js

@@ -16,12 +16,13 @@ exports.TileElement = styled_components_1.default.div `
   overflow: hidden;
   flex-direction: column;
   position: relative;
-  height:${p => p.height};
+  height: ${(p) => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme_1.Theme.shadow.s}
   `}
-  ${(p) => p.size === 'small' && `max-width:500px`}
-  ${(p) => p.size === 'medium' && `max-width:750px`}
-  ${(p) => p.size === 'large' && `max-width:100%`}
+  ${(p) => p.size === 'small' && `max-width:500px;`}
+  ${(p) => p.size === 'medium' && `max-width:750px;`}
+  ${(p) => p.size === 'large' && `max-width:100%;`}
+  ${(p) => p.decorativeEdge && `border-left: 4px solid ${Theme_1.Theme.colors.primary};`}
 `;

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

@@ -5,7 +5,7 @@ import { ScrollCotainer } from '../common';
 import { ModalElement, ModalOverlayer } from './Modal.styles';
 import { ThemeProvider } from 'styled-components';
 import { ButtonsFooter } from '../ButtonsFooter';
-export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, }) => {
+export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, decorativeEdge = false, }) => {
     useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -21,7 +21,7 @@ export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfir
     }, [isOpen]);
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(ModalOverlayer, null,
-            React.createElement(ModalElement, { size: size },
+            React.createElement(ModalElement, { size: size, decorativeEdge: decorativeEdge },
                 React.createElement(ElementHeader, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
                 React.createElement(ScrollCotainer, null, children),
                 React.createElement(ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue, additionaNormalMode: additionaNormalMode, additionDisabled: additionDisabled })))));

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

@@ -26,8 +26,8 @@ export const ModalElement = styled.div `
   position: relative;
   max-width: 60rem;
   box-shadow: ${Theme.shadow.m}
-  ${p => p.size === 'small' && `max-width:500px`}
-  ${p => p.size === 'medium' && `max-width:750px`}
-  ${p => p.size === 'large' && `max-width:100%`}
-
+  ${p => p.size === 'small' && `max-width:500px;`}
+  ${p => p.size === 'medium' && `max-width:750px;`}
+  ${p => p.size === 'large' && `max-width:100%;`}
+  ${p => p.decorativeEdge && `border-left: 4px solid ${Theme.colors.primary};`}
 `;

package/dist/esm/components/Tile/Tile.js

@@ -2,8 +2,8 @@ import { ElementHeader } from '../ElementHeader';
 import React from 'react';
 import { TileElement } from './Tile.styles';
 import { mainTheme } from '../../Theme';
-export const Tile = ({ size = 'small', shadow = true, title, children, theme = mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false }) => {
-    return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height },
+export const Tile = ({ size = 'small', shadow = true, title, children, theme = mainTheme, backgroundColor = theme.contentBackground, height = 'auto', headerDivader = false, decorativeEdge = false, }) => {
+    return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height, decorativeEdge: decorativeEdge },
         title && (React.createElement(ElementHeader, { title: title, backgroundColor: backgroundColor, bottomDivader: headerDivader })),
         children));
 };

package/dist/esm/components/Tile/Tile.styles.js

@@ -10,12 +10,13 @@ export const TileElement = styled.div `
   overflow: hidden;
   flex-direction: column;
   position: relative;
-  height:${p => p.height};
+  height: ${(p) => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme.shadow.s}
   `}
-  ${(p) => p.size === 'small' && `max-width:500px`}
-  ${(p) => p.size === 'medium' && `max-width:750px`}
-  ${(p) => p.size === 'large' && `max-width:100%`}
+  ${(p) => p.size === 'small' && `max-width:500px;`}
+  ${(p) => p.size === 'medium' && `max-width:750px;`}
+  ${(p) => p.size === 'large' && `max-width:100%;`}
+  ${(p) => p.decorativeEdge && `border-left: 4px solid ${Theme.colors.primary};`}
 `;

package/dist/types/components/Modal/Modal.d.ts

@@ -19,5 +19,6 @@ export interface IModalProps {
     additionaNormalMode?: boolean;
     exitOnEsc?: boolean;
     additionDisabled?: boolean;
+    decorativeEdge?: boolean;
 }
 export declare const Modal: FC<IModalProps>;

package/dist/types/components/Modal/Modal.styles.d.ts

@@ -1,6 +1,7 @@
 export declare const ModalOverlayer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IModalElementProp {
     size: string;
+    decorativeEdge: boolean;
     theme: any;
 }
 export declare const ModalElement: import("styled-components").StyledComponent<"div", any, IModalElementProp, never>;

package/dist/types/components/Tile/Tile.d.ts

@@ -8,5 +8,6 @@ export interface ITileProps {
     height?: string;
     theme?: any;
     headerDivader?: boolean;
+    decorativeEdge?: boolean;
 }
 export declare const Tile: FC<ITileProps>;

package/dist/types/components/Tile/Tile.styles.d.ts

@@ -3,6 +3,7 @@ interface ITileElementStyle {
     shadow: boolean;
     backgroundColor: string;
     height: string;
+    decorativeEdge: boolean;
 }
 export declare const TileElement: import("styled-components").StyledComponent<"div", any, ITileElementStyle, never>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",