Preparing to move Progress from Draft to Beta

apps/component-tests/src/components/showcase-test/showcase-test.tsx

@@ -22,7 +22,7 @@ export const ShowcaseTest = component$(() => {
 
   return (
     <>
-      <section class="flex flex-col items-center">
+      <section class="flex w-full flex-col items-center">
         {MetaGlobComponentSig.value && <MetaGlobComponentSig.value />}
       </section>
     </>

apps/website/src/_state/component-statuses.ts

@@ -43,7 +43,7 @@ export const statusByComponent: ComponentKitsStatuses = {
     Modal: ComponentStatus.Beta,
     Pagination: ComponentStatus.Draft,
     Popover: ComponentStatus.Beta,
-    Progress: ComponentStatus.Draft,
+    Progress: ComponentStatus.Beta,
     Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,

apps/website/src/routes/docs/headless/progress/index.mdx

@@ -10,78 +10,52 @@ import { Note } from '~/components/note/note';
 
 # Progress
 
-Displays a progress bar related to a task.
+A visual indicator that shows how much of a task has been completed.
 
 <Showcase name="hero" />
 
-Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/ARIA/apg/patterns/meter) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
+## ✨ Features
 
-<FeatureList
-  features={['Provides context for assistive technology to read the progress of a task.']}
-/>
+<FeatureList features={['Follows the WAI-Aria design pattern']} />
 
 ## Building blocks
 
 <CodeSnippet name="building-blocks" />
 
-{/* TODO: Match docs conventions with the select, collapsible, or label. */}
-
-## Accessibility
-
-Adheres to the [progressbar role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter/).
-
-## API
-
-### Progress
-
-Contains all of the progress parts.
+### 🎨 Anatomy
 
-<APITable
+<AnatomyTable
   propDescriptors={[
     {
-      name: 'class',
-      type: 'string',
-      description: 'CSS classes to apply to the Progress.',
+      name: 'Progress.Root',
+      description: 'The root container for the progress',
     },
     {
-      name: 'value',
-      type: 'number',
-      description: 'The progress value.',
-    },
-    {
-      name: 'max',
-      type: 'number',
-      description: 'The maximum progress value',
-    },
-    {
-      name: 'getValueLabel',
-      type: 'function',
-      description:
-        'A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.',
+      name: 'Progress.Indicator',
+      description: 'Displays the progression process',
     },
   ]}
 />
 
-### Progress Indicator
+## Example CSS
+
+<CodeSnippet name="progress.css" />
+
+## API
 
-Contains all of the progress parts.
+### Progress.Root
 
 <APITable
   propDescriptors={[
-    {
-      name: 'class',
-      type: 'string',
-      description: 'CSS classes to apply to the Progress.',
-    },
     {
       name: 'value',
       type: 'number',
-      description: 'The progress value.',
+      description: 'Current value of the progress bar.',
     },
     {
       name: 'max',
       type: 'number',
-      description: 'The maximum progress value',
+      description: 'Maximum value of the progress bar.',
     },
     {
       name: 'getValueLabel',

packages/kit-headless/src/components/progress/progress.test.ts

@@ -10,27 +10,53 @@ async function setup(page: Page, exampleName: string) {
   return { driver, getRoot, getProgressState, getProgressValue, getProgressIndicator };
 }
 
-test.describe('Progress Bar usaged', () => {
-  test(`should have root and indicator`, async ({ page }) => {
+test.describe('Critical functionality', () => {
+  test(`GIVEN a progress
+  WHEN the progress is rendered
+  THEN it should have root and indicator`, async ({ page }) => {
     const { driver: d } = await setup(page, 'hero');
 
     await expect(d.getRoot()).toBeVisible();
     await expect(d.getProgressIndicator()).toBeVisible();
   });
 
-  test(`should have progress state loading if is not completed`, async ({ page }) => {
+  test(`GIVEN a progress
+  WHEN progress is not completed
+  THEN it should have progress state loading`, async ({ page }) => {
     const { driver: d } = await setup(page, 'hero');
 
-    expect(d.getProgressIndicator()).toBeVisible();
+    await expect(d.getProgressIndicator()).toBeVisible();
     expect(await d.getProgressState()).toBe('loading');
     expect(await d.getProgressValue()).toBe('30');
   });
+});
 
-  test(`should have aria attributes`, async ({ page }) => {
+test.describe('A11y', () => {
+  test(`GIVEN a progress
+  WHEN the progress is rendered
+  THEN it should have aria-valuemin attribute`, async ({ page }) => {
     const { driver: d } = await setup(page, 'hero');
     await expect(d.getRoot()).toHaveAttribute('aria-valuemin', '0');
+  });
+
+  test(`GIVEN a progress
+  WHEN the progress is rendered
+  THEN it should have aria-valuemax attribute`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
     await expect(d.getRoot()).toHaveAttribute('aria-valuemax', '100');
+  });
+
+  test(`GIVEN a progress
+  WHEN the progress is rendered
+  THEN it should have aria-valuenow attribute`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
     await expect(d.getRoot()).toHaveAttribute('aria-valuenow', '30');
+  });
+
+  test(`GIVEN a progress
+  WHEN the progress is rendered
+  THEN it should have aria-valuetext attribute`, async ({ page }) => {
+    const { driver: d } = await setup(page, 'hero');
     await expect(d.getRoot()).toHaveAttribute('aria-valuetext', '30%');
   });
 });