es-progression checkpoint not clickable option

packages/components/src/components.d.ts

@@ -429,6 +429,10 @@ export namespace Components {
           * The current active location.
          */
         "location": string;
+        /**
+          * The current active location.
+         */
+        "readonly"?: boolean;
     }
     /**
      * Wraps a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to allow tracking `DOMRect` dimensions
@@ -1577,6 +1581,10 @@ declare namespace LocalJSX {
           * Emitted when a checkpoint is clicked.
          */
         "onProgressionRequest"?: (event: EsProgressionCustomEvent<string>) => void;
+        /**
+          * The current active location.
+         */
+        "readonly"?: boolean;
     }
     /**
      * Wraps a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to allow tracking `DOMRect` dimensions

packages/components/src/components/es-progression/es-progression.css

@@ -19,7 +19,6 @@ button {
     align-items: center;
     background-color: transparent;
     font: inherit;
-    cursor: pointer;
     outline: none;
     color: var(--color-text);
     position: relative;
@@ -44,11 +43,15 @@ button {
         transition-timing-function: ease;
     }
 
-    &:hover,
-    &:focus {
-        & .center {
-            opacity: 1;
-            transform: scale(0.5);
+    &:not(.readonly) {
+        cursor: pointer;
+
+        &:hover,
+        &:focus {
+            & .center {
+                opacity: 1;
+                transform: scale(0.5);
+            }
         }
     }
 

packages/components/src/components/es-progression/es-progression.demo.tsx

@@ -10,6 +10,7 @@ import type { Checkpoint } from './types';
 export class Counter {
     @State() location1: string = '1-1';
     @State() location2: string = '2-1';
+    @State() location3: string = '3-1';
 
     render() {
         return (
@@ -51,6 +52,16 @@ export class Counter {
                         }}
                     />
                 </div>
+                <h1>Unclickable checkpoints</h1>
+                <div style={{ display: 'flex', gap: '20px' }}>
+                    <es-progression
+                        checkpoints={this.world3}
+                        location={this.location3}
+                        onProgressionRequest={(e) => {
+                            this.location3 = e.detail;
+                        }}
+                    />
+                </div>
             </Host>
         );
     }
@@ -93,6 +104,7 @@ export class Counter {
                     case 'complete':
                         return [ICON_NAMESPACE, 'check'];
                 }
+                true;
             },
         },
         {
@@ -119,6 +131,28 @@ export class Counter {
         {
             id: '2-4',
             title: 'Castle',
+            disabled: true,
+        },
+    ];
+
+    private readonly world3: Checkpoint[] = [
+        {
+            id: '3-1',
+            title: 'Overworld',
+            readonly: true,
+        },
+        {
+            id: '3-2',
+            title: 'Underground',
+        },
+        {
+            id: '3-3',
+            title: 'Athletic',
+            readonly: true,
+        },
+        {
+            id: '3-4',
+            title: 'Castle',
         },
     ];
 }

packages/components/src/components/es-progression/es-progression.tsx

@@ -31,6 +31,8 @@ export class Progression {
     @Prop() checkpoints!: Checkpoint[];
     /** The current active location. */
     @Prop() location!: string;
+    /** The current active location. */
+    @Prop() readonly?: boolean;
     /** Set custom colors for all checkpoints */
     @Prop() colors?: Partial<Record<CheckpointState, string>>;
     /** Set custom icons for all checkpoints */
@@ -69,6 +71,7 @@ export class Progression {
                     id,
                     title,
                     disabled = false,
+                    readonly = this.readonly ?? false,
                     color,
                     inactiveColor,
                     icon,
@@ -82,10 +85,15 @@ export class Progression {
                         key={id}
                         type={'button'}
                         part={`checkpoint ${state}`}
-                        class={state}
+                        class={{
+                            readonly,
+                            [state]: true,
+                        }}
                         disabled={disabled}
                         tabindex={state === 'active' ? -1 : 0}
-                        onClick={() => this.progressionRequest.emit(id)}
+                        onClick={() =>
+                            readonly ? null : this.progressionRequest.emit(id)
+                        }
                         style={{
                             '--checkpoint-color': color,
                         }}

packages/components/src/components/es-progression/readme.md

@@ -66,6 +66,7 @@ export default () => (
 | `colors`                   | --         | Set custom colors for all checkpoints | `undefined \| { active?: string \| undefined; complete?: string \| undefined; inactive?: string \| undefined; }`                            | `undefined` |
 | `icons`                    | --         | Set custom icons for all checkpoints  | `undefined \| { active?: IconDescription \| undefined; complete?: IconDescription \| undefined; inactive?: IconDescription \| undefined; }` | `undefined` |
 | `location` _(required)_    | `location` | The current active location.          | `string`                                                                                                                                    | `undefined` |
+| `readonly`                 | `readonly` | The current active location.          | `boolean \| undefined`                                                                                                                      | `undefined` |
 
 
 ## Events

packages/components/src/components/es-progression/types.ts

@@ -6,6 +6,7 @@ export interface Checkpoint {
     id: string;
     title: string;
     disabled?: true;
+    readonly?: boolean;
     color?: (state: CheckpointState) => string | undefined;
     icon?: (state: CheckpointState) => IconDescription | undefined;
 }