venice-ui 1.0.22 → 1.0.25

package/dist/cjs/components/Card/Card.js

@@ -10,6 +10,6 @@ const ElementHeader_1 = require("../ElementHeader");
 const Card = ({ children, title, actionLabel, moreIcon = false, backIcon = false, handleClick, handleBack, height, options, }) => {
     return (react_1.default.createElement(Card_styles_1.CardElement, { height: height },
         (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, closeIcon: false, backIcon: backIcon, actionButton: true, moreIcon: moreIcon, options: options })),
-        react_1.default.createElement(Card_styles_1.CardContent, null, children)));
+        react_1.default.createElement(Card_styles_1.CardContent, { soloMode: !title && !actionLabel }, children)));
 };
 exports.Card = Card;

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

@@ -14,12 +14,15 @@ exports.CardElement = styled_components_1.default.div `
   background-color: ${Theme_1.Theme.colors.white};
   border-radius: ${Theme_1.Theme.borderRadius.m};
   height: ${p => p.height ? p.height : '100%'};
-  box-shadow: ${Theme_1.Theme.shadow.s}
+  box-shadow: ${Theme_1.Theme.shadow.s};
 `;
 exports.CardContent = styled_components_1.default.div `
   box-sizing: border-box; 
   display: flex;
+  backgorund-color:#ff0000;
   padding:  ${Theme_1.Theme.padding.l};
   width: 100%;
   flex-direction: row;
-`;
+  ${p => !p.soloMode && `
+  padding-top:0px;`}
+  `;

package/dist/cjs/components/Section/Section.js

@@ -7,10 +7,11 @@ exports.Section = void 0;
 const Typography_1 = require("../Typography");
 const react_1 = __importDefault(require("react"));
 const Section_styles_1 = require("./Section.styles");
-const Section = ({ title, children, titlePosition = "left" }) => {
-    return (react_1.default.createElement(Section_styles_1.SectionElement, null,
+const Theme_1 = require("../../Theme");
+const Section = ({ title, children, titlePosition = "left", noPadding = false, backgroundColor = Theme_1.Theme.colors.white, }) => {
+    return (react_1.default.createElement(Section_styles_1.SectionElement, { backgroundColor: backgroundColor },
         title && (react_1.default.createElement(Section_styles_1.SectionTitle, { titlePosition: titlePosition },
             react_1.default.createElement(Typography_1.TextSubHeader, null, title))),
-        react_1.default.createElement(Section_styles_1.SectionContent, null, children)));
+        react_1.default.createElement(Section_styles_1.SectionContent, { noPadding: noPadding }, children)));
 };
 exports.Section = Section;

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

@@ -9,15 +9,19 @@ const Theme_1 = require("../../Theme");
 exports.SectionElement = styled_components_1.default.div `
   width:100%;
   box-sizing:border-box;
-  padding: ${Theme_1.Theme.padding.l};
-  background-color:${Theme_1.Theme.colors.white};
+  overflow:auto;
+  padding: ${Theme_1.Theme.padding.l} 0;
+  background-color: ${(p) => p.backgroundColor};
 `;
 exports.SectionTitle = styled_components_1.default.div `
   width:100%;
-  padding-bottom: ${Theme_1.Theme.padding.l};
+  padding:0 ${Theme_1.Theme.padding.l}  ${Theme_1.Theme.padding.l} ${Theme_1.Theme.padding.l} ;
   text-align:${p => p.titlePosition};
+  box-sizing:border-box;
 `;
 exports.SectionContent = styled_components_1.default.div `
+  box-sizing:border-box;
   width:100%;
   display:flex;
+  padding: 0 ${p => p.noPadding ? 0 : Theme_1.Theme.padding.l};
 `;

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

@@ -7,9 +7,10 @@ exports.Tile = void 0;
 const ElementHeader_1 = require("../ElementHeader");
 const react_1 = __importDefault(require("react"));
 const Tile_styles_1 = require("./Tile.styles");
-const Tile = ({ size = 'small', shadow = true, title, children, }) => {
-    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow },
-        title && react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title }),
+const Theme_1 = require("../../Theme");
+const Tile = ({ size = 'small', shadow = true, title, children, backgroundColor = Theme_1.Theme.colors.white, height = 'auto', }) => {
+    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height },
+        title && react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, bgColor: backgroundColor }),
         children));
 };
 exports.Tile = Tile;

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

@@ -10,12 +10,13 @@ exports.TileElement = styled_components_1.default.div `
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  background-color: ${Theme_1.Theme.colors.white};
+  background-color: ${(p) => p.backgroundColor};
   border-radius: ${Theme_1.Theme.borderRadius.m};
   max-height: 100%;
   overflow: hidden;
   flex-direction: column;
   position: relative;
+  height:${p => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme_1.Theme.shadow.s}

package/dist/cjs/hooks/useOutsideClick.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideClick = void 0;
+const react_1 = require("react");
+const useOutsideClick = (callback) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const handleClick = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        document.addEventListener("click", handleClick, true);
+        return () => {
+            document.removeEventListener("click", handleClick, true);
+        };
+    }, [ref]);
+    return ref;
+};
+exports.useOutsideClick = useOutsideClick;

package/dist/esm/components/Card/Card.js

@@ -4,5 +4,5 @@ import { ElementHeader } from '../ElementHeader';
 export const Card = ({ children, title, actionLabel, moreIcon = false, backIcon = false, handleClick, handleBack, height, options, }) => {
     return (React.createElement(CardElement, { height: height },
         (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, closeIcon: false, backIcon: backIcon, actionButton: true, moreIcon: moreIcon, options: options })),
-        React.createElement(CardContent, null, children)));
+        React.createElement(CardContent, { soloMode: !title && !actionLabel }, children)));
 };

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

@@ -8,12 +8,15 @@ export const CardElement = styled.div `
   background-color: ${Theme.colors.white};
   border-radius: ${Theme.borderRadius.m};
   height: ${p => p.height ? p.height : '100%'};
-  box-shadow: ${Theme.shadow.s}
+  box-shadow: ${Theme.shadow.s};
 `;
 export const CardContent = styled.div `
   box-sizing: border-box; 
   display: flex;
+  backgorund-color:#ff0000;
   padding:  ${Theme.padding.l};
   width: 100%;
   flex-direction: row;
-`;
+  ${p => !p.soloMode && `
+  padding-top:0px;`}
+  `;

package/dist/esm/components/Section/Section.js

@@ -1,9 +1,10 @@
 import { TextSubHeader } from '../Typography';
 import React from 'react';
 import { SectionElement, SectionTitle, SectionContent } from './Section.styles';
-export const Section = ({ title, children, titlePosition = "left" }) => {
-    return (React.createElement(SectionElement, null,
+import { Theme } from '../../Theme';
+export const Section = ({ title, children, titlePosition = "left", noPadding = false, backgroundColor = Theme.colors.white, }) => {
+    return (React.createElement(SectionElement, { backgroundColor: backgroundColor },
         title && (React.createElement(SectionTitle, { titlePosition: titlePosition },
             React.createElement(TextSubHeader, null, title))),
-        React.createElement(SectionContent, null, children)));
+        React.createElement(SectionContent, { noPadding: noPadding }, children)));
 };

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

@@ -3,15 +3,19 @@ import { Theme } from "../../Theme";
 export const SectionElement = styled.div `
   width:100%;
   box-sizing:border-box;
-  padding: ${Theme.padding.l};
-  background-color:${Theme.colors.white};
+  overflow:auto;
+  padding: ${Theme.padding.l} 0;
+  background-color: ${(p) => p.backgroundColor};
 `;
 export const SectionTitle = styled.div `
   width:100%;
-  padding-bottom: ${Theme.padding.l};
+  padding:0 ${Theme.padding.l}  ${Theme.padding.l} ${Theme.padding.l} ;
   text-align:${p => p.titlePosition};
+  box-sizing:border-box;
 `;
 export const SectionContent = styled.div `
+  box-sizing:border-box;
   width:100%;
   display:flex;
+  padding: 0 ${p => p.noPadding ? 0 : Theme.padding.l};
 `;

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

@@ -1,8 +1,9 @@
 import { ElementHeader } from '../ElementHeader';
 import React from 'react';
 import { TileElement } from './Tile.styles';
-export const Tile = ({ size = 'small', shadow = true, title, children, }) => {
-    return (React.createElement(TileElement, { size: size, shadow: shadow },
-        title && React.createElement(ElementHeader, { title: title }),
+import { Theme } from '../../Theme';
+export const Tile = ({ size = 'small', shadow = true, title, children, backgroundColor = Theme.colors.white, height = 'auto', }) => {
+    return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor, height: height },
+        title && React.createElement(ElementHeader, { title: title, bgColor: backgroundColor }),
         children));
 };

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

@@ -4,12 +4,13 @@ export const TileElement = styled.div `
   box-sizing: border-box;
   display: flex;
   width: 100%;
-  background-color: ${Theme.colors.white};
+  background-color: ${(p) => p.backgroundColor};
   border-radius: ${Theme.borderRadius.m};
   max-height: 100%;
   overflow: hidden;
   flex-direction: column;
   position: relative;
+  height:${p => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme.shadow.s}

package/dist/esm/hooks/useOutsideClick.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+export const useOutsideClick = (callback) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClick = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        document.addEventListener("click", handleClick, true);
+        return () => {
+            document.removeEventListener("click", handleClick, true);
+        };
+    }, [ref]);
+    return ref;
+};

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

@@ -2,5 +2,8 @@ interface ICardElementProps {
     height?: string;
 }
 export declare const CardElement: import("styled-components").StyledComponent<"div", any, ICardElementProps, never>;
-export declare const CardContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ICardContentStyles {
+    soloMode: boolean;
+}
+export declare const CardContent: import("styled-components").StyledComponent<"div", any, ICardContentStyles, never>;
 export {};

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

@@ -4,5 +4,7 @@ export interface ISectionProps {
     title?: string;
     children: React.ReactNode;
     titlePosition?: TitlePosition;
+    noPadding?: boolean;
+    backgroundColor?: string;
 }
 export declare const Section: FC<ISectionProps>;

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

@@ -1,8 +1,14 @@
 import { TitlePosition } from '../../types';
-export declare const SectionElement: import("styled-components").StyledComponent<"div", any, {}, never>;
-interface ISectionTitleSyle {
+interface ISectionStyles {
+    backgroundColor: string;
+}
+export declare const SectionElement: import("styled-components").StyledComponent<"div", any, ISectionStyles, never>;
+interface ISectionTitleStyle {
     titlePosition?: TitlePosition;
 }
-export declare const SectionTitle: import("styled-components").StyledComponent<"div", any, ISectionTitleSyle, never>;
-export declare const SectionContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SectionTitle: import("styled-components").StyledComponent<"div", any, ISectionTitleStyle, never>;
+interface ISectionContentStyles {
+    noPadding: boolean;
+}
+export declare const SectionContent: import("styled-components").StyledComponent<"div", any, ISectionContentStyles, never>;
 export {};

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

@@ -4,5 +4,7 @@ export interface ITileProps {
     title?: string;
     size?: string;
     shadow?: boolean;
+    backgroundColor?: string;
+    height?: string;
 }
 export declare const Tile: FC<ITileProps>;

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

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

package/dist/types/hooks/useOutsideClick.d.ts

@@ -0,0 +1 @@
+export declare const useOutsideClick: (callback: () => void) => import("react").RefObject<HTMLDivElement>;

package/package.json

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