venice-ui 2.0.34 → 2.0.35

package/dist/cjs/Theme/Theme.js

@@ -26,6 +26,7 @@ exports.Theme = {
         red: '#ad1616'
     },
     fontSize: {
+        xxs: '10px',
         xs: "12px",
         s: "14px",
         m: "16px",
@@ -33,6 +34,7 @@ exports.Theme = {
         xl: "32px",
     },
     lineHeight: {
+        xxs: '12px',
         xs: "14px",
         s: "16px",
         m: "18px",

package/dist/cjs/components/File/File.js

@@ -30,7 +30,8 @@ const react_1 = __importStar(require("react"));
 const Button_1 = require("../Button");
 const File_styles_1 = require("./File.styles");
 const Dropdown_1 = require("../Dropdown");
-const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, }) => {
+const Typography_1 = require("../Typography");
+const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, subLabel }) => {
     const fileRef = (0, react_1.useRef)(null);
     const handleSelect = (e) => {
         handleChange(e);
@@ -41,9 +42,11 @@ const File = ({ label, labelPosition = 'top', name, disabled = false, multiple =
     return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
         label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         react_1.default.createElement(Input_1.InputWrapper, { width: width },
-            react_1.default.createElement(Aligment_1.Aligment, { gap: 10, wrap: "nowrap" },
-                react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
-                react_1.default.createElement(Button_1.Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
+            react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: 'column', gap: 2, align: 'start-flex' },
+                react_1.default.createElement(Aligment_1.Aligment, { gap: 10, wrap: "nowrap" },
+                    react_1.default.createElement(Dropdown_1.Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
+                    react_1.default.createElement(Button_1.Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
+                subLabel && react_1.default.createElement(Typography_1.TextMicro, null, subLabel)),
             react_1.default.createElement(File_styles_1.HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
             error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
 };

package/dist/cjs/components/Form/Form.js

@@ -43,17 +43,17 @@ const Form = ({ formData, size = 'medium', read }) => {
     const selectType = (item) => {
         switch (item.type) {
             case 'text':
-                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled }));
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error }));
             case 'number':
-                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled }));
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error }));
             case 'increase':
-                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
+                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error }));
             case 'select':
-                return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read }));
+                return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error }));
             case 'file':
-                return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
+                return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read, subLabel: item.subLabel, error: item.error }));
             case 'date':
-                return (react_1.default.createElement(DatePicker_1.DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler, zIndex: item.zIndex }));
+                return (react_1.default.createElement(DatePicker_1.DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler, zIndex: item.zIndex, error: item.error }));
         }
     };
     return (react_1.default.createElement(FormElements_1.FormWrapper, null, formData.data.map((item) => {

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLabel = exports.TextAccent = exports.TextSubHeader = exports.TextHeader = exports.TextSmall = exports.Text = void 0;
+exports.TextLabel = exports.TextAccent = exports.TextSubHeader = exports.TextHeader = exports.TextMicro = exports.TextSmall = exports.Text = void 0;
 const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme/Theme");
@@ -28,6 +28,13 @@ exports.TextSmall = styled_components_1.default.div `
   color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
   cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
+exports.TextMicro = styled_components_1.default.div `
+  font-size: ${Theme_1.Theme.fontSize.xxs};
+  line-height: ${Theme_1.Theme.lineHeight.xs};
+  font-weight: normal;
+  color: ${(p) => (p.color ? p.color : Theme_1.Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
+`;
 exports.TextHeader = styled_components_1.default.div `
   font-size: ${Theme_1.Theme.fontSize.l};
   line-height: ${Theme_1.Theme.lineHeight.l};

package/dist/esm/Theme/Theme.js

@@ -23,6 +23,7 @@ export const Theme = {
         red: '#ad1616'
     },
     fontSize: {
+        xxs: '10px',
         xs: "12px",
         s: "14px",
         m: "16px",
@@ -30,6 +31,7 @@ export const Theme = {
         xl: "32px",
     },
     lineHeight: {
+        xxs: '12px',
         xs: "14px",
         s: "16px",
         m: "18px",

package/dist/esm/components/File/File.js

@@ -4,7 +4,8 @@ import React, { useRef } from 'react';
 import { Button } from '../Button';
 import { HiddenField } from './File.styles';
 import { Field } from '../Dropdown';
-export const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, }) => {
+import { TextMicro } from '../Typography';
+export const File = ({ label, labelPosition = 'top', name, disabled = false, multiple = false, size = 'medium', handleChange, accept = 'application/pdf', width, error, placeholder, fileValue, subLabel }) => {
     const fileRef = useRef(null);
     const handleSelect = (e) => {
         handleChange(e);
@@ -15,9 +16,11 @@ export const File = ({ label, labelPosition = 'top', name, disabled = false, mul
     return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
         label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
         React.createElement(InputWrapper, { width: width },
-            React.createElement(Aligment, { gap: 10, wrap: "nowrap" },
-                React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
-                React.createElement(Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
+            React.createElement(Aligment, { wrap: "nowrap", direction: 'column', gap: 2, align: 'start-flex' },
+                React.createElement(Aligment, { gap: 10, wrap: "nowrap" },
+                    React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: false, error: error, onClick: openFileSelector }, fileValue ? fileValue.name : placeholder),
+                    React.createElement(Button, { size: size, mode: "secondary", onClick: openFileSelector, text: "Wybierz plik" })),
+                subLabel && React.createElement(TextMicro, null, subLabel)),
             React.createElement(HiddenField, { type: "file", name: name, onChange: (e) => handleSelect(e), ref: fileRef, accept: accept, multiple: multiple }),
             error && React.createElement(InputErrorMsg, null, error))));
 };

package/dist/esm/components/Form/Form.js

@@ -37,17 +37,17 @@ export const Form = ({ formData, size = 'medium', read }) => {
     const selectType = (item) => {
         switch (item.type) {
             case 'text':
-                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled }));
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error }));
             case 'number':
-                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled }));
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read, autoFocus: !!item.isDisabled && item.autofocus, handleSubmit: item.submit, disabled: item.isDisabled, error: item.error }));
             case 'increase':
-                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
+                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit, error: item.error }));
             case 'select':
-                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read }));
+                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex, readOnly: read, error: item.error }));
             case 'file':
-                return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
+                return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read, subLabel: item.subLabel, error: item.error }));
             case 'date':
-                return (React.createElement(DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler, zIndex: item.zIndex }));
+                return (React.createElement(DatePicker, { label: item.label, value: item.value, name: item.name, size: size, readOnly: read, handleChange: onDateChangeHandler, zIndex: item.zIndex, error: item.error }));
         }
     };
     return (React.createElement(FormWrapper, null, formData.data.map((item) => {

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

@@ -22,6 +22,13 @@ export const TextSmall = styled.div `
   color: ${(p) => (p.color ? p.color : Theme.colors.text)};
   cursor: ${(p) => (p.action ? 'pointer' : 'default')};
 `;
+export const TextMicro = styled.div `
+  font-size: ${Theme.fontSize.xxs};
+  line-height: ${Theme.lineHeight.xs};
+  font-weight: normal;
+  color: ${(p) => (p.color ? p.color : Theme.colors.text)};
+  cursor: ${(p) => (p.action ? 'pointer' : 'default')};
+`;
 export const TextHeader = styled.div `
   font-size: ${Theme.fontSize.l};
   line-height: ${Theme.lineHeight.l};

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

@@ -22,6 +22,7 @@ export declare const Theme: {
         red: string;
     };
     fontSize: {
+        xxs: string;
         xs: string;
         s: string;
         m: string;
@@ -29,6 +30,7 @@ export declare const Theme: {
         xl: string;
     };
     lineHeight: {
+        xxs: string;
         xs: string;
         s: string;
         m: string;

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

@@ -6,5 +6,6 @@ export interface IFileProps extends IFormElement {
     fileValue: File | null;
     multiple?: boolean;
     accept?: string;
+    subLabel?: string;
 }
 export declare const File: FC<IFileProps>;

package/dist/types/components/Form/formTypes.d.ts

@@ -13,6 +13,8 @@ export interface FormDataProps {
     position?: string;
     zIndex?: number;
     isDisabled?: boolean;
+    error?: string;
+    subLabel?: string;
 }
 interface FormDataParentProps {
     row: FormDataProps[];

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

@@ -6,6 +6,7 @@ interface ITextStyle {
 }
 export declare const Text: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
 export declare const TextSmall: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
+export declare const TextMicro: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
 export declare const TextHeader: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
 export declare const TextSubHeader: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;
 export declare const TextAccent: import("styled-components").StyledComponent<"div", any, ITextStyle, never>;

package/package.json

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