From e751828b3bc07d21fc537b97e1b531a94a77fd70 Mon Sep 17 00:00:00 2001
From: Julian Cataldo <contact@juliancataldo.com>
Date: Thu, 28 Dec 2023 00:44:24 +0100
Subject: [PATCH] feat: submit button custom text

Via widget API and form element prop./attr.
See #7
---
 README.md                               |  2 +-
 packages/carbon/src/widgets/submit.ts   |  4 +++-
 packages/form/src/json-schema-form.ts   | 11 ++++++++---
 packages/material/src/widgets/submit.ts |  4 +++-
 packages/shoelace/src/widgets/submit.ts |  4 +++-
 packages/spectrum/src/widgets/submit.ts |  4 +++-
 packages/system/src/widgets/submit.ts   |  2 +-
 packages/types/src/widgets.ts           |  2 +-
 packages/wired/src/widgets/submit.ts    |  6 +++---
 9 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 42e8b44..600cc5c 100644
--- a/README.md
+++ b/README.md
@@ -922,7 +922,7 @@ I encourage you to contribute,
 like people did for the [React JSON Schema Form](https://github.com/rjsf-team/react-jsonschema-form) project.  
 Core maintainers are working on the reference implementation, and community can add things of their interest.
 
-If you want to enhance the lib. by supporting for more fields, it's quite easy!  
+If you want to enhance the lib. by bringing support for more fields, it's quite easy!  
 Just take a peek on the [Shoelace package](./packages/shoelace),
 which is the canonical implementation (meaning it's the most complete, API-wise).  
 Then, you are welcome to make a pull request with new features, or bug fixes.
diff --git a/packages/carbon/src/widgets/submit.ts b/packages/carbon/src/widgets/submit.ts
index dfe522e..2df7e6d 100644
--- a/packages/carbon/src/widgets/submit.ts
+++ b/packages/carbon/src/widgets/submit.ts
@@ -7,6 +7,8 @@ import '@carbon/web-components/es/components/button/index.js';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-carbon widget-submit">
-		<cds-button type="submit" isExpressive size="lg">Submit</cds-button>
+		<cds-button type="submit" isExpressive size="lg"
+			>${options.label ?? 'Submit'}</cds-button
+		>
 	</div>
 `;
diff --git a/packages/form/src/json-schema-form.ts b/packages/form/src/json-schema-form.ts
index 085c625..fd43534 100644
--- a/packages/form/src/json-schema-form.ts
+++ b/packages/form/src/json-schema-form.ts
@@ -52,6 +52,8 @@ export class Jsf extends LitElement {
 
 	@property({ type: Boolean }) public submitButton = true;
 
+	@property({ type: String }) public submitButtonText = 'Submit';
+
 	@state() private _uiState: unknown = {};
 
 	protected _dig(
@@ -127,7 +129,7 @@ export class Jsf extends LitElement {
 				// return flag('allOf');
 			}
 
-			let nodeParsed = node;
+			const nodeParsed = node;
 
 			// if (currentNode.allOf) {
 			// 	node.allOf?.forEach((subSchema) => {
@@ -394,12 +396,15 @@ export class Jsf extends LitElement {
 	}
 
 	#submit = () => {
-		const options = { id: '__submit' };
+		const options: Widgets['submit'] = {
+			id: '__submit_button',
+			label: this.submitButtonLabel,
+		};
 		const error = 'Missing submit widget.';
 		return (
 			this.widgets?.submit?.(options) ??
 			// systemWidgets?.submit?.(options) ??
-			this.widgets?.callout?.({ ...options, message: error }) ??
+			this.widgets?.callout?.({ message: error }) ??
 			error
 		);
 	};
diff --git a/packages/material/src/widgets/submit.ts b/packages/material/src/widgets/submit.ts
index 2d2ef8d..929262f 100644
--- a/packages/material/src/widgets/submit.ts
+++ b/packages/material/src/widgets/submit.ts
@@ -7,6 +7,8 @@ import '@material/web/button/filled-button.js';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-material widget-submit">
-		<md-filled-button type="submit">Submit</md-filled-button>
+		<md-filled-button type="submit"
+			>${options.submitButtonText ?? 'Submit'}</md-filled-button
+		>
 	</div>
 `;
diff --git a/packages/shoelace/src/widgets/submit.ts b/packages/shoelace/src/widgets/submit.ts
index d26bab6..77e742d 100644
--- a/packages/shoelace/src/widgets/submit.ts
+++ b/packages/shoelace/src/widgets/submit.ts
@@ -7,6 +7,8 @@ import '@shoelace-style/shoelace/dist/components/button/button.js';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-shoelace widget-submit">
-		<sl-button type="submit" size="large">Submit</sl-button>
+		<sl-button type="submit" size="large"
+			>${options.label ?? 'Submit'}</sl-button
+		>
 	</div>
 `;
diff --git a/packages/spectrum/src/widgets/submit.ts b/packages/spectrum/src/widgets/submit.ts
index 56dab7f..78f69d7 100644
--- a/packages/spectrum/src/widgets/submit.ts
+++ b/packages/spectrum/src/widgets/submit.ts
@@ -7,6 +7,8 @@ import '@spectrum-web-components/button/sp-button.js';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-spectrum widget-submit">
-		<sp-button type="submit" size="large">Submit</sp-button>
+		<sp-button type="submit" size="large"
+			>${options.label ?? 'Submit'}</sp-button
+		>
 	</div>
 `;
diff --git a/packages/system/src/widgets/submit.ts b/packages/system/src/widgets/submit.ts
index a66725d..ca53a78 100644
--- a/packages/system/src/widgets/submit.ts
+++ b/packages/system/src/widgets/submit.ts
@@ -5,6 +5,6 @@ import type { Widgets } from '@jsfe/types';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-system widget-submit">
-		<button type="submit">Submit</button>
+		<button type="submit">${options.label ?? 'Submit'}</button>
 	</div>
 `;
diff --git a/packages/types/src/widgets.ts b/packages/types/src/widgets.ts
index ae378e6..eee4d68 100644
--- a/packages/types/src/widgets.ts
+++ b/packages/types/src/widgets.ts
@@ -146,5 +146,5 @@ export interface Widgets {
 		type?: 'tip' | 'warning' | 'danger';
 	}>;
 
-	submit?: Widget<undefined>;
+	submit?: Widget<{ id?: string; label?: string }>;
 }
diff --git a/packages/wired/src/widgets/submit.ts b/packages/wired/src/widgets/submit.ts
index 504122d..557bb39 100644
--- a/packages/wired/src/widgets/submit.ts
+++ b/packages/wired/src/widgets/submit.ts
@@ -1,9 +1,9 @@
+import 'wired-elements/lib/wired-button.js';
+
 import { html } from 'lit';
 
 import type { Widgets } from '@jsfe/types';
 
-import 'wired-elements/lib/wired-button.js';
-
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-wired widget-submit">
@@ -13,7 +13,7 @@ export const submit: Widgets['submit'] = (options) => html`
 			@click=${(event: Event) =>
 				// FIXME: !!!
 				event.target?.dispatchEvent(new Event('submit', { bubbles: true }))}
-			>Submit</wired-button
+			>${options.label ?? 'Submit'}</wired-button
 		>
 	</div>
 `;