Skip to content

Feature progress component - #103

Merged
egdev6 merged 1 commit into
mainfrom
feature/progress
May 29, 2026
Merged

egdev6 merged 1 commit into
mainfrom
feature/progress

Conversation

@Maciker

@Maciker Maciker commented Oct 4, 2025

Copy link
Copy Markdown
Collaborator

Summary

Progress component is used to track the progress of an activity.
It's a presentational component that displays a progress bar based on the value prop.

Context / Issue

[ATOMS] Progress 27

Type of change

  • Feature - Atom

Changes

Added progress component code and structure.
Also added in styles the proper animation to use in this component.

How to Test

  1. Fetch the repo and pull the branch: feature/progress

  2. Launch the command npx storybook-watch

  3. Check the progress component.

image

@netlify

netlify Bot commented Oct 4, 2025 •

Copy link
Copy Markdown

✅ Deploy Preview for egdev6-design-system ready!

Name Link
🔨 Latest commit a7265b2
🔍 Latest deploy log https://app.netlify.com/projects/egdev6-design-system/deploys/68e0f251fdbd4d0008037ade
😎 Deploy Preview https://deploy-preview-103--egdev6-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@egdev6
egdev6 force-pushed the feature/progress branch from a7265b2 to f91d152 Compare May 29, 2026 06:37
@egdev6
egdev6 self-requested a review as a code owner May 29, 2026 06:37
@egdev6
egdev6 requested a review from Copilot May 29, 2026 06:37

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new Progress atom for displaying determinate and indeterminate task completion states, including styling, Storybook examples, tests, and public package export.

Changes:

  • Added Progress component, hook, variants, props, and atom barrel export.
  • Added indeterminate progress animation with reduced-motion handling.
  • Added unit tests and Storybook stories covering ranges, labels, variants, and accessibility attributes.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/styles/animations.css Adds progress indeterminate keyframes and CSS class.
src/index.ts Exports the new Progress atom from the package entrypoint.
src/components/atoms/progress/useProgress.ts Implements progress value clamping, ARIA values, labels, and class composition.
src/components/atoms/progress/types.ts Defines Progress props and CVA variants.
src/components/atoms/progress/Progress.tsx Renders the progressbar, optional label, value label, and indicator.
src/components/atoms/progress/Progress.test.tsx Adds tests for range math, invalid values, ARIA behavior, and prop forwarding.
src/components/atoms/progress/Progress.stories.tsx Adds Storybook docs and examples for variants and states.
src/components/atoms/progress/index.ts Adds the component barrel exports.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@egdev6
egdev6 merged commit 456ae2a into main May 29, 2026
11 checks passed
@egdev6
egdev6 deleted the feature/progress branch May 29, 2026 06:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants