From b0ee1c1d45e7182cc46c222715a3867960781c62 Mon Sep 17 00:00:00 2001
From: "Shaun A. Noordin" <shaun.a.noordin@gmail.com>
Date: Fri, 17 Jan 2025 21:39:40 +0000
Subject: [PATCH] Pages Editor phase2 pt2: experiment step/page labels

---
 .../TasksPage/components/StepItem/StepItem.jsx       |  5 ++++-
 css/lab-pages-editor.styl                            | 12 +++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx
index 3024354482..d754e63785 100644
--- a/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx
+++ b/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx
@@ -44,6 +44,7 @@ function StepItem({
   const isLastItem = stepIndex === allSteps.length - 1;
   const taskKeys = stepBody.taskKeys || [];
   const branchingTaskKey = checkCanStepBranch(step, allTasks);
+  const stepLabel = `Page ${ stepIndex + 1 }`
 
   function doCopy() {
     copyStep(stepIndex);
@@ -116,7 +117,9 @@ function StepItem({
           ref={htmlContent}
         >
           <div className="step-controls flex-row spacing-bottom-XS">
-            <span className="step-controls-left" />
+            <div className="step-controls-left">
+              <span className="step-label">{stepLabel}</span>
+            </div>
             <div className="step-controls-center">
               <button
                 aria-label={`Rearrange Page ${stepKey} upwards`}
diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
index 549042206f..d7507d0597 100644
--- a/css/lab-pages-editor.styl
+++ b/css/lab-pages-editor.styl
@@ -124,6 +124,15 @@ $fontWeightBoldPlus = 700
   .disabled, .disabled *, [disabled]
     color: $grey1
   
+  // Common Components
+  // ---------------------------------------------------------------------------
+
+  .step-label
+    background: $orange
+  
+  .workflow-version
+    color: $orange
+
   .decoration-plus
     &::after
       content: ' +'
@@ -186,9 +195,6 @@ $fontWeightBoldPlus = 700
   .spacing-bottom-M
     margin-bottom: $sizeM
   
-  .workflow-version
-    color: $orange
-
   // Component: Workflow "Header" components
   // ---------------------------------------------------------------------------