DOP-5132: Support image-less banners and add TypeScript support #1318

rayangler · 2024-12-04T22:46:53Z

Notes:

Adds support for customizing the banner text, pill text, and background color of the banner while keeping existing banner styles. Design has LGTM'd this on Slack. For testing purposes, the banner-dev value on Atlas App Services has been updated with the new fields.
This maintains backwards compatibility with image-based banners, in case there is a really custom design that needs to be hosted immediately.
ADDS INITIAL TYPESCRIPT SUPPORT. I promised to start incrementally adding TS support whenever I touched components, so this is the start 😤. This does end up increasing the scope of the PR a bit, but I tried to limit the changes to initial setup (with linting, formatting, testing, etc.) and to the site banner components. This should not negatively impact current usage of the frontend. Just run npm ci and things should build as it does currently. If it is preferred to split this into a separate PR, please let me know!

README updates

- This PR introduces changes that should be reflected in the README, and I have made those updates.
- This PR does not introduce changes that should be reflected in the README

netlify · 2024-12-04T22:47:07Z

✅ Deploy Preview for docs-frontend-stg ready!

Name	Link
🔨 Latest commit	`ddc4f4d`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-frontend-stg/deploys/6751d72d308582000851bdf2
😎 Deploy Preview	https://deploy-preview-1318--docs-frontend-stg.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 site configuration.

…seamless-banner

netlify · 2024-12-04T22:47:10Z

✅ Deploy Preview for docs-frontend-dotcomprd ready!

Name	Link
🔨 Latest commit	`ddc4f4d`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-frontend-dotcomprd/deploys/6751d72dce28be0008af1cec
😎 Deploy Preview	https://deploy-preview-1318--docs-frontend-dotcomprd.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 site configuration.

netlify · 2024-12-04T22:47:14Z

✅ Deploy Preview for docs-frontend-dotcomstg ready!

Name	Link
🔨 Latest commit	`ddc4f4d`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-frontend-dotcomstg/deploys/6751d72de4a59b0008fd2f6c
😎 Deploy Preview	https://deploy-preview-1318--docs-frontend-dotcomstg.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 site configuration.

rayangler · 2024-12-04T22:54:09Z

src/components/Banner/SiteBanner.js

This was effectively replaced with src/components/SiteBanner/index.tsx

rayangler · 2024-12-04T22:57:08Z

tests/unit/__snapshots__/SiteBanner.test.js.snap

Replaced by tests/unit/__snapshots__/SiteBanner.test.tsx.snap. If anyone knows how to get GH to cooperate with these name changes and git mv commands, please let me know 🙃

rayangler · 2024-12-04T23:00:06Z

package.json

@@ -34,6 +40,8 @@
    "jest-environment-jsdom": "^29.5.0",
    "lint-staged": "^10.5.4",
    "prettier": "^2.2.1",
+    "ts-jest": "^29.2.5",
+    "typescript": "<5.4.0",


Limiting the typescript version due to a bunch of incompatibility warnings and issues from babel-eslint and required TS linting parser/plugin. I tried to make config changes as minimal as possible for now, but we should have more flexibility on this once we get the chance to upgrade our linter (DOP-5057)

mmeigs

Ohhh this is very exciting about Typescript. Also, the banner looks great!

mmeigs · 2024-12-05T14:39:21Z

src/components/Banner/SiteBanner/index.tsx

+
+  @media ${theme.screenSize.upToMedium} {
+    background-image: url(${getBannerSource(bannerContent.tabletImgPath)});
+    gap: 104px;


Just curious on why tablet size has such a large gap

The Figma design showed a gap of 104px, but thinking about it now, seems like the intention is to just have the brand shape and pill be on the righthand side. I've updated the CSS to ensure the flex container has space-between instead to make it more flexible. Thanks for bringing this up and let me know what you think!

mmeigs · 2024-12-05T14:54:09Z

src/components/Banner/SiteBanner/index.tsx

+      try {
+        const res: SiteBannerContent = await fetchBanner(snootyEnv);
+        // Guard against missing banner content
+        if (res && (res.imgPath || res.text)) {


nit: I'm wondering if we also want to guard against res.url not existing.

Good point! Added!

seungpark

minor comments below but overall looks great! TS is very exciting! 🙌

src/types.ts

src/components/Banner/SiteBanner/index.tsx

seungpark · 2024-12-05T15:31:06Z

src/components/Banner/SiteBanner/index.tsx

+  max-height: 40px;
+
+  @media ${theme.screenSize.upToMedium} {
+    max-width: 543px;


do we need these max widths? the flexbox + gap should handle the width of the text box

I think keeping the max width around would help make the max width guidelines included in the design more explicit vs. relying solely on flexbox/gap. Would it be preferable to remove?

minor preference, but don't feel too strongly about it!

src/components/Banner/SiteBanner/index.tsx

…seamless-banner

rayangler added 14 commits December 3, 2024 17:16

Move file; add branding shape

fd8883f

Banner by text

37afd9c

Adjust for screen sizes

c657742

Remove customization of branding shape

4a93fe8

Remove test code; guard against translations

2cfda8b

Move classnames

fe7f5e0

More safeguarding. Remove styled

2a88491

Guard against missing banner content

a282fe1

Start setting up TS

a5a5c73

First few TS components

1634ed0

More TS-ification

6e6f45e

Testing and linting

211a3d2

Format

6c7c7f1

Fix linting issues

71fa90e

Merge branch 'main' of https://github.com/mongodb/snooty into DOP-5132-…

42f7591

…seamless-banner

rayangler added 2 commits December 4, 2024 17:52

Deleted old JS snap?

5550554

Fix test configuration

6f3f879

rayangler commented Dec 4, 2024

View reviewed changes

rayangler marked this pull request as ready for review December 4, 2024 23:03

rayangler requested review from seungpark and mmeigs December 4, 2024 23:03

mmeigs approved these changes Dec 5, 2024

View reviewed changes

rayangler added 2 commits December 5, 2024 10:08

Make css more flexible

6103727

Update snapshots

63bdd74

rayangler requested a review from mmeigs December 5, 2024 15:15

seungpark reviewed Dec 5, 2024

View reviewed changes

Move types

0fa177a

rayangler added 3 commits December 5, 2024 10:47

Merge branch 'main' of https://github.com/mongodb/snooty into DOP-5132-…

917a5b4

…seamless-banner

Font theme

bb3e67b

Snapshot

d3c4fe0

rayangler requested a review from seungpark December 5, 2024 16:27

rayangler added 2 commits December 5, 2024 11:34

Remove max-width

2fd85b5

Snap

ddc4f4d

seungpark approved these changes Dec 5, 2024

View reviewed changes

rayangler merged commit bf047c1 into main Dec 5, 2024
14 checks passed

rayangler deleted the DOP-5132-seamless-banner branch December 5, 2024 17:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DOP-5132: Support image-less banners and add TypeScript support #1318

DOP-5132: Support image-less banners and add TypeScript support #1318

rayangler commented Dec 4, 2024 •

edited

Loading

netlify bot commented Dec 4, 2024 •

edited

Loading

netlify bot commented Dec 4, 2024 •

edited

Loading

netlify bot commented Dec 4, 2024 •

edited

Loading

rayangler Dec 4, 2024

rayangler Dec 4, 2024

rayangler Dec 4, 2024

mmeigs left a comment

mmeigs Dec 5, 2024

rayangler Dec 5, 2024 •

edited

Loading

mmeigs Dec 5, 2024

rayangler Dec 5, 2024

seungpark left a comment

seungpark Dec 5, 2024

rayangler Dec 5, 2024

seungpark Dec 5, 2024

rayangler Dec 5, 2024

DOP-5132: Support image-less banners and add TypeScript support #1318

DOP-5132: Support image-less banners and add TypeScript support #1318

Conversation

rayangler commented Dec 4, 2024 • edited Loading

Stories/Links:

Current Behavior:

Staging Links:

Notes:

README updates

netlify bot commented Dec 4, 2024 • edited Loading

✅ Deploy Preview for docs-frontend-stg ready!

netlify bot commented Dec 4, 2024 • edited Loading

✅ Deploy Preview for docs-frontend-dotcomprd ready!

netlify bot commented Dec 4, 2024 • edited Loading

✅ Deploy Preview for docs-frontend-dotcomstg ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mmeigs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rayangler Dec 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seungpark left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rayangler commented Dec 4, 2024 •

edited

Loading

netlify bot commented Dec 4, 2024 •

edited

Loading

netlify bot commented Dec 4, 2024 •

edited

Loading

netlify bot commented Dec 4, 2024 •

edited

Loading

rayangler Dec 5, 2024 •

edited

Loading