feat: progressbar

.yarn/versions/61e59c2c.yml

@@ -0,0 +1,10 @@
+releases:
+  "@nimbus-ds/components": minor
+  "@nimbus-ds/progress-bar": major
+  "@nimbus-ds/styles": minor
+
+declined:
+  - nimbus-design-system
+  - "@nimbus-ds/scroll-pane"
+  - "@nimbus-ds/segmented-control"
+  - "@nimbus-ds/stepper"

jest.config.ts

@@ -36,6 +36,8 @@ const config: Config.InitialOptions = {
     "@nimbus-ds/toast": "<rootDir>/packages/react/src/atomic/Toast/src",
     "@nimbus-ds/toggle": "<rootDir>/packages/react/src/atomic/Toggle/src",
     "@nimbus-ds/tooltip": "<rootDir>/packages/react/src/atomic/Tooltip/src",
+    "@nimbus-ds/progress-bar":
+      "<rootDir>/packages/react/src/atomic/ProgressBar/src",
     // composites
     "@nimbus-ds/accordion":
       "<rootDir>/packages/react/src/composite/Accordion/src",

packages/core/styles/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Nimbus Styles deprive all styles needed to build nimbus components.
 
+## 2025-07-31 `9.19.0`
+
+#### 🎉 New features
+
+- Added `progress-bar` new atomic component styles. ([#323](https://github.com/TiendaNube/nimbus-design-system/pull/323) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-07-28 `9.18.0`
 
 #### 🎉 New features

packages/core/styles/src/index.ts

@@ -33,6 +33,7 @@ export { link } from "./packages/atomic/link";
 export { tooltip } from "./packages/atomic/tooltip";
 export { thumbnail } from "./packages/atomic/thumbnail";
 export { textarea } from "./packages/atomic/textarea";
+export { progressBar } from "./packages/atomic/progressBar";
 
 export { accordion } from "./packages/composite/accordion";
 export { alert } from "./packages/composite/alert";
@@ -50,7 +51,7 @@ export { scrollPane } from "./packages/composite/scroll-pane";
 export { calendar } from "./packages/patterns/calendar";
 export { editor } from "./packages/patterns/editor";
 
-
+/* Types */
 export type { BoxSprinkle } from "./packages/atomic/box";
 export type { IconButtonSprinkle } from "./packages/atomic/iconButton";
 export type { TextSprinkle } from "./packages/atomic/text";

packages/core/styles/src/packages/atomic/progressBar/index.ts

@@ -0,0 +1,5 @@
+import * as styles from "./nimbus-progressBar.css";
+
+export const progressBar = {
+  classnames: { ...styles },
+}; 

packages/core/styles/src/packages/atomic/progressBar/nimbus-progressBar.css.ts

@@ -0,0 +1,55 @@
+import { style, styleVariants } from "@vanilla-extract/css";
+import { varsThemeBase } from "../../../themes";
+
+const base = style({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  height: "0.5rem", // 8px
+  borderRadius: varsThemeBase.shape.border.radius.full,
+  backgroundColor: varsThemeBase.colors.neutral.surfaceDisabled,
+  overflow: "hidden",
+  position: "relative",
+});
+
+const fill = style({
+  height: "100%",
+  borderRadius: varsThemeBase.shape.border.radius.full,
+  transition: `width ${varsThemeBase.motion.speed.slow} ease`,
+  minWidth: "0.5rem", 
+});
+
+export const container = base;
+
+export const appearance = styleVariants({
+  primary: [
+    fill,
+    {
+      backgroundColor: varsThemeBase.colors.primary.interactive,
+    },
+  ],
+  success: [
+    fill,
+    {
+      backgroundColor: varsThemeBase.colors.success.interactive,
+    },
+  ],
+  warning: [
+    fill,
+    {
+      backgroundColor: varsThemeBase.colors.warning.interactive,
+    },
+  ],
+  danger: [
+    fill,
+    {
+      backgroundColor: varsThemeBase.colors.danger.interactive,
+    },
+  ],
+  neutral: [
+    fill,
+    {
+      backgroundColor: varsThemeBase.colors.neutral.interactive,
+    },
+  ],
+}); 

packages/react/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
 
+## 2025-07-31 `5.15.0`
+
+#### 🎉 New features
+
+- Created new component ProgressBar. ([#323](https://github.com/TiendaNube/nimbus-design-system/pull/323) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-07-28 `5.14.0`
 
 #### 🎉 New features

packages/react/src/atomic/ProgressBar/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+The ProgressBar component allows us to display the progress of an operation or task in a visual format.
+
+## 2025-07-31 `1.0.0`
+
+### 🎉 New features
+
+- Added ProgressBar component. ([#PR](https://github.com/TiendaNube/nimbus-design-system/pull/PR))
+- Added `value` prop to control progress from 0 to 100.
+- Added `appearance` prop with variants: primary, success, warning, danger, neutral.
+- Added ProgressBar skeleton component.
+- Added accessibility support with ARIA attributes.
+- Added proper TypeScript types and documentation. 

packages/react/src/atomic/ProgressBar/README.md

@@ -0,0 +1,51 @@
+# `@nimbus-ds/progress-bar`
+
+[![@nimbus-ds/progress-bar](https://img.shields.io/npm/v/@nimbus-ds/progress-bar?label=%40nimbus-ds%2Fprogress-bar)](https://www.npmjs.com/package/@nimbus-ds/progress-bar)
+
+The ProgressBar component is used to display the progress of an operation or task in a visual format.
+
+## Installation
+
+```sh
+$ yarn add @nimbus-ds/progress-bar
+# or
+$ npm install @nimbus-ds/progress-bar
+```
+
+### Component Anatomy
+
+The component consists of a horizontal bar with a fill that represents the progress value as a percentage from 0 to 100.
+
+## Guidelines
+
+We use the ProgressBar component to visually communicate the completion status of operations, tasks, or any measurable progress.
+
+### Variants
+
+The component has 5 appearance variants that can be used according to the context:
+
+- **Neutral** - Used for general progress indication without specific semantic meaning
+- **Primary** - Used to highlight important progress or main tasks  
+- **Success** - Used to indicate positive progress or successful completion stages
+- **Warning** - Used to indicate caution or attention-required progress
+- **Danger** - Used to indicate critical or error-related progress
+
+### Usage recommendations
+
+- Use to show completion percentage of tasks, uploads, downloads, or any measurable operation
+- Ensure the progress value is meaningful and accurately represents the actual completion state
+- Consider adding text labels to provide additional context when necessary
+- Use appropriate appearance variants to convey the semantic meaning of the progress
+
+### Accessibility
+
+The component includes proper ARIA attributes:
+- `role="progressbar"` to identify the element as a progress indicator
+- `aria-valuenow` to indicate the current progress value
+- `aria-valuemin` and `aria-valuemax` to define the range (0-100)
+
+## Usage
+
+View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/progress-bar).
+
+<img alt="Nimbus" style="margin-bottom: 30px;" src="https://tiendanube.github.io/design-system-nimbus/static/media/nimbus-logo.ab60bd79.png" height="30" /> 

packages/react/src/atomic/ProgressBar/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@nimbus-ds/progress-bar",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn g:webpack",
+    "clean": "rm -rf dist",
+    "version": "yarn version"
+  },
+  "dependencies": {
+    "@nimbus-ds/skeleton": "workspace:^"
+  },
+  "peerDependencies": {
+    "@nimbus-ds/styles": "workspace:^",
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "homepage": "https://nimbus.nuvemshop.com.br/documentation",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TiendaNube/nimbus-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
+  },
+  "devDependencies": {
+    "@nimbus-ds/box": "workspace:^",
+    "@nimbus-ds/skeleton": "workspace:^",
+    "@nimbus-ds/webpack": "workspace:^"
+  }
+}

packages/react/src/atomic/ProgressBar/src/ProgressBar.tsx

@@ -0,0 +1,63 @@
+import React, { ComponentPropsWithRef, forwardRef, useMemo } from "react";
+import { progressBar } from "@nimbus-ds/styles";
+
+import { ProgressBarBaseProps, ProgressBarComponents } from "./progressBar.types";
+import { ProgressBarSkeleton } from "./components";
+
+/**
+ * ProgressBar component displays the progress of an operation or task in a visual format.
+ * It provides a horizontal bar that fills based on the completion percentage.
+ * 
+ * @component
+ * @example
+ * <ProgressBar value={50} appearance="primary" />
+ * 
+ * @example
+ * // With skeleton loading state
+ * <ProgressBar.Skeleton width="200px" />
+ */
+const ProgressBar = forwardRef<HTMLDivElement, ProgressBarBaseProps>(
+  (
+    {
+      className: _className,
+      style: _style,
+      value,
+      appearance = "neutral",
+      ...rest
+    },
+    ref
+  ) => {
+    // Ensure value is within 0-100 range
+    const clampedValue = useMemo(() => Math.min(100, Math.max(0, value)), [value]);
+    const percentage = `${clampedValue}%`;
+
+    return (
+      <div
+        {...rest}
+        ref={ref}
+        className={[progressBar.classnames.container, _className].join(" ")}
+        style={_style}
+        role="progressbar"
+        aria-valuenow={clampedValue}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <div
+          className={progressBar.classnames.appearance[appearance]}
+          style={{ width: percentage }}
+          data-testid="progress-bar-fill"
+        />
+      </div>
+    );
+  }
+) as React.ForwardRefExoticComponent<
+  ProgressBarBaseProps & React.RefAttributes<HTMLDivElement>
+> &
+  ProgressBarComponents;
+
+ProgressBar.Skeleton = ProgressBarSkeleton;
+ProgressBar.displayName = "ProgressBar";
+ProgressBar.Skeleton.displayName = "ProgressBar.Skeleton";
+
+export type ProgressBarProps = ComponentPropsWithRef<typeof ProgressBar>;
+export { ProgressBar }; 

packages/react/src/atomic/ProgressBar/src/components/ProgressBarSkeleton/ProgressBarSkeleton.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProgressBar } from "../../ProgressBar";
+
+const meta: Meta<typeof ProgressBar.Skeleton> = {
+  title: "atomic/ProgressBar/ProgressBar.Skeleton",
+  component: ProgressBar.Skeleton,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProgressBar.Skeleton>;
+
+export const basic: Story = { args: {} };

packages/react/src/atomic/ProgressBar/src/components/ProgressBarSkeleton/ProgressBarSkeleton.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { Skeleton } from "@nimbus-ds/skeleton";
+import { ProgressBarSkeletonProperties } from "./ProgressBarSkeleton.types";
+
+const ProgressBarSkeleton: React.FC<ProgressBarSkeletonProperties> = ({
+  width = "100%",
+  ...rest
+}) => <Skeleton width={width} height="0.5rem" borderRadius="0.5rem" {...rest} />;
+
+export { ProgressBarSkeleton };

packages/react/src/atomic/ProgressBar/src/components/ProgressBarSkeleton/ProgressBarSkeleton.types.tsx

@@ -0,0 +1,7 @@
+import { SkeletonProps } from "@nimbus-ds/skeleton";
+
+export type ProgressBarSkeletonProperties = Partial<
+  Pick<SkeletonProps, "width" | "height" | "data-testid">
+>;
+
+export type ProgressBarSkeletonProps = ProgressBarSkeletonProperties;

packages/react/src/atomic/ProgressBar/src/components/ProgressBarSkeleton/index.ts

@@ -0,0 +1 @@
+export { ProgressBarSkeleton } from "./ProgressBarSkeleton";