Refactor: update Text/Textarea field and template (#6997)

impress-org · Oct 4, 2023 · 668e9b4 · 668e9b4
1 parent 02fd8c5
commit 668e9b4
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 22 deletions.
diff --git a/src/DonationForms/Actions/ConvertDonationFormBlocksToFieldsApi.php b/src/DonationForms/Actions/ConvertDonationFormBlocksToFieldsApi.php
@@ -189,7 +189,8 @@ protected function createNodeFromBlockWithUniqueAttributes(BlockModel $block, in
                         $block->getShortName() . '-' . $blockIndex
                 )->storeAsDonorMeta(
                     $block->hasAttribute('storeAsDonorMeta') ? $block->getAttribute('storeAsDonorMeta') : false
-                );
+                )->description($block->getAttribute('description'))
+                    ->defaultValue($block->getAttribute('defaultValue'));
 
             case "givewp/terms-and-conditions":
                 return $this->createNodeFromConsentBlock($block, $blockIndex)

diff --git a/src/DonationForms/resources/propTypes.ts b/src/DonationForms/resources/propTypes.ts
@@ -35,7 +35,8 @@ export interface CheckboxProps extends FieldProps {
 }
 
 export interface TextareaProps extends FieldProps {
-    helpText?: string;
+    description?: string;
+    rows: number;
 }
 
 export interface FieldHasDescriptionProps extends FieldProps {

diff --git a/src/DonationForms/resources/registrars/templates/fields/Text.tsx b/src/DonationForms/resources/registrars/templates/fields/Text.tsx
@@ -1,9 +1,19 @@
-import type {FieldProps} from '@givewp/forms/propTypes';
+import {FieldHasDescriptionProps} from '@givewp/forms/propTypes';
+
+export default function Text({
+    Label,
+    ErrorMessage,
+    fieldError,
+    description,
+    placeholder,
+    inputProps,
+}: FieldHasDescriptionProps) {
+    const FieldDescription = window.givewp.form.templates.layouts.fieldDescription;
 
-export default function Text({Label, ErrorMessage, fieldError, placeholder, inputProps}: FieldProps) {
     return (
         <label>
             <Label />
+            {description && <FieldDescription description={description} />}
             <input type="text" aria-invalid={fieldError ? 'true' : 'false'} placeholder={placeholder} {...inputProps} />
 
             <ErrorMessage />

diff --git a/src/DonationForms/resources/registrars/templates/fields/TextArea.tsx b/src/DonationForms/resources/registrars/templates/fields/TextArea.tsx
@@ -1,15 +1,26 @@
 import type {TextareaProps} from '@givewp/forms/propTypes';
 
-export default function TextArea({Label, ErrorMessage, placeholder, fieldError, inputProps, helpText}: TextareaProps) {
+export default function TextArea({
+    Label,
+    ErrorMessage,
+    placeholder,
+    fieldError,
+    inputProps,
+    description,
+    rows,
+}: TextareaProps) {
+    const FieldDescription = window.givewp.form.templates.layouts.fieldDescription;
+
     return (
         <label>
             <Label />
-            {helpText && (
-                <div className="givewp-fields-textarea__description">
-                    <small>{helpText}</small>
-                </div>
-            )}
-            <textarea aria-invalid={fieldError ? 'true' : 'false'} {...inputProps} placeholder={placeholder} />
+            {description && <FieldDescription description={description} />}
+            <textarea
+                aria-invalid={fieldError ? 'true' : 'false'}
+                {...inputProps}
+                placeholder={placeholder}
+                rows={rows}
+            />
             <ErrorMessage />
         </label>
     );

diff --git a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/text/Edit.tsx b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/text/Edit.tsx
@@ -1,22 +1,20 @@
-import {TextControl} from '@wordpress/components';
+import classnames from 'classnames';
 import {BlockEditProps} from '@wordpress/blocks';
 
 export default function Edit({attributes}: BlockEditProps<any>) {
-    const {label, isRequired, placeholder} = attributes;
+    const {label, isRequired, description, placeholder, defaultValue} = attributes;
     const requiredClass = isRequired ? 'give-is-required' : '';
 
     return (
         <>
             <div>
-                <TextControl
-                    label={label}
-                    placeholder={placeholder}
-                    required={isRequired}
-                    className={requiredClass}
-                    readOnly
-                    onChange={null}
-                    value={placeholder}
-                />
+                <span
+                    className={classnames('components-input-control__label', 'give-text-block__label', requiredClass)}
+                >
+                    {label}
+                </span>
+                {description && <p className="give-text-block__description">{description}</p>}
+                <input type="text" placeholder={placeholder} readOnly onChange={null} value={defaultValue} />
             </div>
         </>
     );

diff --git a/src/FormBuilder/resources/js/form-builder/src/blocks/fields/text/settings.tsx b/src/FormBuilder/resources/js/form-builder/src/blocks/fields/text/settings.tsx
@@ -17,6 +17,7 @@ const settings: FieldBlock['settings'] = {
                 label: {
                     default: __('Text field', 'give'),
                 },
+                description: true,
                 placeholder: true,
                 defaultValue: true,
                 emailTag: true,

diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_blocks.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_blocks.scss
@@ -37,3 +37,19 @@
         }
     }
 }
+
+[data-type="givewp/text"] {
+    .give-text-block {
+        &__label {
+            display: inline-block;
+            margin-bottom: var(--givewp-spacing-2);
+            padding: 0;
+        }
+
+        &__description {
+            font-size: 0.875rem;
+            line-height: 1rem;
+            margin: var(--givewp-spacing-1) 0 var(--givewp-spacing-2);
+        }
+    }
+}
diff --git a/src/Framework/FieldsAPI/Text.php b/src/Framework/FieldsAPI/Text.php
@@ -14,6 +14,7 @@ class Text extends Field
     use Concerns\HasMaxLength;
     use Concerns\HasMinLength;
     use Concerns\HasPlaceholder;
+    use Concerns\HasDescription;
 
     const TYPE = 'text';
 }
diff --git a/src/Framework/FieldsAPI/Textarea.php b/src/Framework/FieldsAPI/Textarea.php
@@ -18,4 +18,29 @@ class Textarea extends Field
     use Concerns\HasDescription;
 
     const TYPE = 'textarea';
+
+    /** @var int */
+    protected $rows = 5;
+
+    /**
+     * Set the number of rows for the element.
+     *
+     * @since 3.0.0
+     */
+    public function rows(int $rows): self
+    {
+        $this->rows = $rows;
+
+        return $this;
+    }
+
+    /**
+     * Get the number of rows for the element.
+     *
+     * @since 3.0.0
+     */
+    public function getRows(): string
+    {
+        return $this->rows;
+    }
 }
diff --git a/tests/Unit/DonationForms/Actions/TestConvertDonationFormBlocksToFieldsApi.php b/tests/Unit/DonationForms/Actions/TestConvertDonationFormBlocksToFieldsApi.php
@@ -41,6 +41,7 @@ public function testShouldReturnFormSchema()
                     'attributes' => [
                         'fieldName' => 'givewp-custom-field-name',
                         'label' => 'GiveWP Custom Block',
+                        'description' => 'GiveWP Custom Block Description',
                     ],
                 ],
             ],
@@ -62,6 +63,7 @@ public function testShouldReturnFormSchema()
                 ->append(
                     Text::make('givewp-custom-field-name')
                         ->label('GiveWP Custom Block')
+                        ->description('GiveWP Custom Block Description')
                         ->storeAsDonorMeta(false)
                 )
         );

diff --git a/tests/Unit/DonationForms/Repositories/TestDonationFormRepository.php b/tests/Unit/DonationForms/Repositories/TestDonationFormRepository.php
@@ -275,6 +275,7 @@ public function testGetFormSchemaFromBlocksShouldReturnFormSchema()
                     'attributes' => [
                         'fieldName' => 'givewp-custom-field-name',
                         'label' => 'GiveWP Custom Block',
+                        'description' => 'GiveWP Custom Block description',
                     ],
                 ],
             ],
@@ -297,6 +298,7 @@ public function testGetFormSchemaFromBlocksShouldReturnFormSchema()
                 ->append(
                     Text::make('givewp-custom-field-name')
                         ->label('GiveWP Custom Block')
+                        ->description('GiveWP Custom Block description')
                         ->storeAsDonorMeta(false),
                     Hidden::make('formId')
                         ->defaultValue($formId)