Case studies layout

[jakewheeler]

This PR creates an initial layout for the "case studies" page.

Here's a sample image of the current layout:

[nickbristow]

These case studies are pretty much all the same so we could just make this a function and have the content be a data array.

[jakewheeler]

This was my plan initially, and at one point I began creating reusable components to build the layout so that we could do something similar to your suggestion. The main issue with this was that it started to become painful when styling changes didn't apply throughout the entire layout.

For example, in order to match the design the image container in section 3 has lg:ml-4 but none of the other image containers do. The styling also changes again slightly depending on whether the image is on the left or right.

I found it tedious and more confusing to manage to try to include a lot of options for a reusable component in order to get this working. What do you think? Anything else I cant try?

[nickbristow]

We should refactor these class name strings into data objects. Then we can just set the classes with that.

So we can have a disabled button return,

then a another one, and set the classes based on if the variant is secondary

[jakewheeler]

Can you give me an example of what you envision the "data object" to look like? Just want to make sure I get what you mean.

[nickbristow]

import classNames from 'classnames';
import Link, { LinkProps } from 'next/link';

const BUTTON_STYLES = {
  primary: {
    button: 'usa-button bg-[#224a58] hover:bg-green',
    text: 'text-white',
  },
  secondary: {
    button:
      'usa-button hover:bg-red items-center gap-2.5 rounded border-2 border-[#224a58] bg-white px-5 py-3 hover:border-2',
    text: 'text-[#224a58]',
  },
} as const;

interface LinkButtonProps extends LinkProps {
  children: React.ReactNode;
  variant: 'primary' | 'secondary';
  className?: string;
  disabled?: boolean;
}
interface LinkButtonProps extends LinkProps {
  children: React.ReactNode;
  variant: 'primary' | 'secondary';
  className?: string;
  disabled?: boolean;
  'aria-label'?: string;
}
export function LinkButton({
  children,
  variant,
  href,
  className = '',
  disabled = false,
  'aria-label': ariaLabel,
  ...props
}: LinkButtonProps) {
  if (disabled) {
    return (
      <div
        className="usa-button usa-button--disabled self-end justify-self-start bg-[#224a58]"
        aria-disabled="true"
        role="link"
        aria-label={ariaLabel}
      >
        <span className="text-base font-bold text-black">{children}</span>
      </div>
    );
  }

  return (
    <Link
      href={href}
      className={classNames(BUTTON_STYLES[variant].button, className)}
      aria-label={ariaLabel}
      {...props}
    >
      <span
        className={classNames(
          'text-center text-base font-bold',
          BUTTON_STYLES[variant].text,
        )}
      >
        {children}
      </span>
    </Link>
  );
}

[jakewheeler]

I like it. Thanks!