feat!: better support header-only card use

[brian-smith-tcril]

⚠️ BREAKING CHANGES ⚠️

BREAKING CHANGE:

• Modified pgn__card-header-content styles
  • margin-top changed:
    • Before: 2x var(--pgn-spacing-spacer-base)
    • After: 1x var(--pgn-spacing-spacer-base)

BREAKING CHANGE:

• Modified pgn__card-header-actions styles
  • Children now centered
    • display: flex added
    • align-items: center added

BREAKING CHANGE:

• pgn__card-wrapper-image-cap.vertical modified
  • Bottom margin conditionally added when logo image is used. This replicates the spacing previously baked into pgn__card-header-content
    • margin-bottom: var(--pgn-spacing-spacer-base) added when logo image used

Description

frontend-app-authoring uses cards in a header-only manner

The current styling for that MFE is accomplished via custom style overrides

  .pgn__card-header {
    padding: .9375rem 1.25rem;

    .pgn__card-header-content {
      margin: 0;
      overflow: hidden;
    }

    .pgn__card-header-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }
  }

This is definitely not an ideal way to accomplish this, however, removing this custom styling leads to less-than-ideal styles in the MFE

This can be made slightly better by adding an empty Card.Footer

bsmith@aximdev:~/code/frontend-app-authoring$ git diff
diff --git a/src/studio-home/card-item/index.tsx b/src/studio-home/card-item/index.tsx
index 699d9164..9e4862a0 100644
--- a/src/studio-home/card-item/index.tsx
+++ b/src/studio-home/card-item/index.tsx
@@ -293,6 +293,7 @@ const CardItem: React.FC<Props> = ({
             </Stack>
           </Card.Status>
           )}
+        <Card.Footer />
       </Card>
     </div>
   );

But it still looks "off."

---

Replicating the "off" styling on the Paragon docs site

It already looks kind of "off" here

This can also be addressed somewhat by adding Card.Footer to the examples, but again, still looks "off"

---

What this PR does:

• Adds empty Card.Footers to the Header examples on the docs site
• Updates the top margin on card-header-content to match the top margin on card-header-actions
• Updates card-header-actions to use display: flex and align-items: center

Conditionally adds a new with-logo class when a Card.ImageCap has a logo to ensure the header maintains the current spacing

With with-logo

Without with-logo

• Makes header-only cards (with empty footers added) look like this

Deploy Preview

https://deploy-preview-3966--paragon-openedx-v23.netlify.app/components/card/#header

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx-v23 ready!

Name	Link
🔨 Latest commit	d63e7a4
🔍 Latest deploy log	https://app.netlify.com/projects/paragon-openedx-v23/deploys/6904261b869ed6000982e7e3
😎 Deploy Preview	https://deploy-preview-3966--paragon-openedx-v23.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.37%. Comparing base (9e7a6a6) to head (d396673).

Additional details and impacted files

@@           Coverage Diff           @@
##             next    #3966   +/-   ##
=======================================
  Coverage   94.37%   94.37%           
=======================================
  Files         242      242           
  Lines        4282     4282           
  Branches      978     1017   +39     
=======================================
  Hits         4041     4041           
+ Misses        237      233    -4     
- Partials        4        8    +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Name	Link
🔨 Latest commit	d396673
🔍 Latest deploy log	https://app.netlify.com/projects/paragon-openedx/deploys/690518f4d6b06c000839857b
😎 Deploy Preview	https://deploy-preview-3966--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.