clean up tw config. update snapshots. replace Button css module with tw (#1900)

* clean up tw config. update snapshots. replace Button css module with tw

* remove nulls from cva utils

* clean up Button props and update snapshots

* upgrade to cva@beta

* fix cva args

Author: billy-le

common/utils/cva.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-restricted-imports */
-import { cx as clsx, cva as cvaOriginal } from 'class-variance-authority';
+import { cx as clsx, cva as cvaOriginal } from 'cva';
 import { twMerge } from 'tailwind-merge';
-import type { ClassValue } from 'class-variance-authority/dist/types';
+import type { ClassValue, CVA } from 'cva';
 /* eslint-enable @typescript-eslint/no-restricted-imports */
 
 /**
@@ -28,12 +28,12 @@ export const cx = (...classes: ClassValue[]) => twMerge(clsx(...classes));
  *
  * @see https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts
  */
-export const cva: typeof cvaOriginal = (base, config) => {
-  const cvaFn = cvaOriginal(base, config);
+export const cva: CVA = props => {
+  const cvaFn = cvaOriginal(props);
   return (...args: Parameters<typeof cvaFn>) => {
     const result = cvaFn(...args);
     return twMerge(result);
   };
 };
 
-export type { VariantProps } from 'class-variance-authority';
+export type { VariantProps } from 'cva';

components/Branding/FontSection/FontSection.tsx

@@ -21,8 +21,8 @@ function FontSection() {
                 <div
                   className={
                     fontsObject[item] === 'DIN Condensed Bold'
-                      ? '[&>p]:font-serif [&>h6]:font-serif [&>p]:font-dinCondensed [&>h6]:font-dinCondensed'
-                      : '[&>p]:font-sans [&>p]:font-encodeSans [&>h6]:font-sans [&>h6]:font-encodeSans'
+                      ? '[&>p]:font-serif [&>h6]:font-serif [&>p]:font-din-condensed [&>h6]:font-din-condensed'
+                      : '[&>p]:font-sans [&>p]:font-encode-sans [&>h6]:font-sans [&>h6]:font-encode-sans'
                   }
                 >
                   <h6 style={fontStyle}>{fontsObject[item]}</h6>

components/Branding/FontSection/__tests__/__snapshots__/FontSection.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`FontSection > should render with required props 1`] = `
       >
         <li>
           <div
-            className="[&>p]:font-serif [&>h6]:font-serif [&>p]:font-dinCondensed [&>h6]:font-dinCondensed"
+            className="[&>p]:font-serif [&>h6]:font-serif [&>p]:font-din-condensed [&>h6]:font-din-condensed"
           >
             <h6
               style={
@@ -33,7 +33,7 @@ exports[`FontSection > should render with required props 1`] = `
         </li>
         <li>
           <div
-            className="[&>p]:font-sans [&>p]:font-encodeSans [&>h6]:font-sans [&>h6]:font-encodeSans"
+            className="[&>p]:font-sans [&>p]:font-encode-sans [&>h6]:font-sans [&>h6]:font-encode-sans"
           >
             <h6
               style={

components/Buttons/Button/Button.module.css

@@ -1,10 +1,10 @@
 import type { ButtonHTMLAttributes } from 'react';
+import type { VariantProps } from 'common/utils/cva';
 import noop from 'lodash/noop';
-import { cx } from 'common/utils/cva';
+import { cva } 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';
-import styles from './Button.module.css';
 
 interface GoogleAnalyticsEventPropType {
   /**
@@ -36,20 +36,41 @@ interface GoogleAnalyticsEventPropType {
   transport?: 'beacon' | 'xhr' | 'image';
 }
 
-type ButtonProps = {
+interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonCva> {
   /**
    * Helps track in-page `event` interactions.
    */
   analyticsObject?: GoogleAnalyticsEventPropType;
-  /**
-   * Forces the component's width as wide as its parent container's width.
-   */
-  fullWidth?: boolean;
-  /**
-   * Sets the button color theme.
-   */
-  theme?: 'primary' | 'secondary';
-} & ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+export const buttonCva = cva({
+  base: [
+    'inline-block font-din-condensed rounded leading-none border-4 border-solid cursor-pointer font-bold text-center uppercase py-4 px-3 whitespace-nowrap transition-all duration-200 ease-linear min-w-[175px]',
+    'focus-visible:bg-transparent hover:bg-transparent',
+    'disabled:opacity-60 disabled:hover:cursor-not-allowed',
+  ],
+  variants: {
+    theme: {
+      primary: 'bg-primary border-primary outline-primary text-secondary',
+      secondary: 'bg-secondary border-secondary outline-secondary text-primary',
+    },
+  },
+  compoundVariants: [
+    {
+      theme: 'primary',
+      class: 'focus-visible:text-primary hover:text-primary',
+    },
+    {
+      theme: 'secondary',
+      class: 'focus-visible:text-secondary hover:text-secondary',
+    },
+  ],
+  defaultVariants: {
+    theme: 'primary',
+  },
+});
 
 export default function Button({
   analyticsObject = {
@@ -59,27 +80,22 @@ export default function Button({
   children,
   className = undefined,
   disabled = false,
-  fullWidth = false,
   onClick = noop,
   tabIndex = 0,
-  theme = 'primary',
+  theme,
   type = 'button',
   ...rest
 }: ButtonProps) {
   const customDataAttributes = getDataAttributes(rest);
   const ariaAttributes = getAriaAttributes(rest);
-
   const eventConfig = {
     ...analyticsObject,
     label: typeof children === 'string' ? children : undefined,
   };
 
   return (
     <button
-      className={cx(styles.Button, className, styles[theme], {
-        [styles.disabled]: disabled,
-        [styles.fullWidth]: fullWidth,
-      })}
+      className={buttonCva({ theme, className })}
       data-testid={BUTTON}
       disabled={disabled}
       onClick={e => {

components/Buttons/Button/Button.tsx

@@ -6,6 +6,13 @@ type ButtonStoryType = StoryObj<typeof Button>;
 const meta: Meta<typeof Button> = {
   title: 'Buttons/Button',
   component: Button,
+  args: {
+    theme: 'primary',
+    disabled: false,
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
   parameters: {
     actions: {
       handles: ['click'],

components/Buttons/Button/__stories__/Button.stories.tsx

@@ -2,7 +2,7 @@
 
 exports[`Button > should render with many props assigned 1`] = `
 <button
-  className="Button test-class secondary disabled fullWidth"
+  className="inline-block font-din-condensed rounded leading-none border-4 border-solid cursor-pointer font-bold text-center uppercase py-4 px-3 whitespace-nowrap transition-all duration-200 ease-linear min-w-[175px] focus-visible:bg-transparent hover:bg-transparent disabled:opacity-60 disabled:hover:cursor-not-allowed bg-secondary border-secondary outline-secondary text-primary focus-visible:text-secondary hover:text-secondary test-class"
   data-id="test-id"
   data-testid="BUTTON"
   disabled={true}
@@ -16,7 +16,7 @@ exports[`Button > should render with many props assigned 1`] = `
 
 exports[`Button > should render with required props 1`] = `
 <button
-  className="Button primary"
+  className="inline-block font-din-condensed rounded leading-none border-4 border-solid cursor-pointer font-bold text-center uppercase py-4 px-3 whitespace-nowrap transition-all duration-200 ease-linear min-w-[175px] focus-visible:bg-transparent hover:bg-transparent disabled:opacity-60 disabled:hover:cursor-not-allowed bg-primary border-primary outline-primary text-secondary focus-visible:text-primary hover:text-primary"
   data-testid="BUTTON"
   disabled={false}
   onClick={[Function]}

components/Buttons/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -1,9 +1,9 @@
-import { cx } from 'common/utils/cva';
 import Link from 'next/link';
 import OutboundLink from 'components/OutboundLink/OutboundLink';
-import styles from '../Button/Button.module.css';
+import type { VariantProps } from 'common/utils/cva';
+import { buttonCva } from '../Button/Button';
 
-export interface LinkButtonProps {
+export interface LinkButtonProps extends VariantProps<typeof buttonCva> {
   /**
    * Url to be passed to the base anchor element.
    */
@@ -24,28 +24,17 @@ export interface LinkButtonProps {
    * Sets an id to the base element for testing.
    */
   'data-testid'?: string;
-  /**
-   * Forces the component's width as wide as its parent container's width.
-   */
-  fullWidth?: boolean;
-  /**
-   * Sets the button color theme.
-   */
-  theme?: 'primary' | 'secondary';
 }
 
 export default function LinkButton({
   analyticsEventLabel,
   children,
   className,
   'data-testid': testID,
-  fullWidth = false,
   href,
-  theme = 'primary',
+  theme,
 }: LinkButtonProps) {
-  const linkButtonClassNames = cx(styles.Button, className, styles[theme], {
-    [styles.fullWidth]: fullWidth,
-  });
+  const linkButtonClassNames = buttonCva({ theme, className });
 
   const hasAnalyticsEventLabel = !!analyticsEventLabel;
 

components/Buttons/LinkButton/LinkButton.tsx

@@ -6,6 +6,9 @@ type LinkButtonStoryType = StoryObj<typeof LinkButton>;
 const meta: Meta<typeof LinkButton> = {
   title: 'Buttons/LinkButton',
   component: LinkButton,
+  args: {
+    theme: 'primary',
+  },
 };
 
 export default meta;

components/Buttons/LinkButton/__stories__/LinkButton.stories.tsx

@@ -2,7 +2,7 @@
 
 exports[`LinkButton > should render with many props assigned 1`] = `
 <a
-  className="inline-flex items-start Button test-class secondary fullWidth"
+  className="items-start inline-block font-din-condensed rounded leading-none border-4 border-solid cursor-pointer font-bold text-center uppercase py-4 px-3 whitespace-nowrap transition-all duration-200 ease-linear min-w-[175px] focus-visible:bg-transparent hover:bg-transparent disabled:opacity-60 disabled:hover:cursor-not-allowed bg-secondary border-secondary outline-secondary text-primary focus-visible:text-secondary hover:text-secondary test-class"
   data-testid="Test"
   href="https://tests.com"
   onClick={[Function]}
@@ -21,7 +21,7 @@ exports[`LinkButton > should render with many props assigned 1`] = `
 
 exports[`LinkButton > should render with required props 1`] = `
 <a
-  className="Button primary"
+  className="inline-block font-din-condensed rounded leading-none border-4 border-solid cursor-pointer font-bold text-center uppercase py-4 px-3 whitespace-nowrap transition-all duration-200 ease-linear min-w-[175px] focus-visible:bg-transparent hover:bg-transparent disabled:opacity-60 disabled:hover:cursor-not-allowed bg-primary border-primary outline-primary text-secondary focus-visible:text-primary hover:text-primary"
   href="https://tests.com"
   onClick={[Function]}
   onMouseEnter={[Function]}