Remove deprecated icons (#3744)

* delete deprecated icons

* rename flag files

* replace deprecated icons internally

* refactor build file

* change icons eslint rule to error

* lint

* add changeset

* keep deleted icons in manifest with inactive flag

* Update .changeset/better-impalas-open.md

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

* Update .changeset/fancy-weeks-dance.md

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

---------

Co-authored-by: Connor Bär <connor-baer@users.noreply.github.com>

Author: sirineJ

.changeset/better-impalas-open.md

@@ -0,0 +1,34 @@
+---
+"@sumup-oss/circuit-ui": major
+---
+
+Removed the following deprecated icons:
+
+| icon              | replacement                        |
+|-------------------|------------------------------------|
+| AddItems          | Add, Items                         |
+| Copy              | CopyPaste                          |
+| SumUpLogo         | SumupLogo (`sumup-oss/circuit-ui)` |
+| SumUpLogomark     | SumupLogo (`sumup-oss/circuit-ui)  |
+| Apm               | AlternativePaymentMethod           |
+| EmailChat         | Email                              |
+| phone_chat        | Phone                              |
+| PhoneChat         | Mobile                             |
+| ColorCorrection   | ColorPicker                        |
+| CookiePreferences | Cookie                             |
+| Customize         | Customise                          |
+| Favorite          | Favourite                          |
+| NoSim             | NoSimcard                          |
+| PrintFailed       | PrinterFailed                      |
+| Unfavorite        | Unfavourite                        |
+| Contractors       | Contractor                         |
+| notify_circle     | Notify                             |
+| general_settings  | Settings                           |
+| gift_card         | GiftCards                          |
+| payment_link      | PaymentLinks                       |
+| refer             | ReferAFriend,   Reward             |
+| sales             | Receipt                            |
+| messenger         | FacebookMessenger                  |
+|
+
+Use the `no-deprecated-icons` ESLint rule to automatically apply the replacements. 

.changeset/fancy-weeks-dance.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/icons": major
+---
+
+Removed the deprecated Country Flag icons. Use the [Flag](https://circuit.sumup.com/?path=/docs/components-flag--docs) component instead or load the icon with its URL using the [`getIconUrl()`](https://circuit.sumup.com/?path=/docs/packages-icons--docs#load-from-a-url) helper.

.changeset/lovely-bears-deny.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/icons": major
+---
+
+Removed the deprecated Card Scheme icons. Use the new CardScheme component instead or load the icon with its URL using the [`getIconUrl()`](https://circuit.sumup.com/?path=/docs/packages-icons--docs#load-from-a-url) helper.

.changeset/thin-grapes-take.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/icons": major
+---
+
+Remove the deprecated Payment Method icons. Use the new PaymentMethod component instead or load the icon with its URL using the [`getIconUrl()`](https://circuit.sumup.com/?path=/docs/packages-icons--docs#load-from-a-url) helper.

.storybook/components/Icons.tsx

@@ -125,7 +125,7 @@ export function Icons() {
       },
     );
     const matchesSize = size === 'all' || size === icon.size;
-    return matchesKeyword && matchesSize;
+    return !icon.inactive && matchesKeyword && matchesSize;
   }) as IconsManifest['icons'];
 
   return (
@@ -189,7 +189,7 @@ export function Icons() {
   );
 }
 
-const DEPRECATED_CATEGORIES = ['Card scheme', 'Payment method'];
+const URL_ONLY_CATEGORIES = ['Flag', 'Payment method', 'Card scheme'];
 
 function Icon({
   icon,
@@ -208,6 +208,7 @@ function Icon({
   ) as keyof typeof iconComponents;
   // eslint-disable-next-line import-x/namespace
   const IconComponent = iconComponents[componentName] as IconComponentType;
+  const isFlag = icon.category === 'Flag';
 
   const copyIconURL = () => {
     const iconURL = `https://circuit.sumup.com/icons/v2/${icon.name}_${icon.size}.svg`;
@@ -246,16 +247,21 @@ function Icon({
       });
   };
 
+  const flagDimensions = {
+    height: scale === 'one-x' ? 15 : 30,
+    width: scale === 'one-x' ? 20 : 40,
+  };
+
   return (
     <div className={classes.wrapper}>
       <div className={clsx(classes['icon-wrapper'], classes[scale])}>
-        {icon.skipComponentFile ? (
+        {URL_ONLY_CATEGORIES.includes(icon.category) ? (
           <img
-            src={getIconURL(icon.name)}
+            src={getIconURL(icon.name, icon.size)}
+            className={classes.icon}
             aria-labelledby={id}
             alt={icon.name}
-            height={scale === 'one-x' ? 15 : 30}
-            width={scale === 'one-x' ? 20 : 40}
+            {...(isFlag ? flagDimensions : {})}
           />
         ) : (
           <IconComponent
@@ -303,18 +309,17 @@ function Icon({
             Copy URL
           </IconButton>
         )}
-        {!icon.skipComponentFile &&
-          !DEPRECATED_CATEGORIES.includes(icon.category) && (
-            <IconButton
-              variant="tertiary"
-              size="s"
-              // @ts-expect-error ReactIcon is a React component
-              icon={ReactIcon}
-              onClick={copyIconReactName}
-            >
-              Copy React component name
-            </IconButton>
-          )}
+        {!URL_ONLY_CATEGORIES.includes(icon.category) && (
+          <IconButton
+            variant="tertiary"
+            size="s"
+            // @ts-expect-error ReactIcon is a React component
+            icon={ReactIcon}
+            onClick={copyIconReactName}
+          >
+            Copy React component name
+          </IconButton>
+        )}
       </div>
     </div>
   );

.storybook/components/Theme.tsx

@@ -17,7 +17,7 @@ import { useEffect, useState, type ComponentType } from 'react';
 import { ThemeProvider, useTheme } from '@emotion/react';
 import { Unstyled } from '@storybook/blocks';
 import { light, schema } from '@sumup-oss/design-tokens';
-import { SumUpLogomark } from '@sumup-oss/icons';
+import { Home } from '@sumup-oss/icons';
 import { Anchor } from '../../packages/circuit-ui/components/Anchor/Anchor.js';
 import { Body } from '../../packages/circuit-ui/components/Body/Body.js';
 import { Badge } from '../../packages/circuit-ui/components/Badge/Badge.js';
@@ -274,7 +274,7 @@ export function Typography({ name }: PreviewProps) {
 
 export function IconSize({ name }: PreviewProps) {
   return (
-    <SumUpLogomark
+    <Home
       style={{
         width: `var(${name})`,
         height: `var(${name})`,

eslint.config.js

@@ -37,7 +37,7 @@ export default defineConfig([
       'circuit-ui/no-deprecated-props': 'error',
       'circuit-ui/no-renamed-props': 'error',
       'circuit-ui/prefer-custom-properties': 'warn',
-      'circuit-ui/no-deprecated-icons': 'warn',
+      'circuit-ui/no-deprecated-icons': 'error',
     },
   },
   configs.browser,

package-lock.json

@@ -14,7 +14,7 @@
  */
 
 import { describe, expect, it, vi } from 'vitest';
-import { Favorite } from '@sumup-oss/icons';
+import { Favourite } from '@sumup-oss/icons';
 
 import { render, screen, userEvent } from '../../../../util/test-utils.js';
 
@@ -35,7 +35,7 @@ const props: OptionProps = {
 
 describe('Option', () => {
   it('should render with leading icon', () => {
-    render(<Option {...props} image={Favorite} />);
+    render(<Option {...props} image={Favourite} />);
 
     expect(screen.getByText(props.label)).toBeVisible();
     expect(screen.getByText(description)).toBeVisible();

packages/circuit-ui/components/AutocompleteInput/components/Option/Option.spec.tsx

@@ -14,15 +14,10 @@
  */
 
 import { useState } from 'react';
-import {
-  FlagDe,
-  FlagUs,
-  FlagFr,
-  type IconComponentType,
-} from '@sumup-oss/icons';
 
 import { Select, type SelectProps } from './Select.js';
 import { Stack } from '../../../../.storybook/components/index.js';
+import { Flag, type FlagProps } from '../Flag/Flag.js';
 
 export default {
   title: 'Forms/Select',
@@ -50,12 +45,6 @@ const baseArgs = {
   ],
 };
 
-const flagIconMap: { [key: string]: IconComponentType<'16'> } = {
-  DE: FlagDe,
-  US: FlagUs,
-  FR: FlagFr,
-};
-
 export const Base = (args: SelectProps) => <Select {...args} />;
 
 Base.args = baseArgs;
@@ -90,10 +79,16 @@ export const WithPrefix = (args: SelectProps) => {
       onChange={(event) => {
         setValue(event.target.value);
       }}
-      renderPrefix={(props) => {
-        const Icon = props.value && flagIconMap[props.value];
-        return Icon ? <Icon {...props} aria-hidden="true" /> : null;
-      }}
+      renderPrefix={(props) =>
+        props.value ? (
+          <Flag
+            {...props}
+            alt=""
+            countryCode={props.value as FlagProps['countryCode']}
+            size="s"
+          />
+        ) : null
+      }
     />
   );
 };