feat: Wayfinding Header/Section Implementation

[deanshi]

Asana task: [Wayfinding Widget and Wayfinding in Departures Header](https://app.asana.com/1/15492006741476/project/1185117109217413/task/1213100855318265?focus=true and https://app.asana.com/1/15492006741476/project/1185117109217413/task/1213739741735591?focus=true)

Description

• image_path config for Departure Header can now be used to implement a Wayfinding image
• we can use it to define images above departures, image only sections and full screen images using header_only
• added a container div around sections that exposes a true-grey-70 section break for image section headers

[robbie-sundstrom]

This implementation means that images and regular headers can't be mixed together, or we'll get this extra grey bar like below.

[deanshi]

Updated the logic so that if there's a title, it'll omit the spacing.

[robbie-sundstrom]

Nit, and not particular to your PR, but this color is used all over the place for our LCD screen backgrounds. Should we add it to the constants in colors.scss? Maybe $warm-neutral-95

[robbie-sundstrom]

love the extensionForAsset consolidation! Since the evergreen content widget is doing the same thing of validating the extension against the same list of six, maybe that could be consolidated as well within utils.ts.
I just mean something like:

export const isImgExtension = (assetPath: string) => {
  const parts = assetPath.split(".");
  IMAGE_EXTENSIONS.includes(parts[parts.length - 1].toLowerCase());
};

And then the duplicated constant IMAGE_EXTENSIONS can also be consolidated there

[digitalcora]

In the first screenshot, there is a tiny gap plus an extra border between the top of the widget and the top of the wayfinding graphic. Additionally, all the wayfinding graphics have a white gap on the left side, though maybe this is an artifact of how you exported the graphics themselves.

In the second screenshot, there is a tiny gap between the bottom of the wayfinding graphic and the top of the next section title.

In the third screenshot, there is a gap between the top of the widget and the top of the section title.

[deanshi]

In the first screenshot, there is a tiny gap plus an extra border between the top of the widget and the top of the wayfinding graphic. Additionally, all the wayfinding graphics have a white gap on the left side, though maybe this is an artifact of how you exported the graphics themselves.

In the second screenshot, there is a tiny gap between the bottom of the wayfinding graphic and the top of the next section title.

In the third screenshot, there is a gap between the top of the widget and the top of the section title.

Let me get some proper assets from Betsy and put them in. These were just placeholders to see them in low-stakes action.

[deanshi]

In the first screenshot, there is a tiny gap plus an extra border between the top of the widget and the top of the wayfinding graphic. Additionally, all the wayfinding graphics have a white gap on the left side, though maybe this is an artifact of how you exported the graphics themselves.

In the second screenshot, there is a tiny gap between the bottom of the wayfinding graphic and the top of the next section title.

In the third screenshot, there is a gap between the top of the widget and the top of the section title.

Screenshots have been updated and logic changed to add vertical-align: middle. Omitting that out was causing some extra space.

[robbie-sundstrom]

code looks great, and the example header images look AMAZING. So excited for this

[digitalcora]

One remaining misalignment with the designs that I can see: the "divider" included before image-only sections (those without text titles) should have a small darker border at the top.

[deanshi]

One remaining misalignment with the designs that I can see: the "divider" included before image-only sections (those without text titles) should have a small darker border at the top.

Updated so that we now show the divider. I modified the CSS a little bit since the divider logic was based off of the header previously, but now we have a separate divider div handling that logic.

[robbie-sundstrom]

changes look good!