Clearer handling of expandable list steps

app/components/expandable-step-list.hbs

@@ -5,25 +5,25 @@
 >
   {{#each @steps key="id" as |step stepIndex|}}
     <div>
-      <ExpandableStepList::Step
-        @isExpanded={{eq this.expandedStepId step.id}}
-        @isFirstIncompleteStep={{eq step.id this.firstIncompleteStep.id}}
-        @nextIncompleteStep={{this.nextIncompleteStep}}
-        @number={{add stepIndex 1}}
-        @onCollapse={{fn this.handleStepCollapse step}}
-        @onManualComplete={{fn this.handleStepCompletedManually step}}
-        @step={{step}}
-        {{on "click" (fn this.handleStepExpand step)}}
-      >
-        {{#if (eq step.id this.expandedStepId)}}
-          <div class={{@stepContainerClass}}>
-            {{yield (hash expandedStep=this.expandedStep)}}
-          </div>
-        {{/if}}
-      </ExpandableStepList::Step>
-
       {{#if (and (not step.isComplete) (not-eq step.id this.firstIncompleteStep.id))}}
-        <EmberTooltip @text="Complete previous steps to expand this step" />
+        <ExpandableStepList::NonExpandableStep @number={{add stepIndex 1}} @step={{step}} />
+      {{else}}
+        <ExpandableStepList::Step
+          @isExpanded={{eq this.expandedStepId step.id}}
+          @isFirstIncompleteStep={{eq step.id this.firstIncompleteStep.id}}
+          @nextIncompleteStep={{this.nextIncompleteStep}}
+          @number={{add stepIndex 1}}
+          @onCollapse={{fn this.handleStepCollapse step}}
+          @onManualComplete={{fn this.handleStepCompletedManually step}}
+          @step={{step}}
+          {{on "click" (fn this.handleStepExpand step)}}
+        >
+          {{#if (eq step.id this.expandedStepId)}}
+            <div class={{@stepContainerClass}}>
+              {{yield (hash expandedStep=this.expandedStep)}}
+            </div>
+          {{/if}}
+        </ExpandableStepList::Step>
       {{/if}}
     </div>
   {{/each}}

app/components/expandable-step-list/non-expandable-step.hbs

@@ -0,0 +1,15 @@
+<div class="py-2 px-1 cursor-not-allowed group/non-expandable-step relative" data-test-expandable-step-list-step ...attributes>
+  <div class="flex items-center justify-between gap-2">
+    <div class="prose dark:prose-invert opacity-25" data-test-step-title>
+      {{markdown-to-html (concat "**Step " @number "**: " @step.titleMarkdown)}}
+    </div>
+  </div>
+  <div
+    class="absolute inset-0 flex gap-1 items-center justify-center bg-white/70 dark:bg-gray-800/70 backdrop-blur-[3px] opacity-0 group-hover/non-expandable-step:opacity-100 transition-opacity"
+  >
+    {{svg-jar "information-circle" class="w-5 h-5 fill-current text-amber-500"}}
+    <div class="text-sm text-amber-500 font-semibold" data-test-step-title>
+      Complete previous step to expand this step
+    </div>
+  </div>
+</div>

app/components/expandable-step-list/non-expandable-step.ts

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import type { Step } from '../expandable-step-list';
+
+interface Signature {
+  Element: HTMLDivElement;
+
+  Args: {
+    number: number;
+    step: Step;
+  };
+}
+
+export default class NonExpandableStepComponent extends Component<Signature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'ExpandableStepList::NonExpandableStep': typeof NonExpandableStepComponent;
+  }
+}

app/components/expandable-step-list/step.hbs

@@ -1,5 +1,5 @@
 <div
-  class="py-2 px-1 {{if @isExpanded 'pb-6' 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800'}}"
+  class="py-2 px-1 {{if @isExpanded 'pb-6' 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/60'}}"
   data-test-expandable-step-list-step
   {{did-update this.handleDidUpdateIsComplete @step.isComplete}}
   ...attributes

app/components/expandable-step-list/step.ts

@@ -34,7 +34,7 @@ export default class StepComponent extends Component<Signature> {
 
   @action
   handleDidUpdateIsComplete(_element: Signature['Element'], [newIsComplete]: [boolean]) {
-    if (this.args.isExpanded && this.previousIsComplete === false && newIsComplete === true) {
+    if (this.args.isExpanded && this.previousIsComplete != true && newIsComplete === true) {
       this.args.onCollapse();
     }
 

tailwind.config.js

@@ -27,6 +27,7 @@ module.exports = {
   theme: {
     colors: {
       // Build your palette here
+      amber: colors.amber,
       black: 'black',
       blue: colors.sky,
       current: 'currentColor',