add a TierIndicator component

Author: sirineJ

.changeset/moody-eyes-draw.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Added a TierIndicator component for freemium plans.

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

@@ -0,0 +1,19 @@
+import { Meta, Status, Props, Story } from "../../../../.storybook/components";
+import * as Stories from "./TierIndicator.stories";
+
+<Meta of={Stories} />
+
+# TierIndicator
+
+The TierIndicator component is used to highlight freemium offerings in the UI.
+
+<Status variant="stable" />
+
+<Story of={Stories.Base} />
+<Props />
+
+## Best practices
+
+- Don’t pair the component with the SumUp logo or in a block of text.
+- Limit the usage of the tier indicators per screen, group together concerned features if possible.
+- The Indicator mark should be used to highlight freemium offerings only.

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2025, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, expect, it } from 'vitest';
+
+import { render, axe } from '../../util/test-utils.js';
+
+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 variant="plus" className={className} />,
+    );
+    const tierIndicator = container.querySelector('svg');
+    expect(tierIndicator?.classList).toContain(className);
+  });
+
+  it('should meet accessibility guidelines', async () => {
+    const { container } = render(<TierIndicator variant="plus" />);
+    const actual = await axe(container);
+    expect(actual).toHaveNoViolations();
+  });
+});

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

@@ -0,0 +1,63 @@
+/**
+ * Copyright 2025, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Stack } from '../../../../.storybook/components/index.js';
+
+import { TierIndicator, type TierIndicatorProps } from './TierIndicator.js';
+
+export default {
+  title: 'Brand/TierIndicator',
+  component: TierIndicator,
+  tags: ['status:stable'],
+};
+
+export const Base = (args: TierIndicatorProps) => <TierIndicator {...args} />;
+
+export const Sizes = (args: TierIndicatorProps) => (
+  <dl
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: 'var(--cui-spacings-giga)',
+    }}
+  >
+    <Stack key="small">
+      <dt>
+        Size <strong>s</strong>:
+      </dt>
+      <dd>
+        <TierIndicator {...args} size="s" />
+      </dd>
+    </Stack>
+    <Stack key="medium">
+      <dt>
+        Size <strong>m</strong>:
+      </dt>
+      <dd>
+        <TierIndicator {...args} size="m" />
+      </dd>
+    </Stack>
+    <Stack key="large">
+      <dt>
+        {' '}
+        Size <strong>l</strong>:
+      </dt>
+      <dd>
+        <TierIndicator {...args} size="l" />
+      </dd>
+    </Stack>
+  </dl>
+);

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

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2025, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { HTMLAttributes } from 'react';
+import { PlusTier } from '@sumup-oss/icons';
+
+import { utilClasses } from '../../styles/utility.js';
+
+export interface TierIndicatorProps extends HTMLAttributes<SVGElement> {
+  /**
+   * The tier name.
+   */
+  variant: 'plus';
+  /**
+   * Choose from 3 sizes.
+   * @default 'm'
+   */
+  size?: 's' | 'm' | 'l';
+}
+const sizeMap: Record<string, '16' | '24' | '32'> = {
+  s: '16',
+  m: '24',
+  l: '32',
+};
+
+export const TierIndicator = ({
+  size = 'm',
+  variant = 'plus',
+  ...props
+}: TierIndicatorProps) => (
+  <>
+    <span className={utilClasses.hideVisually}>{variant}</span>
+    <PlusTier aria-hidden="true" size={sizeMap[size]} {...props} />
+  </>
+);