- {fileCustomInfoTextUse && fileCustomInfoText}
- {!fileCustomInfoTextUse && __('Drag and drop files here', 'eightshift-forms')}
-
+
+
+
+ {fileCustomInfoTextUse && fileCustomInfoText}
+ {!fileCustomInfoTextUse && __('Drag and drop files here', 'eightshift-forms')}
+
-
+
{fileCustomInfoButtonText?.length > 0 ? fileCustomInfoButtonText : __('Add files', 'eightshift-forms')}
-
-
-
- {fileName &&
-
- }
-
+
);
return (
@@ -60,8 +37,10 @@ export const FileEditor = (attributes) => {
fieldContent: file,
fieldIsRequired: checkAttr('fileIsRequired', attributes, manifest),
})}
- additionalFieldClass={additionalFieldClass}
- selectorClass={componentName}
+ statusSlog={[
+ !fileName &&
,
+ attributes?.[`${prefix}ConditionalTagsUse`] &&
,
+ ]}
/>
);
diff --git a/src/Blocks/components/file/components/file-options.js b/src/Blocks/components/file/components/file-options.js
index 17256f4ef..1deb333a6 100644
--- a/src/Blocks/components/file/components/file-options.js
+++ b/src/Blocks/components/file/components/file-options.js
@@ -1,19 +1,30 @@
import React from 'react';
import { useState } from '@wordpress/element';
-import { select } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-import { TextControl, PanelBody } from '@wordpress/components';
-import { icons, checkAttr, getAttrKey, IconLabel, props, Section, IconToggle, Control, STORE_NAME } from '@eightshift/frontend-libs/scripts';
-import { FieldOptions, FieldOptionsMore, FieldOptionsLayout, FieldOptionsVisibility } from '../../field/components/field-options';
+import { checkAttr, getAttrKey, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+ BaseControl,
+ ContainerPanel,
+ InputField,
+ Toggle,
+ Spacer,
+ Button,
+ HStack,
+ NumberPicker,
+} from '@eightshift/ui-components';
+import {
+ FieldOptions,
+ FieldOptionsMore,
+ FieldOptionsLayout,
+ FieldOptionsVisibility,
+} from '../../field/components/field-options';
import { isOptionDisabled, NameField } from './../../utils';
import { ConditionalTagsOptions } from '../../conditional-tags/components/conditional-tags-options';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
export const FileOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('file');
-
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -30,18 +41,22 @@ export const FileOptions = (attributes) => {
const fileIsDisabled = checkAttr('fileIsDisabled', attributes, manifest);
return (
-
-
+
+
+
+
{
})}
/>
-
- setAttributes({ [getAttrKey('fileIsRequired', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('fileIsRequired', attributes, manifest), fileDisabledOptions)}
- />
-
- }
- value={fileAccept}
- help={__('Separate items with a comma.', 'eightshift-forms')}
- placeholder={__('e.g. .jpg,.png,.pdf', 'eightshift-forms')}
- onChange={(value) => setAttributes({ [getAttrKey('fileAccept', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('fileAccept', attributes, manifest), fileDisabledOptions)}
- />
-
-
-
- setAttributes({ [getAttrKey('fileMinSize', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('fileMinSize', attributes, manifest), fileDisabledOptions)}
- className='es-no-field-spacing'
- />
-
- setAttributes({ [getAttrKey('fileMaxSize', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('fileMaxSize', attributes, manifest), fileDisabledOptions)}
- className='es-no-field-spacing'
- />
-
-
-
-
-
-
-
- setAttributes({ [getAttrKey('fileIsMultiple', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('fileIsMultiple', attributes, manifest), fileDisabledOptions)}
- />
-
- setAttributes({ [getAttrKey('fileIsDisabled', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('fileIsDisabled', attributes, manifest), fileDisabledOptions)}
- noBottomSpacing
- />
-
-
-
- }
- placeholder={__('Drag and drop files here', 'eightshift-forms')}
- onChange={(value) => setAttributes({
+
+
+
+
+ setAttributes({ [getAttrKey('fileIsDisabled', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('fileIsDisabled', attributes, manifest), fileDisabledOptions)}
+ />
+
+ setAttributes({ [getAttrKey('fileIsMultiple', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('fileIsMultiple', attributes, manifest), fileDisabledOptions)}
+ />
+
+
+ setAttributes({
[getAttrKey('fileCustomInfoText', attributes, manifest)]: value,
[getAttrKey('fileCustomInfoTextUse', attributes, manifest)]: value?.length > 0,
- })}
- disabled={
- isOptionDisabled(getAttrKey('fileCustomInfoText', attributes, manifest), fileDisabledOptions)
- || isOptionDisabled(getAttrKey('fileCustomInfoTextUse', attributes, manifest), fileDisabledOptions)
- }
- />
-
- }
- value={fileCustomInfoButtonText}
- placeholder={__('Add files', 'eightshift-forms')}
- onChange={(value) => setAttributes({ [getAttrKey('fileCustomInfoButtonText', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('fileCustomInfoButtonText', attributes, manifest), fileDisabledOptions)}
- className='es-no-field-spacing'
- />
-
-
-
- }
- value={fileTracking}
- onChange={(value) => setAttributes({ [getAttrKey('fileTracking', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('fileTracking', attributes, manifest), fileDisabledOptions)}
- className='es-no-field-spacing'
- />
-
+ })
+ }
+ disabled={
+ isOptionDisabled(getAttrKey('fileCustomInfoText', attributes, manifest), fileDisabledOptions) ||
+ isOptionDisabled(getAttrKey('fileCustomInfoTextUse', attributes, manifest), fileDisabledOptions)
+ }
+ />
+
+ setAttributes({ [getAttrKey('fileCustomInfoButtonText', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('fileCustomInfoButtonText', attributes, manifest), fileDisabledOptions)}
+ />
+
+
+
+ setAttributes({ [getAttrKey('fileIsRequired', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('fileIsRequired', attributes, manifest), fileDisabledOptions)}
+ />
+
+ setAttributes({ [getAttrKey('fileAccept', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('fileAccept', attributes, manifest), fileDisabledOptions)}
+ />
+
+
+
+ setAttributes({ [getAttrKey('fileMinSize', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('fileMinSize', attributes, manifest), fileDisabledOptions)}
+ placeholder='–'
+ prefix={__('Min', 'eightshift-forms')}
+ suffix={__('KB', 'eightshift-forms')}
+ >
+
+
+ setAttributes({ [getAttrKey('fileMaxSize', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('fileMaxSize', attributes, manifest), fileDisabledOptions)}
+ placeholder='–'
+ prefix={__('Max', 'eightshift-forms')}
+ suffix={__('KB', 'eightshift-forms')}
+ >
+
+
+
+
+
+
+
+ setAttributes({ [getAttrKey('fileTracking', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('fileTracking', attributes, manifest), fileDisabledOptions)}
+ />
{
conditionalTagsIsHidden: checkAttr('fileFieldHidden', attributes, manifest),
})}
/>
-
+
);
};
diff --git a/src/Blocks/components/file/file.php b/src/Blocks/components/file/file.php
index 516b1ecc9..e9974f008 100644
--- a/src/Blocks/components/file/file.php
+++ b/src/Blocks/components/file/file.php
@@ -40,7 +40,7 @@
$twClasses = FormsHelper::getTwSelectors($fileTwSelectorsData, ['file']);
-$fileClass = Helpers::classnames([
+$fileClass = Helpers::clsx([
FormsHelper::getTwBase($twClasses, 'file', $componentClass),
Helpers::selector($additionalClass, $additionalClass),
]);
diff --git a/src/Blocks/components/form/assets/enrichment.js b/src/Blocks/components/form/assets/enrichment.js
index 7095ca133..4184b6583 100644
--- a/src/Blocks/components/form/assets/enrichment.js
+++ b/src/Blocks/components/form/assets/enrichment.js
@@ -1,4 +1,4 @@
-import { cookies } from '@eightshift/frontend-libs/scripts/helpers';
+import { cookies } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
import { prefix, setStateWindow } from './state-init';
/**
diff --git a/src/Blocks/components/form/assets/form.js b/src/Blocks/components/form/assets/form.js
index 5897be1a9..91287b452 100644
--- a/src/Blocks/components/form/assets/form.js
+++ b/src/Blocks/components/form/assets/form.js
@@ -1,6 +1,7 @@
/* global grecaptcha */
-import { cookies, debounce } from '@eightshift/frontend-libs/scripts/helpers';
+import { cookies } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
+import { debounce } from '@eightshift/ui-components/utilities';
import selectManifest from './../../select/manifest.json';
import { StateEnum, prefix, setStateFormInitial, setStateWindow, removeStateForm } from './state-init';
@@ -60,7 +61,11 @@ export class Form {
initOnlyForms() {
if (this.state.getStateConfigIsAdmin()) {
// If is admin do normal init.
- this.initOnlyFormsInner(document.querySelector(this.state.getStateSelector('form', true))?.getAttribute(this.state.getStateAttribute('formId')) || '0');
+ this.initOnlyFormsInner(
+ document
+ .querySelector(this.state.getStateSelector('form', true))
+ ?.getAttribute(this.state.getStateAttribute('formId')) || '0',
+ );
} else {
// Find all forms elements.
const forms = document.querySelectorAll(this.state.getStateSelector('forms', true));
@@ -77,7 +82,10 @@ export class Form {
// If forms element have geolocation data attribute, init geolocation via ajax.
this.initGeolocationForm(formsItems);
} else {
- const formId = formsItems?.querySelector(this.state.getStateSelector('form', true))?.getAttribute(this.state.getStateAttribute('formId')) || '0';
+ const formId =
+ formsItems
+ ?.querySelector(this.state.getStateSelector('form', true))
+ ?.getAttribute(this.state.getStateAttribute('formId')) || '0';
// Bailout if 0 as formId === 0 can only be used in admin.
if (formId === '0') {
@@ -100,7 +108,10 @@ export class Form {
async initGeolocationForm(formsElement) {
// If you have geolocation configured on the form but global setting is turned off. Return first form.
if (!this.state.getStateGeolocationIsUsed()) {
- const formId = formsElement?.querySelector(this.state.getStateSelector('form', true))?.getAttribute(this.state.getStateAttribute('formId')) || '0';
+ const formId =
+ formsElement
+ ?.querySelector(this.state.getStateSelector('form', true))
+ ?.getAttribute(this.state.getStateAttribute('formId')) || '0';
this.initOnlyFormsInner(formId);
@@ -145,7 +156,10 @@ export class Form {
// Loop all form elements and remove all except the one we need.
[...forms].forEach((form) => {
- if (form.getAttribute(this.state.getStateAttribute('formFid')) !== parsedResponseData?.[this.state.getStateResponseOutputKey('geoId')]) {
+ if (
+ form.getAttribute(this.state.getStateAttribute('formFid')) !==
+ parsedResponseData?.[this.state.getStateResponseOutputKey('geoId')]
+ ) {
// Remove all forms except the one we got from ajax.
form.remove();
} else {
@@ -159,8 +173,7 @@ export class Form {
// Remove loading class from forms element.
formsElement?.classList?.remove(this.state.getStateSelector('isGeoLoading'));
-
- } catch ({name, message}) {
+ } catch ({ name, message }) {
if (name === 'AbortError') {
return;
}
@@ -211,7 +224,10 @@ export class Form {
this.state.getStateFormElement(formId).addEventListener('submit', this.onFormSubmitEvent);
// Select.
- [...this.state.getStateElementByTypeField('select', formId), ...this.state.getStateElementByTypeField('country', formId)].forEach((select) => {
+ [
+ ...this.state.getStateElementByTypeField('select', formId),
+ ...this.state.getStateElementByTypeField('country', formId),
+ ].forEach((select) => {
this.setupSelectField(formId, select.name);
});
@@ -236,7 +252,10 @@ export class Form {
});
// Date.
- [...this.state.getStateElementByTypeField('date', formId), ...this.state.getStateElementByTypeField('dateTime', formId)].forEach((date) => {
+ [
+ ...this.state.getStateElementByTypeField('date', formId),
+ ...this.state.getStateElementByTypeField('dateTime', formId),
+ ].forEach((date) => {
this.setupDateField(formId, date.name);
});
@@ -343,7 +362,7 @@ export class Form {
this.CONTROLLER = null;
return parsedResponse;
- } catch ({name, message}) {
+ } catch ({ name, message }) {
if (name === 'AbortError') {
return;
}
@@ -397,7 +416,7 @@ export class Form {
this.steps.formStepSubmit(formId, parsedResponse);
this.steps.formStepSubmitAfter(formId, parsedResponse);
this.state.setStateFormIsProcessing(false, formId);
- } catch ({name, message}) {
+ } catch ({ name, message }) {
if (name === 'AbortError') {
return;
}
@@ -476,7 +495,11 @@ export class Form {
}
// This will be changed in the next release.
- if (Boolean(this.state.getStateFormElement(formId)?.getAttribute(this.state.getStateAttribute('formHideOnSuccess')))) {
+ if (
+ Boolean(
+ this.state.getStateFormElement(formId)?.getAttribute(this.state.getStateAttribute('formHideOnSuccess')),
+ )
+ ) {
this.state.getStateFormElement(formId).classList.add(this.state.getStateSelector('isHidden'));
}
@@ -615,7 +638,7 @@ export class Form {
if (response?.data?.[this.state.getStateResponseOutputKey('captchaRetry')] && retry === false) {
this.executeEnterpriseCaptcha(actionName, siteKey, formId, true, filter);
}
- } catch ({name, message}) {
+ } catch ({ name, message }) {
if (name === 'AbortError') {
return;
}
@@ -652,7 +675,7 @@ export class Form {
if (response?.data?.[this.state.getStateResponseOutputKey('captchaRetry')] && retry === false) {
this.executeFreeCaptcha(actionName, siteKey, formId, true, filter);
}
- } catch ({name, message}) {
+ } catch ({ name, message }) {
if (name === 'AbortError') {
return;
}
@@ -861,7 +884,10 @@ export class Form {
const fieldset = field.closest('fieldset');
// If we have input on the checkbox/radio fieldset don't sent the input value but append it to the parent fieldset.
- if (fieldset?.getAttribute(this.state.getStateAttribute('fieldType')) === 'checkbox' || fieldset?.getAttribute(this.state.getStateAttribute('fieldType')) === 'radio') {
+ if (
+ fieldset?.getAttribute(this.state.getStateAttribute('fieldType')) === 'checkbox' ||
+ fieldset?.getAttribute(this.state.getStateAttribute('fieldType')) === 'radio'
+ ) {
if (value !== '') {
fieldsetOtherOutput.push({
name,
@@ -934,7 +960,9 @@ export class Form {
*/
getFormDataGroup(formId) {
const output = [];
- const groups = this.state.getStateFormElement(formId).querySelectorAll(`${this.state.getStateSelector('group', true)}`);
+ const groups = this.state
+ .getStateFormElement(formId)
+ .querySelectorAll(`${this.state.getStateSelector('group', true)}`);
// Check if we are saving group items in one key.
if (!groups.length) {
@@ -999,13 +1027,16 @@ export class Form {
* @returns {void}
*/
setFormDataStep(formId) {
- this.utils.buildFormDataItems([
- {
- name: this.state.getStateParam('steps'),
- value: this.state.getStateFormStepsItem(this.state.getStateFormStepsCurrent(formId), formId),
- custom: this.state.getStateFormStepsCurrent(formId),
- },
- ], this.FORM_DATA);
+ this.utils.buildFormDataItems(
+ [
+ {
+ name: this.state.getStateParam('steps'),
+ value: this.state.getStateFormStepsItem(this.state.getStateFormStepsCurrent(formId), formId),
+ custom: this.state.getStateFormStepsCurrent(formId),
+ },
+ ],
+ this.FORM_DATA,
+ );
}
/**
@@ -1016,32 +1047,35 @@ export class Form {
* @returns {void}
*/
setFormDataCommon(formId) {
- this.utils.buildFormDataItems([
- {
- name: this.state.getStateParam('formId'),
- value: this.state.getStateFormFid(formId),
- },
- {
- name: this.state.getStateParam('postId'),
- value: this.state.getStateFormPostId(formId),
- },
- {
- name: this.state.getStateParam('type'),
- value: this.state.getStateFormType(formId),
- },
- {
- name: this.state.getStateParam('action'),
- value: this.state.getStateFormAction(formId) ?? '',
- },
- {
- name: this.state.getStateParam('actionExternal'),
- value: this.state.getStateFormActionExternal(formId) ?? '',
- },
- {
- name: this.state.getStateParam('secureData'),
- value: this.state.getStateFormSecureData(formId) ?? '',
- },
- ], this.FORM_DATA);
+ this.utils.buildFormDataItems(
+ [
+ {
+ name: this.state.getStateParam('formId'),
+ value: this.state.getStateFormFid(formId),
+ },
+ {
+ name: this.state.getStateParam('postId'),
+ value: this.state.getStateFormPostId(formId),
+ },
+ {
+ name: this.state.getStateParam('type'),
+ value: this.state.getStateFormType(formId),
+ },
+ {
+ name: this.state.getStateParam('action'),
+ value: this.state.getStateFormAction(formId) ?? '',
+ },
+ {
+ name: this.state.getStateParam('actionExternal'),
+ value: this.state.getStateFormActionExternal(formId) ?? '',
+ },
+ {
+ name: this.state.getStateParam('secureData'),
+ value: this.state.getStateFormSecureData(formId) ?? '',
+ },
+ ],
+ this.FORM_DATA,
+ );
}
/**
@@ -1059,12 +1093,15 @@ export class Form {
const data = this.enrichment.getLocalStorage(this.state.getStateEnrichmentStorageName());
if (data) {
- this.utils.buildFormDataItems([
- {
- name: this.state.getStateParam('storage'),
- value: data,
- },
- ], this.FORM_DATA);
+ this.utils.buildFormDataItems(
+ [
+ {
+ name: this.state.getStateParam('storage'),
+ value: data,
+ },
+ ],
+ this.FORM_DATA,
+ );
}
}
@@ -1076,12 +1113,15 @@ export class Form {
* @returns {void}
*/
setFormDataAdmin(formId) {
- this.utils.buildFormDataItems([
- {
- name: this.state.getStateParam('settingsType'),
- value: this.state.getStateFormTypeSettings(formId),
- },
- ], this.FORM_DATA);
+ this.utils.buildFormDataItems(
+ [
+ {
+ name: this.state.getStateParam('settingsType'),
+ value: this.state.getStateFormTypeSettings(formId),
+ },
+ ],
+ this.FORM_DATA,
+ );
}
/**
@@ -1125,12 +1165,15 @@ export class Form {
* @returns {void}
*/
setFormDataCaptcha(data) {
- this.utils.buildFormDataItems([
- {
- name: this.state.getStateParam('captcha'),
- value: data,
- },
- ], this.FORM_DATA);
+ this.utils.buildFormDataItems(
+ [
+ {
+ name: this.state.getStateParam('captcha'),
+ value: data,
+ },
+ ],
+ this.FORM_DATA,
+ );
}
////////////////////////////////////////////////////////////////
@@ -1159,7 +1202,8 @@ export class Form {
if (
(this.state.getStateConfigIsAdmin() && this.state.getStateElementIsSingleSubmit(name, formId)) ||
- (this.state.getStateFormConfigUseSingleSubmit(formId) && this.state.getStateElementTypeCustom(name, formId) === 'number')
+ (this.state.getStateFormConfigUseSingleSubmit(formId) &&
+ this.state.getStateElementTypeCustom(name, formId) === 'number')
) {
input.addEventListener('input', debounce(this.onInputEvent, 300));
} else {
@@ -1190,7 +1234,10 @@ export class Form {
this.utils.setRangeCurrentValue(formId, name);
- if ((this.state.getStateConfigIsAdmin() && this.state.getStateElementIsSingleSubmit(name, formId)) || this.state.getStateFormConfigUseSingleSubmit(formId)) {
+ if (
+ (this.state.getStateConfigIsAdmin() && this.state.getStateElementIsSingleSubmit(name, formId)) ||
+ this.state.getStateFormConfigUseSingleSubmit(formId)
+ ) {
input.addEventListener('input', debounce(this.onInputEvent, 300));
} else {
input.addEventListener('input', this.onInputEvent);
@@ -1544,20 +1591,27 @@ export class Form {
const validationOutputKey = this.state.getStateResponseOutputKey('validation');
// Output errors if there are any.
- if (typeof response?.data?.[validationOutputKey] !== 'undefined' && Object.keys(response?.data?.[validationOutputKey])?.length > 0) {
- file.previewTemplate.querySelector('.dz-error-message span').innerHTML = response?.data?.[validationOutputKey]?.[file?.upload?.uuid];
+ if (
+ typeof response?.data?.[validationOutputKey] !== 'undefined' &&
+ Object.keys(response?.data?.[validationOutputKey])?.length > 0
+ ) {
+ file.previewTemplate.querySelector('.dz-error-message span').innerHTML =
+ response?.data?.[validationOutputKey]?.[file?.upload?.uuid];
}
field?.classList?.add(this.state.getStateSelector('isFilled'));
button.focus();
this.utils.setOnFocus(button);
- } catch ({name, message}) {
- file.previewTemplate.querySelector('.dz-error-message span').innerHTML = this.state.getStateSettingsFormServerErrorMsg();
+ } catch ({ name, message }) {
+ file.previewTemplate.querySelector('.dz-error-message span').innerHTML =
+ this.state.getStateSettingsFormServerErrorMsg();
button.focus();
this.utils.setOnFocus(button);
- throw new Error(`API response returned an error. Function used: "fileUploadSuccess" with error: "${name}" and a message: "${message}" for form id: "${formId}"`);
+ throw new Error(
+ `API response returned an error. Function used: "fileUploadSuccess" with error: "${name}" and a message: "${message}" for form id: "${formId}"`,
+ );
}
});
@@ -1568,8 +1622,12 @@ export class Form {
const validationOutputKey = this.state.getStateResponseOutputKey('validation');
// Output errors if there are any.
- if (typeof response?.data?.[validationOutputKey] !== 'undefined' && Object.keys(response?.data?.[validationOutputKey])?.length > 0) {
- file.previewTemplate.querySelector('.dz-error-message span').innerHTML = response?.data?.[validationOutputKey]?.[file?.upload?.uuid];
+ if (
+ typeof response?.data?.[validationOutputKey] !== 'undefined' &&
+ Object.keys(response?.data?.[validationOutputKey])?.length > 0
+ ) {
+ file.previewTemplate.querySelector('.dz-error-message span').innerHTML =
+ response?.data?.[validationOutputKey]?.[file?.upload?.uuid];
} else {
file.previewTemplate.querySelector('.dz-error-message span').innerHTML = response?.message;
}
@@ -1578,12 +1636,15 @@ export class Form {
button.focus();
this.utils.setOnFocus(button);
- } catch ({name, message}) {
- file.previewTemplate.querySelector('.dz-error-message span').innerHTML = this.state.getStateSettingsFormServerErrorMsg();
+ } catch ({ name, message }) {
+ file.previewTemplate.querySelector('.dz-error-message span').innerHTML =
+ this.state.getStateSettingsFormServerErrorMsg();
button.focus();
this.utils.setOnFocus(button);
- throw new Error(`API response returned an error. Function used: "fileUploadError" with error: "${name}" and a message: "${message}" for form id: "${formId}"`);
+ throw new Error(
+ `API response returned an error. Function used: "fileUploadError" with error: "${name}" and a message: "${message}" for form id: "${formId}"`,
+ );
}
});
@@ -1616,7 +1677,10 @@ export class Form {
this.state.getStateFormElement(formId)?.removeEventListener('submit', this.onFormSubmitEvent);
// Select.
- [...this.state.getStateElementByTypeField('select', formId), ...this.state.getStateElementByTypeField('country', formId)].forEach((select) => {
+ [
+ ...this.state.getStateElementByTypeField('select', formId),
+ ...this.state.getStateElementByTypeField('country', formId),
+ ].forEach((select) => {
const choices = this.state.getStateElementCustom(select.name, formId);
choices?.passedElement?.element?.removeEventListener('change', this.onSelectChangeEvent);
@@ -1673,7 +1737,10 @@ export class Form {
});
// Date.
- [...this.state.getStateElementByTypeField('date', formId), ...this.state.getStateElementByTypeField('dateTime', formId)].forEach((date) => {
+ [
+ ...this.state.getStateElementByTypeField('date', formId),
+ ...this.state.getStateElementByTypeField('dateTime', formId),
+ ].forEach((date) => {
this.state.getStateElementCustom(date.name, formId)?.destroy();
});
@@ -1788,7 +1855,10 @@ export class Form {
this.utils.showLoader(formId);
const filterFinal = {
- [this.FILTER_SKIP_FIELDS]: [...this.steps.getIgnoreFields(formId), ...this.conditionalTags.getIgnoreFields(formId)],
+ [this.FILTER_SKIP_FIELDS]: [
+ ...this.steps.getIgnoreFields(formId),
+ ...this.conditionalTags.getIgnoreFields(formId),
+ ],
[this.FILTER_IS_STEPS_FINAL_SUBMIT]: true,
};
@@ -1871,7 +1941,28 @@ export class Form {
const name = field.getAttribute(this.state.getStateAttribute('fieldName'));
if (this.state.getStateElementTypeCustom(name, formId) === 'number') {
- const allowedKeys = ['Backspace', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '-', 'Tab', 'Delete'];
+ const allowedKeys = [
+ 'Backspace',
+ 'Enter',
+ 'ArrowUp',
+ 'ArrowDown',
+ 'ArrowLeft',
+ 'ArrowRight',
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '.',
+ '-',
+ 'Tab',
+ 'Delete',
+ ];
// Prevent the default action if the key is not allowed
if (!allowedKeys.includes(event.key)) {
@@ -1895,7 +1986,9 @@ export class Form {
this.state.setState([StateEnum.ELEMENTS, name, StateEnum.INPUT_SELECT], event.target, formId);
- const options = [...custom?.passedElement?.element?.selectedOptions].map((option) => option?.value).filter((option) => option !== '');
+ const options = [...custom?.passedElement?.element?.selectedOptions]
+ .map((option) => option?.value)
+ .filter((option) => option !== '');
switch (this.state.getStateElementTypeField(name, formId)) {
case 'phone':
@@ -1952,7 +2045,7 @@ export class Form {
custom?.showDropdown();
}
- if (!this.state.getStateSettingsDisableScrollToFieldOnFocus()) {
+ if (!this.state.getStateSettingsDisableScrollToFieldOnFocus()) {
this.utils.scrollAction(field);
}
@@ -2007,7 +2100,11 @@ export class Form {
if (
!this.state.getStateConfigIsAdmin() &&
this.state.getStateFormConfigUseSingleSubmit(formId) &&
- (typeCustom === 'range' || typeCustom === 'number' || typeCustom === 'checkbox' || typeCustom === 'radio' || typeCustom === 'rating')
+ (typeCustom === 'range' ||
+ typeCustom === 'number' ||
+ typeCustom === 'checkbox' ||
+ typeCustom === 'radio' ||
+ typeCustom === 'rating')
) {
if (this.state.getStateCaptchaIsUsed()) {
this.runFormCaptcha(formId);
diff --git a/src/Blocks/components/form/assets/geolocation.js b/src/Blocks/components/form/assets/geolocation.js
index 09e3f4935..385581d4d 100644
--- a/src/Blocks/components/form/assets/geolocation.js
+++ b/src/Blocks/components/form/assets/geolocation.js
@@ -1,4 +1,4 @@
-import { cookies } from '@eightshift/frontend-libs/scripts/helpers';
+import { cookies } from '@eightshift/frontend-libs-tailwind/scripts/helpers';
import { prefix, setStateWindow } from './state-init';
/**
@@ -66,7 +66,10 @@ export class Geolocation {
return;
}
- [...this.state.getStateElementByTypeField('country', formId), ...this.state.getStateElementByTypeField('phone', formId)].forEach((select) => {
+ [
+ ...this.state.getStateElementByTypeField('country', formId),
+ ...this.state.getStateElementByTypeField('phone', formId),
+ ].forEach((select) => {
const name = select.name;
const type = this.state.getStateElementTypeField(name, formId);
diff --git a/src/Blocks/components/form/components/form-editor.js b/src/Blocks/components/form/components/form-editor.js
index 7b3e1c7ec..f0e6ddd89 100644
--- a/src/Blocks/components/form/components/form-editor.js
+++ b/src/Blocks/components/form/components/form-editor.js
@@ -1,10 +1,9 @@
/* global esFormsLocalization */
import React from 'react';
-import { select } from '@wordpress/data';
-import classnames from 'classnames';
-import { selector, checkAttr, STORE_NAME } from '@eightshift/frontend-libs/scripts';
+import { checkAttr } from '@eightshift/frontend-libs-tailwind/scripts';
import globalSettings from '../../../manifest.json';
+import manifest from '../manifest.json';
export const additionalBlocksNoIntegration = [
...esFormsLocalization.additionalBlocks,
@@ -17,32 +16,7 @@ export const additionalBlocksIntegration = [
];
export const FormEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('form');
-
- const {
- componentClass,
- } = manifest;
-
- const {
- selectorClass = componentClass,
- blockClass,
- additionalClass,
- } = attributes;
-
const formContent = checkAttr('formContent', attributes, manifest);
- const formClass = classnames([
- selector(componentClass, componentClass),
- selector(componentClass, componentClass, 'editor'),
- selector(blockClass, blockClass, selectorClass),
- selector(additionalClass, additionalClass),
- ]);
-
- return (
-
- );
+ return
{formContent}
;
};
diff --git a/src/Blocks/components/form/components/form-options.js b/src/Blocks/components/form/components/form-options.js
index ee9eec9aa..8f80c55ea 100644
--- a/src/Blocks/components/form/components/form-options.js
+++ b/src/Blocks/components/form/components/form-options.js
@@ -1,15 +1,12 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
-import { select } from '@wordpress/data';
-import { TextControl } from '@wordpress/components';
-import { icons, checkAttr, getAttrKey, IconLabel, Section, IconToggle, STORE_NAME } from '@eightshift/frontend-libs/scripts';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { InputField, Toggle, Spacer } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import manifest from '../manifest.json';
export const FormOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('form');
-
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const formName = checkAttr('formName', attributes, manifest);
const formAction = checkAttr('formAction', attributes, manifest);
@@ -18,37 +15,53 @@ export const FormOptions = (attributes) => {
return (
<>
-
- }
- help={__('Used as a name attribute for form element Useful if you want to add additional code style for the form.', 'eightshift-forms')}
- value={formName}
- onChange={(value) => setAttributes({ [getAttrKey('formName', attributes, manifest)]: value })}
- />
-
+
+
setAttributes({ [getAttrKey('formName', attributes, manifest)]: value })}
+ />
+
+
-
- }
- value={formAction}
- help={__('Custom form action that will process form data.', 'eightshift-forms')}
- onChange={(value) => setAttributes({ [getAttrKey('formAction', attributes, manifest)]: value })}
- />
+ setAttributes({ [getAttrKey('formAction', attributes, manifest)]: value })}
+ />
- setAttributes({ [getAttrKey('formActionExternal', attributes, manifest)]: value })}
- />
+ setAttributes({ [getAttrKey('formActionExternal', attributes, manifest)]: value })}
+ />
- }
- value={formId}
- onChange={(value) => setAttributes({ [getAttrKey('formId', attributes, manifest)]: value })}
- />
-
+ setAttributes({ [getAttrKey('formId', attributes, manifest)]: value })}
+ />
);
};
diff --git a/src/Blocks/components/form/form-editor.scss b/src/Blocks/components/form/form-editor.scss
deleted file mode 100644
index c9cfe5213..000000000
--- a/src/Blocks/components/form/form-editor.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// stylelint-disable max-nesting-depth
-
-@import './form-style';
-
-.es-form {
- $this: &;
-
- @include form-reset;
- @include form-styles;
-
- > #{$this}__fields {
- > .block-editor-inner-blocks {
- > .block-editor-block-list__layout {
- @include form-fields-mandatory-styles;
- @include form-fields-styles;
-
- > * {
- @include form-fields-children-mandatory-styles;
- @include form-fields-children-styles;
-
- margin-inline: 0;
- margin-block-start: 0;
- padding-block: 0;
- }
- }
- }
- }
-
- &__editor {
- @include form-width-limit-styles;
- }
-}
diff --git a/src/Blocks/components/form/form-style.scss b/src/Blocks/components/form/form-style.scss
index 990aff3b3..5f68ec62f 100644
--- a/src/Blocks/components/form/form-style.scss
+++ b/src/Blocks/components/form/form-style.scss
@@ -1,30 +1,30 @@
@mixin form-styles() {
- margin: 0 auto;
- position: relative;
+ // margin: 0 auto;
+ // position: relative;
}
@mixin form-width-limit-styles() {
- max-inline-size: var(--es-max-width);
- padding: 0 var(--es-grid-spacing);
+ // max-inline-size: var(--es-max-width);
+ // padding: 0 var(--es-grid-spacing);
}
@mixin form-fields-mandatory-styles() {
- display: flex;
- flex-wrap: wrap;
+ // display: flex;
+ // flex-wrap: wrap;
}
@mixin form-fields-styles() {
- margin-inline: calc(var(--es-grid-spacing) * -1);
+ // margin-inline: calc(var(--es-grid-spacing) * -1);
}
@mixin form-fields-children-mandatory-styles() {
- flex: 0 0 var(--es-field-width, 100%);
- max-inline-size: var(--es-field-width, 100%);
+ // flex: 0 0 var(--es-field-width, 100%);
+ // max-inline-size: var(--es-field-width, 100%);
}
@mixin form-fields-children-styles() {
- padding-inline: var(--es-grid-spacing);
- margin-block-end: var(--es-field-spacing);
+ // padding-inline: var(--es-grid-spacing);
+ // margin-block-end: var(--es-field-spacing);
}
@mixin form-reset() {
diff --git a/src/Blocks/components/form/form.php b/src/Blocks/components/form/form.php
index 02e8c83d6..5717d2eb6 100644
--- a/src/Blocks/components/form/form.php
+++ b/src/Blocks/components/form/form.php
@@ -58,7 +58,7 @@
$customClassSelectorFilterName = HooksHelpers::getFilterName(['block', 'form', 'customClassSelector']);
$customClassSelector = apply_filters($customClassSelectorFilterName, '', $attributes, $formId);
-$formClass = Helpers::classnames([
+$formClass = Helpers::clsx([
FormsHelper::getTwBase($twClasses, 'form', $componentClass),
Helpers::selector($additionalClass, $additionalClass),
Helpers::selector($customClassSelector, $customClassSelector),
diff --git a/src/Blocks/components/form/styles-editor.css b/src/Blocks/components/form/styles-editor.css
new file mode 100644
index 000000000..4116eab46
--- /dev/null
+++ b/src/Blocks/components/form/styles-editor.css
@@ -0,0 +1,29 @@
+@import 'tailwindcss' prefix(esf);
+@reference '../../../../tailwind.css';
+
+@layer esf {
+ .esf-form {
+ @apply esf:mx-auto! esf:max-w-3xl!;
+ }
+
+ .esf-form .block-editor-block-list__layout {
+ @apply esf:grid! esf:grid-cols-12! esf:gap-15!;
+ }
+
+ .esf-form .block-editor-block-list__layout > * {
+ @apply esf:col-span-12! esf:w-full!;
+ }
+
+ .esf-form .eightshift-block {
+ @apply esf:transition-[padding]!;
+ }
+
+ .esf-form .eightshift-block.is-selected::after {
+ @apply esf:content-['']!;
+ @apply esf:outline-accent-500! esf:outline! esf:absolute! esf:inset-0! esf:z-1!;
+ }
+
+ .esf-form .eightshift-block.is-selected {
+ @apply esf:p-10!;
+ }
+}
diff --git a/src/Blocks/components/global-msg/global-msg.php b/src/Blocks/components/global-msg/global-msg.php
index b2f1bc955..91caf055f 100644
--- a/src/Blocks/components/global-msg/global-msg.php
+++ b/src/Blocks/components/global-msg/global-msg.php
@@ -20,7 +20,7 @@
$twClasses = FormsHelper::getTwSelectors($globalMsgTwSelectorsData, ['global-msg']);
-$globalMsgClass = Helpers::classnames([
+$globalMsgClass = Helpers::clsx([
FormsHelper::getTwBase($twClasses, 'global-msg', $componentClass),
Helpers::selector($additionalClass, $additionalClass),
UtilsHelper::getStateSelector('globalMsg'),
diff --git a/src/Blocks/components/group/group.php b/src/Blocks/components/group/group.php
index 47f0fdbd4..ff165ac3c 100644
--- a/src/Blocks/components/group/group.php
+++ b/src/Blocks/components/group/group.php
@@ -21,7 +21,7 @@
$groupBeforeContent = Helpers::checkAttr('groupBeforeContent', $attributes, $manifest);
$groupHelp = Helpers::checkAttr('groupHelp', $attributes, $manifest);
-$groupClass = Helpers::classnames([
+$groupClass = Helpers::clsx([
Helpers::selector($componentClass, $componentClass),
Helpers::selector($additionalGroupClass, $additionalGroupClass),
Helpers::selector($groupStyle, $componentClass, '', $groupStyle),
diff --git a/src/Blocks/components/highlighted-content/highlighted-content.php b/src/Blocks/components/highlighted-content/highlighted-content.php
index 7f60e657b..2e89004cc 100644
--- a/src/Blocks/components/highlighted-content/highlighted-content.php
+++ b/src/Blocks/components/highlighted-content/highlighted-content.php
@@ -16,7 +16,7 @@
$highlightedContentSubtitle = Helpers::checkAttr('highlightedContentSubtitle', $attributes, $manifest);
$highlightedContentIcon = Helpers::checkAttr('highlightedContentIcon', $attributes, $manifest);
-$highlightedContentClass = Helpers::classnames([
+$highlightedContentClass = Helpers::clsx([
Helpers::selector($componentClass, $componentClass),
Helpers::selector($additionalClass, $additionalClass),
]);
diff --git a/src/Blocks/components/input/components/input-editor.js b/src/Blocks/components/input/components/input-editor.js
index 2ae3984c6..ad4335892 100644
--- a/src/Blocks/components/input/components/input-editor.js
+++ b/src/Blocks/components/input/components/input-editor.js
@@ -1,24 +1,12 @@
import React from 'react';
-import classnames from 'classnames';
-import { select } from '@wordpress/data';
-import { selector, checkAttr, props, STORE_NAME, getAttrKey } from '@eightshift/frontend-libs/scripts';
+import { checkAttr, props, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import { FieldEditor } from '../../../components/field/components/field-editor';
-import { MissingName, preventSaveOnMissingProps } from './../../utils';
-import { ConditionalTagsEditor } from '../../conditional-tags/components/conditional-tags-editor';
+import { preventSaveOnMissingProps, StatusIconConditionals, StatusIconMissingName } from './../../utils';
+import manifest from '../manifest.json';
+import { clsx } from '@eightshift/ui-components/utilities';
export const InputEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('input');
-
- const {
- componentClass,
- componentName
- } = manifest;
-
- const {
- additionalFieldClass,
- additionalClass,
- blockClientId,
- } = attributes;
+ const { blockClientId, prefix } = attributes;
const inputName = checkAttr('inputName', attributes, manifest);
const inputValue = checkAttr('inputValue', attributes, manifest);
@@ -27,14 +15,12 @@ export const InputEditor = (attributes) => {
const inputMin = checkAttr('inputMin', attributes, manifest);
const inputMax = checkAttr('inputMax', attributes, manifest);
const inputStep = checkAttr('inputStep', attributes, manifest);
+ const inputIsDisabled = checkAttr('inputIsDisabled', attributes, manifest);
+ const inputIsReadOnly = checkAttr('inputIsReadOnly', attributes, manifest);
+ const inputIsRequired = checkAttr('inputIsRequired', attributes, manifest);
preventSaveOnMissingProps(blockClientId, getAttrKey('inputName', attributes, manifest), inputName);
- const inputClass = classnames([
- selector(componentClass, componentClass),
- selector(additionalClass, additionalClass),
- ]);
-
let additionalProps = {};
if (inputType === 'range') {
@@ -49,21 +35,18 @@ export const InputEditor = (attributes) => {
const input = (
<>
-
-
-
- {inputName &&
-
- }
);
@@ -74,8 +57,10 @@ export const InputEditor = (attributes) => {
fieldContent: input,
fieldIsRequired: checkAttr('inputIsRequired', attributes, manifest),
})}
- additionalFieldClass={additionalFieldClass}
- selectorClass={componentName}
+ statusSlog={[
+ !inputName && ,
+ attributes?.[`${prefix}ConditionalTagsUse`] && ,
+ ]}
/>
);
diff --git a/src/Blocks/components/input/components/input-options.js b/src/Blocks/components/input/components/input-options.js
index 346aae437..a4425d23b 100644
--- a/src/Blocks/components/input/components/input-options.js
+++ b/src/Blocks/components/input/components/input-options.js
@@ -2,58 +2,33 @@
import React from 'react';
import { useState } from '@wordpress/element';
-import { select } from '@wordpress/data';
-import { isArray } from 'lodash';
import { __ } from '@wordpress/i18n';
-import { TextControl, PanelBody, Button } from '@wordpress/components';
+import { getOption, checkAttr, getAttrKey, props } from '@eightshift/frontend-libs-tailwind/scripts';
import {
- icons,
- getOption,
- checkAttr,
- getAttrKey,
- IconLabel,
- props,
Select,
- Section,
NumberPicker,
- IconToggle,
- UseToggle,
- Control,
- STORE_NAME,
-} from '@eightshift/frontend-libs/scripts';
-import { FieldOptions, FieldOptionsMore, FieldOptionsLayout, FieldOptionsVisibility } from '../../field/components/field-options';
+ ContainerPanel,
+ InputField,
+ Toggle,
+ HStack,
+ Spacer,
+ Button,
+} from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import {
+ FieldOptions,
+ FieldOptionsMore,
+ FieldOptionsLayout,
+ FieldOptionsVisibility,
+} from '../../field/components/field-options';
import { isOptionDisabled, NameField } from './../../utils';
import { ConditionalTagsOptions } from '../../conditional-tags/components/conditional-tags-options';
+import manifest from '../manifest.json';
export const InputOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('input');
-
- const {
- options,
- } = manifest;
-
- const {
- setAttributes,
-
- showInputName = true,
- showInputValue = true,
- showInputAdvancedOptions = true,
- showInputPlaceholder = true,
- showInputType = true,
- showInputValidationOptions = true,
- showInputIsDisabled = true,
- showInputIsReadOnly = true,
- showInputIsRequired = true,
- showInputTracking = true,
- showInputValidationPattern = true,
- showInputMinLength = true,
- showInputMaxLength = true,
- showInputMin = true,
- showInputMax = true,
- showInputStep = true,
-
- title = __('Input', 'eightshift-forms'),
- } = attributes;
+ const { options } = manifest;
+
+ const { setAttributes } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -88,72 +63,70 @@ export const InputOptions = (attributes) => {
let inputValidationPatternOptions = [];
- if (typeof esFormsLocalization !== 'undefined' && isArray(esFormsLocalization?.validationPatternsOptions)) {
+ if (typeof esFormsLocalization !== 'undefined') {
inputValidationPatternOptions = esFormsLocalization.validationPatternsOptions;
}
// Output number to 2 decimal places if it's a float, otherwise output to fixed number.
- const formatNumber = (number) => Number((Number.isInteger(number) ? number.toString() : number.toFixed(2)));
+ const formatNumber = (number) => Number(Number.isInteger(number) ? number.toString() : number.toFixed(2));
return (
-
-
-
-
- {showInputType &&
-
+ {inputType === 'range' && (
+ setAttributes({ [getAttrKey('inputRangeUseCustomField', attributes, manifest)]: value })}
+ />
+ )}
{
})}
/>
-
- {!inputUseLabelAsPlaceholder &&
- setAttributes({ [getAttrKey('inputPlaceholder', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputPlaceholder', attributes, manifest), inputDisabledOptions)}
- className='es-no-field-spacing'
- />
- }
-
+ {
setAttributes({ [getAttrKey('inputUseLabelAsPlaceholder', attributes, manifest)]: value });
}}
/>
-
+ {!inputUseLabelAsPlaceholder && (
+ setAttributes({ [getAttrKey('inputPlaceholder', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('inputPlaceholder', attributes, manifest), inputDisabledOptions)}
+ />
+ )}
+
{
})}
/>
-
- {showInputValue &&
- }
- value={inputValue}
- onChange={(value) => setAttributes({ [getAttrKey('inputValue', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputValue', attributes, manifest), inputDisabledOptions)}
- />
- }
-
-
+
+ setAttributes({ [getAttrKey('inputValue', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('inputValue', attributes, manifest), inputDisabledOptions)}
+ />
- {showInputIsReadOnly &&
- setAttributes({ [getAttrKey('inputIsReadOnly', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputIsReadOnly', attributes, manifest), inputDisabledOptions)}
- />
- }
-
- {showInputIsDisabled &&
- setAttributes({ [getAttrKey('inputIsDisabled', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputIsDisabled', attributes, manifest), inputDisabledOptions)}
- noBottomSpacing
- />
- }
-
-
-
- {showInputIsRequired &&
- setAttributes({ [getAttrKey('inputIsRequired', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputIsRequired', attributes, manifest), inputDisabledOptions)}
- />
- }
+
- {(!['number', 'range'].includes(inputType) && (showInputMinLength || showInputMaxLength)) &&
-
-
- {showInputMinLength &&
-
- setAttributes({ [getAttrKey('inputMinLength', attributes, manifest)]: value })}
- min={options.inputMinLength.min}
- max={options.inputMinLength.max}
- step={options.inputMinLength.step}
- disabled={isOptionDisabled(getAttrKey('inputMinLength', attributes, manifest), inputDisabledOptions)}
- placeholder='–'
- fixedWidth={5}
- noBottomSpacing
- />
+ setAttributes({ [getAttrKey('inputIsReadOnly', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('inputIsReadOnly', attributes, manifest), inputDisabledOptions)}
+ />
- {inputMinLength > 0 && !isOptionDisabled(getAttrKey('inputMinLength', attributes, manifest), inputDisabledOptions) &&
-
- }
+
setAttributes({ [getAttrKey('inputIsDisabled', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('inputIsDisabled', attributes, manifest), inputDisabledOptions)}
+ />
- {showInputMaxLength &&
-
- setAttributes({ [getAttrKey('inputMaxLength', attributes, manifest)]: value })}
- min={options.inputMaxLength.min}
- max={options.inputMaxLength.max}
- step={options.inputMaxLength.step}
- disabled={isOptionDisabled(getAttrKey('inputMaxLength', attributes, manifest), inputDisabledOptions)}
- placeholder='–'
- fixedWidth={5}
- noBottomSpacing
- />
+
+ setAttributes({ [getAttrKey('inputIsRequired', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('inputIsRequired', attributes, manifest), inputDisabledOptions)}
+ />
- {inputMaxLength > 0 && !isOptionDisabled(getAttrKey('inputMaxLength', attributes, manifest), inputDisabledOptions) &&
-
- }
-
- }
- value={inputRangeShowMinPrefix}
- onChange={(value) => setAttributes({ [getAttrKey('inputRangeShowMinPrefix', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputRangeShowMinPrefix', attributes, manifest), inputDisabledOptions)}
- className='es-no-field-spacing'
- />
- }
- value={inputRangeShowMinSuffix}
- onChange={(value) => setAttributes({ [getAttrKey('inputRangeShowMinSuffix', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputRangeShowMinSuffix', attributes, manifest), inputDisabledOptions)}
- className='es-no-field-spacing'
- />
-
-
- {
- setAttributes({ [getAttrKey('inputRangeShowCurrent', attributes, manifest)]: value });
-
- if (!value) {
- setAttributes({ [getAttrKey('inputRangeShowCurrentPrefix', attributes, manifest)]: undefined });
- setAttributes({ [getAttrKey('inputRangeShowCurrentSuffix', attributes, manifest)]: undefined });
+ disabled={isOptionDisabled(
+ getAttrKey('inputRangeShowMinPrefix', attributes, manifest),
+ inputDisabledOptions,
+ )}
+ />
+
+ setAttributes({ [getAttrKey('inputRangeShowMinSuffix', attributes, manifest)]: value })
}
- }}
- disabled={isOptionDisabled(getAttrKey('inputRangeShowCurrent', attributes, manifest), inputDisabledOptions)}
- noBottomSpacing
- >
-
- }
- value={inputRangeShowCurrentPrefix}
- onChange={(value) => setAttributes({ [getAttrKey('inputRangeShowCurrentPrefix', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputRangeShowCurrentPrefix', attributes, manifest), inputDisabledOptions)}
- className='es-no-field-spacing'
- />
- }
- value={inputRangeShowCurrentSuffix}
- onChange={(value) => setAttributes({ [getAttrKey('inputRangeShowCurrentSuffix', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputRangeShowCurrentSuffix', attributes, manifest), inputDisabledOptions)}
- className='es-no-field-spacing'
- />
-
-
- {
- setAttributes({ [getAttrKey('inputRangeShowMax', attributes, manifest)]: value });
-
- if (!value) {
- setAttributes({ [getAttrKey('inputRangeShowMaxPrefix', attributes, manifest)]: undefined });
- setAttributes({ [getAttrKey('inputRangeShowMaxSuffix', attributes, manifest)]: undefined });
+ disabled={isOptionDisabled(
+ getAttrKey('inputRangeShowMinSuffix', attributes, manifest),
+ inputDisabledOptions,
+ )}
+ />
+
+
+ {
+ setAttributes({ [getAttrKey('inputRangeShowCurrent', attributes, manifest)]: value });
+
+ if (!value) {
+ setAttributes({ [getAttrKey('inputRangeShowCurrentPrefix', attributes, manifest)]: undefined });
+ setAttributes({ [getAttrKey('inputRangeShowCurrentSuffix', attributes, manifest)]: undefined });
+ }
+ }}
+ disabled={isOptionDisabled(
+ getAttrKey('inputRangeShowCurrent', attributes, manifest),
+ inputDisabledOptions,
+ )}
+ >
+
+
+ setAttributes({ [getAttrKey('inputRangeShowCurrentPrefix', attributes, manifest)]: value })
}
- }}
- disabled={isOptionDisabled(getAttrKey('inputRangeShowMax', attributes, manifest), inputDisabledOptions)}
- >
-
- }
- value={inputRangeShowMaxPrefix}
- onChange={(value) => setAttributes({ [getAttrKey('inputRangeShowMaxPrefix', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputRangeShowMaxPrefix', attributes, manifest), inputDisabledOptions)}
- className='es-no-field-spacing'
- />
- }
- value={inputRangeShowMaxSuffix}
- onChange={(value) => setAttributes({ [getAttrKey('inputRangeShowMaxSuffix', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputRangeShowMaxSuffix', attributes, manifest), inputDisabledOptions)}
- className='es-no-field-spacing'
- />
-
-
-
- }
-
-
- {showInputMin &&
-
- setAttributes({ [getAttrKey('inputMin', attributes, manifest)]: formatNumber(value) })}
- min={options.inputMin.min}
- max={options.inputMin.max}
- step={options.inputMin.step}
- disabled={isOptionDisabled(getAttrKey('inputMin', attributes, manifest), inputDisabledOptions)}
- placeholder='–'
- fixedWidth={5}
- noBottomSpacing
+ disabled={isOptionDisabled(
+ getAttrKey('inputRangeShowCurrentPrefix', attributes, manifest),
+ inputDisabledOptions,
+ )}
/>
-
- {inputMin > 0 && !isOptionDisabled(getAttrKey('inputMin', attributes, manifest), inputDisabledOptions) &&
-
- }
-
- {showInputMax &&
-
- setAttributes({ [getAttrKey('inputMax', attributes, manifest)]: formatNumber(value) })}
- min={options.inputMax.min}
- max={options.inputMax.max}
- step={options.inputMax.step}
- disabled={isOptionDisabled(getAttrKey('inputMax', attributes, manifest), inputDisabledOptions)}
- placeholder='–'
- fixedWidth={5}
- noBottomSpacing
+ }}
+ disabled={isOptionDisabled(getAttrKey('inputRangeShowMax', attributes, manifest), inputDisabledOptions)}
+ >
+
+
+ setAttributes({ [getAttrKey('inputRangeShowMaxPrefix', attributes, manifest)]: value })
+ }
+ disabled={isOptionDisabled(
+ getAttrKey('inputRangeShowMaxPrefix', attributes, manifest),
+ inputDisabledOptions,
+ )}
+ />
+
+ setAttributes({ [getAttrKey('inputRangeShowMaxSuffix', attributes, manifest)]: value })
+ }
+ disabled={isOptionDisabled(
+ getAttrKey('inputRangeShowMaxSuffix', attributes, manifest),
+ inputDisabledOptions,
+ )}
/>
+
+
+
+ )}
+
+ )}
+
+
- {inputMax > 0 && !isOptionDisabled(getAttrKey('inputMax', attributes, manifest), inputDisabledOptions) &&
-
- }
-
- setAttributes({ [getAttrKey('inputStep', attributes, manifest)]: value })}
- min={options.inputStep.min}
- max={options.inputStep.max}
- step={options.inputStep.step}
- disabled={isOptionDisabled(getAttrKey('inputStep', attributes, manifest), inputDisabledOptions)}
- fixedWidth={5}
- noBottomSpacing
- />
-
- {inputStep > 0 && !isOptionDisabled(getAttrKey('inputStep', attributes, manifest), inputDisabledOptions) &&
-
-
- }
-
- {showInputValidationPattern && !inputIsUrl && !inputIsEmail &&
-
-
-
- {showInputTracking &&
- }
- value={inputTracking}
- onChange={(value) => setAttributes({ [getAttrKey('inputTracking', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('inputTracking', attributes, manifest), inputDisabledOptions)}
- className='es-no-field-spacing'
- />
- }
-
+ setAttributes({ [getAttrKey('inputTracking', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('inputTracking', attributes, manifest), inputDisabledOptions)}
+ />
{
conditionalTagsIsHidden: checkAttr('inputFieldHidden', attributes, manifest),
})}
/>
-
+
);
};
diff --git a/src/Blocks/components/integrations/components/integrations-editor.js b/src/Blocks/components/integrations/components/integrations-editor.js
index b1c1560d4..d13850f9b 100644
--- a/src/Blocks/components/integrations/components/integrations-editor.js
+++ b/src/Blocks/components/integrations/components/integrations-editor.js
@@ -4,7 +4,7 @@ import React from 'react';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { InnerBlocks } from '@wordpress/block-editor';
-import { BlockInserter, props } from '@eightshift/frontend-libs/scripts';
+import { BlockInserter, props } from '@eightshift/frontend-libs-tailwind/scripts';
import { additionalBlocksIntegration, FormEditor } from './../../form/components/form-editor';
import { InvalidEditor } from './../../invalid/components/invalid-editor';
@@ -17,7 +17,6 @@ export const IntegrationsEditor = ({
useInnerId = false,
allowedBlocks = [],
}) => {
-
// Check if form selector has inner blocks.
const hasInnerBlocks = useSelect((select) => {
const blocks = select('core/block-editor').getBlock(clientId);
@@ -27,32 +26,16 @@ export const IntegrationsEditor = ({
const InvalidPlaceholder = () => {
return (
-
+
);
};
const OutputDefault = () => {
- return (
- <>
- {itemId ?
- :
-
- }
-
- );
+ return <>{itemId ? : };
};
const OutputWithInner = () => {
- return (
- <>
- {(itemId && innerId) ?
- :
-
- }
-
- );
+ return <>{itemId && innerId ? : };
};
const Output = () => {
@@ -60,27 +43,20 @@ export const IntegrationsEditor = ({
}
- />
+ formContent: (
+ }
+ />
+ ),
})}
/>
);
};
if (hasInnerBlocks) {
- return (
- useInnerId ? :
- );
+ return useInnerId ? : ;
}
- return (
-
- );
+ return ;
};
diff --git a/src/Blocks/components/integrations/components/integrations-internal-options.js b/src/Blocks/components/integrations/components/integrations-internal-options.js
index 2632aba24..1790d0bdb 100644
--- a/src/Blocks/components/integrations/components/integrations-internal-options.js
+++ b/src/Blocks/components/integrations/components/integrations-internal-options.js
@@ -1,53 +1,53 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
-import { select } from "@wordpress/data";
-import { PanelBody, Button } from '@wordpress/components';
-import { props, Section, Control, icons } from '@eightshift/frontend-libs/scripts';
+import { select } from '@wordpress/data';
+import { props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { BaseControl, Button, ContainerPanel, Spacer, HStack } from '@eightshift/ui-components';
import { LocationsButton, SettingsButton, resetInnerBlocks } from '../../utils';
+import { icons } from '@eightshift/ui-components/icons';
import { FormOptions } from '../../../components/form/components/form-options';
import { StepMultiflowOptions } from '../../step/components/step-multiflow-options';
-export const IntegrationsInternalOptions = ({
- title,
- attributes,
- setAttributes,
- clientId,
-}) => {
-
+export const IntegrationsInternalOptions = ({ attributes, setAttributes, clientId }) => {
const postId = select('core/editor').getCurrentPostId();
return (
<>
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
-
-
+
{
const postId = select('core/editor').getCurrentPostId();
- // Check if form selector has inner blocks.
+ // Check if form selector has inner blocks.
const hasInnerBlocks = useSelect((select) => {
const blocks = select('core/block-editor').getBlock(clientId);
@@ -73,58 +82,73 @@ export const IntegrationsOptions = ({
return (
}
+ title={
+
+ }
onRequestClose={() => {
setModalOpen(false);
dispatch(FORMS_STORE_NAME).setIsSyncDialogOpen(false);
}}
>
- 0}
icon={icons.add}
label={__('Added fields', 'eightshift-forms')}
- additionalLabelClasses='es-nested-bg-green-500!'
- noBottomSpacing={changed.length < 1 && replaced.length < 1 && removed?.length < 1}
>
-
- {added.map((item, i) =>
)}
+
+ {added.map((item, i) => (
+
+ ))}
-
+
-
0} icon={icons.trash}
+ 0}
+ icon={icons.trash}
label={__('Removed fields', 'eightshift-forms')}
- additionalLabelClasses='es-nested-bg-red-500!'
- noBottomSpacing={changed.length < 1 && replaced.length < 1}
>
-
- {removed.map((item, i) =>
)}
+
+ {removed.map((item, i) => (
+
+ ))}
-
+
-
0}
icon={icons.swap}
label={__('Replaced fields', 'eightshift-forms')}
- additionalLabelClasses='es-nested-bg-yellow-500!'
- noBottomSpacing={changed.length < 1}
>
-
- {replaced.map((item, i) =>
)}
+
+ {replaced.map((item, i) => (
+
+ ))}
-
+
-
0}
icon={icons.edit}
label={__('Updated field attributes', 'eightshift-forms')}
- additionalLabelClasses='es-nested-bg-blue-500!'
- noBottomSpacing
>
-
- {changed.map((item, i) =>
-
+ {changed.map((item, i) => (
+
@@ -132,30 +156,38 @@ export const IntegrationsOptions = ({
}
key={i}
- standalone
- />)
- }
+ />
+ ))}
+
);
};
return (
<>
-
-
-
+
+
+
-
+
-
+
+ )}
+
-
-
+
+
-
-
-
- {isModalOpen &&
-
- }
+
+
-
+ {isModalOpen && }
+
{
return (
-
-
- {icon && getUtilsIcons(icon) &&
}
+
+
+ {icon && getUtilsIcons(icon) &&
}
{(!icon || (icon && !getUtilsIcons(icon))) && icons.warningFillTransparent}
- {heading &&
-
{heading}
- }
+ {heading &&
{heading}}
- {text &&
-
{text}
- }
+ {text &&
{text}}
);
};
diff --git a/src/Blocks/components/layout/layout.php b/src/Blocks/components/layout/layout.php
index a13a5cdca..84c944f27 100644
--- a/src/Blocks/components/layout/layout.php
+++ b/src/Blocks/components/layout/layout.php
@@ -22,7 +22,7 @@
$layoutTag = Helpers::checkAttr('layoutTag', $attributes, $manifest);
$layoutType = Helpers::checkAttr('layoutType', $attributes, $manifest);
-$layoutClass = Helpers::classnames([
+$layoutClass = Helpers::clsx([
Helpers::selector($componentClass, $componentClass),
Helpers::selector($blockClass, $blockClass, $selectorClass),
Helpers::selector($additionalClass, $additionalClass),
diff --git a/src/Blocks/components/loader/loader.php b/src/Blocks/components/loader/loader.php
index be26adac7..b751dfd35 100644
--- a/src/Blocks/components/loader/loader.php
+++ b/src/Blocks/components/loader/loader.php
@@ -19,7 +19,7 @@
$twClasses = FormsHelper::getTwSelectors($loaderTwSelectorsData, ['loader']);
-$loaderClass = Helpers::classnames([
+$loaderClass = Helpers::clsx([
FormsHelper::getTwBase($twClasses, 'loader', $componentClass),
Helpers::selector($additionalClass, $additionalClass),
UtilsHelper::getStateSelector('loader'),
@@ -27,11 +27,11 @@
Helpers::selector(!$loaderIsGeolocation && $componentClass, $componentClass, 'form'),
]);
-$loaderSpinnerClass = Helpers::classnames([
+$loaderSpinnerClass = Helpers::clsx([
FormsHelper::getTwPart($twClasses, 'loader', 'spinner', "{$componentClass}__spinner"),
]);
-$loaderOverlayClass = Helpers::classnames([
+$loaderOverlayClass = Helpers::clsx([
FormsHelper::getTwPart($twClasses, 'loader', 'overlay', "{$componentClass}__overlay"),
]);
diff --git a/src/Blocks/components/notice/notice.php b/src/Blocks/components/notice/notice.php
index eb7ddd1f6..357d8e2b2 100644
--- a/src/Blocks/components/notice/notice.php
+++ b/src/Blocks/components/notice/notice.php
@@ -15,7 +15,7 @@
$noticeContent = Helpers::checkAttr('noticeContent', $attributes, $manifest);
-$noticeClass = Helpers::classnames([
+$noticeClass = Helpers::clsx([
Helpers::selector($componentClass, $componentClass),
Helpers::selector($selectorClass, $selectorClass, $componentClass),
Helpers::selector($additionalNoticeClass, $additionalNoticeClass),
diff --git a/src/Blocks/components/phone/components/phone-editor.js b/src/Blocks/components/phone/components/phone-editor.js
index e1a81ff5f..039eb9423 100644
--- a/src/Blocks/components/phone/components/phone-editor.js
+++ b/src/Blocks/components/phone/components/phone-editor.js
@@ -1,32 +1,12 @@
import React from 'react';
-import classnames from 'classnames';
-import { select } from '@wordpress/data';
-import {
- selector,
- checkAttr,
- props,
- STORE_NAME,
- getAttrKey,
-} from '@eightshift/frontend-libs/scripts';
+import { __ } from '@wordpress/i18n';
+import { checkAttr, props, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import { FieldEditor } from '../../field/components/field-editor';
-import { MissingName, preventSaveOnMissingProps } from './../../utils';
-import { ConditionalTagsEditor } from '../../conditional-tags/components/conditional-tags-editor';
+import { preventSaveOnMissingProps, StatusIconConditionals, StatusIconMissingName } from './../../utils';
+import manifest from '../manifest.json';
export const PhoneEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('phone');
-
- const {
- componentClass,
- componentName
- } = manifest;
-
- const {
- additionalFieldClass,
- additionalClass,
- blockClientId,
- } = attributes;
-
- const manifestSelect = select(STORE_NAME).getComponent('select');
+ const { blockClientId, prefix } = attributes;
const phoneValue = checkAttr('phoneValue', attributes, manifest);
const phonePlaceholder = checkAttr('phonePlaceholder', attributes, manifest);
@@ -34,33 +14,22 @@ export const PhoneEditor = (attributes) => {
preventSaveOnMissingProps(blockClientId, getAttrKey('phoneName', attributes, manifest), phoneName);
- const phoneClass = classnames([
- selector(componentClass, componentClass),
- selector(additionalClass, additionalClass),
- ]);
-
- const selectClass = classnames([
- selector(manifestSelect.componentClass, manifestSelect.componentClass),
- selector(additionalClass, additionalClass),
- ]);
-
const phone = (
- <>
-
+
+
-
-
-
-
-
+
);
return (
@@ -70,8 +39,10 @@ export const PhoneEditor = (attributes) => {
fieldContent: phone,
fieldIsRequired: checkAttr('phoneIsRequired', attributes, manifest),
})}
- additionalFieldClass={additionalFieldClass}
- selectorClass={componentName}
+ statusSlog={[
+ !phoneName &&
,
+ attributes?.[`${prefix}ConditionalTagsUse`] &&
,
+ ]}
/>
);
diff --git a/src/Blocks/components/phone/components/phone-options.js b/src/Blocks/components/phone/components/phone-options.js
index 8aa6b9ba2..921c3edad 100644
--- a/src/Blocks/components/phone/components/phone-options.js
+++ b/src/Blocks/components/phone/components/phone-options.js
@@ -2,19 +2,23 @@
import React from 'react';
import { useState } from '@wordpress/element';
-import { select } from '@wordpress/data';
-import { isArray } from 'lodash';
import { __ } from '@wordpress/i18n';
-import { TextControl, PanelBody } from '@wordpress/components';
-import { icons, checkAttr, getAttrKey, IconLabel, props, IconToggle, Section, Select, STORE_NAME, getOption } from '@eightshift/frontend-libs/scripts';
-import { FieldOptions, FieldOptionsMore, FieldOptionsLayout, FieldOptionsVisibility } from '../../field/components/field-options';
+import { checkAttr, getAttrKey, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { Select, ContainerPanel, InputField, Toggle, Spacer } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
+import {
+ FieldOptions,
+ FieldOptionsMore,
+ FieldOptionsLayout,
+ FieldOptionsVisibility,
+} from '../../field/components/field-options';
import { isOptionDisabled, NameField } from '../../utils';
import { ConditionalTagsOptions } from '../../conditional-tags/components/conditional-tags-options';
+import manifest from '../manifest.json';
+import { ContainerGroup } from '@eightshift/ui-components';
export const PhoneOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('phone');
-
- const { setAttributes, title = __('Phone', 'eightshift-forms') } = attributes;
+ const { setAttributes } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -36,26 +40,26 @@ export const PhoneOptions = (attributes) => {
let phoneValidationPatternOptions = [];
- if (typeof esFormsLocalization !== 'undefined' && isArray(esFormsLocalization?.validationPatternsOptions)) {
+ if (typeof esFormsLocalization !== 'undefined') {
phoneValidationPatternOptions = esFormsLocalization.validationPatternsOptions;
}
return (
-
-
+ text={__('General', 'eightshift-forms')}
+ />
+
{
})}
/>
-
- {!phoneUseLabelAsPlaceholder && (
- setAttributes({ [getAttrKey('phonePlaceholder', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('phonePlaceholder', attributes, manifest), phoneDisabledOptions)}
- className='es-no-field-spacing'
- />
- )}
-
+ {
setAttributes({ [getAttrKey('phoneUseLabelAsPlaceholder', attributes, manifest)]: value });
}}
/>
-
+ {!phoneUseLabelAsPlaceholder && (
+ setAttributes({ [getAttrKey('phonePlaceholder', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('phonePlaceholder', attributes, manifest), phoneDisabledOptions)}
+ />
+ )}
+
{
})}
/>
-
-
- }
- type='number'
- min='1'
- value={phoneValue}
- onChange={(value) => setAttributes({ [getAttrKey('phoneValue', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('phoneValue', attributes, manifest), phoneDisabledOptions)}
- help={__('Initial value of the field in phone number format (e.g. "1234567890").', 'eightshift-forms')}
- />
+ text={__('Advanced', 'eightshift-forms')}
+ />
-
- }
- value={phoneSelectValue}
- onChange={(value) => setAttributes({ [getAttrKey('phoneSelectValue', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('phoneSelectValue', attributes, manifest), phoneDisabledOptions)}
- help={__('Initial value of the field in country code format (e.g. "hr"). Only one value is allowed. Phone dropdown can\'t be empty so if no value is provided, the first option will be selected. If geolocation is enabled it will be preselected based on the user\'s location.', 'eightshift-forms')}
- />
+ setAttributes({ [getAttrKey('phoneValue', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('phoneValue', attributes, manifest), phoneDisabledOptions)}
+ help={__('Initial value of the field in phone number format (e.g. "1234567890").', 'eightshift-forms')}
+ />
-
+
+
);
};
diff --git a/src/Blocks/components/phone/phone.php b/src/Blocks/components/phone/phone.php
index 96e1932b5..a389a4d21 100644
--- a/src/Blocks/components/phone/phone.php
+++ b/src/Blocks/components/phone/phone.php
@@ -48,12 +48,12 @@
$twClasses = FormsHelper::getTwSelectors($phoneTwSelectorsData, ['phone']);
-$phoneClass = Helpers::classnames([
+$phoneClass = Helpers::clsx([
FormsHelper::getTwBase($twClasses, 'phone', $componentClass),
Helpers::selector($additionalClass, $additionalClass),
]);
-$phoneSelectClass = Helpers::classnames([
+$phoneSelectClass = Helpers::clsx([
Helpers::selector($manifestSelect['componentClass'], $manifestSelect['componentClass'], 'select'),
Helpers::selector($componentClass, $componentClass, 'select'),
]);
diff --git a/src/Blocks/components/progress-bar/components/progress-bar-options.js b/src/Blocks/components/progress-bar/components/progress-bar-options.js
index 33643c7d6..c4e7d23ca 100644
--- a/src/Blocks/components/progress-bar/components/progress-bar-options.js
+++ b/src/Blocks/components/progress-bar/components/progress-bar-options.js
@@ -1,15 +1,12 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
-import { select } from '@wordpress/data';
-import { TextControl } from '@wordpress/components';
-import { icons, checkAttr, IconToggle, getAttrKey, STORE_NAME } from '@eightshift/frontend-libs/scripts';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
+import { icons } from '@eightshift/ui-components/icons';
+import { InputField, Toggle } from '@eightshift/ui-components';
+import manifest from '../manifest.json';
export const ProgressBarOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('progress-bar');
-
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const progressBarUse = checkAttr('progressBarUse', attributes, manifest);
const progressBarHideLabels = checkAttr('progressBarHideLabels', attributes, manifest);
@@ -18,7 +15,7 @@ export const ProgressBarOptions = (attributes) => {
return (
<>
-
{
}}
/>
- {
}}
/>
- {progressBarMultiflowUse &&
- setAttributes({ [getAttrKey('progressBarMultiflowInitCount', attributes, manifest)]: value })}
+ onChange={(value) =>
+ setAttributes({ [getAttrKey('progressBarMultiflowInitCount', attributes, manifest)]: value })
+ }
/>
- }
+ )}
);
};
diff --git a/src/Blocks/components/progress-bar/partials/multistep.php b/src/Blocks/components/progress-bar/partials/multistep.php
index f0d8c22a1..7860e407d 100644
--- a/src/Blocks/components/progress-bar/partials/multistep.php
+++ b/src/Blocks/components/progress-bar/partials/multistep.php
@@ -22,7 +22,7 @@
$hideLabels = $attributes['hideLabels'] ?? false;
-$progressBarItemClass = Helpers::classnames([
+$progressBarItemClass = Helpers::clsx([
FormsHelper::getTwPart($twClasses, 'progress-bar', 'item', "{$componentClass}__item"),
Helpers::selector($jsClass, $jsClass),
]);
diff --git a/src/Blocks/components/progress-bar/progress-bar.php b/src/Blocks/components/progress-bar/progress-bar.php
index c6b28e8d3..bfb26d3ec 100644
--- a/src/Blocks/components/progress-bar/progress-bar.php
+++ b/src/Blocks/components/progress-bar/progress-bar.php
@@ -30,7 +30,7 @@
$twClasses = FormsHelper::getTwSelectors($progressBarTwSelectorsData, ['progress-bar']);
-$progressBarClass = Helpers::classnames([
+$progressBarClass = Helpers::clsx([
FormsHelper::getTwBase($twClasses, 'progress-bar', $componentClass),
$progressBarMultiflowUse ? FormsHelper::getTwPart($twClasses, 'progress-bar', 'multiflow', "{$componentClass}--multiflow") : FormsHelper::getTwPart($twClasses, 'progress-bar', 'multistep', "{$componentClass}--multistep"),
Helpers::selector($progressBarMultiflowUse, $componentClass, '', 'multiflow'),
diff --git a/src/Blocks/components/radio/components/radio-editor.js b/src/Blocks/components/radio/components/radio-editor.js
index 88fa1dc9f..5eb5be7a0 100644
--- a/src/Blocks/components/radio/components/radio-editor.js
+++ b/src/Blocks/components/radio/components/radio-editor.js
@@ -1,30 +1,18 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
-import { select } from '@wordpress/data';
-import classnames from 'classnames';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import {
- selector,
- checkAttr,
- props,
- STORE_NAME,
- getAttrKey,
-} from '@eightshift/frontend-libs/scripts';
-import { ConditionalTagsEditor } from '../../conditional-tags/components/conditional-tags-editor';
-import { MissingName, VisibilityHidden, preventSaveOnMissingProps } from './../../utils';
+ StatusFieldOutput,
+ StatusIconConditionals,
+ StatusIconHidden,
+ StatusIconMissingName,
+ preventSaveOnMissingProps,
+} from './../../utils';
+import manifest from '../manifest.json';
+import { clsx } from '@eightshift/ui-components/utilities';
export const RadioEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('radio');
-
- const {
- componentClass,
- } = manifest;
-
- const {
- selectorClass = componentClass,
- blockClass,
- additionalClass,
- blockClientId,
- } = attributes;
+ const { blockClientId, prefix } = attributes;
const radioLabel = checkAttr('radioLabel', attributes, manifest);
const radioValue = checkAttr('radioValue', attributes, manifest);
@@ -33,36 +21,34 @@ export const RadioEditor = (attributes) => {
preventSaveOnMissingProps(blockClientId, getAttrKey('radioValue', attributes, manifest), radioValue);
- const radioClass = classnames([
- selector(componentClass, componentClass),
- selector(blockClass, blockClass, selectorClass),
- selector(additionalClass, additionalClass),
- selector(radioIsHidden, 'es-form-is-hidden'),
- ]);
-
- const radioLabelClass = classnames([
- selector(componentClass, componentClass, 'label'),
- selector(radioLabel === '', componentClass, 'label', 'placeholder'),
- selector(radioIsChecked, componentClass, 'label', 'checked'),
- ]);
-
return (
-
-
-
-
-
-
-
-
-
-
- {radioValue &&
-
- }
-
+
+
+ ,
+ !radioValue && ,
+ attributes?.[`${prefix}ConditionalTagsUse`] && ,
+ ]}
+ />
);
};
diff --git a/src/Blocks/components/radio/components/radio-options.js b/src/Blocks/components/radio/components/radio-options.js
index 289601c01..bea93fb45 100644
--- a/src/Blocks/components/radio/components/radio-options.js
+++ b/src/Blocks/components/radio/components/radio-options.js
@@ -1,29 +1,17 @@
import React from 'react';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { select } from '@wordpress/data';
-import { PanelBody, Button, TextareaControl } from '@wordpress/components';
import { MediaPlaceholder } from '@wordpress/block-editor';
-import {
- checkAttr,
- getAttrKey,
- icons,
- IconLabel,
- IconToggle,
- props,
- Section,
- AnimatedContentVisibility,
- STORE_NAME,
-} from '@eightshift/frontend-libs/scripts';
+import { checkAttr, getAttrKey, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { icons } from '@eightshift/ui-components/icons';
+import { Button, ContainerPanel, InputField, Toggle, Spacer } from '@eightshift/ui-components';
import { ConditionalTagsOptions } from '../../conditional-tags/components/conditional-tags-options';
import { isOptionDisabled, NameField } from './../../utils';
+import manifest from '../manifest.json';
+import { Notice } from '@eightshift/ui-components';
export const RadioOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('radio');
-
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -37,92 +25,98 @@ export const RadioOptions = (attributes) => {
const radioIsHidden = checkAttr('radioIsHidden', attributes, manifest);
return (
-
-
+
+
+
-
- setAttributes({ [getAttrKey('radioHideLabelText', attributes, manifest)]: !value })}
- reducedBottomSpacing
+ setAttributes({ [getAttrKey('radioHideLabelText', attributes, manifest)]: !value })}
+ />
+
+ {!radioHideLabelText && (
+ setAttributes({ [getAttrKey('radioLabel', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('radioLabel', attributes, manifest), radioDisabledOptions)}
/>
+ )}
- {!radioHideLabelText &&
- setAttributes({ [getAttrKey('radioLabel', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('radioLabel', attributes, manifest), radioDisabledOptions)}
- />
- }
+ {(radioHideLabelText || radioLabel === '') && (
+
+ )}
-
-
-
-
+
-
- setAttributes({ [getAttrKey('radioIsChecked', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('radioIsChecked', attributes, manifest), radioDisabledOptions)}
- />
+ setAttributes({ [getAttrKey('radioIsChecked', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('radioIsChecked', attributes, manifest), radioDisabledOptions)}
+ />
- setAttributes({ [getAttrKey('radioIsDisabled', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('radioIsDisabled', attributes, manifest), radioDisabledOptions)}
- />
+ setAttributes({ [getAttrKey('radioIsDisabled', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('radioIsDisabled', attributes, manifest), radioDisabledOptions)}
+ />
- setAttributes({ [getAttrKey('radioIsHidden', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('radioIsHidden', attributes, manifest), radioDisabledOptions)}
- noBottomSpacing
- />
-
+ setAttributes({ [getAttrKey('radioIsHidden', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('radioIsHidden', attributes, manifest), radioDisabledOptions)}
+ />
-
- {radioIcon ?
- <>
- 
-
+
+
);
};
diff --git a/src/Blocks/components/radio/radio.php b/src/Blocks/components/radio/radio.php
index 9217a7149..f45a2c5f0 100644
--- a/src/Blocks/components/radio/radio.php
+++ b/src/Blocks/components/radio/radio.php
@@ -34,14 +34,14 @@
$twClasses = FormsHelper::getTwSelectors($radioTwSelectorsData, ['radio']);
-$radioClass = Helpers::classnames([
+$radioClass = Helpers::clsx([
FormsHelper::getTwBase($twClasses, 'radio', $componentClass),
Helpers::selector($additionalClass, $additionalClass),
Helpers::selector($radioIsDisabled, UtilsHelper::getStateSelector('isDisabled')),
Helpers::selector($radioIsHidden, UtilsHelper::getStateSelector('isHidden')),
]);
-$radioInputClass = Helpers::classnames([
+$radioInputClass = Helpers::clsx([
FormsHelper::getTwPart($twClasses, 'radio', 'input', "{$componentClass}__input"),
Helpers::selector($radioSingleSubmit, UtilsHelper::getStateSelectorAdmin('singleSubmit')),
]);
diff --git a/src/Blocks/components/radios/components/radios-editor.js b/src/Blocks/components/radios/components/radios-editor.js
index ee5fd0428..a69f1617f 100644
--- a/src/Blocks/components/radios/components/radios-editor.js
+++ b/src/Blocks/components/radios/components/radios-editor.js
@@ -1,45 +1,18 @@
import React from 'react';
-import { select } from '@wordpress/data';
-import {
- STORE_NAME,
- checkAttr,
- props,
- getAttrKey,
-} from '@eightshift/frontend-libs/scripts';
+import { checkAttr, props, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import { FieldEditor } from '../../field/components/field-editor';
-import { MissingName, preventSaveOnMissingProps } from './../../utils';
-import { ConditionalTagsEditor } from '../../conditional-tags/components/conditional-tags-editor';
+import { preventSaveOnMissingProps, StatusIconMissingName, StatusIconConditionals } from './../../utils';
+import manifest from '../manifest.json';
export const RadiosEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('radios');
-
- const {
- componentName
- } = manifest;
-
- const {
- additionalFieldClass,
- blockClientId,
- } = attributes;
+ const { blockClientId, prefix } = attributes;
const radiosContent = checkAttr('radiosContent', attributes, manifest);
const radiosName = checkAttr('radiosName', attributes, manifest);
preventSaveOnMissingProps(blockClientId, getAttrKey('radiosName', attributes, manifest), radiosName);
- const radios = (
- <>
- {radiosContent}
-
-
-
- {radiosName &&
-
- }
-
- );
+ const radios =
{radiosContent}
;
return (
<>
@@ -48,8 +21,10 @@ export const RadiosEditor = (attributes) => {
fieldContent: radios,
fieldIsRequired: checkAttr('radiosIsRequired', attributes, manifest),
})}
- additionalFieldClass={additionalFieldClass}
- selectorClass={componentName}
+ statusSlog={[
+ !radiosName &&
,
+ attributes?.[`${prefix}ConditionalTagsUse`] &&
,
+ ]}
/>
);
diff --git a/src/Blocks/components/radios/components/radios-options.js b/src/Blocks/components/radios/components/radios-options.js
index fc5ac6007..b0865c0fd 100644
--- a/src/Blocks/components/radios/components/radios-options.js
+++ b/src/Blocks/components/radios/components/radios-options.js
@@ -1,30 +1,22 @@
import React from 'react';
import { useState } from '@wordpress/element';
-import { select } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-import { TextControl, PanelBody } from '@wordpress/components';
+import { checkAttr, getAttrKey, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import { Select, ContainerPanel, InputField, Toggle, Spacer } from '@eightshift/ui-components';
+import { icons } from '@eightshift/ui-components/icons';
import {
- checkAttr,
- getAttrKey,
- props,
- icons,
- Section,
- IconToggle,
- IconLabel,
- STORE_NAME,
- Select,
-} from '@eightshift/frontend-libs/scripts';
-import { FieldOptions, FieldOptionsMore, FieldOptionsLayout, FieldOptionsVisibility } from '../../field/components/field-options';
+ FieldOptions,
+ FieldOptionsMore,
+ FieldOptionsLayout,
+ FieldOptionsVisibility,
+} from '../../field/components/field-options';
import { isOptionDisabled, NameField } from './../../utils';
import { ConditionalTagsOptions } from '../../conditional-tags/components/conditional-tags-options';
+import manifest from '../manifest.json';
+import globalManifest from '../../../manifest.json';
export const RadiosOptions = (attributes) => {
- const globalManifest = select(STORE_NAME).getSettings();
- const manifest = select(STORE_NAME).getComponent('radios');
-
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -37,18 +29,21 @@ export const RadiosOptions = (attributes) => {
const radiosPlaceholder = checkAttr('radiosPlaceholder', attributes, manifest);
return (
-
-
+
+
+
+
);
};
diff --git a/src/Blocks/components/rating/components/rating-editor.js b/src/Blocks/components/rating/components/rating-editor.js
index 0b7054d4e..a959666b5 100644
--- a/src/Blocks/components/rating/components/rating-editor.js
+++ b/src/Blocks/components/rating/components/rating-editor.js
@@ -1,60 +1,37 @@
import React from 'react';
-import { select } from '@wordpress/data';
-import classnames from 'classnames';
-import {
- selector,
- checkAttr,
- props,
- STORE_NAME,
- getAttrKey,
-} from '@eightshift/frontend-libs/scripts';
+import { checkAttr, props, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import { FieldEditor } from '../../field/components/field-editor';
-import { MissingName, preventSaveOnMissingProps } from '../../utils';
-import { ConditionalTagsEditor } from '../../conditional-tags/components/conditional-tags-editor';
+import { preventSaveOnMissingProps, StatusIconMissingName, StatusIconConditionals } from '../../utils';
import { getUtilsIcons } from '../../form/assets/state-init';
+import manifest from '../manifest.json';
export const RatingEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('rating');
-
- const {
- componentName,
- componentClass
- } = manifest;
-
- const {
- additionalFieldClass,
- blockClientId,
- additionalClass,
- } = attributes;
+ const { blockClientId, prefix } = attributes;
const ratingName = checkAttr('ratingName', attributes, manifest);
const ratingAmount = checkAttr('ratingAmount', attributes, manifest);
const ratingValue = checkAttr('ratingValue', attributes, manifest);
- const ratingClass = classnames([
- selector(componentClass, componentClass),
- selector(additionalClass, additionalClass),
- ]);
-
preventSaveOnMissingProps(blockClientId, getAttrKey('ratingName', attributes, manifest), ratingName);
const rating = (
-
- {ratingAmount &&
+
+ {ratingAmount && (
<>
{[...Array(parseInt(ratingAmount, 10))].map((x, i) => {
- return
;
+ return (
+
+ );
})}
- }
-
-
-
- {ratingName &&
-
- }
+ )}
);
@@ -64,8 +41,10 @@ export const RatingEditor = (attributes) => {
fieldContent: rating,
fieldIsRequired: checkAttr('ratingIsRequired', attributes, manifest),
})}
- additionalFieldClass={additionalFieldClass}
- selectorClass={componentName}
+ statusSlog={[
+ !ratingName &&
,
+ attributes?.[`${prefix}ConditionalTagsUse`] &&
,
+ ]}
/>
);
};
diff --git a/src/Blocks/components/rating/components/rating-options.js b/src/Blocks/components/rating/components/rating-options.js
index cdba9b715..877c46613 100644
--- a/src/Blocks/components/rating/components/rating-options.js
+++ b/src/Blocks/components/rating/components/rating-options.js
@@ -1,29 +1,22 @@
import React from 'react';
import { useState } from '@wordpress/element';
-import { select } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-import { TextControl, PanelBody } from '@wordpress/components';
+import { checkAttr, getAttrKey, props } from '@eightshift/frontend-libs-tailwind/scripts';
import {
- icons,
- checkAttr,
- getAttrKey,
- IconLabel,
- props,
- Section,
- IconToggle,
- STORE_NAME,
-} from '@eightshift/frontend-libs/scripts';
-import { FieldOptions, FieldOptionsMore, FieldOptionsLayout, FieldOptionsVisibility } from '../../field/components/field-options';
+ FieldOptions,
+ FieldOptionsMore,
+ FieldOptionsLayout,
+ FieldOptionsVisibility,
+} from '../../field/components/field-options';
import { isOptionDisabled, NameField } from '../../utils';
import { ConditionalTagsOptions } from '../../conditional-tags/components/conditional-tags-options';
+import { icons } from '@eightshift/ui-components/icons';
+import { ContainerPanel, InputField, Toggle, Spacer } from '@eightshift/ui-components';
+import manifest from '../manifest.json';
+import { Slider } from '@eightshift/ui-components';
export const RatingOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('rating');
-
- const {
- setAttributes,
- title = __('Rating', 'eightshift-forms'),
- } = attributes;
+ const { setAttributes, title = __('Rating', 'eightshift-forms') } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -37,29 +30,32 @@ export const RatingOptions = (attributes) => {
const ratingAmount = checkAttr('ratingAmount', attributes, manifest);
return (
-
-
-
-
- }
- value={ratingAmount}
- onChange={(value) => setAttributes({ [getAttrKey('ratingAmount', attributes, manifest)]: value })}
- min={1}
- max={10}
- type='number'
- className='es-no-field-spacing'
- disabled={isOptionDisabled(getAttrKey('ratingAmount', attributes, manifest), ratingDisabledOptions)}
- />
-
+
+
+
+
+
+ setAttributes({ [getAttrKey('ratingAmount', attributes, manifest)]: value })}
+ min={1}
+ max={10}
+ disabled={isOptionDisabled(getAttrKey('ratingAmount', attributes, manifest), ratingDisabledOptions)}
+ />
{
})}
/>
-
- }
- value={ratingValue}
- onChange={(value) => setAttributes({ [getAttrKey('ratingValue', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('ratingValue', attributes, manifest), ratingDisabledOptions)}
- />
-
-
-
-
- setAttributes({ [getAttrKey('ratingIsReadOnly', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('ratingIsReadOnly', attributes, manifest), ratingDisabledOptions)}
- />
-
- setAttributes({ [getAttrKey('ratingIsDisabled', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('ratingIsDisabled', attributes, manifest), ratingDisabledOptions)}
- noBottomSpacing
- />
-
-
-
- setAttributes({ [getAttrKey('ratingIsRequired', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('ratingIsRequired', attributes, manifest), ratingDisabledOptions)}
- />
-
-
-
- }
- value={ratingTracking}
- onChange={(value) => setAttributes({ [getAttrKey('ratingTracking', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('ratingTracking', attributes, manifest), ratingDisabledOptions)}
- className='es-no-field-spacing'
- />
-
+
+
+ setAttributes({ [getAttrKey('ratingValue', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('ratingValue', attributes, manifest), ratingDisabledOptions)}
+ />
+
+
+
+ setAttributes({ [getAttrKey('ratingIsReadOnly', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('ratingIsReadOnly', attributes, manifest), ratingDisabledOptions)}
+ />
+
+ setAttributes({ [getAttrKey('ratingIsDisabled', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('ratingIsDisabled', attributes, manifest), ratingDisabledOptions)}
+ />
+
+
+ setAttributes({ [getAttrKey('ratingIsRequired', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('ratingIsRequired', attributes, manifest), ratingDisabledOptions)}
+ />
+
+
+
+ setAttributes({ [getAttrKey('ratingTracking', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('ratingTracking', attributes, manifest), ratingDisabledOptions)}
+ />
{
conditionalTagsIsHidden: checkAttr('ratingFieldHidden', attributes, manifest),
})}
/>
-
+
);
};
diff --git a/src/Blocks/components/rating/rating.php b/src/Blocks/components/rating/rating.php
index 6c62d435a..58553d627 100644
--- a/src/Blocks/components/rating/rating.php
+++ b/src/Blocks/components/rating/rating.php
@@ -37,7 +37,7 @@
$twClasses = FormsHelper::getTwSelectors($ratingTwSelectorsData, ['rating']);
-$ratingClass = Helpers::classnames([
+$ratingClass = Helpers::clsx([
FormsHelper::getTwBase($twClasses, 'rating', $componentClass),
Helpers::selector($additionalClass, $additionalClass),
Helpers::selector($ratingSingleSubmit, UtilsHelper::getStateSelectorAdmin('singleSubmit')),
diff --git a/src/Blocks/components/react-flow/index.js b/src/Blocks/components/react-flow/index.js
index 6b486f230..442d0408a 100644
--- a/src/Blocks/components/react-flow/index.js
+++ b/src/Blocks/components/react-flow/index.js
@@ -1,41 +1,39 @@
import React, { memo } from 'react';
import ReactFlow, { MarkerType, Controls, Background, MiniMap, Position, Handle } from 'reactflow';
-import { camelize } from '@eightshift/frontend-libs/scripts';
+import { camelCase } from '@eightshift/ui-components/utilities';
// Create custom handle with 4 points.
-const CustomHandle = memo(({data}) => {
+const CustomHandle = memo(({ data }) => {
return (
<>
-
- {data.label}
-
+
{data.label}
);
});
@@ -49,8 +47,11 @@ const markerStyle = {
// Generate a random hex color that is not too light or too dark.
const getRandomHexColor = () => {
- const getRandomHexValue = () => Math.floor(Math.random() * 256).toString(16).padStart(2, '0');
-
+ const getRandomHexValue = () =>
+ Math.floor(Math.random() * 256)
+ .toString(16)
+ .padStart(2, '0');
+
let hexColor, luminance;
do {
hexColor = `#${getRandomHexValue()}${getRandomHexValue()}${getRandomHexValue()}`;
@@ -68,7 +69,7 @@ const outputMultiFlowPreviewData = (formFields, stepMultiflowRules) => {
const color = '#333333';
const edges = formFields.map(({ value }, index) => {
- const target = formFields?.[index+1]?.value;
+ const target = formFields?.[index + 1]?.value;
// If there is no target bailout.
if (!target) {
@@ -76,9 +77,9 @@ const outputMultiFlowPreviewData = (formFields, stepMultiflowRules) => {
}
return {
- id: camelize(`${value}-default-flow`), // Unique ID for the edge.
- source: camelize(value),
- target: camelize(target),
+ id: camelCase(`${value}-default-flow`), // Unique ID for the edge.
+ source: camelCase(value),
+ target: camelCase(target),
sourceHandle: 'right',
targetHandle: 'left',
style: {
@@ -94,13 +95,13 @@ const outputMultiFlowPreviewData = (formFields, stepMultiflowRules) => {
// Custom flows.
const customFlows = stepMultiflowRules.map((item, index) => {
- const source = camelize(item?.[1].toLowerCase());
- const target = camelize(item?.[0].toLowerCase());
+ const source = camelCase(item?.[1].toLowerCase());
+ const target = camelCase(item?.[0].toLowerCase());
const edgeColor = getRandomHexColor();
return {
- id: camelize(`${source}-rule-${index}`), // Unique ID for the edge.
+ id: camelCase(`${source}-rule-${index}`), // Unique ID for the edge.
source: source,
target: target,
type: 'smoothstep',
@@ -122,12 +123,9 @@ const outputMultiFlowPreviewData = (formFields, stepMultiflowRules) => {
});
// Nodes list.
- const nodes = formFields.map(({
- label,
- value,
- }, index) => {
+ const nodes = formFields.map(({ label, value }, index) => {
return {
- id: camelize(value), // Unique ID for the node.
+ id: camelCase(value), // Unique ID for the node.
data: {
label: `${label.substring(0, 40)}...`, // Limit the label to 40 characters.
},
@@ -150,20 +148,14 @@ const outputMultiFlowPreviewData = (formFields, stepMultiflowRules) => {
});
return {
- edges: [
- ...edges,
- ...customFlows,
- ].filter(n => n),
+ edges: [...edges, ...customFlows].filter((n) => n),
nodes,
};
};
// Export multiflow forms react flow.
-export const MultiflowFormsReactFlow = ({formFields, stepMultiflowRules}) => {
- const {
- edges,
- nodes,
- } = outputMultiFlowPreviewData(formFields, stepMultiflowRules);
+export const MultiflowFormsReactFlow = ({ formFields, stepMultiflowRules }) => {
+ const { edges, nodes } = outputMultiFlowPreviewData(formFields, stepMultiflowRules);
return (
@@ -173,10 +165,13 @@ export const MultiflowFormsReactFlow = ({formFields, stepMultiflowRules}) => {
nodeTypes={{
selectorNode: CustomHandle,
}}
- >
+ >
-
+
);
diff --git a/src/Blocks/components/select-option/components/select-option-editor.js b/src/Blocks/components/select-option/components/select-option-editor.js
index 75d72d106..135e02e30 100644
--- a/src/Blocks/components/select-option/components/select-option-editor.js
+++ b/src/Blocks/components/select-option/components/select-option-editor.js
@@ -1,61 +1,43 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
-import { select } from '@wordpress/data';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import {
- selector,
- checkAttr,
- props,
- STORE_NAME,
- getAttrKey,
-} from '@eightshift/frontend-libs/scripts';
-import { ConditionalTagsEditor } from '../../conditional-tags/components/conditional-tags-editor';
-import { MissingName, VisibilityHidden, preventSaveOnMissingProps } from './../../utils';
+ StatusFieldOutput,
+ StatusIconHidden,
+ StatusIconConditionals,
+ StatusIconMissingName,
+ preventSaveOnMissingProps,
+} from './../../utils';
+import manifest from '../manifest.json';
+import { clsx } from '@eightshift/ui-components/utilities';
export const SelectOptionEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('select-option');
-
- const {
- componentClass,
- } = manifest;
-
- const {
- selectorClass = componentClass,
- blockClass,
- additionalClass,
- blockClientId,
- } = attributes;
+ const { blockClientId, prefix } = attributes;
const selectOptionLabel = checkAttr('selectOptionLabel', attributes, manifest);
const selectOptionValue = checkAttr('selectOptionValue', attributes, manifest);
- const selectOptionAsPlaceholder = checkAttr('selectOptionAsPlaceholder', attributes, manifest);
const selectOptionIsHidden = checkAttr('selectOptionIsHidden', attributes, manifest);
const selectOptionIsSelected = checkAttr('selectOptionIsSelected', attributes, manifest);
preventSaveOnMissingProps(blockClientId, getAttrKey('selectOptionValue', attributes, manifest), selectOptionValue);
- const selectOptionClass = classnames([
- selector(componentClass, componentClass),
- selector(blockClass, blockClass, selectorClass),
- selector(additionalClass, additionalClass),
- selector(selectOptionIsHidden, 'es-form-is-hidden'),
- selector(selectOptionLabel === '', componentClass, '', 'placeholder'),
- selector(selectOptionIsSelected, componentClass, '', 'checked'),
- ]);
-
return (
-
-
-
+
{selectOptionLabel ? selectOptionLabel : __('Enter option label in sidebar.', 'eightshift-forms')}
-
-
- {selectOptionValue &&
-
- }
+ ,
+ !selectOptionValue && ,
+ attributes?.[`${prefix}ConditionalTagsUse`] && ,
+ ]}
+ />
);
};
diff --git a/src/Blocks/components/select-option/components/select-option-options.js b/src/Blocks/components/select-option/components/select-option-options.js
index 62d9f1d67..0d5b39212 100644
--- a/src/Blocks/components/select-option/components/select-option-options.js
+++ b/src/Blocks/components/select-option/components/select-option-options.js
@@ -1,18 +1,16 @@
import React from 'react';
import { useState } from '@wordpress/element';
-import { select } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
-import { PanelBody, TextareaControl } from '@wordpress/components';
-import { checkAttr, getAttrKey, icons, IconToggle, props, STORE_NAME, Section } from '@eightshift/frontend-libs/scripts';
+import { icons } from '@eightshift/ui-components/icons';
+import { checkAttr, getAttrKey, props } from '@eightshift/frontend-libs-tailwind/scripts';
import { isOptionDisabled, NameField } from './../../utils';
+import { ContainerPanel, InputField, Toggle, Spacer } from '@eightshift/ui-components';
import { ConditionalTagsOptions } from '../../conditional-tags/components/conditional-tags-options';
+import manifest from '../manifest.json';
+import { Notice } from '@eightshift/ui-components';
export const SelectOptionOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('select-option');
-
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -24,54 +22,78 @@ export const SelectOptionOptions = (attributes) => {
const selectOptionDisabledOptions = checkAttr('selectOptionDisabledOptions', attributes, manifest);
return (
-
-
+
+
-
- setAttributes({ [getAttrKey('selectOptionLabel', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('selectOptionLabel', attributes, manifest), selectOptionDisabledOptions)}
- />
-
+
-
- setAttributes({ [getAttrKey('selectOptionIsSelected', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('selectOptionIsSelected', attributes, manifest), selectOptionDisabledOptions)}
- />
+ setAttributes({ [getAttrKey('selectOptionLabel', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(getAttrKey('selectOptionLabel', attributes, manifest), selectOptionDisabledOptions)}
+ />
- setAttributes({ [getAttrKey('selectOptionIsDisabled', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('selectOptionIsDisabled', attributes, manifest), selectOptionDisabledOptions)}
+ {selectOptionLabel === '' && (
+
+ )}
- setAttributes({ [getAttrKey('selectOptionIsHidden', attributes, manifest)]: value })}
- disabled={isOptionDisabled(getAttrKey('selectOptionIsHidden', attributes, manifest), selectOptionDisabledOptions)}
- noBottomSpacing
- />
-
+
+
+ setAttributes({ [getAttrKey('selectOptionIsSelected', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(
+ getAttrKey('selectOptionIsSelected', attributes, manifest),
+ selectOptionDisabledOptions,
+ )}
+ />
+
+ setAttributes({ [getAttrKey('selectOptionIsDisabled', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(
+ getAttrKey('selectOptionIsDisabled', attributes, manifest),
+ selectOptionDisabledOptions,
+ )}
+ />
+
+ setAttributes({ [getAttrKey('selectOptionIsHidden', attributes, manifest)]: value })}
+ disabled={isOptionDisabled(
+ getAttrKey('selectOptionIsHidden', attributes, manifest),
+ selectOptionDisabledOptions,
+ )}
+ />
{
conditionalTagsIsHidden: selectOptionIsHidden,
})}
/>
-
+
);
};
diff --git a/src/Blocks/components/select/components/select-editor.js b/src/Blocks/components/select/components/select-editor.js
index 43d235f58..38444fed1 100644
--- a/src/Blocks/components/select/components/select-editor.js
+++ b/src/Blocks/components/select/components/select-editor.js
@@ -1,30 +1,11 @@
import React from 'react';
-import classnames from 'classnames';
-import { select } from '@wordpress/data';
-import {
- selector,
- checkAttr,
- props,
- STORE_NAME,
- getAttrKey,
-} from '@eightshift/frontend-libs/scripts';
+import { checkAttr, props, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import { FieldEditor } from '../../../components/field/components/field-editor';
-import { MissingName, preventSaveOnMissingProps } from './../../utils';
-import { ConditionalTagsEditor } from '../../conditional-tags/components/conditional-tags-editor';
+import { preventSaveOnMissingProps, StatusIconMissingName, StatusIconConditionals } from './../../utils';
+import manifest from '../manifest.json';
export const SelectEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('select');
-
- const {
- componentClass,
- componentName
- } = manifest;
-
- const {
- additionalFieldClass,
- additionalClass,
- blockClientId,
- } = attributes;
+ const { blockClientId, prefix } = attributes;
const selectContent = checkAttr('selectContent', attributes, manifest);
const selectName = checkAttr('selectName', attributes, manifest);
@@ -32,28 +13,7 @@ export const SelectEditor = (attributes) => {
preventSaveOnMissingProps(blockClientId, getAttrKey('selectName', attributes, manifest), selectName);
- const selectClass = classnames([
- selector(componentClass, componentClass),
- selector(selectIsDisabled, componentClass, '', 'disabled'),
- selector(additionalClass, additionalClass),
- ]);
-
- const selectComponent = (
- <>
-
-
- {selectContent}
-
-
-
- {selectName &&
-
- }
-
-
- );
+ const selectComponent =
{selectContent}
;
return (
<>
@@ -62,8 +22,10 @@ export const SelectEditor = (attributes) => {
fieldContent: selectComponent,
fieldIsRequired: checkAttr('selectIsRequired', attributes, manifest),
})}
- additionalFieldClass={additionalFieldClass}
- selectorClass={componentName}
+ statusSlog={[
+ !selectName &&
,
+ attributes?.[`${prefix}ConditionalTagsUse`] &&
,
+ ]}
/>
);
diff --git a/src/Blocks/components/select/components/select-options.js b/src/Blocks/components/select/components/select-options.js
index 08a054f1a..6ef84ecaa 100644
--- a/src/Blocks/components/select/components/select-options.js
+++ b/src/Blocks/components/select/components/select-options.js
@@ -1,36 +1,35 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
-import { select } from '@wordpress/data';
import { useState } from '@wordpress/element';
-import { TextControl, PanelBody, Button } from '@wordpress/components';
+import { icons } from '@eightshift/ui-components/icons';
+import { checkAttr, getAttrKey, props } from '@eightshift/frontend-libs-tailwind/scripts';
import {
- icons,
- checkAttr,
- getAttrKey,
- IconLabel,
- props,
- Section,
- IconToggle,
- STORE_NAME,
+ BaseControl,
NumberPicker,
- Control,
+ ContainerPanel,
+ InputField,
+ Toggle,
Select,
-} from '@eightshift/frontend-libs/scripts';
-import { FieldOptions, FieldOptionsMore, FieldOptionsLayout, FieldOptionsVisibility } from '../../field/components/field-options';
+ Spacer,
+ Button,
+ HStack,
+ ContainerGroup,
+} from '@eightshift/ui-components';
+import {
+ FieldOptions,
+ FieldOptionsMore,
+ FieldOptionsLayout,
+ FieldOptionsVisibility,
+} from '../../field/components/field-options';
import { isOptionDisabled, NameField } from './../../utils';
import { ConditionalTagsOptions } from '../../conditional-tags/components/conditional-tags-options';
+import manifest from '../manifest.json';
+import globalManifest from '../../../manifest.json';
export const SelectOptions = (attributes) => {
- const globalManifest = select(STORE_NAME).getSettings();
- const manifest = select(STORE_NAME).getComponent('select');
-
- const {
- options,
- } = manifest;
+ const { options } = manifest;
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -48,18 +47,21 @@ export const SelectOptions = (attributes) => {
const selectShowAs = checkAttr('selectShowAs', attributes, manifest);
return (
-
-
+
+
+
+
);
};
diff --git a/src/Blocks/components/select/select.php b/src/Blocks/components/select/select.php
index 49c1adee9..691ec0140 100644
--- a/src/Blocks/components/select/select.php
+++ b/src/Blocks/components/select/select.php
@@ -41,7 +41,7 @@
$selectHideLabel = false;
$selectFieldLabel = $attributes[Helpers::getAttrKey('selectFieldLabel', $attributes, $manifest)] ?? '';
-$selectClass = Helpers::classnames([
+$selectClass = Helpers::clsx([
Helpers::selector($componentClass, $componentClass, 'select'),
Helpers::selector($additionalClass, $additionalClass),
Helpers::selector($selectSingleSubmit, UtilsHelper::getStateSelectorAdmin('singleSubmit')),
diff --git a/src/Blocks/components/spacer/spacer.php b/src/Blocks/components/spacer/spacer.php
index 18eca8088..32199f9c5 100644
--- a/src/Blocks/components/spacer/spacer.php
+++ b/src/Blocks/components/spacer/spacer.php
@@ -11,7 +11,7 @@
$componentClass = $manifest['componentClass'] ?? '';
$additionalClass = $attributes['additionalClass'] ?? '';
-$spacerClass = Helpers::classnames([
+$spacerClass = Helpers::clsx([
Helpers::selector($componentClass, $componentClass),
Helpers::selector($additionalClass, $additionalClass),
]);
diff --git a/src/Blocks/components/step/components/step-editor.js b/src/Blocks/components/step/components/step-editor.js
index f10610bd4..593bd0f5a 100644
--- a/src/Blocks/components/step/components/step-editor.js
+++ b/src/Blocks/components/step/components/step-editor.js
@@ -1,43 +1,23 @@
import React from 'react';
-import classnames from 'classnames';
-import { select } from '@wordpress/data';
-import {
- selector,
- checkAttr,
- STORE_NAME,
- getAttrKey,
-} from '@eightshift/frontend-libs/scripts';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import { MissingName, preventSaveOnMissingProps } from './../../utils';
+import manifest from '../manifest.json';
export const StepEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('step');
-
- const {
- componentClass,
- } = manifest;
-
- const {
- additionalClass,
- blockClientId,
- } = attributes;
+ const { blockClientId } = attributes;
const stepName = checkAttr('stepName', attributes, manifest);
const stepLabel = checkAttr('stepLabel', attributes, manifest);
preventSaveOnMissingProps(blockClientId, getAttrKey('stepName', attributes, manifest), stepName);
- const stepClass = classnames([
- selector(componentClass, componentClass),
- selector(additionalClass, additionalClass),
- ]);
-
return (
-
-
+
+
{stepLabel ? stepLabel : stepName}
-
+
);
};
diff --git a/src/Blocks/components/step/components/step-multiflow-options.js b/src/Blocks/components/step/components/step-multiflow-options.js
index 9d15cd078..d5ead622d 100644
--- a/src/Blocks/components/step/components/step-multiflow-options.js
+++ b/src/Blocks/components/step/components/step-multiflow-options.js
@@ -1,23 +1,32 @@
import React, { useEffect } from 'react';
import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
-import { select } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
-import { TextControl, PanelBody, Button, Modal } from '@wordpress/components';
-import { icons, getAttrKey, checkAttr, IconToggle, props, Select, Control, Section, IconLabel, STORE_NAME } from '@eightshift/frontend-libs/scripts';
+import { icons } from '@eightshift/ui-components/icons';
+import { getAttrKey, checkAttr, props } from '@eightshift/frontend-libs-tailwind/scripts';
+import {
+ BaseControl,
+ Select,
+ RichLabel,
+ Button,
+ ContainerPanel,
+ InputField,
+ Toggle,
+ ContainerGroup,
+ Spacer,
+ Notice,
+ Modal,
+} from '@eightshift/ui-components';
import { CONDITIONAL_TAGS_OPERATORS_LABELS } from './../../conditional-tags/components/conditional-tags-labels';
import { getConstantsOptions } from '../../utils';
import { getRestUrl } from '../../form/assets/state-init';
import { ProgressBarOptions } from '../../progress-bar/components/progress-bar-options';
import { MultiflowFormsReactFlow } from '../../react-flow';
import globalManifest from '../../../manifest.json';
+import manifest from '../manifest.json';
export const StepMultiflowOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('step');
-
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const stepMultiflowUse = checkAttr('stepMultiflowUse', attributes, manifest);
const stepMultiflowRules = checkAttr('stepMultiflowRules', attributes, manifest);
@@ -45,8 +54,8 @@ export const StepMultiflowOptions = (attributes) => {
<>
{stepMultiflowRules?.map((_, index) => {
return (
-
-
+
+
{__('Go to from step', 'eightshift-forms')}
-
+
- {stepProgressBarUse &&
-
+ {stepProgressBarUse && (
+
{__('and show', 'eightshift-forms')}
- {
- stepMultiflowRules[index][3] = value;
- setAttributes({ [getAttrKey('stepMultiflowRules', attributes, manifest)]: [...stepMultiflowRules] });
- }}
- className='es-w-15 es-mb-0'
- />
+ {
+ stepMultiflowRules[index][3] = value;
+ setAttributes({
+ [getAttrKey('stepMultiflowRules', attributes, manifest)]: [...stepMultiflowRules],
+ });
+ }}
+ />
{__('steps in the progress bar.', 'eightshift-forms')}
- }
+ )}
+
{stepMultiflowRules?.[topParent]?.[2]?.map((_, index) => {
const total = stepMultiflowRules[topParent][1].length;
return (
<>
{stepMultiflowRules?.[topParent]?.[2]?.[index]?.map((_, innerIndex) => {
- return (
-
- );
- })
- }
-
- {(stepMultiflowRules?.[topParent]?.[2]?.length > 1 && (index + 1) < total) &&
-
- {__('OR', 'eightshift-forms')}
-
- }
+ return (
+
+ );
+ })}
+
+ {stepMultiflowRules?.[topParent]?.[2]?.length > 1 && index + 1 < total && (
+
{__('OR', 'eightshift-forms')}
+ )}
);
})}
-
+
-
{
stepMultiflowRules[topParent][4] = !stepMultiflowRules[topParent][4];
setAttributes({ [getAttrKey('stepMultiflowRules', attributes, manifest)]: [...stepMultiflowRules] });
@@ -191,13 +206,16 @@ export const StepMultiflowOptions = (attributes) => {
// Internal state due to rerendering issue.
const [inputCheck, setInputCheck] = useState(stepMultiflowRules?.[topParent]?.[2]?.[parent]?.[index]?.[2]);
- const formFieldOptions = formFields?.find((item) => item.value === stepMultiflowRules[topParent][1])?.subItems ?? [];
+ const formFieldOptions =
+ formFields?.find((item) => item.value === stepMultiflowRules[topParent][1])?.subItems ?? [];
const formFieldSelectedItem = formFieldOptions?.find((item) => item.value === fieldValue)?.subItems ?? [];
- const showRuleValuePicker = formFieldSelectedItem?.length > 0 && (operatorValue === globalManifest.comparator.IS || operatorValue === globalManifest.comparator.ISN);
+ const showRuleValuePicker =
+ formFieldSelectedItem?.length > 0 &&
+ (operatorValue === globalManifest.comparator.IS || operatorValue === globalManifest.comparator.ISN);
return (
<>
-
+
@@ -282,8 +298,14 @@ export const StepMultiflowOptions = (attributes) => {
};
return (
-
- {(formFields?.length > 1) ?
+
+
+
+ {formFields?.length > 1 ? (
<>
{
})}
/>
- setIsModalPreviewOpen(true)}
/>
- {
setAttributes({ [getAttrKey('stepMultiflowRules', attributes, manifest)]: [] });
}
}}
- additionalClasses='es-font-weight-500 es-mb-5'
/>
-
-
+ 0 && sprintf(__('%d added', 'eightshift-forms'), stepMultiflowRules.length)}
- inlineLabel
+ subtitle={
+ stepMultiflowRules?.length > 0 && sprintf(__('%d added', 'eightshift-forms'), stepMultiflowRules.length)
+ }
>
-
-
+
+
- {isModalPreviewOpen &&
+ {isModalPreviewOpen && (
}
- onRequestClose={() => {
- setIsModalPreviewOpen(false);
- }}
- >
-
+ }
+ onRequestClose={() => {
+ setIsModalPreviewOpen(false);
+ }}
+ >
+
- }
+ )}
- {isModalOpen &&
+ {isModalOpen && (
}
+ title={
+
+ }
onRequestClose={() => {
setIsModalOpen(false);
}}
>
-
+
-
-
+
- }
- :
-
+ ) : (
+
- }
-
+ )}
+
);
};
diff --git a/src/Blocks/components/step/components/step-options.js b/src/Blocks/components/step/components/step-options.js
index 253002493..8799bf3d2 100644
--- a/src/Blocks/components/step/components/step-options.js
+++ b/src/Blocks/components/step/components/step-options.js
@@ -1,17 +1,14 @@
import React from 'react';
-import { select } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { TextControl, PanelBody } from '@wordpress/components';
-import { icons, checkAttr, getAttrKey, IconLabel, Section, STORE_NAME } from '@eightshift/frontend-libs/scripts';
+import { icons } from '@eightshift/ui-components/icons';
+import { checkAttr, getAttrKey } from '@eightshift/frontend-libs-tailwind/scripts';
import { NameField } from './../../utils';
+import { ContainerPanel, InputField, Spacer } from '@eightshift/ui-components';
+import manifest from '../manifest.json';
export const StepOptions = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('step');
-
- const {
- setAttributes,
- } = attributes;
+ const { setAttributes } = attributes;
const [isNameChanged, setIsNameChanged] = useState(false);
@@ -21,45 +18,52 @@ export const StepOptions = (attributes) => {
const stepNextLabel = checkAttr('stepNextLabel', attributes, manifest);
return (
- <>
-
-
+
+
+
-
- setAttributes({ [getAttrKey('stepLabel', attributes, manifest)]: value })}
- />
-
+ setAttributes({ [getAttrKey('stepLabel', attributes, manifest)]: value })}
+ />
-
+
- }
- placeholder={__('Previous', 'eightshift-forms')}
- value={stepPrevLabel}
- onChange={(value) => setAttributes({ [getAttrKey('stepPrevLabel', attributes, manifest)]: value })}
- />
+ setAttributes({ [getAttrKey('stepPrevLabel', attributes, manifest)]: value })}
+ />
- }
- placeholder={__('Next', 'eightshift-forms')}
- value={stepNextLabel}
- onChange={(value) => setAttributes({ [getAttrKey('stepNextLabel', attributes, manifest)]: value })}
- />
-
-
-
+
setAttributes({ [getAttrKey('stepNextLabel', attributes, manifest)]: value })}
+ />
+
);
};
diff --git a/src/Blocks/components/steps/steps.php b/src/Blocks/components/steps/steps.php
index 4ca176961..a0b17b487 100644
--- a/src/Blocks/components/steps/steps.php
+++ b/src/Blocks/components/steps/steps.php
@@ -13,7 +13,7 @@
$stepsTitle = Helpers::checkAttr('stepsTitle', $attributes, $manifest);
$stepsContent = Helpers::checkAttr('stepsContent', $attributes, $manifest);
-$stepsClass = Helpers::classnames([
+$stepsClass = Helpers::clsx([
Helpers::selector($componentClass, $componentClass),
]);
diff --git a/src/Blocks/components/submit/components/submit-editor.js b/src/Blocks/components/submit/components/submit-editor.js
index fb29d0c32..4eca67d72 100644
--- a/src/Blocks/components/submit/components/submit-editor.js
+++ b/src/Blocks/components/submit/components/submit-editor.js
@@ -1,37 +1,14 @@
import React from 'react';
import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
-import { select } from '@wordpress/data';
-import {
- selector,
- props,
- STORE_NAME,
- checkAttr,
-} from '@eightshift/frontend-libs/scripts';
+import { props, checkAttr } from '@eightshift/frontend-libs-tailwind/scripts';
import { FieldEditor } from '../../../components/field/components/field-editor';
+import manifest from '../manifest.json';
export const SubmitEditor = (attributes) => {
- const manifest = select(STORE_NAME).getComponent('submit');
-
- const {
- componentClass,
- componentName
- } = manifest;
-
- const {
- additionalFieldClass,
- additionalClass,
- } = attributes;
-
const submitValue = checkAttr('submitValue', attributes, manifest);
- const submitClass = classnames([
- selector(componentClass, componentClass),
- selector(additionalClass, additionalClass),
- ]);
-
const submitComponent = (
-