diff --git a/docs/src/components/workshop/WorkshopExperience.astro b/docs/src/components/workshop/WorkshopExperience.astro index 06a76e51e9c..1b9bef165c2 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'; @@ -1284,73 +1256,6 @@ const initialStep = workshopSteps.find((item) => item.key === initialStepKey) ?? line-height: 1.5; } - .aw-workshop-progress-card { - display: grid; - gap: 0.75rem; - padding-bottom: 1rem; - border-bottom: 1px solid color-mix(in srgb, var(--aw-border) 82%, transparent); - } - - .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; @@ -1607,12 +1512,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])) { @@ -1646,7 +1545,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 a32b6664c2f..e5faf5819c7 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,22 +112,18 @@ 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(); } const layout = await page.evaluate(() => { const panelShell = document.querySelector('.aw-workshop-panel-shell'); - const progressCard = document.querySelector('.aw-workshop-progress-card'); const stepContent = document.querySelector('.aw-workshop-step-content'); const panelShellStyle = panelShell ? window.getComputedStyle(panelShell) : null; - const progressCardStyle = progressCard ? window.getComputedStyle(progressCard) : null; const stepContentStyle = stepContent ? window.getComputedStyle(stepContent) : null; const workshopRoot = document.querySelector('.aw-workshop'); const panelHeader = document.querySelector('.aw-workshop-panel-header'); @@ -148,7 +135,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', ]; @@ -187,14 +173,6 @@ test.describe('Workshop tutorial', () => { paddingLeft: panelShellStyle.paddingLeft, paddingRight: panelShellStyle.paddingRight, } : null, - progressCardStyle: progressCardStyle ? { - borderTopWidth: progressCardStyle.borderTopWidth, - borderRightWidth: progressCardStyle.borderRightWidth, - borderBottomWidth: progressCardStyle.borderBottomWidth, - borderLeftWidth: progressCardStyle.borderLeftWidth, - backgroundColor: progressCardStyle.backgroundColor, - boxShadow: progressCardStyle.boxShadow, - } : null, stepContentStyle: stepContentStyle ? { borderWidth: stepContentStyle.borderWidth, borderRadius: stepContentStyle.borderRadius, @@ -219,14 +197,6 @@ test.describe('Workshop tutorial', () => { paddingLeft: '0px', paddingRight: '0px', }); - expect(layout.progressCardStyle).toEqual({ - borderTopWidth: '0px', - borderRightWidth: '0px', - borderBottomWidth: '1px', - borderLeftWidth: '0px', - backgroundColor: 'rgba(0, 0, 0, 0)', - boxShadow: 'none', - }); expect(layout.stepContentStyle).toMatchObject({ borderWidth: '0px', borderRadius: '0px',