fixing progress bar

infinum · Sep 5, 2023 · d548930 · d548930
1 parent bfc8da1
commit d548930
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 7 deletions.
diff --git a/eightshift-forms.php b/eightshift-forms.php
@@ -6,7 +6,7 @@
  * Description: Eightshift Forms is a complete form builder plugin that utilizes modern Block editor features with multiple third-party integrations, bringing your project to a new level.
  * Author: WordPress team @Infinum
  * Author URI: https://eightshift.com/
- * Version: 4.0.74
+ * Version: 4.0.75
  * Text Domain: eightshift-forms
  *
  * @package EightshiftForms

diff --git a/src/Blocks/components/form/assets/state/init.js b/src/Blocks/components/form/assets/state/init.js
@@ -544,7 +544,7 @@ export function setSteps(formElement, formId) {
 			setState([StateEnum.FORM, StateEnum.STEPS, StateEnum.STEPS_PROGRESS_BAR], stepsProgressBar, formId);
 			setState([StateEnum.FORM, StateEnum.STEPS, StateEnum.STEPS_ELEMENTS_PROGRESS_BAR], {}, formId);
 
-			Object.values(stepsProgressBar).forEach((item) => {
+			[...stepsProgressBar.children].forEach((item) => {
 				const stepId = item.getAttribute(getStateAttribute('stepId'));
 				setState([StateEnum.FORM, StateEnum.STEPS, StateEnum.STEPS_ELEMENTS_PROGRESS_BAR, stepId], item, formId);
 			});

diff --git a/src/Blocks/components/form/assets/step.js b/src/Blocks/components/form/assets/step.js
@@ -257,7 +257,7 @@ export class Steps {
 			// Multistep setup.
 			// Find current step.
 			const currentStep = this.state.getStateFormStepsCurrent(formId);
-	
+
 			// Remove active from current step.
 			this.state.getStateFormStepsElementProgressBar(currentStep, formId)?.classList?.remove(this.state.getStateSelectorsClassActive());
 
@@ -266,7 +266,7 @@ export class Steps {
 
 			// Reset filled steps.
 			this.state.getStateFormStepsElementsProgressBar(formId).forEach((item) => item?.classList?.remove(this.state.getStateSelectorsClassFilled()));
-	
+
 			// Add filled to all filled steps.
 			flow.forEach((item) => {
 				this.state.getStateFormStepsElementProgressBar(item, formId)?.classList?.add(this.state.getStateSelectorsClassFilled());

diff --git a/src/Blocks/components/progress-bar/components/progress-bar-options.js b/src/Blocks/components/progress-bar/components/progress-bar-options.js
@@ -12,6 +12,7 @@ export const ProgressBarOptions = (attributes) => {
 	} = attributes;
 
 	const progressBarUse = checkAttr('progressBarUse', attributes, manifest);
+	const progressBarHideLabels = checkAttr('progressBarHideLabels', attributes, manifest);
 	const progressBarMultiflowUse = checkAttr('progressBarMultiflowUse', attributes, manifest);
 	const progressBarMultiflowInitCount = checkAttr('progressBarMultiflowInitCount', attributes, manifest);
 
@@ -26,6 +27,15 @@ export const ProgressBarOptions = (attributes) => {
 				}}
 			/>
 
+			<IconToggle
+				icon={icons.tag}
+				label={__('Hide progress bar labels', 'eightshift-forms')}
+				checked={progressBarHideLabels}
+				onChange={(value) => {
+					setAttributes({ [getAttrKey('progressBarHideLabels', attributes, manifest)]: value });
+				}}
+			/>
+
 			{progressBarMultiflowUse &&
 				<TextControl
 					type={'number'}

diff --git a/src/Blocks/components/progress-bar/manifest.json b/src/Blocks/components/progress-bar/manifest.json
@@ -13,6 +13,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"progressBarHideLabels": {
+			"type": "boolean",
+			"default": false
+		},
 		"progressBarMultiflowUse": {
 			"type": "boolean",
 			"default": false

diff --git a/src/Blocks/components/progress-bar/partials/multistep.php b/src/Blocks/components/progress-bar/partials/multistep.php
@@ -20,6 +20,8 @@
 $componentClass = $attributes['componentClass'] ?? '';
 $componentJsClass = $attributes['componentJsClass'] ?? '';
 
+$hideLabels = $attributes['hideLabels'] ?? false;
+
 $progressBarItemClass = Components::classnames([
 	Components::selector($componentClass, $componentClass, 'item'),
 	Components::selector($componentJsClass, $componentJsClass),
@@ -42,7 +44,11 @@
 	?>
 	<div class="<?php echo esc_attr($progressBarItemClass); ?>" <?php echo $progressBarAttrsOutput; // phpcs:ignore Eightshift.Security.ComponentsEscape.OutputNotEscaped ?>>
 		<div class="<?php echo esc_attr("{$componentClass}__item-inner"); ?>">
-			<?php echo esc_html($label); ?>
+			<?php
+			if (!$hideLabels) {
+				echo esc_html($label);
+			}
+			?>
 		</div>
 	</div>
 	<?php

diff --git a/src/Blocks/components/progress-bar/progress-bar.php b/src/Blocks/components/progress-bar/progress-bar.php
@@ -28,7 +28,6 @@
 }
 
 $progressBarMultiflowUse = Components::checkAttr('progressBarMultiflowUse', $attributes, $manifest);
-$progressBarMultiflowInitCount = Components::checkAttr('progressBarMultiflowInitCount', $attributes, $manifest);
 
 $progressBarClass = Components::classnames([
 	Components::selector($componentClass, $componentClass),
@@ -47,10 +46,11 @@
 			'steps' => $progressBarSteps,
 			'componentClass' => $componentClass,
 			'componentJsClass' => $componentJsClass,
+			'hideLabels' => Components::checkAttr('progressBarHideLabels', $attributes, $manifest),
 		]);
 	} else {
 		echo Components::renderPartial('component', $manifest['componentName'], 'multiflow', [  // phpcs:ignore Eightshift.Security.ComponentsEscape.OutputNotEscaped
-			'count' => $progressBarMultiflowInitCount,
+			'count' => Components::checkAttr('progressBarMultiflowInitCount', $attributes, $manifest),
 		]);
 	}
 	?>

diff --git a/src/Form/Form.php b/src/Form/Form.php
@@ -318,6 +318,7 @@ public function updateFormsBlockOutput(array $blocks, array $attributes): array
 					$innerBlock['attrs']["{$blockName}FormProgressBarMultiflowUse"] = $innerBlock['attrs']["{$blockName}StepMultiflowUse"] ?? false;
 					$innerBlock['attrs']["{$blockName}FormProgressBarMultiflowInitCount"] = $innerBlock['attrs']["{$blockName}StepProgressBarMultiflowInitCount"] ?? '';
 					$innerBlock['attrs']["{$blockName}FormProgressBarUse"] = $innerBlock['attrs']["{$blockName}StepProgressBarUse"] ?? false;
+					$innerBlock['attrs']["{$blockName}FormProgressBarHideLabels"] = $innerBlock['attrs']["{$blockName}StepProgressBarHideLabels"] ?? false;
 					$innerBlock['attrs']["{$blockName}FormHasSteps"] = true;
 
 					$inBlockOutput = \array_values($inBlockOutput);