@@ -299,39 +288,13 @@ export default {
components: {
NavGroup,
},
- data() {
- return {
- openSubmenus: [],
- };
- },
methods: {
- /**
- * Should submenu be displayed?
- */
- displaySubmenu(component) {
- return (
- this.openSubmenus.includes(component) || this.pathIncludes(component)
- );
- },
-
/**
* Does the current route path include this component
*/
pathIncludes(component) {
return this.$route.path.includes('/component/' + component);
},
-
- /**
- * Open/close a submenu in the nav
- */
- toggleSubmenu(component) {
- if (this.openSubmenus.includes(component)) {
- const i = component.indexOf(component);
- this.openSubmenus.splice(i, 1);
- } else {
- this.openSubmenus.push(component);
- }
- },
},
};
@@ -426,9 +389,9 @@ a {
margin-bottom: 3rem;
margin-left: auto;
margin-right: auto;
- max-width: 50em;
- font-size: @font-sml;
- line-height: 1.7em;
+ padding-left: 2em;
+ padding-right: 2em;
+ max-width: 54em;
p {
margin-top: 1.5rem;
@@ -445,8 +408,8 @@ a {
background: #f9f9f9;
border-radius: @radius;
padding: 0.125em 0.25em;
- color: #009e2b;
- font-size: @font-tiny;
+ color: #156f2d;
+ font-size: @font-sml;
}
h2,
@@ -500,8 +463,8 @@ a {
background: #f9f9f9;
border-radius: @radius;
padding: 0.125em 0.25em;
- color: #3fab5c;
- font-size: @font-tiny;
+ color: #156f2d;
+ font-size: @font-sml;
}
}
diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index 94b4fac78..39328d6cd 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -514,6 +514,9 @@ export default {
};
},
computed: {
+ /**
+ * A getter and setter to allow v-model on a prop
+ */
bccBinded: {
get() {
return this.bcc;
@@ -522,6 +525,11 @@ export default {
this.emitChange({bcc: newVal});
},
},
+
+ /**
+ * init prop to pass to the the rich text field
+ * component for the message body
+ */
bodyInit() {
if (!this.attachers.length) {
return {};
@@ -540,6 +548,10 @@ export default {
},
};
},
+
+ /**
+ * A getter and setter to allow v-model on a prop
+ */
ccBinded: {
get() {
return this.cc;
@@ -548,6 +560,7 @@ export default {
this.emitChange({cc: newVal});
},
},
+
/**
* Override the recipientName in the email variables
*
@@ -571,12 +584,24 @@ export default {
}
return variables;
},
+
+ /**
+ * A unique id for the file attacher component
+ */
fileAttacherModalId() {
return this.id + 'fileAttacher';
},
+
+ /**
+ * The first X items of email template search results
+ */
limitedSearchResults() {
return this.searchResults.slice(0, this.showSearchResultCount);
},
+
+ /**
+ * The recipient options with names in the current locale
+ */
localizedRecipientOptions() {
const locale = this.locale ?? $.pkp.app.currentLocale;
return this.recipientOptions.map((recipient) => {
@@ -586,15 +611,21 @@ export default {
};
});
},
+
+ /**
+ * The prepared content variables in the current locale
+ */
localizedVariables() {
return this.variables[this.locale] ? this.variables[this.locale] : [];
},
+
/**
- * A list of supported locales without the currently active locale
+ * A list of supported locales other than the currently active locale
*/
otherLocales() {
return this.locales.filter((locale) => locale.locale !== this.locale);
},
+
/**
* The names of all the recipients separated by a comma
*/
@@ -607,6 +638,10 @@ export default {
}
return name;
},
+
+ /**
+ * A getter and setter to allow v-model on a prop
+ */
subjectBinded: {
get() {
return this.subject;
@@ -615,6 +650,7 @@ export default {
this.emitChange({subject: newVal});
},
},
+
/**
* The recipient options that are currently
* set in the recipients array
@@ -628,6 +664,9 @@ export default {
methods: {
/**
* Add file attachments to the email
+ *
+ * @param {String} component The name of the `FileAttacher****` component used to attach files
+ * @param {Array} files The files attached to the email
*/
addAttachments(component, files) {
const attachments = [
@@ -664,6 +703,10 @@ export default {
/**
* Respond to change events from the recipient autosuggest field
+ *
+ * @param {String} name The `name` of the input field
+ * @param {String} prop The property that was changed.
+ * @param {String} value The new value for the property
*/
changeRecipients(name, prop, value) {
if (prop === 'value') {
@@ -675,6 +718,7 @@ export default {
* Get the icon to match this document type,
* such as PDF, Word, spreadsheet, etc.
*
+ * @param {Object} attachment The file attachment
* @return {String}
*/
getDocumentTypeIcon(attachment) {
@@ -687,6 +731,8 @@ export default {
/**
* Emit an event to change a prop
+ *
+ * @param {Object} data The props of this component that should change
*/
emitChange(data) {
this.$emit('set', this.id, data);
@@ -704,6 +750,8 @@ export default {
/**
* Get a plain text snippet of an email template's body
+ *
+ * @param {String} str An HTML string of the email template's body
*/
getBodySnippet(str) {
const length = 70;
@@ -718,6 +766,8 @@ export default {
/**
* Load an email template and update the subject/body
+ *
+ * @param {String} key The email template key
*/
loadTemplate(key) {
this.isLoadingTemplate = true;
@@ -768,6 +818,8 @@ export default {
/**
* Open a confirmation modal to change the locale
+ *
+ * @param {String} locale The requested locale
*/
openSwitchLocale(locale) {
const localeName = this.locales.find(
@@ -803,6 +855,8 @@ export default {
/**
* Remove a file attachment
+ *
+ * @param {Number} index The array index of the attachment to remove
*/
removeAttachment(index) {
this.emitChange({
@@ -835,43 +889,46 @@ export default {
return;
}
this.isSearching = true;
- this.latestSearchRequest = $.pkp.classes.Helper.uuid();
+ const uuid = $.pkp.classes.Helper.uuid();
+ this.latestSearchRequest = uuid;
this.showSearchResultCount = 10;
- var self = this;
$.ajax({
url: this.emailTemplatesApiUrl,
type: 'GET',
+ context: this,
data: {
searchPhrase: this.searchPhrase,
},
_uuid: this.latestSearchRequest,
error: function (r) {
// Only process latest request response
- if (self.latestSearchRequest !== this._uuid) {
+ if (this.latestSearchRequest !== uuid) {
return;
}
- self.ajaxErrorCallback(r);
+ this.ajaxErrorCallback(r);
},
success: function (r) {
// Only process latest request response
- if (self.latestSearchRequest !== this._uuid) {
+ if (this.latestSearchRequest !== uuid) {
return;
}
- self.searchResults = r.items;
+ this.searchResults = r.items;
},
complete() {
// Only process latest request response
- if (self.latestSearchRequest !== this._uuid) {
+ if (this.latestSearchRequest !== uuid) {
return;
}
- self.isSearching = false;
+ this.isSearching = false;
},
});
},
/**
* Emit an event to set the body of the email
+ *
+ * @param {String} value The new body value
*/
setBody(value) {
this.emitChange({body: value});
@@ -879,6 +936,8 @@ export default {
/**
* Emit an event to set the subject of the email
+ *
+ * @param {String} value The new subject value
*/
setSubject(value) {
this.emitChange({
@@ -889,6 +948,8 @@ export default {
/**
* Switch the current locale and load the default template
* in the new locale
+ *
+ * @param {String} locale The locale key to switch to. Example: `en`
*/
switchLocale(locale) {
this.emitChange({locale: locale});
@@ -896,7 +957,11 @@ export default {
},
/**
- * Update the padding of the to element to account for the CC button
+ * Update the padding of the "to" element to account for the CC button
+ *
+ * This makes sure that the input field does not run into the space occupied
+ * by the button to Add CC/BCC. The width of this button will change depending
+ * on the language, so it is calculated at run-time.
*/
updateToPadding() {
const inputEl = this.$el.querySelector('.pkpAutosuggest__inputWrapper');
diff --git a/src/components/Container/DecisionPage.vue b/src/components/Container/DecisionPage.vue
index 059f9c2a4..6a99049fe 100644
--- a/src/components/Container/DecisionPage.vue
+++ b/src/components/Container/DecisionPage.vue
@@ -36,7 +36,6 @@ export default {
decisionCompleteLabel: '',
decisionCompleteDescription: '',
emailTemplatesApiUrl: '',
- fileGenres: [],
startedSteps: [],
isSubmitting: false,
keepWorkingLabel: '',
@@ -52,9 +51,16 @@ export default {
};
},
computed: {
+ /**
+ * The array index of the current step
+ */
currentStepIndex() {
return this.steps.findIndex((step) => step.id === this.currentStep.id);
},
+
+ /**
+ * Validation errors
+ */
errors() {
return this.steps
.filter(
@@ -71,16 +77,25 @@ export default {
return errors;
}, {});
},
+
+ /**
+ * Is the current step the first step?
+ */
isOnFirstStep() {
return 0 === this.currentStepIndex;
},
+
+ /**
+ * Is the current step the last step?
+ */
isOnLastStep() {
return this.currentStepIndex === this.steps.length - 1;
},
},
methods: {
/**
- * Cancel the decision and return to the submission
+ * Open a confirmation prompt to cancel the
+ * decision and return to the submission
*/
cancel() {
this.openDialog({
@@ -105,6 +120,10 @@ export default {
/**
* Copy a file to a new file stage
+ *
+ * @param {Number} fileId The submission file id
+ * @param {Number} toFileStage The file stage to copy the submission to
+ * @param {Function} callback A callback function to fire when the request finished successfully
*/
copyFile(fileId, toFileStage, callback) {
$.ajax({
@@ -127,13 +146,6 @@ export default {
});
},
- /**
- * Get the genre of a submission file
- */
- getFileGenre(genreId) {
- return this.fileGenres.find((genre) => genre.id === genreId);
- },
-
/**
* Go to the next step or submit if this is the last step
*/
@@ -174,6 +186,8 @@ export default {
/**
* Go to a step in the wizard
+ *
+ * @param {String} stepId The id of the step to go to
*/
openStep(stepId) {
this.startedSteps = [...new Set([...this.startedSteps, stepId])];
@@ -194,6 +208,8 @@ export default {
* Handle errors related to the decision request
*
* This method maps validation errors to their step.
+ *
+ * @param {Object} errors A key/value map of errors where each key represents a step index
*/
setStepErrors(errors) {
this.steps.forEach((step, index) => {
@@ -212,6 +228,8 @@ export default {
/**
* Skip a step and go to the next step or activate
* a skipped step
+ *
+ * @param {String} stepId The id of the step
*/
toggleSkippedStep(stepId) {
if (this.skippedSteps.includes(stepId)) {
@@ -235,10 +253,13 @@ export default {
/**
* Submit an editorial decision
+ *
+ * This posts the editorial decison and copies
+ * all selected files when a file promotion step
+ * exists.
*/
submit() {
this.isSubmitting = true;
- let self = this;
const steps = this.steps.filter(
(step) => !this.skippedSteps.includes(step.id)
);
@@ -293,6 +314,7 @@ export default {
$.ajax({
url: this.submissionApiUrl + '/decisions',
type: 'POST',
+ context: this,
data: data,
headers: {
'X-Csrf-Token': pkp.currentUser.csrfToken,
@@ -301,37 +323,37 @@ export default {
if (r.status && r.status === 400) {
// The decision is invalid
if (r.responseJSON.decision) {
- self.ajaxErrorCallback({
+ this.ajaxErrorCallback({
responseJSON: {
errorMessage: r.responseJSON.decision[0],
},
});
// An action is invalid
} else if (r.responseJSON.actions) {
- self.setStepErrors(r.responseJSON.actions);
+ this.setStepErrors(r.responseJSON.actions);
} else {
- self.ajaxErrorCallback(r);
+ this.ajaxErrorCallback(r);
}
} else {
- self.ajaxErrorCallback(r);
+ this.ajaxErrorCallback(r);
}
- self.isSubmitting = false;
+ this.isSubmitting = false;
},
success() {
if (!files.length) {
- self.isSubmitting = false;
- self.openCompletedDialog();
+ this.isSubmitting = false;
+ this.openCompletedDialog();
}
let copiedCount = 0;
const copyCompleted = () => {
copiedCount++;
if (copiedCount >= files.length) {
- self.openCompletedDialog();
+ this.openCompletedDialog();
clearInterval(copyCompleted);
}
};
files.forEach((file) =>
- self.copyFile(file.id, file.toFileStage, copyCompleted)
+ this.copyFile(file.id, file.toFileStage, copyCompleted)
);
},
});
@@ -339,6 +361,9 @@ export default {
/**
* Update the data attached to a step
+ *
+ * @param {String} stepId The id of the step to update
+ * @param {Object} data The data to update in the step
*/
updateStep(stepId, data) {
this.steps = this.steps.map((step) => {
@@ -369,11 +394,15 @@ export default {
},
},
created() {
- // Start step 1
if (this.steps.length) {
+ /**
+ * Start the first step
+ */
this.openStep(this.steps[0].id);
- // Set up email data for each email step
+ /**
+ * Set up email data for each email step
+ */
this.steps = this.steps.map((step) => {
if (step.type !== stepTypes.email) {
return step;
diff --git a/src/components/Container/ManageEmailsPage.vue b/src/components/Container/ManageEmailsPage.vue
index 4afa83851..f06f31570 100644
--- a/src/components/Container/ManageEmailsPage.vue
+++ b/src/components/Container/ManageEmailsPage.vue
@@ -20,7 +20,6 @@ export default {
currentMailable: {},
currentTemplate: {},
currentTemplateForm: {},
- customTemplates: [],
i18nRemoveTemplate: '',
i18nRemoveTemplateMessage: '',
i18nResetAll: '',
@@ -34,6 +33,10 @@ export default {
};
},
computed: {
+ /**
+ * Mailables currently visible in the list after
+ * search and filters applied
+ */
currentMailables() {
let newMailables = [...this.mailables];
@@ -66,6 +69,12 @@ export default {
},
},
methods: {
+ /**
+ * Add a filter to the active filters list
+ *
+ * @param {String} param The query param to effect
+ * @param {String|Number} value The value to add to the query param
+ */
addFilter(param, value) {
let newFilters = {...this.activeFilters};
if (!newFilters[param]) {
@@ -75,6 +84,12 @@ export default {
}
this.activeFilters = newFilters;
},
+
+ /**
+ * Open a confirmation dialog to remove a template
+ *
+ * @param {Object} template The template to remove
+ */
confirmRemoveTemplate(template) {
this.openDialog({
name: 'removeTemplate',
@@ -109,6 +124,10 @@ export default {
],
});
},
+
+ /**
+ * Open a confirmation dialog to reset all templates
+ */
confirmResetAll() {
this.openDialog({
name: 'resetAll',
@@ -141,6 +160,12 @@ export default {
],
});
},
+
+ /**
+ * Open a confirmation dialog to reset a template
+ *
+ * @param {Object} template The template to remove
+ */
confirmResetTemplate(template) {
this.openDialog({
name: 'resetTemplate',
@@ -172,6 +197,14 @@ export default {
],
});
},
+
+ /**
+ * Delete an email template
+ *
+ * @param {Object} template The template to remove
+ * @param {Function} onSuccess A callback function to fire when a success response is received
+ * @param {Function} onComplete A callback function to fire after any response is received
+ */
deleteTemplate(template, onSuccess, onComplete) {
$.ajax({
url: this.templatesApiUrl + '/' + template.key,
@@ -186,6 +219,13 @@ export default {
complete: onComplete,
});
},
+
+ /**
+ * Get a mailable from the API
+ *
+ * @param {Object} mailable The mailable to get from the API
+ * @param {Function} onSuccess A callback function to fire when a success response is received
+ */
getMailable(mailable, onSuccess) {
$.ajax({
url:
@@ -198,6 +238,13 @@ export default {
success: onSuccess,
});
},
+
+ /**
+ * Get an email template from the API
+ *
+ * @param {Object} template The template to get from the API
+ * @param {Function} onSuccess A callback function to fire when a success response is received
+ */
getTemplate(template, onSuccess) {
$.ajax({
url: this.templatesApiUrl + '/' + encodeURIComponent(template),
@@ -207,11 +254,22 @@ export default {
success: onSuccess,
});
},
+
+ /**
+ * Check if a filter is active
+ *
+ * @param {String} param The query param to check
+ * @param {String|Number} value The value of the query param to check
+ */
isFilterActive(param, value) {
return (
this.activeFilters[param] && this.activeFilters[param].includes(value)
);
},
+
+ /**
+ * Fired when the mailable modal is closed
+ */
mailableModalClosed() {
this.resetFocus();
setTimeout(() => {
@@ -219,6 +277,15 @@ export default {
this.currentTemplate = {};
}, 300);
},
+
+ /**
+ * Open the modal to edit a mailable
+ *
+ * If a mailable only has one template, this will open the
+ * email template modal instead.
+ *
+ * @param {Object} mailable The mailable to open
+ */
openMailable(mailable) {
if (mailable.supportsTemplates) {
this.getMailable(mailable, (mailable) => {
@@ -233,12 +300,26 @@ export default {
});
}
},
+
+ /**
+ * Open the modal to edit an email template
+ *
+ * @param {Object} template The template open
+ */
openTemplate(template) {
template = template || {};
this.resetFocusTo = document.activeElement;
this.currentTemplate = template;
this.$nextTick(() => this.$modal.show('template'));
},
+
+ /**
+ * Remove a filter from the active filters list
+ *
+ *
+ * @param {String} param The query param to effect
+ * @param {String|Number} value The value to remove from the query param
+ */
removeFilter(param, value) {
if (!this.activeFilters[param]) {
return;
@@ -247,11 +328,24 @@ export default {
newFilters[param] = newFilters[param].filter((v) => v !== value);
this.activeFilters = newFilters;
},
+
+ /**
+ * A helper function to move the focus back to the element
+ * it was last at. This is usually used with modals to restore
+ * the focus after a modal is closed.
+ */
resetFocus() {
if (this.resetFocusTo) {
this.resetFocusTo.focus();
}
},
+
+ /**
+ * Setup the form to edit an email template
+ *
+ * @param {Object} newTemplate The email template to set up the form.
+ * This will be empty if creating a new template.
+ */
setCurrentTemplateForm(newTemplate) {
// Get a deep copy of the form to eliminate references
let templateForm = JSON.parse(JSON.stringify(this.templateForm));
@@ -303,6 +397,12 @@ export default {
this.currentTemplateForm = templateForm;
},
+
+ /**
+ * Fired when the email template form has been saved
+ *
+ * @param {Object} template The updated values of the template
+ */
templateSaved(template) {
const exists =
this.currentMailable.emailTemplates.findIndex(
@@ -320,6 +420,10 @@ export default {
setTimeout(() => this.$modal.hide('template'), 1000);
},
+
+ /**
+ * Fired when the email template modal has been closed
+ */
templateModalClosed() {
if (this.currentMailable.supportsTemplates) {
this.resetFocus();
@@ -330,6 +434,13 @@ export default {
this.mailableModalClosed();
}
},
+
+ /**
+ * Sync the form data with user input
+ *
+ * @param {String} formId The id for the form. Unused
+ * @param {Object} data The form data to be updated
+ */
updateCurrentTemplateForm(formId, data) {
this.currentTemplateForm = {
...this.currentTemplateForm,
@@ -338,6 +449,10 @@ export default {
},
},
watch: {
+ /**
+ * Update the email template form whenever the current
+ * email template is changed
+ */
currentTemplate(newVal) {
this.setCurrentTemplateForm(newVal);
},
diff --git a/src/components/Container/Page.vue b/src/components/Container/Page.vue
index ddaf9e2f6..f6a41595a 100644
--- a/src/components/Container/Page.vue
+++ b/src/components/Container/Page.vue
@@ -1,17 +1,9 @@
+```
+
+## Localized Filenames
+
+When `
` makes the `POST` request to upload a file, it will send a `name` param that matches the filename.
+
+```json
+{
+ "name": "the-uploaded-filename.ext"
+}
+```
+
+If the name needs to be sent as [localized data](#/pages/localization), set the `filenameLocale` prop.
+
+```html
+
+```
+
+The request body will change to this.
+
+
+```json
+{
+ "name": {
+ "en": "the-uploaded-filename.ext"
+ }
+}
+```
diff --git a/src/docs/components/Filter/readme.md b/src/docs/components/Filter/readme.md
index 6a55fd5b6..d42859f05 100644
--- a/src/docs/components/Filter/readme.md
+++ b/src/docs/components/Filter/readme.md
@@ -38,7 +38,7 @@
## Usage
-Use this component when the user wants to narrow the items in a list by some criteria.
+Use this component when the user wants to narrow the items in a list by some criteria. This component is usually used with a [ListPanel](#/component/ListPanel).
## Using Filter Params and Values
@@ -69,7 +69,7 @@ Most filters should be able to be combined with other filters, so there may be m
```json
{
- stageIds: [2, 3],
- sectionIds: [1]
+ "stageIds": [2, 3],
+ "sectionIds": [1]
}
```
diff --git a/src/docs/components/Form/fields/FieldBase/readme.md b/src/docs/components/Form/fields/FieldBase/readme.md
index 84d04c3b1..fb7dbb2b7 100644
--- a/src/docs/components/Form/fields/FieldBase/readme.md
+++ b/src/docs/components/Form/fields/FieldBase/readme.md
@@ -24,10 +24,8 @@
| Key | Description |
| --- | --- |
-| `change` | Emitted when the value of the field changes. Payload: `(name, property, value, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the value changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code.
+| `change` | Emitted when a field prop changes. Payload: `(fieldName, propName, newValue, [localeKey])`. The `localeKey` will be null for fields that are not multilingual. This event is fired every time the `value` changes, so you should [debounce](https://www.npmjs.com/package/debounce) event callbacks that contain resource-intensive code.
## Usage
-This is a base component for all `Field*` components. The props described above are available for all `Field*` components.
-
-This component should *not* be used directly. It is presented for demonstration purposes only. Use one of the other form field components.
+This is a base component for all `` components. The props described above are available for all `` components. This component should *not* be used directly. It is presented for documentation purposes only. Use one of the other form field components.
diff --git a/src/docs/components/Form/fields/FieldColor/readme.md b/src/docs/components/Form/fields/FieldColor/readme.md
index 5fc92f93d..090dabd0f 100644
--- a/src/docs/components/Form/fields/FieldColor/readme.md
+++ b/src/docs/components/Form/fields/FieldColor/readme.md
@@ -11,4 +11,4 @@ See [FieldBase](#/component/Form/fields/FieldBase).
## Usage
-Use this component when you want the user to select a hex color value. This component is only recommended for use in theme settings, but in special circumstances may be used elsewhere.
+Use this component when you want the user to select a hex color value. This component is only recommended for use in theme settings.
diff --git a/src/docs/components/Form/fields/FieldOptions/readme.md b/src/docs/components/Form/fields/FieldOptions/readme.md
index b88127224..5da400cc1 100644
--- a/src/docs/components/Form/fields/FieldOptions/readme.md
+++ b/src/docs/components/Form/fields/FieldOptions/readme.md
@@ -18,9 +18,7 @@ Use this component for selecting one or more options from a list. If the list of
## Confirm fields and boolean values
-When using this component as a confirmation field, the `value` prop passed to the field should be `true` or `false`.
-
-This differs from the field's normal `value` type, which is an array.
+When using this component as a confirmation field, the `value` prop passed to the field should be `true` or `false`. This differs from the field's normal `value` type, which is an array.
## Orderable options
diff --git a/src/docs/components/Form/fields/FieldPreparedContent/readme.md b/src/docs/components/Form/fields/FieldPreparedContent/readme.md
index e75d3f1e0..c02a3044e 100644
--- a/src/docs/components/Form/fields/FieldPreparedContent/readme.md
+++ b/src/docs/components/Form/fields/FieldPreparedContent/readme.md
@@ -3,7 +3,7 @@
| Key | Description |
| --- | --- |
| `...` | Supports all props in [FieldRichTextarea](#/component/Form/fields/FieldRichTextarea). |
-| `preparedContent` | An optional object containing preset information. When preset information exists, a button will appear in the toolbar. See the [Prepared Content](#/component/Form/fields/FieldPreparedContent) example. |
+| `preparedContent` | An optional object containing preset information. When preset information exists, a button will appear in the toolbar. |
## Events
@@ -11,7 +11,7 @@ See [FieldRichTextarea](#/component/Form/fields/FieldRichTextarea).
## Usage
-Use this component to provide the user with a rich text editor with prepared content that they can insert through a modal UI.
+Use this component to provide the user with a rich text editor with prepared content that they can insert through a modal.
The `preparedContent` prop allows you to pass content to the editor and give the user a point-and-click tool to add that content. This is intended to be used in cases where data can be rendered inside of an email template.
diff --git a/src/docs/components/Form/fields/FieldPubId/previews/PreviewFieldPubId.vue b/src/docs/components/Form/fields/FieldPubId/previews/PreviewFieldPubId.vue
index 31f9e215d..8a7bf4006 100644
--- a/src/docs/components/Form/fields/FieldPubId/previews/PreviewFieldPubId.vue
+++ b/src/docs/components/Form/fields/FieldPubId/previews/PreviewFieldPubId.vue
@@ -6,7 +6,7 @@
import FieldPubId from '@/components/Form/fields/FieldPubId.vue';
import PreviewFieldBase from '../../FieldBase/previews/PreviewFieldBase.vue';
import fieldBase from '../../../helpers/field-base';
-import field from '../../../helpers/field-doi';
+import field from '../../../helpers/field-urn';
export default {
extends: PreviewFieldBase,
diff --git a/src/docs/components/Form/fields/FieldPubId/readme.md b/src/docs/components/Form/fields/FieldPubId/readme.md
index 7fe422701..f61307ea7 100644
--- a/src/docs/components/Form/fields/FieldPubId/readme.md
+++ b/src/docs/components/Form/fields/FieldPubId/readme.md
@@ -22,4 +22,4 @@ See [FieldBase](#/component/Form/fields/FieldBase).
## Usage
-This component is a special field for setting a pub id, like a DOI, based on pre-configured settings in a pub id plugin. When the plugin settings permit a pub id to be customized directly, a [FieldText](./FieldText) should be used instead.
+This component is a special field for setting a pub id, like a URN, based on pre-configured settings in a pub id plugin. When the plugin settings permit a pub id to be customized directly, a [FieldText](./FieldText) should be used instead.
diff --git a/src/docs/components/Form/fields/FieldRichText/ComponentFieldRichText.vue b/src/docs/components/Form/fields/FieldRichText/ComponentFieldRichText.vue
new file mode 100644
index 000000000..3ea8c49c6
--- /dev/null
+++ b/src/docs/components/Form/fields/FieldRichText/ComponentFieldRichText.vue
@@ -0,0 +1,24 @@
+
diff --git a/src/docs/components/Form/fields/FieldRichText/previews/PreviewFieldRichText.vue b/src/docs/components/Form/fields/FieldRichText/previews/PreviewFieldRichText.vue
new file mode 100644
index 000000000..6d53eea81
--- /dev/null
+++ b/src/docs/components/Form/fields/FieldRichText/previews/PreviewFieldRichText.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
diff --git a/src/docs/components/Form/fields/FieldRichText/readme.md b/src/docs/components/Form/fields/FieldRichText/readme.md
new file mode 100644
index 000000000..eebe503c0
--- /dev/null
+++ b/src/docs/components/Form/fields/FieldRichText/readme.md
@@ -0,0 +1,16 @@
+## Props
+
+| Key | Description |
+| --- | --- |
+| `...` | Supports all props in [FieldBase](#/component/Form/fields/FieldBase) and [FieldRichTextarea](#/component/Form/fields/FieldRichTextarea). |
+| `value` | The current value for this field. |
+| `i18nFormattingLabel` | A localized string for the button to open formatting options. |
+| `size` | Must be `oneline`. Default: `oneline` |
+
+## Events
+
+See [FieldBase](#/component/Form/fields/FieldBase).
+
+## Usage
+
+Use this component for a single-line rich text editor that supports bold, italics, and super-/sub-script. This field is designed to be used with submission titles. For most single-line text inputs, use [FieldText](#/component/Form/fields/FieldText).
diff --git a/src/docs/components/Form/fields/FieldRichTextarea/readme.md b/src/docs/components/Form/fields/FieldRichTextarea/readme.md
index 3bed76b27..7858e0ad7 100644
--- a/src/docs/components/Form/fields/FieldRichTextarea/readme.md
+++ b/src/docs/components/Form/fields/FieldRichTextarea/readme.md
@@ -17,13 +17,9 @@ See [FieldBase](#/component/Form/fields/FieldBase).
## Usage
-Use this component to provide the user with a rich text editor that supports bold, italics, links and other HTML code.
+Use this component to provide the user with a rich text editor that supports bold, italics, links and other HTML code. This component uses the TinyMCE editor. You can pass `toolbar`, `plugins` and `init` props to customize the editor. See the [TinyMCE documentation](https://www.tiny.cloud/docs/configure/integration-and-setup/).
-This component uses the TinyMCE editor. You can pass `toolbar`, `plugins` and `init` props to customize the editor. See the [TinyMCE documentation](https://www.tiny.cloud/docs/configure/integration-and-setup/).
-
-The `size` of the input area will signal to the user how much information they should enter into the field.
-
-The default `size` is best for one to two large paragraphs. If you expect a user to enter more than that, consider using the large size when it fits appropriately within the the form where it appears.
+The `size` of the input area will signal to the user how much information they should enter into the field. The default `size` is best for one to two large paragraphs. If you expect a user to enter more than that, consider using the large size when it fits appropriately within the the form where it appears.
## Image Uploads
diff --git a/src/docs/components/Form/fields/FieldSelectIssue/readme.md b/src/docs/components/Form/fields/FieldSelectIssue/readme.md
index bb8d8f234..58761a7a0 100644
--- a/src/docs/components/Form/fields/FieldSelectIssue/readme.md
+++ b/src/docs/components/Form/fields/FieldSelectIssue/readme.md
@@ -16,6 +16,6 @@ See [FieldBase](#/component/Form/fields/FieldBase).
## Usage
-A special component for selecting an issue.
+A special component for selecting an issue. When a publication is scheduled or published, this field will no longer show the selection options and will instead show a message indicating the issue it was scheduled or published in.
-When a publication is scheduled or published, this field will no longer show the selection options and will instead show a message indicating the issue it was scheduled or published in.
+In the example above, the "Assign to Issue" button will not work. This depends on the old JavaScript framework within the application.
diff --git a/src/docs/components/Form/fields/FieldShowEnsuringLink/readme.md b/src/docs/components/Form/fields/FieldShowEnsuringLink/readme.md
index e202cae1b..41b708149 100644
--- a/src/docs/components/Form/fields/FieldShowEnsuringLink/readme.md
+++ b/src/docs/components/Form/fields/FieldShowEnsuringLink/readme.md
@@ -4,7 +4,7 @@
| --- | --- |
| `...` | Supports all props in [FieldBase](#/component/Form/fields/FieldBase). |
| `value` | The current value for this field. |
-| `message` | The message to display in the popup when the button in the confirmation message is clicked. **Note: the popup will not open in this demonstration.** |
+| `message` | The message to display in the popup when the button in the confirmation message is clicked. |
## Events
@@ -12,6 +12,4 @@ See [FieldBase](#/component/Form/fields/FieldBase).
## Usage
-This component is a special field for the setting to show reviewers guidelines on how to ensure anonymous review. It displays a button to open the guidelines in a modal.
-
-The modal will _not_ open in the demonstration above.
+This component is a special field for the setting to show reviewers the guidelines on how to ensure anonymous review. It displays a button to open the guidelines in a modal.
diff --git a/src/docs/components/Form/fields/FieldText/ComponentFieldText.vue b/src/docs/components/Form/fields/FieldText/ComponentFieldText.vue
index 64ea047be..89468cdd2 100644
--- a/src/docs/components/Form/fields/FieldText/ComponentFieldText.vue
+++ b/src/docs/components/Form/fields/FieldText/ComponentFieldText.vue
@@ -4,8 +4,6 @@ import PreviewFieldText from './previews/PreviewFieldText.vue';
import PreviewFieldTextTemplate from '!raw-loader!./previews/PreviewFieldText.vue';
import PreviewFieldTextSmall from './previews/PreviewFieldTextSmall.vue';
import PreviewFieldTextSmallTemplate from '!raw-loader!./previews/PreviewFieldTextSmall.vue';
-import PreviewFieldTextInline from './previews/PreviewFieldTextInline.vue';
-import PreviewFieldTextInlineTemplate from '!raw-loader!./previews/PreviewFieldTextInline.vue';
import PreviewFieldTextLarge from './previews/PreviewFieldTextLarge.vue';
import PreviewFieldTextLargeTemplate from '!raw-loader!./previews/PreviewFieldTextLarge.vue';
import PreviewFieldTextPrefix from './previews/PreviewFieldTextPrefix.vue';
@@ -47,11 +45,6 @@ export default {
name: 'Editing Opt-in',
template: this.extractTemplate(PreviewFieldTextOptIntoEditTemplate),
},
- {
- component: PreviewFieldTextInline,
- name: 'Inline Label',
- template: this.extractTemplate(PreviewFieldTextInlineTemplate),
- },
],
};
},
diff --git a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextInline.vue b/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextInline.vue
deleted file mode 100644
index acaddd030..000000000
--- a/src/docs/components/Form/fields/FieldText/previews/PreviewFieldTextInline.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
-
diff --git a/src/docs/components/Form/fields/FieldText/readme.md b/src/docs/components/Form/fields/FieldText/readme.md
index d7f1fad69..936cf82c8 100644
--- a/src/docs/components/Form/fields/FieldText/readme.md
+++ b/src/docs/components/Form/fields/FieldText/readme.md
@@ -9,7 +9,6 @@
| `optIntoEditLabel` | The label for the button added by `optIntoEdit`. |
| `size` | One of `small`, `normal` or `large`. Default: `normal`. |
| `prefix` | An optional prefix to show before the user's input. For example, a prefix of `http://publisher.com/` is used for the journal `path` field. |
-| `isLabelInline` | When `true`, the label for this field will be shown inline instead of above the input field. See usage guidance below. |
## Events
@@ -17,16 +16,6 @@ See [FieldBase](#/component/Form/fields/FieldBase).
## Usage
-Use this component for entering a single line of text.
+Use this component for entering a single line of text. The `size` of the input area will signal to the user how much information they should enter into the field. Choose a size that is sufficient to display the expected input.
-The `size` of the input area will signal to the user how much information they should enter into the field. Choose a size that is sufficient to display the expected input.
-
-
-
-Do not use `isLabelInline` unless a designer has recommended this approach. Forms need to be designed carefully to support inline labels.
-
-### Prefix
-
-When using a `prefix`, be careful not to use a long prefix. There may not be enough room for the user to enter their information. If a prefix runs too long, it will be truncated so that the user can enter their information.
-
-A `prefix` can not be used with a localized value. Languages that read right-to-left (RTL) will not appear correctly. Only use a prefix in cases where the prefix will always read left-to-right, for example a domain name (http://test.com/) or a DOI prefix (10.1234/).
+When using a `prefix`, be careful not to use a long prefix. There may not be enough room for the user to enter their information. If a prefix runs too long, it will be truncated so that the user can enter their information. A `prefix` can not be used with a localized value. Languages that read right-to-left (RTL) will not appear correctly. Only use a prefix in cases where the prefix will always read left-to-right, for example a domain name (http://test.com/) or a DOI prefix (10.1234/).
diff --git a/src/docs/components/Form/fields/FieldUpload/readme.md b/src/docs/components/Form/fields/FieldUpload/readme.md
index ec92de8d1..ea13ab138 100644
--- a/src/docs/components/Form/fields/FieldUpload/readme.md
+++ b/src/docs/components/Form/fields/FieldUpload/readme.md
@@ -14,8 +14,4 @@ See [FieldBase](#/component/Form/fields/FieldBase).
Use this component when you want the user to upload a file. If you want them to upload an image, use the [FieldUploadImage](#/component/Form/fields/FieldUploadImage) component instead.
-### Valid Upload URL
-
-You _must_ pass a `url` with the `options` prop. In most cases, the URL should correspond to your application's [API endpoint for temporary files](https://docs.pkp.sfu.ca/dev/api).
-
-If you do not use this endpoint, your endpoint should respond to `OPTIONS` and `POST` requests that [Dropzone.js](https://www.dropzonejs.com) makes to upload the file. The response should match that documented in the [API endpoint for temporary files](https://docs.pkp.sfu.ca/dev/api).
\ No newline at end of file
+You _must_ pass a `url` with the `options` prop. In most cases, the URL should correspond to the application's [API endpoint for temporary files](https://docs.pkp.sfu.ca/dev/api). If you do not use this endpoint, the endpoint should respond to `OPTIONS` and `POST` requests that [Dropzone.js](https://www.dropzonejs.com) makes to upload the file. The response should match what is documented in the [API endpoint for temporary files](https://docs.pkp.sfu.ca/dev/api).
diff --git a/src/docs/components/Form/fields/FieldUploadImage/readme.md b/src/docs/components/Form/fields/FieldUploadImage/readme.md
index 9ed869b87..320d60b70 100644
--- a/src/docs/components/Form/fields/FieldUploadImage/readme.md
+++ b/src/docs/components/Form/fields/FieldUploadImage/readme.md
@@ -13,6 +13,4 @@ See [FieldBase](#/component/Form/fields/FieldBase).
## Usage
-Use this component when you want the user to upload an image. If you want to allow them to upload any file, use the [FieldUpload](#/component/Form/fields/FieldUpload) component instead.
-
-See the [FieldUpload](#/component/Form/fields/FieldUpload) component for guidance on passing an upload URL.
+Use this component when you want the user to upload an image. If you want to allow them to upload any file, use the [FieldUpload](#/component/Form/fields/FieldUpload) component instead. See the [FieldUpload](#/component/Form/fields/FieldUpload) component for guidance on passing an upload URL.
diff --git a/src/docs/components/Form/helpers/field-doi.js b/src/docs/components/Form/helpers/field-doi.js
deleted file mode 100644
index 1c618e09d..000000000
--- a/src/docs/components/Form/helpers/field-doi.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default {
- name: 'doi',
- component: 'field-pub-id',
- label: 'DOI',
- value: '',
- contextInitials: 'PKP',
- issueNumber: '2',
- issueVolume: '14',
- pattern: '%j.v%vi%i.%a',
- prefix: '10.1234',
- separator: '/',
- submissionId: 21,
- year: '2019',
- assignIdLabel: 'Assign DOI',
- clearIdLabel: 'Clear DOI',
- missingPartsLabel:
- 'You can not generate a DOI because one or more parts of the DOI pattern are missing data. You may need to assign the publication to an issue, set a publisher ID or enter page numbers.',
- missingIssueLabel:
- 'You can not generate a DOI until this publication has been assigned to an issue.',
-};
diff --git a/src/docs/components/Form/helpers/field-options-categories.js b/src/docs/components/Form/helpers/field-options-categories.js
index 6f1c28726..5d34cff09 100644
--- a/src/docs/components/Form/helpers/field-options-categories.js
+++ b/src/docs/components/Form/helpers/field-options-categories.js
@@ -1,31 +1,17 @@
+import categories from '../../../data/categories';
+
export default {
name: 'categories',
component: 'field-options',
label: 'Categories',
description:
'Select only the categories that are appropriate for your submission.',
- value: '',
- options: [
- {
- value: 4,
- label: 'Biology',
- },
- {
- value: 1,
- label: 'Health Sciences',
- },
- {
- value: 2,
- label: 'Health Sciences > Tropical Medicine',
- },
- {
- value: 3,
- label: 'Health Sciences > Radiology',
- },
- {
- value: 5,
- label: '...',
- },
- ],
+ value: [],
+ options: Object.keys(categories).map((id) => {
+ return {
+ value: id,
+ label: categories[id],
+ };
+ }),
groupId: 'default',
};
diff --git a/src/docs/components/Form/helpers/field-radio-input.js b/src/docs/components/Form/helpers/field-radio-input.js
index ce432e97f..02c5aa482 100644
--- a/src/docs/components/Form/helpers/field-radio-input.js
+++ b/src/docs/components/Form/helpers/field-radio-input.js
@@ -5,15 +5,15 @@ export default {
value: 'something',
options: [
{
- value: 'one',
- label: 'One',
+ value: 'yes',
+ label: 'Yes',
},
{
- value: 'two',
- label: 'Two',
+ value: 'no',
+ label: 'No',
},
{
- label: 'Any',
+ label: 'Other',
isInput: true,
},
],
diff --git a/src/docs/components/Form/helpers/field-rich-textarea-abstract.js b/src/docs/components/Form/helpers/field-rich-textarea-abstract.js
index b06234a84..415a1489a 100644
--- a/src/docs/components/Form/helpers/field-rich-textarea-abstract.js
+++ b/src/docs/components/Form/helpers/field-rich-textarea-abstract.js
@@ -7,8 +7,7 @@ export default {
plugins: 'paste,link,noneditable',
toolbar: 'bold italic superscript subscript | link',
value: {
- en:
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
',
+ en: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
',
fr_CA: '',
ar: '',
},
diff --git a/src/docs/components/Form/helpers/field-rich-textarea-signature.js b/src/docs/components/Form/helpers/field-rich-textarea-signature.js
index 4c37373b2..fe8132927 100644
--- a/src/docs/components/Form/helpers/field-rich-textarea-signature.js
+++ b/src/docs/components/Form/helpers/field-rich-textarea-signature.js
@@ -6,8 +6,7 @@ export default {
fr_CA: 'Signature',
},
description: {
- en:
- 'Add a personal signature you would like to be included with any emails we send on your behalf.',
+ en: 'Add a personal signature you would like to be included with any emails we send on your behalf.',
fr_CA:
'Ajoutez une signature personnelle que vous souhaitez inclure dans les courriels que nous envoyons en votre nom.',
},
diff --git a/src/docs/components/Form/helpers/field-upload-image-logo.js b/src/docs/components/Form/helpers/field-upload-image-logo.js
index e7f34dda1..b39e40746 100644
--- a/src/docs/components/Form/helpers/field-upload-image-logo.js
+++ b/src/docs/components/Form/helpers/field-upload-image-logo.js
@@ -5,7 +5,7 @@ export default {
options: {
url: 'https://httpbin.org/post',
},
- baseUrl: 'http://localhost:8000/public/journals/1/',
+ baseUrl: 'https://httbin.org/public/journals/1/',
altTextDescription:
'Describe this image for visitors viewing the site in a text-only browser or with assistive devices. Example: "Our editor speaking at the PKP conference."',
altTextLabel: 'Alt Text',
diff --git a/src/docs/components/Form/helpers/field-urn.js b/src/docs/components/Form/helpers/field-urn.js
new file mode 100644
index 000000000..a9db55f76
--- /dev/null
+++ b/src/docs/components/Form/helpers/field-urn.js
@@ -0,0 +1,20 @@
+export default {
+ name: 'urn',
+ component: 'field-pub-id',
+ label: 'URN',
+ value: '',
+ contextInitials: 'PKP',
+ issueNumber: '2',
+ issueVolume: '14',
+ pattern: 'v%vi%i.%a',
+ prefix: 'urn:pkp:1234',
+ separator: '-',
+ submissionId: 21,
+ year: '2019',
+ assignIdLabel: 'Assign URN',
+ clearIdLabel: 'Clear URN',
+ missingPartsLabel:
+ 'You can not generate a URN because one or more parts of the URN pattern are missing data. You may need to assign the publication to an issue, set a publisher ID or enter page numbers.',
+ missingIssueLabel:
+ 'You can not generate a URN until this publication has been assigned to an issue.',
+};
diff --git a/src/docs/components/Form/helpers/form-change-submission.js b/src/docs/components/Form/helpers/form-change-submission.js
new file mode 100644
index 000000000..26387cdb2
--- /dev/null
+++ b/src/docs/components/Form/helpers/form-change-submission.js
@@ -0,0 +1,63 @@
+import Form from './form';
+
+export default {
+ ...Form,
+ id: 'confirm',
+ action: 'emit',
+ fields: [
+ {
+ name: 'section',
+ component: 'field-options',
+ label: 'Section',
+ value: 1,
+ type: 'radio',
+ options: [
+ {
+ value: 1,
+ label: 'Articles',
+ },
+ {
+ value: 2,
+ label: 'Reviews',
+ },
+ {
+ value: 3,
+ label: 'Editorials',
+ },
+ ],
+ groupId: 'default',
+ },
+ {
+ name: 'language',
+ component: 'field-options',
+ label: 'Language',
+ value: 'en',
+ type: 'radio',
+ options: [
+ {
+ value: 'en',
+ label: 'English',
+ },
+ {
+ value: 'fr_CA',
+ label: 'French (Canadian)',
+ },
+ ],
+ groupId: 'default',
+ },
+ ],
+ groups: [
+ {
+ id: 'default',
+ pageId: 'default',
+ },
+ ],
+ pages: [
+ {
+ id: 'default',
+ submitButton: {
+ label: 'Save',
+ },
+ },
+ ],
+};
diff --git a/src/docs/components/Form/helpers/form-confirm.js b/src/docs/components/Form/helpers/form-confirm.js
index 750f1a5ac..6ba513b06 100644
--- a/src/docs/components/Form/helpers/form-confirm.js
+++ b/src/docs/components/Form/helpers/form-confirm.js
@@ -1,12 +1,11 @@
import Form from './form';
import FieldOptionsCopyright from './field-options-copyright';
-import FieldOptionsSubmissionAgreement from './field-options-submission-agreement';
export default {
...Form,
id: 'confirm',
action: '/example/submit/1',
- fields: [{...FieldOptionsCopyright}, {...FieldOptionsSubmissionAgreement}],
+ fields: [{...FieldOptionsCopyright}],
groups: [
{
id: 'default',
diff --git a/src/docs/components/Form/helpers/form-for-the-editors.js b/src/docs/components/Form/helpers/form-for-the-editors.js
index bec49d9fc..c906a2290 100644
--- a/src/docs/components/Form/helpers/form-for-the-editors.js
+++ b/src/docs/components/Form/helpers/form-for-the-editors.js
@@ -1,5 +1,4 @@
import Form from './form';
-import FieldKeywords from './field-controlled-vocab-keywords';
import FieldCategories from './field-options-categories';
import FieldRichTextareaAbstract from './field-rich-textarea-abstract';
@@ -8,7 +7,6 @@ export default {
id: 'forTheEditors',
action: '/example/publications/1',
fields: [
- {...FieldKeywords, groupId: 'default'},
{...FieldCategories, groupId: 'default'},
{
...FieldRichTextareaAbstract,
diff --git a/src/docs/components/Form/readme.md b/src/docs/components/Form/readme.md
index 74f57e5cd..cdaef7061 100644
--- a/src/docs/components/Form/readme.md
+++ b/src/docs/components/Form/readme.md
@@ -27,16 +27,12 @@
| Key | Description |
| --- | --- |
| `form-success` | When the form is successfully submitted. The payload will include the form ID and the server response from the successful form submission. This is usually the object that was added or edited. |
-| `notify` | When an error is encountered during form submission. |
+| `notify` | When an error is encountered during form submission. See [Notify](#/utilities/Notify). |
## Usage
-Use this component to display a form.
-
-## Pass props
-
-Typically you will generate all the required props from one of the `FormComponent` classes on the server side. These props can then be passed to the form.
+Use this component to display a form. Typically you will generate all the required props from one of the `FormComponent` classes on the server side. These props can then be passed to the form.
```html
```
-## Multi-page Forms
-
-Use a multi-page form when you want to guide the user through a multi-step process that ends in a single action. Reviewer assignment is an example of a multi-step process:
+Learn more about [server-side form components](https://docs.pkp.sfu.ca/dev/documentation/en/frontend-forms).
-1. Select a reviewer
-2. Select a review type and enter a deadline
-3. Prepare the notification email
-
-We want to divide the action into smaller steps so that we don't overwhelm the user, but we shouldn't take any action until all steps are complete.
-
-Do _not_ use a multi-page form for all related forms, such as those on the settings page. A user may wish to only edit one setting and that change can be saved immediately without depending on further action in related forms.
+## Multi-page Forms
-If you want to indicate that forms are related, without requiring them to be submitted together, use [tabs](#/component/Tab).
+Multi-page forms have not proven to be useful. This feature may be removed in a future version. Use the [Steps](#/component/Steps) component for step-by-step workflows.
## Form Submission and Error Handling
-A `Form` expects to receive a URL to which it can submit a `PUT` or `POST` request to the application's API. Forms can handle the following responses from the API automatically:
+The `action` prop of most `