add a TierIndicator component

packages/circuit-ui/components/TierIndicator/TierIndicator.spec.tsx

@@ -14,6 +14,7 @@
  */
 
 import { describe, expect, it } from 'vitest';
+import { createRef } from 'react';
 
 import { render, axe } from '../../util/test-utils.js';
 
@@ -22,13 +23,22 @@ import { TierIndicator } from './TierIndicator.js';
 describe('TierIndicator', () => {
   it('should merge a custom class name with the default ones', () => {
     const className = 'foo';
-    const { container } = render(<TierIndicator className={className} />);
+    const { container } = render(
+      <TierIndicator variant="Plus" className={className} />,
+    );
     const tierIndicator = container.querySelector('h2');
     expect(tierIndicator?.className).toContain(className);
   });
 
+  it('should forward a ref', () => {
+    const ref = createRef<SVGSVGElement>();
+    const { container } = render(<TierIndicator variant="Plus" />);
+    const tierIndicator = container.querySelector('h2');
+    expect(ref.current).toBe(tierIndicator);
+  });
+
   it('should meet accessibility guidelines', async () => {
-    const { container } = render(<TierIndicator />);
+    const { container } = render(<TierIndicator variant="Plus" />);
     const actual = await axe(container);
     expect(actual).toHaveNoViolations();
   });

packages/circuit-ui/components/TierIndicator/TierIndicator.tsx

@@ -13,30 +13,30 @@
  * limitations under the License.
  */
 
-import type { HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes } from 'react';
+import { PlusTier } from '@sumup-oss/icons';
 
-import { PlusTierIndicator } from './PlusTierIndicator.js';
+const SIZES = ['16', '24', '32'] as const;
 
 export interface TierIndicatorProps extends HTMLAttributes<SVGElement> {
   /**
    * The tier name.
    */
-  tier: 'Plus';
+  variant: 'Plus';
   /**
-   * Choose from 3 font sizes. Defaults to `m`.
+   * Choose from 3 sizes.
+   * @default `m`.
    */
   size?: 's' | 'm' | 'l';
 }
-const sizeMap: Record<string, { width: string; height: string }> = {
-  s: { width: '36', height: '16' },
-  m: { width: '49', height: '24' },
-  l: { width: '63', height: '28' },
+const sizeMap: Record<string, (typeof SIZES)[number]> = {
+  s: '16',
+  m: '24',
+  l: '32',
 };
 
-export const TierIndicator = ({ size = 's', ...props }: TierIndicatorProps) => (
-  <PlusTierIndicator
-    width={sizeMap[size].width}
-    height={sizeMap[size].height}
-    {...props}
-  />
+export const TierIndicator = forwardRef<SVGSVGElement, TierIndicatorProps>(
+  ({ size = 'm', ...props }, ref) => (
+    <PlusTier ref={ref} size={sizeMap[size]} {...props} />
+  ),
 );