feat: rework PlanDisplay to Plans 2.0 design

.yarn/versions/plan-display-plans-2.yml

@@ -0,0 +1,6 @@
+releases:
+  "@nimbus-ds/plan-display": minor
+  "@nimbus-ds/patterns-webpack": patch
+
+declined:
+  - nimbus-patterns

packages/core/webpack/package.json

@@ -10,7 +10,7 @@
   "sideEffects": false,
   "scripts": {
     "clean": "rm -rf dist",
-    "g:webpack": "cd $INIT_CWD && webpack"
+    "g:webpack": "cd \"$INIT_CWD\" && webpack"
   },
   "homepage": "https://nimbus.nuvemshop.com.br/documentation",
   "repository": {

packages/react/src/components/PlanDisplay/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
-EmptyApp allows the user to build marketing-style landing pages for apps. It features internal components meant to build hero sections, content sections with images and text with features, and payment plans.
+PlanDisplay allows the user to present subscription plans and pricing. It features internal components to build plan cards with headers, prices, feature bullets, and footers — including featured-plan and gradient variants.
+
+## 2026-06-11 `2.0.0`
+
+### ✨ Features
+
+- Reworked `PlanDisplay` to the Plans 2.0 design as the canonical layout, matching the Figma master component. `PlanDisplay.Card` now renders the default card with a level-2 shadow, plus two opt-in variants: `ribbonLabel` (a "Más escogido" ribbon with a primary 2px border) and `gradient` (primary-surface → background gradient). Added a `tag` slot on `PlanDisplay.Header` (e.g. "Plan actual"), a new `PlanDisplay.Price` subcomponent (current price + optional previous price, period and annual note), a `badge` slot on `PlanDisplay.Bullet` (e.g. "Nuevo"), and an `icon` slot on `PlanDisplay.Footer` for add-on rows. (by [@noecondoleo](https://github.com/noecondoleo))
+
+### ⚠️ Breaking changes
+
+- Removed the legacy `highlighted` prop on `PlanDisplay.Card`. Use `ribbonLabel` for the featured plan or `gradient` for the gradient variant. (by [@noecondoleo](https://github.com/noecondoleo))
 
 ## 2026-01-15 `1.1.1`
 

packages/react/src/components/PlanDisplay/README.md

@@ -11,3 +11,57 @@ $ yarn add @nimbus-ds/plan-display
 # or
 $ npm install @nimbus-ds/plan-display
 ```
+
+## Subcomponents
+
+- `PlanDisplay.Card` — wraps a single plan. By default it renders the card with a level-2 shadow.
+  Pass `ribbonLabel` to render the featured ribbon on top (e.g. `"Más escogido"`) with a primary 2px
+  border, or `gradient` for the gradient background variant.
+- `PlanDisplay.Header` — renders the plan `subtitle` and `title`. Pass an optional `tag` slot (e.g. a
+  `<Tag>` like `"Plan actual"`) shown to the right of the subtitle.
+- `PlanDisplay.Price` — renders the `price` and optional `previousPrice` (line-through), `period`
+  (e.g. `"/mes"`) and `annualNote`. Typically passed as the Header `title`.
+- `PlanDisplay.Content` — wraps the plan bullets and supporting content.
+- `PlanDisplay.Bullet` — a feature row with an `icon`, optional `disabled` state and an optional inline
+  `badge` slot (e.g. a `<Tag>` like `"Nuevo"`).
+- `PlanDisplay.Footer` — bottom area. Pass an optional `icon` to render an add-on style row (icon + link).
+- `PlanDisplay.Spacing` — a standalone divider line. Note that `PlanDisplay.Content` already renders
+  this divider at its top to separate the price block from the plan description (as in the Figma master),
+  so you usually don't need to add it manually.
+
+## Plans 2.0 example
+
+```tsx
+import { PlanDisplay } from "@nimbus-ds/plan-display";
+import { Box, Button, Link, Tag, Text } from "@nimbus-ds/components";
+import { CashierIcon, CheckIcon } from "@nimbus-ds/icons";
+
+<PlanDisplay minPlanWidth="236px">
+  <PlanDisplay.Card ribbonLabel="Más escogido">
+    <PlanDisplay.Header
+      subtitle="Avanzado"
+      title={<PlanDisplay.Price price="$999" period="/mes" />}
+    />
+    <PlanDisplay.Content>
+      <Box display="flex" flexDirection="column" gap="3" pb="2">
+        <Text>Gestión avanzada y control total para tu negocio.</Text>
+        <Button appearance="primary" fullWidth>
+          Subir de plan
+        </Button>
+      </Box>
+      <PlanDisplay.Bullet icon={<CheckIcon />} badge={<Tag appearance="primary">Nuevo</Tag>}>
+        Hasta 3 tablas de precios mayoristas
+      </PlanDisplay.Bullet>
+    </PlanDisplay.Content>
+    <PlanDisplay.Footer icon={<CashierIcon />}>
+      <Text>
+        Obtén{" "}
+        <Link as="a" href="#" appearance="primary" textDecoration="underline">
+          Punto de venta Plus
+        </Link>{" "}
+        extra por $149.90/mes
+      </Text>
+    </PlanDisplay.Footer>
+  </PlanDisplay.Card>
+</PlanDisplay>;
+```

packages/react/src/components/PlanDisplay/src/PlanDisplay.tsx

@@ -10,6 +10,7 @@ import {
   PlanDisplayCardContent,
   PlanDisplayCardFooter,
   PlanDisplayCardHeader,
+  PlanDisplayCardPrice,
   PlanDisplayCardSpacing,
 } from "./components";
 
@@ -23,7 +24,7 @@ const PlanDisplay: React.FC<PlanDisplayProps> & PlanDisplayComponents = ({
     gridTemplateColumns={`repeat(auto-fit, minmax(${minPlanWidth}, 1fr))`}
     gap="6"
     justifyContent="center"
-    alignItems="flex-start"
+    alignItems="stretch"
     {...rest}
   >
     {children}
@@ -32,6 +33,7 @@ const PlanDisplay: React.FC<PlanDisplayProps> & PlanDisplayComponents = ({
 
 PlanDisplay.Card = PlanDisplayCard;
 PlanDisplay.Header = PlanDisplayCardHeader;
+PlanDisplay.Price = PlanDisplayCardPrice;
 PlanDisplay.Content = PlanDisplayCardContent;
 PlanDisplay.Spacing = PlanDisplayCardSpacing;
 PlanDisplay.Bullet = PlanDisplayBullet;
@@ -41,6 +43,7 @@ PlanDisplay.displayName = "PlanDisplay";
 PlanDisplay.Card.displayName = "PlanDisplay.Card";
 PlanDisplay.Bullet.displayName = "PlanDisplay.Bullet";
 PlanDisplay.Header.displayName = "PlanDisplay.CardHeader";
+PlanDisplay.Price.displayName = "PlanDisplay.Price";
 PlanDisplay.Content.displayName = "PlanDisplay.CardContent";
 PlanDisplay.Spacing.displayName = "PlanDisplay.CardSpacing";
 

packages/react/src/components/PlanDisplay/src/components/PlanDisplayBullet/PlanDisplayBullet.tsx

@@ -5,25 +5,45 @@ import { PlanDisplayBulletProps } from "./planDisplayBullet.types";
 const PlanDisplayBullet: React.FC<PlanDisplayBulletProps> = ({
   icon,
   disabled,
+  badge,
   children,
 }) => (
-  <Box display="flex" gap="2">
+  <Box display="flex" gap="2" alignItems="center">
     <Box display="flex" alignItems="center">
       <Text
         as="span"
-        color={disabled ? "neutral-interactive" : "success-interactive"}
+        color={disabled ? "neutral-interactive" : "primary-interactive"}
       >
         <Box display="flex" alignItems="center">
           {icon}
         </Box>
       </Text>
     </Box>
-    <Text
-      fontWeight="medium"
-      color={disabled ? "neutral-interactive" : "neutral-textLow"}
-    >
-      {children}
-    </Text>
+    {badge ? (
+      <Text
+        fontWeight="regular"
+        color={disabled ? "neutral-interactive" : "neutral-textLow"}
+      >
+        {children}{" "}
+        {/* Native span: Box drops `style`, so `vertical-align` would never apply on a Box. */}
+        <span
+          style={{
+            display: "inline-flex",
+            gap: "var(--nimbus-spacing-2)",
+            verticalAlign: "middle",
+          }}
+        >
+          {badge}
+        </span>
+      </Text>
+    ) : (
+      <Text
+        fontWeight="regular"
+        color={disabled ? "neutral-interactive" : "neutral-textLow"}
+      >
+        {children}
+      </Text>
+    )}
   </Box>
 );
 

packages/react/src/components/PlanDisplay/src/components/PlanDisplayBullet/planDisplayBullet.types.ts

@@ -3,6 +3,11 @@ import { PropsWithChildren, ReactNode } from "react";
 export type PlanDisplayBulletProperties = {
   icon: ReactNode;
   disabled?: boolean;
+  /**
+   * Optional slot rendered inline after the bullet text (e.g. a `<Tag>` like "Nuevo").
+   * @TJS-type React.ReactNode
+   */
+  badge?: ReactNode;
 };
 export type PlanDisplayBulletProps =
   PropsWithChildren<PlanDisplayBulletProperties>;

packages/react/src/components/PlanDisplay/src/components/PlanDisplayBullet/planDisplayCardBullet.spec.tsx

@@ -33,5 +33,16 @@ describe("GIVEN <PlanDisplayBullet />", () => {
       expect(screen.getByText("Plan display bullet")).toBeDefined();
       expect(screen.getByTestId("icon-id")).toBeDefined();
     });
+
+    it("SHOULD render the badge slot when provided", () => {
+      makeSut({
+        icon,
+        children: "Plan display bullet",
+        badge: <span data-testid="badge-id">Nuevo</span>,
+      });
+
+      expect(screen.getByText("Plan display bullet")).toBeDefined();
+      expect(screen.getByTestId("badge-id")).toBeDefined();
+    });
   });
 });

packages/react/src/components/PlanDisplay/src/components/PlanDisplayCard/PlanDisplayCard.tsx

@@ -1,23 +1,78 @@
 import React from "react";
-import { Box, BoxProps, Card } from "@nimbus-ds/components";
+import { Box, Text } from "@nimbus-ds/components";
 import { PlanDisplayCardProps } from "./planDisplayCard.types";
 
+const GRADIENT_BACKGROUND =
+  "linear-gradient(194.55deg, var(--nimbus-colors-primary-surface) 4.18%, var(--nimbus-colors-neutral-background) 45.97%)";
+
 const PlanDisplayCard: React.FC<PlanDisplayCardProps> = ({
-  highlighted,
+  ribbonLabel,
+  gradient,
   children,
+  style,
   ...rest
 }) => {
-  const highlightedProps: BoxProps = {
-    borderColor: "primary-interactive",
-    borderRadius: "2",
-    borderStyle: "solid",
-    borderWidth: "3",
-    boxShadow: "3",
-  };
+  const hasRibbon = Boolean(ribbonLabel);
 
   return (
-    <Box {...(highlighted ? highlightedProps : {})} {...rest}>
-      <Card>{children}</Card>
+    <Box {...rest} display="flex" flexDirection="column" height="100%">
+      {/* Ribbon area: visible when `ribbonLabel` is set, an invisible placeholder of the
+          same height otherwise. Rendering it on every card reserves identical top space so
+          the content rows (subtitle, price, bullets) align across the grid. */}
+      <div
+        aria-hidden={hasRibbon ? undefined : true}
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: hasRibbon
+            ? "var(--nimbus-colors-primary-interactive)"
+            : "transparent",
+          paddingTop: "var(--nimbus-spacing-0-5)",
+          paddingBottom: "var(--nimbus-spacing-2)",
+          borderTopLeftRadius: "var(--nimbus-shape-border-radius-2)",
+          borderTopRightRadius: "var(--nimbus-shape-border-radius-2)",
+          marginBottom: "calc(var(--nimbus-spacing-2) * -1)",
+        }}
+      >
+        <Text fontWeight="medium" color="neutral-background" textAlign="center">
+          {ribbonLabel || " "}
+        </Text>
+      </div>
+      {/* Content grows to fill the card height (cards in a row stretch to match), so footers
+          anchored with `margin-top: auto` line up at the bottom. */}
+      <Box
+        flex="1 1 auto"
+        display="flex"
+        flexDirection="column"
+        backgroundColor="neutral-background"
+        borderRadius="2"
+        overflow="hidden"
+        {...(hasRibbon
+          ? {
+              borderColor: "primary-interactive",
+              borderStyle: "solid",
+              borderWidth: "2",
+            }
+          : { boxShadow: "2" })}
+      >
+        {/* Content lives in a native element because @nimbus-ds/components Box drops the
+            `style` prop (it renders only sprinkle-generated styles). Routing the gradient
+            background and any consumer `style` through here is the only way they take effect.
+            The div fills the card as a flex column so footers still anchor with `margin-top: auto`. */}
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            flex: "1 1 auto",
+            padding: "var(--nimbus-spacing-4)",
+            background: gradient && !hasRibbon ? GRADIENT_BACKGROUND : undefined,
+            ...style,
+          }}
+        >
+          {children}
+        </div>
+      </Box>
     </Box>
   );
 };

packages/react/src/components/PlanDisplay/src/components/PlanDisplayCard/planDisplayCard.spec.tsx

@@ -18,10 +18,17 @@ describe("GIVEN <PlanDisplayCard />", () => {
       expect(screen.getByText("Body content")).toBeDefined();
     });
 
-    it("SHOULD render highlighted state correctly", () => {
-      makeSut({ highlighted: true });
+    it("SHOULD render the gradient variant correctly", () => {
+      makeSut({ gradient: true });
 
       expect(screen.getByText("Body content")).toBeDefined();
     });
+
+    it("SHOULD render the ribbon label when provided", () => {
+      makeSut({ ribbonLabel: "Más escogido" });
+
+      expect(screen.getByText("Más escogido")).toBeDefined();
+      expect(screen.getByText("Body content")).toBeDefined();
+    });
   });
 });

packages/react/src/components/PlanDisplay/src/components/PlanDisplayCard/planDisplayCard.types.ts

@@ -1,8 +1,19 @@
 import { BoxProps } from "@nimbus-ds/components";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, ReactNode } from "react";
 
 export interface PlanDisplayCardProperties {
-  highlighted?: boolean;
+  /**
+   * Renders the card with the Plans 2.0 gradient background (primary-surface → neutral-background).
+   * Ignored when `ribbonLabel` is provided.
+   */
+  gradient?: boolean;
+  /**
+   * Label shown in a ribbon on top of the card (e.g. "Más escogido"). When provided, the card
+   * is rendered with the featured style (primary ribbon + 2px primary border, no shadow),
+   * taking precedence over `gradient`.
+   * @TJS-type React.ReactNode
+   */
+  ribbonLabel?: ReactNode;
 }
 export type PlanDisplayCardProps =
   PropsWithChildren<PlanDisplayCardProperties> &

packages/react/src/components/PlanDisplay/src/components/PlanDisplayCardContent/PlanDisplayCardContent.tsx

@@ -9,7 +9,7 @@ const PlanDisplayCardContent: React.FC<PlanDisplayCardContentProperties> = ({
   <Card.Body>
     <PlanDisplayCardSpacing />
 
-    <Box display="flex" flexDirection="column" gap="1" py="4">
+    <Box display="flex" flexDirection="column" gap="3">
       {children}
     </Box>
   </Card.Body>

packages/react/src/components/PlanDisplay/src/components/PlanDisplayCardFooter/PlanDisplayCardFooter.tsx

@@ -1,16 +1,32 @@
 import React from "react";
-import { Box } from "@nimbus-ds/components";
+import { Box, Divider, Text } from "@nimbus-ds/components";
 import { PlanDisplayCardFooterProperties } from "./planDisplayCardFooter.types";
-import PlanDisplayCardSpacing from "../PlanDisplayCardSpacing";
 
 const PlanDisplayCardFooter: React.FC<PlanDisplayCardFooterProperties> = ({
+  icon,
   children,
 }) => (
-  <Box display="flex" flexDirection="column" gap="4">
-    <PlanDisplayCardSpacing />
+  // `marginTop: auto` pins the footer to the bottom of the (full-height, flex-column) card
+  // so footers stay aligned across cards in the same row. Native element on purpose: Box
+  // discards `style`, so the `margin-top: auto` would be a no-op on a Box.
+  <div style={{ display: "flex", flexDirection: "column", marginTop: "auto" }}>
+    <Box mt="3" mb="3">
+      <Divider />
+    </Box>
 
-    <Box>{children}</Box>
-  </Box>
+    {icon ? (
+      <Box display="flex" gap="2" alignItems="flex-start">
+        <Text as="span" color="primary-interactive">
+          <Box display="flex" alignItems="center">
+            {icon}
+          </Box>
+        </Text>
+        <Box>{children}</Box>
+      </Box>
+    ) : (
+      <Box>{children}</Box>
+    )}
+  </div>
 );
 
 export { PlanDisplayCardFooter };