venice-ui 1.0.11 → 1.0.13

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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,
+        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)));
+};
+exports.Section = Section;

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionContent = exports.SectionTitle = exports.SectionElement = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+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};
+`;
+exports.SectionTitle = styled_components_1.default.div `
+  width:100%;
+  padding-bottom: ${Theme_1.Theme.padding.l};
+  text-align:${p => p.titlePosition};
+`;
+exports.SectionContent = styled_components_1.default.div `
+  width:100%;
+  display:flex;
+`;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Section"), exports);

package/dist/cjs/components/Sidepanel/Sidepanel.js

@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sidepanel = void 0;
+const ReactDOM = __importStar(require("react-dom"));
 const ElementHeader_1 = require("../ElementHeader");
 const react_1 = __importStar(require("react"));
 const Modal_styles_1 = require("../Modal/Modal.styles");
@@ -42,11 +43,12 @@ const Sidepanel = ({ handleClose, children, right = false, overlayer = true, top
             document.removeEventListener('click', handleClickOutside, true);
         };
     }, [handleClose]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    const modalRoot = document.getElementById('root');
+    return ReactDOM.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Sidepanel_styles_1.SidepanelElement, { right: right, top: top, ref: ref },
             react_1.default.createElement(ElementHeader_1.ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
                 iconOptions.map((icon) => (react_1.default.createElement(Icons_1.Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
             children),
-        overlayer && react_1.default.createElement(Modal_styles_1.ModalOverlayer, { onClick: handleClose })));
+        overlayer && react_1.default.createElement(Modal_styles_1.ModalOverlayer, { onClick: handleClose })), modalRoot);
 };
 exports.Sidepanel = Sidepanel;

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

@@ -11,7 +11,7 @@ exports.SidepanelElement = styled_components_1.default.div `
   width: 20rem;
   background-color: ${Theme_1.Theme.colors.white};
   position: fixed;
-  top: ${p => p.top};
+  top: ${p => p.top}px;
   z-index: 1001;
   box-shadow: ${Theme_1.Theme.shadow.m};
   ${p => p.right ? `right:0;` : 'left:0;'}

package/dist/cjs/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./components/ElementHeader"), exports);
 __exportStar(require("./components/Icons"), exports);
 __exportStar(require("./components/InputText"), exports);
 __exportStar(require("./components/Modal"), exports);
+__exportStar(require("./components/Section"), exports);
 __exportStar(require("./components/Sidepanel"), exports);
 __exportStar(require("./components/Tile"), exports);
 __exportStar(require("./components/Typography"), exports);

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

@@ -0,0 +1,9 @@
+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,
+        title && (React.createElement(SectionTitle, { titlePosition: titlePosition },
+            React.createElement(TextSubHeader, null, title))),
+        React.createElement(SectionContent, null, children)));
+};

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

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import { Theme } from "../../Theme";
+export const SectionElement = styled.div `
+  width:100%;
+  box-sizing:border-box;
+  padding: ${Theme.padding.l};
+  background-color:${Theme.colors.white};
+`;
+export const SectionTitle = styled.div `
+  width:100%;
+  padding-bottom: ${Theme.padding.l};
+  text-align:${p => p.titlePosition};
+`;
+export const SectionContent = styled.div `
+  width:100%;
+  display:flex;
+`;

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

@@ -0,0 +1 @@
+export * from './Section';

package/dist/esm/components/Sidepanel/Sidepanel.js

@@ -1,3 +1,4 @@
+import * as ReactDOM from 'react-dom';
 import { ElementHeader } from '../ElementHeader';
 import React, { useEffect, useRef } from 'react';
 import { ModalOverlayer } from '../Modal/Modal.styles';
@@ -16,10 +17,11 @@ export const Sidepanel = ({ handleClose, children, right = false, overlayer = tr
             document.removeEventListener('click', handleClickOutside, true);
         };
     }, [handleClose]);
-    return (React.createElement(React.Fragment, null,
+    const modalRoot = document.getElementById('root');
+    return ReactDOM.createPortal(React.createElement(React.Fragment, null,
         React.createElement(SidepanelElement, { right: right, top: top, ref: ref },
             React.createElement(ElementHeader, { handleClose: handleClose, showTitle: false }, iconOptions &&
                 iconOptions.map((icon) => (React.createElement(Icon, { name: icon.iconName, onClick: icon.action, key: icon.iconName })))),
             children),
-        overlayer && React.createElement(ModalOverlayer, { onClick: handleClose })));
+        overlayer && React.createElement(ModalOverlayer, { onClick: handleClose })), modalRoot);
 };

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

@@ -5,7 +5,7 @@ export const SidepanelElement = styled.div `
   width: 20rem;
   background-color: ${Theme.colors.white};
   position: fixed;
-  top: ${p => p.top};
+  top: ${p => p.top}px;
   z-index: 1001;
   box-shadow: ${Theme.shadow.m};
   ${p => p.right ? `right:0;` : 'left:0;'}

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export * from './components/ElementHeader';
 export * from './components/Icons';
 export * from "./components/InputText";
 export * from './components/Modal';
+export * from './components/Section';
 export * from './components/Sidepanel';
 export * from './components/Tile';
 export * from './components/Typography';

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

@@ -1,17 +1,8 @@
 import { FC } from 'react';
-import { InputSize, IOption, LabelPosition } from 'types';
-export interface IDropdownProps {
+import { IFormElement, IOption } from '../../types';
+export interface IDropdownProps extends IFormElement {
     mode: 'normal' | 'icon';
-    label?: string;
-    labelPosition?: LabelPosition;
-    size?: InputSize;
-    disabled?: boolean;
-    error?: string;
-    width?: string;
     options: IOption[];
-    value?: string | number;
-    placeholder?: string;
-    name: string;
     handleSelect: (name: string, value: string | number) => void;
 }
 export declare const Dropdown: FC<IDropdownProps>;

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

@@ -1,10 +1,8 @@
 import { FC } from 'react';
-import { InputType, IFormElement } from 'types';
+import { InputType, IFormElement } from '../../types';
 export interface IInputTextProps extends IFormElement {
     type: InputType;
-    name: string;
     handleChange: (name: string, value: string | number) => void;
-    error?: string;
     placeholder?: string;
 }
 export declare const InputText: FC<IInputTextProps>;

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

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import { TitlePosition } from '../../types';
+export interface ISectionProps {
+    title?: string;
+    children: React.ReactNode;
+    titlePosition?: TitlePosition;
+}
+export declare const Section: FC<ISectionProps>;

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

@@ -0,0 +1,8 @@
+import { TitlePosition } from '../../types';
+export declare const SectionElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface ISectionTitleSyle {
+    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 {};

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

@@ -0,0 +1 @@
+export * from './Section';

package/dist/types/index.d.ts

@@ -6,6 +6,7 @@ export * from './components/ElementHeader';
 export * from './components/Icons';
 export * from "./components/InputText";
 export * from './components/Modal';
+export * from './components/Section';
 export * from './components/Sidepanel';
 export * from './components/Tile';
 export * from './components/Typography';

package/dist/types/types/types.d.ts

@@ -2,12 +2,15 @@ export declare type ButtonVariant = 'ghost' | 'primary' | 'inverse';
 export declare type InputSize = 'large' | 'medium' | 'small' | 'xsmall';
 export declare type InputType = "text" | "password" | "email" | "number";
 export declare type LabelPosition = "top" | "left";
+export declare type TitlePosition = "left" | "center" | "right";
 export interface IFormElement {
     label?: string;
     labelPosition?: LabelPosition;
-    value: string | number;
+    value?: string | number;
     name: string;
     size?: InputSize;
     width?: string;
     disabled?: boolean;
+    error?: string;
+    placeholder?: string;
 }

package/package.json

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