From bc90f12b83c92e1b17fc9bcf40205d5804a00b27 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 19 Jul 2026 11:51:18 +0000 Subject: [PATCH] Simplify workshop guided run layout Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- .../workshop/WorkshopExperience.astro | 106 ------------------ docs/tests/workshop.spec.ts | 14 +-- 2 files changed, 1 insertion(+), 119 deletions(-) diff --git a/docs/src/components/workshop/WorkshopExperience.astro b/docs/src/components/workshop/WorkshopExperience.astro index fd933231b00..556dcfbb6bd 100644 --- a/docs/src/components/workshop/WorkshopExperience.astro +++ b/docs/src/components/workshop/WorkshopExperience.astro @@ -475,19 +475,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? -
-
-
- 0% -

Complete

-
-

Start with the welcome step, then follow the path selected above.

-
-
-
-
-
-
@@ -674,12 +661,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? return step.html || ''; }; - const calculateProgressPercent = (stepIndex, flowLength) => { - if (stepIndex < 0) return 0; - if (flowLength <= 1) return 100; - return Math.round((stepIndex / (flowLength - 1)) * 100); - }; - const setupScreen = root.querySelector('[data-workshop-setup]'); const setupSteps = root.querySelectorAll('[data-workshop-setup-step]'); const tutorialScreen = root.querySelector('[data-workshop-tutorial]'); @@ -690,9 +671,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? const nextButton = root.querySelector('[data-workshop-next]'); const stepBodyContainer = root.querySelector('[data-workshop-step-content]'); const stepSummary = root.querySelector('[data-workshop-step-summary]'); - const lessonPercent = root.querySelector('[data-workshop-lesson-percent]'); - const lessonBar = root.querySelector('[data-workshop-lesson-bar]'); - const lessonContext = root.querySelector('[data-workshop-lesson-context]'); let setupStep = 'workspace'; const showSetupStep = (stepName, opts = {}) => { @@ -842,15 +820,9 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? const journey = manifest.journeys.find((item) => item.id === state.journeyId) || manifest.journeys[0]; const scenario = manifest.scenarios.find((item) => item.id === state.scenarioId) || manifest.scenarios[0]; const stepIndex = visibleFlow.indexOf(activeStep.key); - const progressPercent = calculateProgressPercent(stepIndex, visibleFlow.length); if (tunnelPanel) { tunnelPanel.hidden = state.journeyId !== 'vscode' || setupStep !== 'scenario'; } - lessonPercent.textContent = `${progressPercent}%`; - lessonBar.style.width = `${progressPercent}%`; - lessonContext.textContent = stepIndex >= 0 - ? `${stepIndex + 1} of ${visibleFlow.length} in this ${journey.label} run.` - : 'Linked step from the workshop source.'; stepSummary.textContent = activeStep.summary || 'Follow the guided path for this lesson.'; flowTitle.textContent = `${journey.label} x ${scenario.label}`; stepPosition.textContent = stepIndex >= 0 ? `Step ${stepIndex + 1} of ${visibleFlow.length}` : 'Linked step'; @@ -1285,76 +1257,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? line-height: 1.5; } - .aw-workshop-progress-card { - display: grid; - gap: 0.85rem; - margin-top: 1rem; - padding: 1rem; - border-radius: 1rem; - border: 1px solid var(--aw-border); - background: var(--aw-bg-page); - } - - .aw-workshop-progress-overview { - display: grid; - min-width: 0; - grid-template-columns: auto minmax(0, 1fr); - gap: 1rem; - } - - .aw-workshop-progress-stat { - display: grid; - gap: 0.15rem; - min-width: 6rem; - } - - .aw-workshop-progress-stat > span { - font-size: 2rem; - font-weight: 800; - letter-spacing: -0.04em; - } - - .aw-workshop-progress-stat > p, - .aw-workshop-progress-context { - margin: 0; - color: var(--aw-text-muted); - } - - .aw-workshop-progress-stat > p { - font-size: 0.78rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - } - - .aw-workshop-progress-context { - align-self: center; - font-size: 0.95rem; - line-height: 1.55; - } - - .aw-workshop-progress-timeline { - position: relative; - display: block; - align-items: center; - min-height: auto; - } - - .aw-workshop-progress-track { - height: 0.5rem; - overflow: hidden; - border-radius: 999px; - background: color-mix(in srgb, var(--aw-bg-subtle) 80%, var(--aw-border) 20%); - } - - .aw-workshop-progress-track > span { - display: block; - height: 100%; - border-radius: inherit; - background: var(--sl-color-accent); - transition: width 0.25s ease; - } - .aw-workshop-step-content { display: block; min-width: 0; @@ -1608,7 +1510,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? } :root[data-theme='light'] .aw-workshop-card, - :root[data-theme='light'] .aw-workshop-progress-card, :root[data-theme='light'] .aw-workshop-step-content, :root[data-theme='light'] .aw-workshop-step-content :global(.aw-workshop-entry-card), :root[data-theme='light'] .aw-workshop-step-markdown, @@ -1618,12 +1519,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? box-shadow: none; } - @media (max-width: 72rem) { - .aw-workshop-progress-overview { - grid-template-columns: 1fr; - } - } - @media (max-width: 50rem) { :global(.content-panel:has([data-workshop-root])), :global(.sl-markdown-content:has(> [data-workshop-root])) { @@ -1657,7 +1552,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? } .aw-workshop-panel-summary, - .aw-workshop-progress-card, .aw-workshop-panel-actions { display: none; } diff --git a/docs/tests/workshop.spec.ts b/docs/tests/workshop.spec.ts index ba0564690a4..4521eef7bc2 100644 --- a/docs/tests/workshop.spec.ts +++ b/docs/tests/workshop.spec.ts @@ -51,32 +51,23 @@ async function shouldNavigateToVisibleStep(page: Page, isPresent: boolean, stepK } test.describe('Workshop tutorial', () => { - test('progress summary follows the active step instead of saved completion history', async ({ page }) => { + test('step position follows the active step instead of saved completion history', async ({ page }) => { await startWorkshop(page); const flowKeys = await getFlowStepKeys(page); const flowLength = flowKeys.length; - const firstStepPercent = flowLength <= 1 ? 100 : 0; - const thirdStepPercent = flowLength <= 1 ? 100 : Math.round((2 / (flowLength - 1)) * 100); await expect(page.locator('[data-workshop-step-position]')).toHaveText(`Step 1 of ${flowLength}`); - await expect(page.locator('[data-workshop-lesson-percent]')).toHaveText(`${firstStepPercent}%`); - await expect(page.locator('[data-workshop-lesson-context]')).toHaveText(`1 of ${flowLength} in this GitHub.com run.`); - await expect(page.locator('.aw-workshop-progress-card')).not.toContainText('Go to step'); await page.getByRole('button', { name: /Next step/i }).click(); await page.getByRole('button', { name: /Next step/i }).click(); await expect(page.locator('[data-workshop-step-position]')).toHaveText(`Step 3 of ${flowLength}`); - await expect(page.locator('[data-workshop-lesson-percent]')).toHaveText(`${thirdStepPercent}%`); - await expect(page.locator('[data-workshop-lesson-context]')).toHaveText(`3 of ${flowLength} in this GitHub.com run.`); await page.getByRole('button', { name: /Previous step/i }).click(); await page.getByRole('button', { name: /Previous step/i }).click(); await expect(page.locator('[data-workshop-step-position]')).toHaveText(`Step 1 of ${flowLength}`); - await expect(page.locator('[data-workshop-lesson-percent]')).toHaveText(`${firstStepPercent}%`); - await expect(page.locator('[data-workshop-lesson-context]')).toHaveText(`1 of ${flowLength} in this GitHub.com run.`); }); test('switching entry path clears previous scenario and restarts the flow', async ({ page }) => { @@ -121,12 +112,10 @@ test.describe('Workshop tutorial', () => { await expect(page.getByRole('button', { name: /Next step|Finish workshop/i })).toBeVisible(); if (isZenMobileViewport) { await expect(page.locator('.aw-workshop-flow-header')).toBeHidden(); - await expect(page.locator('.aw-workshop-progress-card')).toBeHidden(); await expect(page.locator('.aw-workshop-panel-summary')).toBeHidden(); await expect(page.locator('.aw-workshop-panel-actions')).toBeHidden(); } else { await expect(page.locator('.aw-workshop-flow-header')).toBeVisible(); - await expect(page.locator('.aw-workshop-progress-card')).toBeVisible(); await expect(page.locator('.aw-workshop-panel-summary')).toBeVisible(); await expect(page.locator('.aw-workshop-panel-actions')).toBeVisible(); } @@ -144,7 +133,6 @@ test.describe('Workshop tutorial', () => { '.aw-workshop', '.aw-workshop-panel-shell', '.aw-workshop-panel-header', - '.aw-workshop-progress-card', '.aw-workshop-step-content', '.aw-workshop-panel-footer', ];