Add an optional paid plans badge for secondary navigation links (#2957)

Author: sirineJ

.changeset/shy-tips-roll.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Added a `tier` prop to the SideNavigation component's secondary links to show an optional paid tier indicator.

packages/circuit-ui/components/SideNavigation/SideNavigation.stories.tsx

@@ -74,6 +74,7 @@ export const baseArgs: SideNavigationProps = {
               label: 'Pants',
               href: '/shop/pants',
               onClick: action('Shop → Pants'),
+              tier: { variant: 'plus' },
             },
             {
               label: 'Socks',

packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.spec.tsx

@@ -23,6 +23,7 @@ import {
   screen,
   type RenderFn,
 } from '../../../../util/test-utils.js';
+import { CircuitError } from '../../../../util/errors.js';
 
 import { SecondaryLinks, type SecondaryLinksProps } from './SecondaryLinks.js';
 
@@ -34,7 +35,7 @@ describe('SecondaryLinks', () => {
     return renderFn(<SecondaryLinks {...props} />);
   }
 
-  const baseProps = {
+  const baseProps: SecondaryLinksProps = {
     secondaryGroups: [
       {
         secondaryLinks: [
@@ -54,6 +55,7 @@ describe('SecondaryLinks', () => {
             href: '/shop/socks',
             onClick: vi.fn(),
             isActive: true,
+            tier: { variant: 'plus' },
           },
         ],
       },
@@ -99,6 +101,43 @@ describe('SecondaryLinks', () => {
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
+  it('should show a badge when the badge prop is passed', () => {
+    renderSecondaryLinks(render, baseProps);
+    expect(screen.getByText('New')).toBeVisible();
+  });
+
+  it('should show a tier indicator when the tier prop is passed', () => {
+    renderSecondaryLinks(render, baseProps);
+    expect(screen.getByText('plus')).toBeVisible();
+  });
+
+  it('should throw an error if passed both badge and tier props', () => {
+    const invalidProps: SecondaryLinksProps = {
+      secondaryGroups: [
+        {
+          secondaryLinks: [
+            {
+              label: 'Shirts',
+              href: '/shop/shirts',
+              onClick: vi.fn(),
+              badge: {},
+              tier: { variant: 'plus' },
+            },
+          ],
+        },
+      ],
+    };
+
+    const expectedError = new CircuitError(
+      'SideNavigation',
+      'The `badge` and `tier` props cannot be used simultaneously.',
+    );
+
+    expect(() => renderSecondaryLinks(render, invalidProps)).toThrow(
+      expectedError,
+    );
+  });
+
   it('should have no accessibility violations', async () => {
     const { container } = renderSecondaryLinks(render, baseProps);
     const actual = await axe(container);

packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx

@@ -32,15 +32,25 @@ import type { SecondaryGroupProps, SecondaryLinkProps } from '../../types.js';
 import { clsx } from '../../../../styles/clsx.js';
 import { utilClasses } from '../../../../styles/utility.js';
 import { sharedClasses } from '../../../../styles/shared.js';
+import { TierIndicator } from '../../../TierIndicator/TierIndicator.js';
+import { CircuitError } from '../../../../util/errors.js';
 
 import classes from './SecondaryLinks.module.css';
 
 function SecondaryLink({
   label,
   badge,
+  tier,
   isActive,
   ...props
 }: SecondaryLinkProps) {
+  if (process.env.NODE_ENV !== 'production' && tier && badge) {
+    throw new CircuitError(
+      'SideNavigation',
+      'The `badge` and `tier` props cannot be used simultaneously.',
+    );
+  }
+
   const { Link } = useComponents();
 
   const Element = props.href ? (Link as AsPropType) : 'button';
@@ -62,6 +72,7 @@ function SecondaryLink({
           </Body>
         </Skeleton>
         {badge && <Badge variant="promo" as="span" {...badge} />}
+        {tier && <TierIndicator {...tier} size="s" />}
       </Element>
     </li>
   );

packages/circuit-ui/components/SideNavigation/types.ts

@@ -17,6 +17,7 @@ import type { MouseEvent, KeyboardEvent, AnchorHTMLAttributes } from 'react';
 import type { IconComponentType } from '@sumup-oss/icons';
 
 import type { BadgeProps } from '../Badge/index.js';
+import type { TierIndicatorProps } from '../TierIndicator/TierIndicator.js';
 
 export interface PrimaryLinkProps
   extends AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -105,4 +106,8 @@ export interface SecondaryLinkProps {
    * a new link or to indicate new content.
    */
   badge?: BadgeProps;
+  /**
+   * An optional badge to highlight elements belonging to a specific tier.
+   */
+  tier?: Omit<TierIndicatorProps, 'size'>;
 }