replace refs to twMerge and classnames. remove classnames pkg (#1894)

Co-authored-by: Kyle Holmberg <kylemh.email@gmail.com>

Author: billy-le

.eslintrc.js

@@ -151,19 +151,18 @@ module.exports = {
             importNames: ['default'],
             message: 'React is globally availble for all page files.',
           },
-          /* {
-           * name: 'tailwind-merge',
-           * importNames: ['twMerge'],
-           * message:
-           *   'Please import `cx` from `common/utils/cva.ts` instead of directly from tailwind-merge.',
-           * },
-           * {
-           *   name: 'class-variance-authority',
-           *   importNames: ['cx', 'cva'],
-           *  message:
-           *    'Please import from `common/utils/cva.ts` instead of directly from class-variance-authority.',
-           *},
-           */
+          {
+            name: 'tailwind-merge',
+            importNames: ['twMerge'],
+            message:
+              'Please import `cx` from `common/utils/cva.ts` instead of directly from tailwind-merge.',
+          },
+          {
+            name: 'class-variance-authority',
+            importNames: ['cx', 'cva'],
+            message:
+              'Please import from `common/utils/cva.ts` instead of directly from class-variance-authority.',
+          },
         ],
       },
     ],
@@ -255,6 +254,18 @@ module.exports = {
                 importNames: ['default'],
                 message: 'React is globally availble for all page files.',
               },
+              {
+                name: 'tailwind-merge',
+                importNames: ['twMerge'],
+                message:
+                  'Please import `cx` from `common/utils/cva.ts` instead of directly from tailwind-merge.',
+              },
+              {
+                name: 'class-variance-authority',
+                importNames: ['cx', 'cva'],
+                message:
+                  'Please import from `common/utils/cva.ts` instead of directly from class-variance-authority.',
+              },
             ],
           },
         ],

components/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { cx } from 'common/utils/cva';
 import { ALERT, ALERT_CLOSE_BUTTON } from 'common/constants/testIDs';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import styles from './Alert.module.css';
@@ -20,7 +20,7 @@ function Alert({
 }: AlertPropsType) {
   return (
     <div
-      className={classNames(styles.Alert, className, {
+      className={cx(styles.Alert, className, {
         [styles.error]: type === 'error',
         [styles.success]: type === 'success',
         [styles.warning]: type === 'warning',

components/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { cx } from 'common/utils/cva';
 
 export interface BadgePropsType {
   /**
@@ -23,7 +23,7 @@ export interface BadgePropsType {
 function Badge({ className = undefined, icon, isImageFirst = true, label }: BadgePropsType) {
   return (
     <figure
-      className={classNames(
+      className={cx(
         'flex',
         'flex-col',
         'justify-items-center',

components/Branding/LogoSection/LogoSection.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { cx } from 'common/utils/cva';
 import Badge from 'components/Badge/Badge';
 import Content from 'components/Content/Content';
 import { s3 } from 'common/constants/urls';
@@ -14,7 +14,7 @@ function LogoSection() {
       columns={[
         <ul className={styles.logoSizeList}>
           {/* - SMALL LOGOS - */}
-          <li className={classNames(styles.logoSizeListItem, styles.smallLogos)}>
+          <li className={cx(styles.logoSizeListItem, styles.smallLogos)}>
             <h5 className="text-center">Small Logos</h5>
             <p className="mx-auto">
               For use when Operation Code&apos;s logo name is between 0-1 inch in height. In most
@@ -255,7 +255,7 @@ function LogoSection() {
           </li>
 
           {/* - LARGE LOGOS - */}
-          <li className={classNames(styles.logoSizeListItem, styles.largeLogos)}>
+          <li className={cx(styles.logoSizeListItem, styles.largeLogos)}>
             <h5 className="text-center">Large Logos</h5>
             <p className="mx-auto">
               Use the Original Large Logo in almost all cases above 1 inch in height. The Red Large

components/Buttons/Button/Button.tsx

@@ -1,6 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react';
 import noop from 'lodash/noop';
-import classNames from 'classnames';
+import { cx } from 'common/utils/cva';
 import { BUTTON } from 'common/constants/testIDs';
 import { gtag } from 'common/utils/thirdParty/gtag';
 import { getDataAttributes, getAriaAttributes } from 'common/utils/prop-utils';
@@ -76,7 +76,7 @@ export default function Button({
 
   return (
     <button
-      className={classNames(styles.Button, className, styles[theme], {
+      className={cx(styles.Button, className, styles[theme], {
         [styles.disabled]: disabled,
         [styles.fullWidth]: fullWidth,
       })}

components/Buttons/CloseButton/CloseButton.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { cx } from 'common/utils/cva';
 import { CLOSE_BUTTON } from 'common/constants/testIDs';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import PlusIcon from 'static/images/icons/plus.svg';
@@ -26,7 +26,7 @@ export default function CloseButton({
     >
       <ScreenReaderOnly>Close</ScreenReaderOnly>
 
-      <PlusIcon className={classNames(styles.icon, styles[theme])} />
+      <PlusIcon className={cx(styles.icon, styles[theme])} />
     </button>
   );
 }

components/Buttons/LinkButton/LinkButton.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { cx } from 'common/utils/cva';
 import Link from 'next/link';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
 import styles from '../Button/Button.module.css';
@@ -43,7 +43,7 @@ export default function LinkButton({
   href,
   theme = 'primary',
 }: LinkButtonProps) {
-  const linkButtonClassNames = classNames(styles.Button, className, styles[theme], {
+  const linkButtonClassNames = cx(styles.Button, className, styles[theme], {
     [styles.fullWidth]: fullWidth,
   });
 

components/Cards/Card/Card.tsx

@@ -1,4 +1,4 @@
-import { twMerge } from 'tailwind-merge';
+import { cx } from 'common/utils/cva';
 import { getDataAttributes } from 'common/utils/prop-utils';
 
 export interface CardPropsType {
@@ -12,7 +12,7 @@ function Card({ children, className, hasAnimationOnHover, ...props }: CardPropsT
 
   return (
     <article
-      className={twMerge(
+      className={cx(
         'items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none',
         hasAnimationOnHover &&
           'shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg',

components/Cards/FlatCard/FlatCard.js

@@ -1,6 +1,5 @@
 import { element, node, shape, string } from 'prop-types';
-import classNames from 'classnames';
-import { twMerge } from 'tailwind-merge';
+import { cx } from 'common/utils/cva';
 import Image from 'next/image';
 import { FLAT_CARD_IMAGE } from 'common/constants/testIDs';
 import { getPlaceholder } from 'common/utils/next-utils';
@@ -28,12 +27,12 @@ function FlatCard({ button: Button, children, className, header, image }) {
 
   return (
     <article
-      className={classNames('box-border my-6 mx-4 relative max-w-[400px]', className, {
+      className={cx('box-border my-6 mx-4 relative max-w-[400px]', className, {
         'pt-20 sm:pt-14': hasImage,
       })}
     >
       <div
-        className={twMerge(
+        className={cx(
           'p-8 flex flex-col gap-5 border-4 border-solid border-themePrimary',
           hasImage && `pt-32`,
         )}

components/Cards/ImageCard/ImageCard.tsx

@@ -1,4 +1,4 @@
-import { twMerge } from 'tailwind-merge';
+import { cx } from 'common/utils/cva';
 import Image from 'next/image';
 import type { CardPropsType } from 'components/Cards/Card/Card';
 import Card from 'components/Cards/Card/Card';
@@ -34,7 +34,7 @@ function ImageCard({
 
   return (
     <Card
-      className={twMerge(
+      className={cx(
         'md:flex-row flex-col md:h-56 md:w-[650px] md:max-w-none p-0 h-auto max-w-xs w-auto [&>*]:flex-[1_1_50%]',
         className,
       )}