Feat: Update Mission Modal Blueprint w/ new (WIP) Rating component

[sghoweri]

Jira

http://vjira2:8080/browse/BDS-2089

Summary

Updates the existing Mission Modal blueprint with updated design comps; new Rating component.

Details

• Includes a fix for a tiny z-index related issue I ran into while using the new Card component's background layer.
• Also includes some demo JS to show the submit button requiring a rating to be chosen.

How to test

• Review updated Modal blueprints (before and after submitting) -- any large red flags or updates needed in order to get this out the door?

[mikemai2awesome]

@sghoweri this is going to break the z-index management in here. Instead, can you try this? I have this working locally:

bolt-card-replacement-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $bolt-card-replacement-z-index-background;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  border-radius: $bolt-card-replacement-border-radius;

  [rounded] & {
    @include bolt-border-radius(large);
  }

  & + bolt-card-replacement-body {
    margin-bottom: auto;
  }
}

.c-bolt-card_replacement__background {
  position: relative;
  width: 100%;
  height: 100%;
}

z-index needs to be set on the element that's controlling the stacking order, the children will follow.

[sghoweri]

@mikemai2awesome unfortunately this update alone isn't enough to fix the main issue I was running into:

That said, I'm testing out one additional CSS update to have the immediate children of <bolt-card-replacement> automatically get position: relative which fixes the issue... just testing if there's any gotchas.

[sghoweri]

@mikemai2awesome check out the latest I just pushed up!

[danielamorse]

@sghoweri Nice job putting this together so quickly. I added some inline comments/questions. Let me know what you think.

Also, the background image isn't visible for me locally or on feature branch: https://feature-update-mission-modal.boltdesignsystem.com/pattern-lab/?p=blueprints-t1-mission-landing--test-with-modal

[sghoweri]

@sghoweri Nice job putting this together so quickly. I added some inline comments/questions. Let me know what you think.

Also, the background image isn't visible for me locally or on feature branch: https://feature-update-mission-modal.boltdesignsystem.com/pattern-lab/?p=blueprints-t1-mission-landing--test-with-modal

@danielamorse I should have a fix for that pushed up very shortly -- the image is there... it's just not showing up due to the related updates I pushed up to address @mikemai2awesome's feedback.

[danielamorse]

Looking ahead, how do you see this SASS being added to Academy? So far there's only vanilla CSS. Do you know if SASS is supported at the theme level? If not, we'll find out together :)

[sghoweri]

@danielamorse this Sass is already getting pulled into Academy (by them installing and using Blueprints) -- if anything, looking ahead I see this Sass getting moved out of here and into a Rating-specific Component package.

[mikemai2awesome]

@sghoweri @danielamorse

I took care of my own comments above with the latest commit, plus the following:

1. Made sure the white part of the background image does not crash with white text at any viewport.
2. Made design judgements on a few utility classes and removed them. We shouldn't be overriding so much for minimal gains.

[sghoweri]

PR was released with v2.21.0