DOP-6049 Introduces the MultiColumn Component #1504

caesarbell · 2025-08-06T21:17:19Z

Stories/Links:

Current Behavior:

Put a link to current staging or production behavior, if applicable

Staging Links:

https://deploy-preview-13580--mongodb-landing.netlify.app/docs/

Notes:

This PR introduces the MultiColumn Component. This component will be used on the homepage. You can test locally by also pointing to the PR branch in the snooty-parser

side note: Waiting to also hear back from the design team on look and feel for mobile/tablet view

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

…onent

netlify · 2025-08-06T21:17:24Z

✅ Deploy Preview for docs-frontend-stg ready!

Name	Link
🔨 Latest commit	`4106ba8`
🔍 Latest deploy log	https://app.netlify.com/projects/docs-frontend-stg/deploys/68a5edc2d049000008868bb4
😎 Deploy Preview	https://deploy-preview-1504--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 project configuration.

docs-builder-bot · 2025-08-06T21:18:22Z

❌ Deploy Preview for docs-frontend-stg failed

Item	Details
🔨 Latest Commit	f12b3322f1ee56b3d15f188c68cd9a7ef4a3b162
😎 Deploy Preview	https://deploy-preview-1504--docs-frontend-stg.netlify.app
🔍 Build Logs	View Logs

Error Details

Build failed

biancalaube

Some small comments but the staging link looks very nice!

biancalaube · 2025-08-08T19:31:13Z

tests/unit/data/MultiColumn.test.json

+                  "children": [
+                      {
+                          "type": "text",
+                          "value": "This is a paragraph between the code blocks."


Is this like the final text? Or like are giving this version to the writers but they will be filling out the content

@biancalaube this is just test data. The content comes from the writers in the src of the landing directory from the monorepo.

src/hooks/use-is-valid-version.ts

seungpark

see comments below! also wondering if this is safe to release without the content change (would be good to see a regression check!)

src/components/MultiColumn/index.tsx

seungpark · 2025-08-11T13:24:12Z

src/components/MultiColumn/index.tsx

+        margin-top: 60px;
+        margin-bottom: 40px;
+
+        @media ${theme.screenSize.upTo2XLarge} {


should this be lining up with tablet view? seems like it switches to vertical layout too early

seungpark · 2025-08-11T13:31:41Z

src/components/MultiColumn/Column.tsx

+            &::before {
+              content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><circle cx="5" cy="5" r="4.25" stroke="%2300ED64" stroke-width="1.5"/></svg>');
+              position: absolute;
+              left: 8px;


is this left intentional? seems a little closer than the figma design

The left is internal, but I needed to give it more space from the text and had to increase the spacing.

caesarbell · 2025-08-11T22:13:01Z

see comments below! also wondering if this is safe to release without the content change (would be good to see a regression check!)

The content will be added by the writers, but this allows them to be able to use the content. I don't think it will go pass preprd.

caesarbell · 2025-08-11T22:13:32Z

see comments below! also wondering if this is safe to release without the content change (would be good to see a regression check!)

Also, we did add a snapshot test as well.

seungpark

minor comments below, but overall looks good 👍

seungpark · 2025-08-12T12:13:43Z

src/components/Code/Code.tsx

+  removeMargin,
 }: {
  nodeData: CodeNode;
+  removeMargin: boolean;


instead of removeMargin prop, can we take className and append it to the class, and style in the consuming component

src/templates/landing.tsx

seungpark · 2025-08-12T12:17:56Z

src/components/MultiColumn/index.tsx

+import { theme } from '../../theme/docsTheme';
+
+const MultiColumn = ({ nodeData }: { nodeData: ParentNode }) => {
+  console.log('nodeData', nodeData);


minor, remove log

Good callout, I forgot to remove this.

docs-builder-bot · 2025-08-12T18:42:37Z

✅ Deploy Preview for landing ready

Item	Details
🔨 Latest Commit	53531a9097d95f32204653a4cf4870625654834b
😎 Deploy Preview	https://deploy-preview-1504--docs-frontend-stg.netlify.app/docs
🔍 Build Logs	View Logs

caesarbell added 7 commits August 6, 2025 17:07

DOP-6049 adds the new multi-column directive and component to the factor

6507cf7

DOP-6049 adds the column component

3d38984

DOP-6049 adds the multi-component

a332545

DOP-6049 handles single branches better

6639776

DOP-6049 makes style changes to the H1 on the landing page

e602991

DOP-6049 adds the ast node types for the multi-column and column comp…

14ff145

…onent

DOP-6049 multi-column and column test and test data

0652667

caesarbell requested review from seungpark, zdw001 and biancalaube August 6, 2025 21:17

DOP-6049 setting the value to match the site in the projects env

1709be6

biancalaube approved these changes Aug 8, 2025

View reviewed changes

seungpark requested changes Aug 11, 2025

View reviewed changes

DOP-6049 handles mobile and tablet better

3d367c2

caesarbell requested a review from seungpark August 11, 2025 22:35

DOP-6049 handles flushing the header to the top of the parent

9cba447

seungpark reviewed Aug 12, 2025

View reviewed changes

DOP-6049 feedback for className and alignment for list

9f3c6a6

caesarbell requested a review from seungpark August 12, 2025 15:39

seungpark approved these changes Aug 12, 2025

View reviewed changes

caesarbell added 2 commits August 12, 2025 14:36

retriggering a snooty build

200a3ac

DOP-6049 updates the netlify.toml file

f57ffcd

caesarbell and others added 3 commits August 13, 2025 22:15

test push

9973346

DOP-6049 chaining for branchhes

5b658bb

bullet points in line with text

53531a9

DOP-6049 merged from feat branch

4106ba8

caesarbell merged commit cd3d2f6 into feat/unified-nav Aug 20, 2025
1 check passed

caesarbell deleted the DOP-6049 branch August 20, 2025 15:47

DOP-6049 Introduces the MultiColumn Component #1504

DOP-6049 Introduces the MultiColumn Component #1504

Uh oh!

Conversation

caesarbell commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Stories/Links:

Current Behavior:

Staging Links:

Notes:

README updates

Uh oh!

netlify bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for docs-frontend-stg ready!

Uh oh!

docs-builder-bot commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for docs-frontend-stg failed

Error Details

Uh oh!

biancalaube left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

seungpark left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

caesarbell commented Aug 11, 2025

Uh oh!

caesarbell commented Aug 11, 2025

Uh oh!

seungpark left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

docs-builder-bot commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for landing ready

Uh oh!

Uh oh!

Uh oh!

caesarbell commented Aug 6, 2025 •

edited

Loading

netlify bot commented Aug 6, 2025 •

edited

Loading

docs-builder-bot commented Aug 6, 2025 •

edited

Loading

docs-builder-bot commented Aug 12, 2025 •

edited

Loading