diff --git a/packages/circuit-ui/components/TierIndicator/PlusTierIndicator.tsx b/packages/circuit-ui/components/TierIndicator/PlusTierIndicator.tsx new file mode 100644 index 0000000000..5e8c9ef8e5 --- /dev/null +++ b/packages/circuit-ui/components/TierIndicator/PlusTierIndicator.tsx @@ -0,0 +1,46 @@ +/** + * Copyright 2022, 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 { SVGAttributes, ReactElement } from 'react'; + +export const PlusTierIndicator = ( + props: SVGAttributes, +): ReactElement => ( + + + + + + + + + + + +); diff --git a/packages/circuit-ui/components/TierIndicator/TierIndicator.mdx b/packages/circuit-ui/components/TierIndicator/TierIndicator.mdx index 0ed85fe3f4..0d47136eb9 100644 --- a/packages/circuit-ui/components/TierIndicator/TierIndicator.mdx +++ b/packages/circuit-ui/components/TierIndicator/TierIndicator.mdx @@ -14,7 +14,6 @@ The TierIndicator component is used to highlight freemium offerings in the UI. ## Best practices -- Don’t pair the Plus mark with the SumUp logo or in a block of text. +- 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. -- Avoid overriding the default color of the Indicator mark as it represents the SumUp brand. diff --git a/packages/circuit-ui/components/TierIndicator/TierIndicator.module.css b/packages/circuit-ui/components/TierIndicator/TierIndicator.module.css deleted file mode 100644 index 764650dee5..0000000000 --- a/packages/circuit-ui/components/TierIndicator/TierIndicator.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.base { - position: absolute; - top: 50%; - left: 50%; - padding: 0; - margin: 0; - font-weight: var(--cui-font-weight-bold); - color: var(--cui-bg-normal); - transform: translate(-50%, -50%) skew(-12deg); -} - -.wrapper { - position: relative; - - svg { - position: absolute; - } -} - -.s { - font-size: var(--cui-body-s-font-size); - line-height: var(--cui-body-s-line-height); -} - -.m { - font-size: var(--cui-body-m-font-size); - line-height: var(--cui-body-m-line-height); -} - -.l { - font-size: var(--cui-body-l-font-size); - line-height: var(--cui-body-l-line-height); -} diff --git a/packages/circuit-ui/components/TierIndicator/TierIndicator.spec.tsx b/packages/circuit-ui/components/TierIndicator/TierIndicator.spec.tsx index f6c2d47d5b..8f014efbb1 100644 --- a/packages/circuit-ui/components/TierIndicator/TierIndicator.spec.tsx +++ b/packages/circuit-ui/components/TierIndicator/TierIndicator.spec.tsx @@ -14,7 +14,6 @@ */ import { describe, expect, it } from 'vitest'; -import { createRef } from 'react'; import { render, axe } from '../../util/test-utils.js'; @@ -23,22 +22,13 @@ import { TierIndicator } from './TierIndicator.js'; describe('TierIndicator', () => { it('should merge a custom class name with the default ones', () => { const className = 'foo'; - const { container } = render( - , - ); + const { container } = render(); const tierIndicator = container.querySelector('h2'); expect(tierIndicator?.className).toContain(className); }); - it('should forward a ref', () => { - const ref = createRef(); - const { container } = render(); - const tierIndicator = container.querySelector('h2'); - expect(ref.current).toBe(tierIndicator); - }); - it('should meet accessibility guidelines', async () => { - const { container } = render(); + const { container } = render(); const actual = await axe(container); expect(actual).toHaveNoViolations(); }); diff --git a/packages/circuit-ui/components/TierIndicator/TierIndicator.tsx b/packages/circuit-ui/components/TierIndicator/TierIndicator.tsx index ea4d0fe5d0..ed3c50de2f 100644 --- a/packages/circuit-ui/components/TierIndicator/TierIndicator.tsx +++ b/packages/circuit-ui/components/TierIndicator/TierIndicator.tsx @@ -13,26 +13,19 @@ * limitations under the License. */ -import { forwardRef, type HTMLAttributes } from 'react'; +import type { HTMLAttributes } from 'react'; -import { clsx } from '../../styles/clsx.js'; -import type { AsPropType } from '../../types/prop-types.js'; +import { PlusTierIndicator } from './PlusTierIndicator.js'; -import classes from './TierIndicator.module.css'; - -export interface TierIndicatorProps extends HTMLAttributes { +export interface TierIndicatorProps extends HTMLAttributes { /** * The tier name. */ - tier?: 'Plus'; + tier: 'Plus'; /** * Choose from 3 font sizes. Defaults to `m`. */ size?: 's' | 'm' | 'l'; - /** - * Render the text using any HTML element. - */ - as?: AsPropType; } const sizeMap: Record = { s: { width: '36', height: '16' }, @@ -40,38 +33,10 @@ const sizeMap: Record = { l: { width: '63', height: '28' }, }; -export const TierIndicator = forwardRef( - ( - { className, as: Element = 'div', tier = 'Plus', size = 's', ...props }, - ref, - ) => ( -
- - - - - {tier} - -
- ), +export const TierIndicator = ({ size = 's', ...props }: TierIndicatorProps) => ( + );