fix: full bleed adjustments

[stephiescastle]

Checklist

• Include a description of your pull request and instructions for the reviewer to verify your work.
• Link to the issue if this PR is issue-specific.
• Create/update the corresponding story if this includes a UI component.
• Create/update documentation. If not included, tell us why.
• List the environments / browsers in which you tested your changes.
• Tests, linting, or other required checks are passing.
• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • PRs will be broadly categorized in the change log, but for even easier scanning, consider prefixing with a component name or other useful categorization, e.g., "BaseButton: fix layout bug", or "Storybook: Update dependencies".
• PR has been tagged with a SemVer label and a general category label, or skip-changelog.
  • These tags are used to do the aforementioned broad categorization in the change log and determine what the next release's version number should be.
  • Release Drafter will attempt to do the category labeling for you! Please double-check its work.

Description

Addresses feedback:

• https://github.com/nasa-jpl/www/issues/601#issue-2546642664

Changes:

• EDU NavDesktop will now expand to full-width
• Removed gray extenders in HeroMedia and BlockImageFullBleed site-wide
• Modified BlockCardGrid to only expand to four columns if there are at least four cards. I also changed the breakpoint for when this expands, as it's previous breakpoint didn't make much sense (its container wasn't changing size, just the viewport).

Instructions to test

1. make vue-storybook
2. Full width EDU Nav: http://localhost:6006/?path=/story/navigation-headers-edu-navdesktopedu--base-story&globals=theme:ThemeEdu
3. Remove gray extenders:
   • View http://localhost:6006/?path=/story/components-blocks-blockimage--full-bleed
   • View http://localhost:6006/?path=/story/components-heroes-media-only--base-story
4. BlockCardGrid
   • Only three cards: http://localhost:6006/?path=/story/components-blocks-blockcardgrid--three-cards&globals=theme:ThemeEdu
   • Context-aware breakpoint for 4 columns:
     • View in Streamfield: http://localhost:6006/?path=/story/components-blocks-blockstreamfield--base-story (scroll down to the bottom)
     • View in Robotics template: http://localhost:6006/?path=/story/templates-www-pageroboticsdetail--template

Tested in the following environments/browsers:

Operating System

• macOS
• iOS
• iPadOS
• Windows

Browser

• Chrome
• Firefox ESR
• Firefox
• Safari
• Edge

[Scotchester]

1. I think this class also needs to be removed from the beta banner.
2. Any reason to not also remove it from the WWW desktop nav?

[stephiescastle]

1. Yes, plan to do that in www PR that also updates the explorer-1 version
2. Yes, due to the nature of the nav sometimes being transparent with a gradient, and sometimes solid white.

[Scotchester]

Is this used?

[stephiescastle]

Yes, it's a new story to cover the use-case when there are only 3 cards

[stephiescastle]

Here it is on chromatic: https://668c47cbeb95392cd79c3c0d-xiuixuscxz.chromatic.com/?path=/story/components-blocks-blockcardgrid--three-cards

[Scotchester]

Amazing that merely adding those three lines adds a whole story 🪄

[stephiescastle]

Storybook has gotten much more streamlined!