@q2devel/q2-storybook 1.0.101 → 1.0.102

package/dist/components/Forms/contact-form/ContactForm.d.ts

@@ -17,5 +17,6 @@ export type ContactFormProps = {
     onSubmit?: (data: ContactFormData) => void;
     subject?: string;
     webformId?: string;
+    label?: string;
 };
-export default function ContactForm({ title, darkMode, backgroundColor, textColor, buttonText, onSubmit, subject, webformId, }: ContactFormProps): import("react/jsx-runtime").JSX.Element;
+export default function ContactForm({ title, darkMode, backgroundColor, textColor, buttonText, onSubmit, subject, webformId, label }: ContactFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Forms/contact-form/ContactForm.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import TextField from "../text-field/TextField";
 import TextArea from "../text-area/TextArea";
-export default function ContactForm({ title, darkMode = false, backgroundColor, textColor, buttonText = "ODESLAT", onSubmit, subject, webformId = "contact", }) {
+export default function ContactForm({ title, darkMode = false, backgroundColor, textColor, buttonText = "ODESLAT", onSubmit, subject, webformId = "contact", label = "Souhlas s použitím osobních údajů" }) {
     const [agreed, setAgreed] = useState(false);
     const [formData, setFormData] = useState({
         webform_id: webformId,
@@ -74,8 +74,8 @@ export default function ContactForm({ title, darkMode = false, backgroundColor,
     };
     const iconPaths = darkMode ? iconPathsDark : iconPathsLight;
     const styles = colorMap[darkMode ? "dark" : "light"] ?? colorMap.dark;
-    return (_jsxs("form", { onSubmit: handleSubmit, className: `${styles.background} ${styles.text} py-6 md:py-10 rounded-md mx-auto space-y-6`, children: [title && (_jsxs("h2", { className: styles.titleStyle, children: [title.split(" ").slice(0, -1).join(" "), " ", _jsx("span", { className: "text-[#c26b38]", children: title.split(" ").slice(-1) })] })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(TextField, { type: "text", placeholder: "Jm\u00E9no", required: true, variant: "flat", color: styles.colorMode, value: formData.name, onChange: (e) => handleInputChange("name", e.target.value), leftIcon: _jsx("img", { src: iconPaths.person, alt: "User icon", className: `min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "text", placeholder: "Firma", variant: "flat", color: styles.colorMode, value: formData.company, onChange: (e) => handleInputChange("company", e.target.value), leftIcon: _jsx("img", { src: iconPaths.person, alt: "Office icon", className: `min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "email", placeholder: "Email", required: true, variant: "flat", color: styles.colorMode, value: formData.email, onChange: (e) => handleInputChange("email", e.target.value), leftIcon: _jsx("img", { src: iconPaths.mail, alt: "Envelope icon", className: `min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "text", placeholder: "Telefon", required: true, variant: "flat", color: styles.colorMode, value: formData.phone, onChange: (e) => handleInputChange("phone", e.target.value), pattern: "[\\+]?[0-9\\s\\-\\(\\)]{12,}", title: "Zadejte kompletn\u00ED telefonn\u00ED \u010D\u00EDslo (minim\u00E1ln\u011B 9 \u010D\u00EDslic)", leftIcon: _jsx("img", { src: iconPaths.phone, alt: "Phone icon", className: `min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsxs("div", { className: "md:col-span-2 relative", children: [subject ? (_jsxs("div", { className: "absolute left-2 top-0 -ml-3 -mt-8 flex items-center", children: [_jsx("img", { src: iconPaths.messages, alt: "Message icon", className: `min-h-9.5 min-w-9.5 ${styles.icon}` }), _jsx("span", { className: "text-sm", children: subject })] })) : (_jsx("img", { src: iconPaths.messages, alt: "Message icon", className: `absolute left-2 top-0 min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` })), _jsx(TextArea, { id: "message", placeholder: "Zpr\u00E1va...", variant: "flat", color: styles.colorMode, value: formData.message, required: true, onChange: (e) => handleInputChange("message", e.target.value), className: `pl-8 pt-2 w-full ${styles.placeholder}` })] })] }), _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("input", { id: "agree", type: "checkbox", checked: agreed, onChange: () => {
+    return (_jsxs("form", { onSubmit: handleSubmit, className: `${styles.background} ${styles.text} py-6 md:py-10 rounded-md mx-auto space-y-6`, children: [title && (_jsxs("h2", { className: styles.titleStyle, children: [title.split(" ").slice(0, -1).join(" "), " ", _jsx("span", { className: "text-[#c26b38]", children: title.split(" ").slice(-1) })] })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(TextField, { type: "text", placeholder: "Jm\u00E9no", required: true, variant: "flat", color: styles.colorMode, value: formData.name, onChange: (e) => handleInputChange("name", e.target.value), leftIcon: _jsx("img", { src: iconPaths.person, alt: "User icon", className: `min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "text", placeholder: "Firma", variant: "flat", color: styles.colorMode, value: formData.company, onChange: (e) => handleInputChange("company", e.target.value), leftIcon: _jsx("img", { src: iconPaths.person, alt: "Office icon", className: `min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "email", placeholder: "Email", required: true, variant: "flat", color: styles.colorMode, value: formData.email, onChange: (e) => handleInputChange("email", e.target.value), leftIcon: _jsx("img", { src: iconPaths.mail, alt: "Envelope icon", className: `min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "text", placeholder: "Telefon", required: true, variant: "flat", color: styles.colorMode, value: formData.phone, onChange: (e) => handleInputChange("phone", e.target.value), pattern: "[\\+]?[0-9\\s\\-\\(\\)]{9,}", title: "Zadejte kompletn\u00ED telefonn\u00ED \u010D\u00EDslo (minim\u00E1ln\u011B 9 \u010D\u00EDslic)", leftIcon: _jsx("img", { src: iconPaths.phone, alt: "Phone icon", className: `min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsxs("div", { className: "md:col-span-2 relative", children: [subject ? (_jsxs("div", { className: "absolute left-2 top-0 -ml-3 -mt-8 flex items-center", children: [_jsx("img", { src: iconPaths.messages, alt: "Message icon", className: `min-h-9.5 min-w-9.5 ${styles.icon}` }), _jsx("span", { className: "text-sm", children: subject })] })) : (_jsx("img", { src: iconPaths.messages, alt: "Message icon", className: `absolute left-2 top-0 min-h-9.5 min-w-9.5 -ml-3 ${styles.icon}` })), _jsx(TextArea, { id: "message", placeholder: "Zpr\u00E1va...", variant: "flat", color: styles.colorMode, value: formData.message, required: true, onChange: (e) => handleInputChange("message", e.target.value), className: `pl-8 pt-2 w-full ${styles.placeholder}` })] })] }), _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("input", { id: "agree", type: "checkbox", checked: agreed, onChange: () => {
                             setAgreed(!agreed);
                             handleInputChange("agreed", !agreed);
-                        }, className: `bg-transparent border ${styles.border} rounded-sm ${styles.checkbox}` }), _jsx("label", { htmlFor: "agree", className: "text-sm", children: "Souhlas s pou\u017Eit\u00EDm osobn\u00EDch \u00FAdaj\u016F" })] }), _jsx("button", { type: "submit", className: `px-6 py-2 uppercase text-sm ${styles.button}`, children: buttonText })] }));
+                        }, className: `bg-transparent border cursor-pointer ${styles.border} rounded-sm ${styles.checkbox}` }), _jsx("label", { htmlFor: "agree", className: "text-sm", children: label })] }), _jsx("button", { type: "submit", className: `px-6 py-2 uppercase text-sm cursor-pointer ${styles.button}`, children: buttonText })] }));
 }

package/dist/components/Web/web-section/WebSection.js

@@ -20,7 +20,7 @@ function WebSection({ imagePosition = "left", imagePath, title, subtitle, paragr
         width: `${(cols / 12) * 100}%`,
     });
     const fitClass = `object-${objectFit}`;
-    return (_jsxs("div", { className: clsx("w-full bg-white", isHorizontal ? "flex flex-col lg:flex-row" : "flex flex-col", containerClassName), children: [_jsx("div", { className: clsx("w-full", isHorizontal && isImageFirst
+    return (_jsxs("div", { className: clsx("w-full bg-white", isHorizontal ? "flex flex-col lg:flex-row" : "flex flex-col", containerClassName), children: [_jsx("div", { className: clsx("w-full h-full", isHorizontal && isImageFirst
                     ? getColWidthClass(imageWidthColumns)
                     : "", isHorizontal && !isImageFirst
                     ? getColWidthClass(textWidthColumns)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@q2devel/q2-storybook",
-    "version": "1.0.101",
+    "version": "1.0.102",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",