venice-ui 1.0.24 → 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,8 +7,9 @@ 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", noPadding = false }) => {
-    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, { noPadding: noPadding }, children)));

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

@@ -9,8 +9,9 @@ const Theme_1 = require("../../Theme");
 exports.SectionElement = styled_components_1.default.div `
   width:100%;
   box-sizing:border-box;
+  overflow:auto;
   padding: ${Theme_1.Theme.padding.l} 0;
-  background-color:${Theme_1.Theme.colors.white};
+  background-color: ${(p) => p.backgroundColor};
 `;
 exports.SectionTitle = styled_components_1.default.div `
   width:100%;
@@ -19,6 +20,7 @@ exports.SectionTitle = styled_components_1.default.div `
   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

@@ -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, backgroundColor = Theme_1.Theme.colors.white, }) => {
-    return (react_1.default.createElement(Tile_styles_1.TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor },
+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));
 };

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

@@ -16,6 +16,7 @@ exports.TileElement = styled_components_1.default.div `
   overflow: hidden;
   flex-direction: column;
   position: relative;
+  height:${p => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme_1.Theme.shadow.s}

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,8 +1,9 @@
 import { TextSubHeader } from '../Typography';
 import React from 'react';
 import { SectionElement, SectionTitle, SectionContent } from './Section.styles';
-export const Section = ({ title, children, titlePosition = "left", noPadding = false }) => {
-    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, { noPadding: noPadding }, children)));

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

@@ -3,8 +3,9 @@ import { Theme } from "../../Theme";
 export const SectionElement = styled.div `
   width:100%;
   box-sizing:border-box;
+  overflow:auto;
   padding: ${Theme.padding.l} 0;
-  background-color:${Theme.colors.white};
+  background-color: ${(p) => p.backgroundColor};
 `;
 export const SectionTitle = styled.div `
   width:100%;
@@ -13,6 +14,7 @@ export const SectionTitle = styled.div `
   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

@@ -2,8 +2,8 @@ import { ElementHeader } from '../ElementHeader';
 import React from 'react';
 import { TileElement } from './Tile.styles';
 import { Theme } from '../../Theme';
-export const Tile = ({ size = 'small', shadow = true, title, children, backgroundColor = Theme.colors.white, }) => {
-    return (React.createElement(TileElement, { size: size, shadow: shadow, backgroundColor: backgroundColor },
+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

@@ -10,6 +10,7 @@ export const TileElement = styled.div `
   overflow: hidden;
   flex-direction: column;
   position: relative;
+  height:${p => p.height};
   ${(p) => p.shadow &&
     `
     box-shadow: ${Theme.shadow.s}

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

@@ -5,5 +5,6 @@ export interface ISectionProps {
     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,5 +1,8 @@
 import { TitlePosition } from '../../types';
-export declare const SectionElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ISectionStyles {
+    backgroundColor: string;
+}
+export declare const SectionElement: import("styled-components").StyledComponent<"div", any, ISectionStyles, never>;
 interface ISectionTitleStyle {
     titlePosition?: TitlePosition;
 }

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

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

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

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

package/package.json

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