@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-form/eds-form.css

@@ -43,7 +43,7 @@
 
 .f-heading-04 {
   font-family: var(--f-heading-04-fontFamily);
-  font-weight: var(--f-heading-04-fontWeight);
+  font-weight: 600;
   font-size: var(--f-heading-04-fontSize);
   line-height: var(--f-heading-04-lineHeight);
   letter-spacing: var(--f-heading-04-letterSpacing);
@@ -51,14 +51,19 @@
 
 .f-heading-05 {
   font-family: var(--f-heading-05-fontFamily);
-  font-weight: var(--f-heading-05-fontWeight);
+  font-weight: 600;
   font-size: var(--f-heading-05-fontSize);
   line-height: var(--f-heading-05-lineHeight);
   letter-spacing: var(--f-heading-05-letterSpacing);
+  overflow: visible;
 }
 
 .text-light {
-  color: var(--grey-700);
+  color: var(--grey-dark);
+}
+
+.rounded-xs {
+  border-radius: 4px;
 }
 
 .rounded-sm {
@@ -73,6 +78,10 @@
   border-width: 2px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .mt-20 {
   margin-top: 1.25rem;
 }
@@ -81,6 +90,10 @@
   margin-top: 2rem;
 }
 
+.mt-64 {
+  margin-top: 4rem;
+}
+
 .mb-32 {
   margin-bottom: 2rem;
 }
@@ -89,6 +102,14 @@
   padding-top: 1.75rem;
 }
 
+.pt-32 {
+  padding-top: 2rem;
+}
+
+.pt-64 {
+  padding-top: 4rem;
+}
+
 .pl-8 {
   padding-left: 0.5rem;
 }
@@ -109,6 +130,10 @@
   row-gap: 1rem;
 }
 
+.gap-y-20 {
+  row-gap: 1.25rem;
+}
+
 .gap-y-24 {
   row-gap: 1.5rem;
 }
@@ -122,6 +147,23 @@
   background-color: var(--white);
 }
 
+.form-brand {
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  border-left: 4px solid var(--brand-green);
+  animation: fadeInUp 0.6s ease;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .effect-shadow {
   transition-property: box-shadow;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -142,7 +184,7 @@
 .effect-focus-within {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 
 .effect-focus-within:focus-within {
@@ -153,6 +195,10 @@
   position: relative;
 }
 
+.rounded-sm {
+  border-radius: 8px;
+}
+
 .rounded-lg {
   border-radius: 16px;
 }
@@ -162,10 +208,60 @@
   padding-right: 1rem;
 }
 
+.pb-4 {
+  padding-bottom: 0.25rem;
+}
+
 .pb-16 {
   padding-bottom: 1rem;
 }
 
 .p-32 {
   padding: 2rem;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.items-center {
+  align-items: center;
+}
+
+@media (min-width: 750px) {
+  .md\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
+  .md\:gap-y-0 {
+    row-gap: 0;
+  }
+
+  .md\:w-auto {
+    width: auto;
+  }
+
+  .md\:mt-64 {
+    margin-top: 4rem;
+  }
+
+  .md\:pt-64 {
+    padding-top: 4rem;
+  }
 }

package/dist/collection/components/eds-form/eds-form.js

@@ -25,6 +25,8 @@ export class EdsForm {
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
         this.buttonIntent = 'primary';
+        this.clearBtn = false;
+        this.clearBtnLabel = 'Clear';
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.fields = [];
         this.groups = [];
@@ -198,8 +200,24 @@ export class EdsForm {
             formData.set('form_url', window.location.href);
         }
         Object.keys(this.values).forEach((key) => {
-            // Append each key-value pair to the FormData object.
-            formData.append(key, this.values[key]);
+            const value = this.values[key];
+            // Handle File arrays (from file inputs)
+            if (Array.isArray(value)) {
+                // Check if it's a File array (could be empty or have files)
+                if (value.length === 0 || value[0] instanceof File) {
+                    // Append each file, or skip if empty array
+                    value.forEach((file) => formData.append(key, file));
+                    return;
+                }
+            }
+            // Handle single File
+            if (value instanceof File) {
+                formData.append(key, value);
+            }
+            // Handle all other values (string, number, boolean, etc.)
+            else if (value !== undefined && value !== null) {
+                formData.append(key, value);
+            }
         });
         // 2) Only do the (slower) DOM scan if we actually have file fields in the config
         const hasFileField = (_a = this.parsedFields) === null || _a === void 0 ? void 0 : _a.some((f) => (f === null || f === void 0 ? void 0 : f.type) === 'file');
@@ -212,7 +230,6 @@ export class EdsForm {
                     return;
                 }
                 const fileInputs = Array.from(root.querySelectorAll('input[type="file"][name]'));
-                console.log(fileInputs);
                 fileInputs.forEach((fi) => {
                     const name = fi.name;
                     const files = fi.files ? Array.from(fi.files) : [];
@@ -239,33 +256,41 @@ export class EdsForm {
         return formData;
     }
     handleChange(e, field) {
-        const target = e.target;
-        let newValue = target.value;
-        if (target.type === 'checkbox') {
-            // Get the current comma separated string or default to an empty string.
-            const currentStr = this.values[field.name] || '';
-            // Convert the string into an array. If the string is empty, we get an empty array.
-            let valuesArray = currentStr ? currentStr.split(',') : [];
-            if (target.checked) {
-                // Only add if it's not already in the array.
-                if (!valuesArray.includes(target.value)) {
-                    valuesArray.push(target.value);
+        let newValue;
+        // Check if it's a CustomEvent (from eds-input-field or eds-kg-web-services-select)
+        if (e instanceof CustomEvent && e.detail && 'value' in e.detail) {
+            newValue = e.detail.value;
+        }
+        else {
+            // Handle native events
+            const target = e.target;
+            newValue = target.value;
+            if (target.type === 'checkbox') {
+                // Get the current comma separated string or default to an empty string.
+                const currentStr = this.values[field.name] || '';
+                // Convert the string into an array. If the string is empty, we get an empty array.
+                let valuesArray = currentStr ? currentStr.split(',') : [];
+                if (target.checked) {
+                    // Only add if it's not already in the array.
+                    if (!valuesArray.includes(target.value)) {
+                        valuesArray.push(target.value);
+                    }
+                }
+                else {
+                    // Remove the value from the array if the checkbox is unchecked.
+                    valuesArray = valuesArray.filter((item) => item !== target.value);
                 }
+                newValue = valuesArray.join(',');
             }
-            else {
-                // Remove the value from the array if the checkbox is unchecked.
-                valuesArray = valuesArray.filter((item) => item !== target.value);
+            else if (target.type === 'radio') {
+                if (!target.checked) {
+                    return;
+                } // Only react to the selected radio
+                newValue = target.value;
             }
-            newValue = valuesArray.join(',');
-        }
-        else if (target.type === 'radio') {
-            if (!target.checked) {
-                return;
-            } // Only react to the selected radio
-            newValue = target.value;
         }
         this.values = Object.assign(Object.assign({}, this.values), { [field.name]: newValue });
-        // If it’s the password field, return here for no event emission
+        // If it's the password field, return here for no event emission
         if (field.name === 'password') {
             return;
         }
@@ -279,17 +304,25 @@ export class EdsForm {
         });
     }
     handleInput(e, field) {
-        const target = e.target;
-        if (target.type === 'radio' && !target.checked) {
-            return;
+        let newValue;
+        // Check if it's a CustomEvent (from eds-input-field or eds-kg-web-services-select)
+        if (e instanceof CustomEvent && e.detail && 'value' in e.detail) {
+            newValue = e.detail.value;
+        }
+        else {
+            // Handle native events
+            const target = e.target;
+            if (target.type === 'radio' && !target.checked) {
+                return;
+            }
+            newValue = target.value;
         }
-        const newValue = target.value;
         // Update the field's value in state.
-        //this.values = { ...this.values, [field.name]: target.value };
+        //this.values = { ...this.values, [field.name]: newValue };
         // Create a copy of the current errors.
         const newErrors = Object.assign({}, this.errors);
         // Use the utility to validate the field.
-        const fieldErrors = validateInputField(field, target.value, this.formEl);
+        const fieldErrors = validateInputField(field, newValue, this.formEl);
         if (fieldErrors.length > 0) {
             newErrors[field.name] = fieldErrors;
         }
@@ -400,6 +433,51 @@ export class EdsForm {
         this.isSubmitting = false;
         return;
     }
+    handleClear(e) {
+        var _a, _b;
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        // Reset form element
+        this.formEl.reset();
+        // Clear values state - create new object reference to trigger re-render
+        // This will automatically reset rating and nps components through prop changes
+        this.values = Object.assign({});
+        // Clear errors
+        this.errors = {};
+        this.hasError = false;
+        // Query all input fields in the shadow DOM and manually reset them
+        // This is needed because shadow DOM isolates the fields from form.reset()
+        const inputFields = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-input-field');
+        inputFields === null || inputFields === void 0 ? void 0 : inputFields.forEach((field) => {
+            var _a;
+            if (field) {
+                const inputEl = (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input, select, textarea');
+                if (inputEl) {
+                    const inputType = inputEl.type;
+                    // Handle checkboxes and radios - they need 'checked' property
+                    if (inputType === 'checkbox' || inputType === 'radio') {
+                        inputEl.checked = false;
+                    }
+                    else {
+                        // Handle text, select, textarea, date, number, email, etc.
+                        inputEl.value = '';
+                    }
+                }
+            }
+        });
+        // Emit event
+        this.form.emit({
+            event: 'change',
+            message: 'Form cleared',
+            success: true
+        });
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: `${(_b = this.clearBtnLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}/clear` || '',
+            action: 'click'
+        });
+    }
     get groupedFields() {
         const map = {};
         // initialize buckets for each declared group
@@ -420,7 +498,7 @@ export class EdsForm {
         return map;
     }
     renderField(field) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!this.isFieldVisible(field)) {
             return null;
         }
@@ -431,9 +509,14 @@ export class EdsForm {
             return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         else if (field.type === 'nps') {
-            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
+            // pull the current value (or null)
+            const val = this.values[field.name] !== undefined ? this.values[field.name] : null;
+            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
+        }
+        else if (field.type === 'kg-web-service') {
+            return (h("eds-kg-web-services-select", { key: field.name, name: field.name, label: field.label, "api-endpoint": field.apiEndpoint || '/api/v1/kg/web-services/cached', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), value: this.values[field.name], size: field.size || 500, onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
         }
-        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
+        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
     async getData() {
         return this.makeFormData();
@@ -442,13 +525,20 @@ export class EdsForm {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
         const buckets = this.groupedFields;
-        // build the shadow/bg classes if formStyle="shadow"
-        const styleClasses = this.formStyle === 'shadow'
-            ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
-            : '';
-        return (h("form", { key: 'a4b6cf51242567739fc3ff2da482c41edb4e4e57', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '5f7e1d618f8a10a1cd6aa8d512c04064a484cd93', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '283d752d3e9f4ede0f50493ba9e5010376ebfb1f', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: 'bd5866482b87bdc86a59594b884a9b81c676afdb', class: "f-body-02 text-light" }, this.description), h("slot", { key: 'b2de746ccf8743fdef545a70ab111dfff0d7912f' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        // build the styling classes based on formStyle prop
+        let styleClasses = '';
+        if (this.formStyle === 'default') {
+            styleClasses = 'bg-inverse border-softer relative rounded-xs border-2 p-32';
+        }
+        else if (this.formStyle === 'shadow') {
+            styleClasses = 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-xs border-2 p-32';
+        }
+        else if (this.formStyle === 'brand') {
+            styleClasses = 'bg-inverse form-brand relative rounded-xs p-32';
+        }
+        return (h("form", { key: '5e58460e52950974cdf11001123f9ffb23dc659e', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'ff3a33e3a8d311c86712daa68c80aac767d82a9b', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (h("span", { key: 'b1f363c03074f944a8f60387a40cef6fa791b188', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && h("span", { key: '7a9b5ea5451cf59ac47ec81dd1a44c7c9e6326a3', class: "f-body-02 text-light" }, this.description), h("slot", { key: '1e50a245fa37b73149a22308fda4039051d4639c' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '917c5bd2e6048a91487f0a66bd0426e529295f9e', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '96abbd19ea2869c21146f0b37da7ff6b89fbf66c', class: "mt-32" }, h("eds-button", { key: '066348df32cf27fc6e56c94b9d5c455bc51b4adf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '6cd08f342c0f9004d10628827720cb641339fcd5', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (h("div", { key: 'e8d37bedbd49c9fc94cbd2e2a887448f3764b8f9', class: "mt-32 md:mt-64 flex flex-col items-center md:flex-row-reverse md:justify-between gap-y-16 md:gap-y-0" }, this.formBtn && (h("eds-button", { key: 'ec878c5edaa87cf9bff0424b92e5c82605856e67', intent: this.buttonIntent, pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: 'arrow-right', size: "large", onClick: () => this.handleSubmit() })), this.clearBtn && (h("eds-button", { key: '1158dc2af47f9f523ccd2ee1435a4147fc0a646c', intent: "neutral", pill: true, size: "large", label: this.clearBtnLabel, disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: (e) => this.handleClear(e) }))))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }
@@ -576,20 +666,56 @@ export class EdsForm {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost'",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Variant/style intent for the submit button (e.g., primary, secondary, tertiary, ghost)."
+                    "text": "Variant/style intent for the submit button (e.g., primary, secondary)."
                 },
                 "attribute": "button-intent",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
+            "clearBtn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, includes a clear/reset button in the form."
+                },
+                "attribute": "clear-btn",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clearBtnLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the clear button"
+                },
+                "attribute": "clear-btn-label",
+                "reflect": false,
+                "defaultValue": "'Clear'"
+            },
             "errorMessage": {
                 "type": "string",
                 "mutable": false,
@@ -664,15 +790,15 @@ export class EdsForm {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'shadow'",
-                    "resolved": "\"default\" | \"shadow\"",
+                    "original": "'default' | 'shadow' | 'brand'",
+                    "resolved": "\"brand\" | \"default\" | \"shadow\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Choose between default layout or an always-shadow style.\nWhen \"shadow\", the form gets the same effect-shadow + shadow-hover classes"
+                    "text": "Choose between default layout, shadow style, or brand style.\n- \"default\": Standard form layout\n- \"shadow\": Form with shadow effect\n- \"brand\": EBRAINS branded form with left border and shadow"
                 },
                 "attribute": "form-style",
                 "reflect": false,

package/dist/collection/components/eds-form/eds-form.stories.js

@@ -3,7 +3,6 @@ export default {
     title: 'Components/Form',
     component: 'eds-form',
     argTypes: {
-        name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
         title: { control: 'text', description: 'Form title displayed above the form' },
         description: { control: 'text', description: 'Form description displayed below the title' },
         fields: {
@@ -26,7 +25,7 @@ export default {
         },
         buttonIntent: {
             control: { type: 'select' },
-            options: ['primary', 'secondary', 'tertiary', 'ghost'],
+            options: ['primary', 'secondary'],
             description: 'Variant/style intent for the submit button'
         },
         formStyle: {
@@ -37,13 +36,12 @@ export default {
 };
 const Template = (args) => html `
   <eds-form
-    name="${args.name}"
+    name="form-name"
     title="${args.title}"
     description="${args.description}"
     .fields=${args.fields}
     .groups=${args.groups}
     .initData=${args.initData}
-    .setFormUrl=${args.setFormUrl}
     form-btn="${args.formBtn}"
     form-btn-label="${args.formBtnLabel}"
     button-intent="${args.buttonIntent}"
@@ -52,7 +50,6 @@ const Template = (args) => html `
 `;
 export const Default = Template.bind({});
 Default.args = {
-    name: 'extended-form',
     title: 'User Details',
     description: 'Please fill out the form below.',
     fields: [
@@ -108,7 +105,6 @@ Default.args = {
             disabled: true
         }
     ],
-    setFormUrl: true,
     formBtn: true,
     formBtnLabel: 'Validate',
     buttonIntent: 'primary',
@@ -116,7 +112,6 @@ Default.args = {
 };
 export const WithGroups = Template.bind({});
 WithGroups.args = {
-    name: 'grouped-form',
     title: 'Grouped Form',
     description: 'Form with grouped fields',
     fields: [
@@ -128,7 +123,6 @@ WithGroups.args = {
         { id: 'personal', title: 'Personal Info' },
         { id: 'comments', title: 'Comments' }
     ],
-    setFormUrl: true,
     formBtn: true,
     formBtnLabel: 'Submit',
     buttonIntent: 'secondary',
@@ -136,7 +130,6 @@ WithGroups.args = {
 };
 export const WithInitData = Template.bind({});
 WithInitData.args = {
-    name: 'prefill-form',
     title: 'Prefilled Form',
     description: 'Form with initial values',
     fields: [
@@ -148,9 +141,8 @@ WithInitData.args = {
         username: 'janedoe',
         email: 'jane.doe@example.com'
     },
-    setFormUrl: false,
     formBtn: true,
     formBtnLabel: 'Save',
-    buttonIntent: 'ghost',
+    buttonIntent: 'primary',
     formStyle: 'default'
 };