sumup-oss · connor-baer · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/eslint-plugin-circuit-ui": major
+---
+
+Added missing rules for the Anchor and BodyLarge migrations.
@@ -0,0 +1,5 @@
+---
+'@sumup-oss/circuit-ui': minor
+---
+
+Migrated to the new typography APIs internally.
@@ -18,6 +18,9 @@ module.exports = require('@sumup-oss/foundry/eslint')({
   rules: {
     '@sumup-oss/circuit-ui/no-invalid-custom-properties': 'error',
     '@sumup-oss/circuit-ui/no-deprecated-custom-properties': 'error',
+    '@sumup-oss/circuit-ui/no-deprecated-props': 'error',
+    '@sumup-oss/circuit-ui/no-deprecated-components': 'error',
+    '@sumup-oss/circuit-ui/no-renamed-props': 'error',
     '@sumup-oss/circuit-ui/prefer-custom-properties': 'warn',
     'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { BodyLarge } from '../../packages/circuit-ui/index.js';
+import { Body } from '../../packages/circuit-ui/index.js';
 
 import type { BodyLargeProps } from '../../packages/circuit-ui/index.js';
 
@@ -26,8 +26,15 @@ export function Intro({
   children: BodyLargeProps['children'];
 }) {
   return (
-    <BodyLarge as="div" variant="subtle" className={classes.base} {...props}>
+    <Body
+      as="div"
+      size="s"
+      weight="semibold"
+      color="subtle"
+      className={classes.base}
+      {...props}
+    >
       {children}
-    </BodyLarge>
+    </Body>
   );
 }
@@ -58,8 +58,8 @@
 		"@storybook/test": "^8.2.4",
 		"@storybook/theming": "^8.2.4",
 		"@sumup-oss/foundry": "^8.2.0",
-		"@sumup-oss/eslint-plugin-circuit-ui": "^4.0.0",
-		"@sumup-oss/stylelint-plugin-circuit-ui": "^2.0.0",
+		"@sumup-oss/eslint-plugin-circuit-ui": "^5.0.0-next.1",
+		"@sumup-oss/stylelint-plugin-circuit-ui": "^3.0.0-next.1",
 		"@types/node": "^22.7.4",
 		"@vitest/coverage-v8": "^2.0.5",
 		"audit-ci": "^7.1.0",

@@ -43,12 +43,14 @@ describe('Body', () => {
   });
 
   it('should render the "highlight" variant as a "strong" element', () => {
+    // eslint-disable-next-line @sumup-oss/circuit-ui/no-deprecated-props, @sumup-oss/circuit-ui/no-renamed-props
     const { container } = render(<Body variant="highlight">Highlight</Body>);
     const actual = container.querySelector('strong');
     expect(actual).toBeVisible();
   });
 
   it('should render the "quote" variant as a "blockquote" element', () => {
+    // eslint-disable-next-line @sumup-oss/circuit-ui/no-deprecated-props
     const { container } = render(<Body variant="quote">Quote</Body>);
     const actual = container.querySelector('blockquote');
     expect(actual).toBeVisible();

@@ -93,6 +93,7 @@ const variants = ['highlight', 'quote', 'confirm', 'alert', 'subtle'] as const;
 
 export const Variants = (args: BodyProps) =>
   variants.map((variant) => (
+    // eslint-disable-next-line @sumup-oss/circuit-ui/no-deprecated-props
     <Body key={variant} {...args} variant={variant}>
       This is a {variant} body
     </Body>

@@ -20,7 +20,7 @@ import { Body, type BodyProps } from '../Body/Body.js';
 
 export type BodyLargeProps = Omit<BodyProps, 'size'>;
 /**
- * @deprecated Use the Body component in size `l` instead.
+ * @deprecated Use the Body component with `size="l"` instead.
  */
 export const BodyLarge = forwardRef<HTMLParagraphElement, BodyLargeProps>(
   (props, ref) => {

@@ -396,7 +396,7 @@ function Month({
     >
       <Headline
         as="h2"
-        size="four"
+        size="s"
         id={headlineId}
         aria-live="polite"
         aria-atomic="true"

@@ -29,7 +29,7 @@ export default {
 };
 
 const Header = () => (
-  <Headline size="four" as="h2">
+  <Headline size="s" as="h2">
     Card heading
   </Headline>
 );

@@ -36,11 +36,7 @@ export function Status({
   ...props
 }: StatusProps) {
   return (
-    <Body
-      variant="highlight"
-      className={clsx(classes.base, className)}
-      {...props}
-    >
+    <Body weight="bold" className={clsx(classes.base, className)} {...props}>
       {step + 1} / {total}
     </Body>
   );

@@ -61,7 +61,7 @@ describe('ListItem', () => {
   it('should render a ListItem with a custom label', () => {
     renderListItem(render, {
       ...baseProps,
-      label: <Body size="one">Label</Body>,
+      label: <Body size="m">Label</Body>,
     });
     expect(screen.getByText('Label')).toBeVisible();
   });
@@ -77,7 +77,7 @@ describe('ListItem', () => {
   it('should render a ListItem with a custom details line', () => {
     renderListItem(render, {
       ...baseProps,
-      details: <Body size="two">Details</Body>,
+      details: <Body size="s">Details</Body>,
     });
     expect(screen.getByText('Details')).toBeVisible();
   });
@@ -94,7 +94,7 @@ describe('ListItem', () => {
     renderListItem(render, {
       ...baseProps,
       trailingLabel: (
-        <Body size="one" variant="highlight">
+        <Body size="m" weight="bold">
           Trailing label
         </Body>
       ),
@@ -117,7 +117,7 @@ describe('ListItem', () => {
       ...baseProps,
       trailingLabel: 'Trailing label',
       trailingDetails: (
-        <Body size="two" variant="subtle">
+        <Body size="s" color="subtle">
           Trailing details
         </Body>
       ),

@@ -66,13 +66,13 @@ const Details = (
       aria-hidden="true"
     />
     <Body
-      size="two"
-      variant="highlight"
+      size="s"
+      weight="bold"
       style={{ marginRight: 'var(--cui-spacings-bit)' }}
     >
       {item.status}
     </Body>
-    <Body size="two" variant="subtle">
+    <Body size="s" color="subtle">
       &middot; {item.timestamp}
     </Body>
   </div>
@@ -83,13 +83,13 @@ const lineThrough = {
 };
 
 const TrailingLabel = (
-  <Body size="one" variant="subtle" style={lineThrough}>
+  <Body size="m" color="subtle" style={lineThrough}>
     {item.amount}
   </Body>
 );
 
 const TrailingDetails = (
-  <Body size="two" variant="subtle" style={lineThrough}>
+  <Body size="s" color="subtle" style={lineThrough}>
     {item.fee} fee
   </Body>
 );
@@ -147,7 +147,7 @@ export const WithCustomLabel = (args: ListItemProps) => (
     <ListItem
       {...args}
       leadingComponent={SumUpCard}
-      label={<Body size="one">Custom multiline label: {args.label}</Body>}
+      label={<Body size="m">Custom multiline label: {args.label}</Body>}
     />
   </Stack>
 );

@@ -172,7 +172,7 @@ export const ListItem = forwardRef<
         <div className={classes.content}>
           <div className={classes.main}>
             {isString(label) ? (
-              <Body size="one" className={classes.label}>
+              <Body size="m" className={classes.label}>
                 {label}
               </Body>
             ) : (
@@ -181,7 +181,7 @@ export const ListItem = forwardRef<
             {details && (
               <div className={classes.details}>
                 {isString(details) ? (
-                  <Body size="two" variant="subtle">
+                  <Body size="s" color="subtle">
                     {details}
                   </Body>
                 ) : (
@@ -199,7 +199,7 @@ export const ListItem = forwardRef<
             >
               <div className={classes.chevron}>
                 {isString(trailingLabel) ? (
-                  <Body size="one" variant="highlight">
+                  <Body size="m" weight="bold">
                     {trailingLabel}
                   </Body>
                 ) : (
@@ -211,7 +211,7 @@ export const ListItem = forwardRef<
               {trailingDetails && (
                 <div className={classes.details}>
                   {isString(trailingDetails) ? (
-                    <Body size="two" variant="subtle">
+                    <Body size="s" color="subtle">
                       {trailingDetails}
                     </Body>
                   ) : (

@@ -47,7 +47,7 @@ describe('ListItemGroup', () => {
     renderListItemGroup(render, {
       ...baseProps,
       label: (
-        <Body as="h4" size="two">
+        <Body as="h4" size="s">
           Group label
         </Body>
       ),
@@ -66,7 +66,7 @@ describe('ListItemGroup', () => {
   it('should render a ListItemGroup with a custom details line', () => {
     renderListItemGroup(render, {
       ...baseProps,
-      details: <Body size="two">Group details</Body>,
+      details: <Body size="s">Group details</Body>,
     });
     expect(screen.getByText('Group details')).toBeVisible();
   });

@@ -84,22 +84,23 @@ const Details = ({ item }: { item: Item }) => (
       />
     )}
     <Body
-      size="two"
-      variant="highlight"
+      size="s"
+      weight="bold"
       style={{ marginRight: 'var(--cui-spacings-bit)' }}
     >
       {item.status}
     </Body>
-    <Body size="two" variant="subtle">
+    <Body size="s" color="subtle">
       &middot; {item.timestamp}
     </Body>
   </div>
 );
 
 const TrailingLabel = ({ item }: { item: Item }) => (
   <Body
-    size="one"
-    variant={item.status === 'Failed' ? 'subtle' : 'highlight'}
+    size="m"
+    color={item.status === 'Failed' ? 'subtle' : undefined}
+    weight={item.status !== 'Failed' ? 'bold' : undefined}
     style={
       item.status === 'Failed' ? { textDecorationLine: 'line-through' } : {}
     }

@@ -110,7 +110,7 @@ export const ListItemGroup = forwardRef<HTMLDivElement, ListItemGroupProps>(
             )}
           >
             {isString(label) ? (
-              <Body as="h4" size="two">
+              <Body as="h4" size="s">
                 {label}
               </Body>
             ) : (
@@ -119,7 +119,7 @@ export const ListItemGroup = forwardRef<HTMLDivElement, ListItemGroupProps>(
           </div>
           {details && (
             <div className={classes.details}>
-              {isString(details) ? <Body size="two">{details}</Body> : details}
+              {isString(details) ? <Body size="s">{details}</Body> : details}
             </div>
           )}
         </div>

@@ -53,7 +53,7 @@ export default {
 
 const defaultModalChildren = () => (
   <Fragment>
-    <Headline as="h2" size="four" style={{ marginBottom: '1rem' }}>
+    <Headline as="h2" size="s" style={{ marginBottom: '1rem' }}>
       Hello World!
     </Headline>
     <Body>I am a modal.</Body>
@@ -146,7 +146,7 @@ export const PreventClose = (modal: ModalProps) => {
 PreventClose.args = {
   children: ({ onClose }: { onClose: ModalProps['onClose'] }) => (
     <Fragment>
-      <Headline as="h2" size="four" style={{ marginBottom: '1rem' }}>
+      <Headline as="h2" size="s" style={{ marginBottom: '1rem' }}>
         Complete the action
       </Headline>
       <Body style={{ marginBottom: '1rem' }}>
@@ -207,7 +207,7 @@ CustomStyles.args = {
           borderTopRightRadius: 'var(--cui-border-radius-mega)',
         }}
       />
-      <Headline as="h2" size="four" style={{ margin: '1rem' }}>
+      <Headline as="h2" size="s" style={{ margin: '1rem' }}>
         Custom styles
       </Headline>
       <Body style={{ margin: '1rem' }}>

@@ -89,7 +89,7 @@ export const NotificationFullscreen = forwardRef<
   return (
     <div ref={ref} className={clsx(classes.base, className)} {...props}>
       <NotificationImage {...image} />
-      <Headline className={classes.headline} size="two" as={headlineElement}>
+      <Headline className={classes.headline} size="m" as={headlineElement}>
         {headlineLabel}
       </Headline>
       {body && <Body className={classes.body}>{body}</Body>}

@@ -163,10 +163,7 @@ export const NotificationInline = forwardRef<
           <span className={utilClasses.hideVisually}>{iconLabel}</span>
           <div className={classes.content}>
             {headline && (
-              <Body
-                variant={'highlight'}
-                as={isString(headline) ? 'h3' : headline.as}
-              >
+              <Body weight="bold" as={isString(headline) ? 'h3' : headline.as}>
                 {isString(headline) ? headline : headline.label}
               </Body>
             )}
@@ -175,7 +172,7 @@ export const NotificationInline = forwardRef<
               <Anchor
                 {...action}
                 className={clsx(action.className, classes.action)}
-                variant="highlight"
+                weight="bold"
               />
             )}
           </div>

@@ -151,7 +151,7 @@ export const NotificationModal: ModalComponent<NotificationModalProps> = ({
         </CloseButton>
       )}
       <NotificationImage image={image} />
-      <Headline as="h2" size="three" className={classes.headline}>
+      <Headline as="h2" size="m" className={classes.headline}>
         {headline}
       </Headline>
       {body && <Body>{body}</Body>}

@@ -123,7 +123,7 @@ export function NotificationToast({
         <span className={utilClasses.hideVisually}>{iconLabel}</span>
         <div className={classes.content}>
           {headline && (
-            <Body variant={'highlight'} as="h3">
+            <Body weight="bold" as="h3">
               {headline}
             </Body>
           )}

@@ -83,7 +83,7 @@ export function DesktopNavigation({
           aria-label={secondaryNavigationLabel}
         >
           <Skeleton className={classes.headline} as="div">
-            <Headline as="h2" size="three">
+            <Headline as="h2" size="m">
               {activePrimaryLink?.label}
             </Headline>
           </Skeleton>