Add marketing images to homepage testimonial, fix some styling issues

[jkachel]

What are the relevant tickets?

Closes mitodl/hq#4559
Closes mitodl/hq#4541

Description (What does it do?)

1. Adds the marketing images to the static folder, per the issue.
2. Updates the cards to use a random image from that list rather than the avatar or cover image.
3. Adds the avatar image to the name block on the card
4. Styling fixes for the quote, name block, and quote leader
5. Change the button style to match the other pager buttons
6. Add tests for testimonial sliders

Screenshots (if appropriate):

Regular desktop:

Extra-wide desktop:

Mobile:

How can this be tested?

Automated tests should pass. This includes some new tests for the testimonial sliders, so those specifically should pass - they're in HomePage.test.tsx and TestimonialDisplay.test.tsx.

The layout should more closely match what's in Figma now, and the cover image on the left should be one of the six marketing images. This just chooses one at random, it makes no effort to check to see if one's already been chosen or not.

For the unit page testimonials: the attestant block is now its own component - this should have no real change on the unit page sliders but it is a change.

[gumaerc]

This functions well and solves all the problems in the issues. The spacings all match Figma, but the design should probably be reviewed by @steven-hatch and Bilal (Github won't tag him for me for some reason). I found a few things that I wanted to ask about:

[gumaerc]

In typography.ts, we define 3 font weights that match the designs:

const fontWeights = {
  text: {
    roman: 400,
    medium: 500,
    bold: 700,
  },
}

Thus, the values you end up getting here come from the MUI defaults. In typography.ts, can we assign the MUI properties to our values specified here? For example:

const globalSettings: ThemeOptions["typography"] = {
  // Note: Figma calls this "Neue Haas Grotesk Text", but that is incorrect based on Adobe's font family.
  fontFamily: "neue-haas-grotesk-text, sans-serif",
  fontWeightLight: fontWeights.text.roman,
  fontWeightRegular: fontWeights.text.roman,
  fontWeightMedium: fontWeights.text.medium,
  fontWeightBold: fontWeights.text.bold,
  ...

The MUI defaults don't end up being functionally different (MUI has 300 for light and we use 400) but using the values defined here will ensure that the values match the font we've chosen, in this case neue-haas-grotesk-text, sans-serif.

We actually have a linting rule that is supposed to disable manually specifying font-weight, but I think it was allowed here because it only disallows numeric weights. Anyway, this is definitely a special case as it's not really regular text and is effectively being used here as an icon. Maybe this whole thing would be better as an SVG, but that's another conversation.

[jkachel]

I basically just added the font weights into the theme options as specified. There are a couple other places where this gets used:

• mit-open/src/pages/HomePage/NewsEventsSection.tsx
• ol-components/src/components/ChoiceBox/ChoiceBox.tsx

The onboarding is broken for me locally at the moment, which is where ChoiceBox seems to be used exclusively, but the news and events section didn't seem to change.

[gumaerc]

My point was more that the MUI font weight properties (i.e. theme.typography.fontWeightbold) are not currently customized by our theme, so when you call those properties now you are going to get the MUI defaults. For theme.typography.fontWeightLight for example, you get 300 back whereas in our case that should be 400. This recommendation is based on a conversation with @ChristopherChudzicki about how our specified font weights relate to the imported Abobe font.

[gumaerc]

Is there something we can do here to ensure that two of the same images don't land directly next to each other? This happened to me and of course I didn't get a screenshot of it, but it didn't look great to have the exact same images on two cards... at least side by side.

[jkachel]

I added some code to do this - you will still get wraparound but it shouldn't drop one next to each other. The algorithm is pretty simple but can also set it up so that you don't get a repeat until all of them have been seen once.

[gumaerc]

Thanks, that makes sense. We can always add more marketing images too... as long as we have more images than attestations then we'll never see a repeat.

[gumaerc]

👍 LGTM