Add people-rows ArchieML component

[rakyi]

• The new component allows us to have rows of people in two columns
• Add socials to person block

[rakyi]

• Add people-rows ArchieML component #4235 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[rakyi]

@ikesau I tried to make use of more of the existing grid system, but I still think flex makes the most sense for switching from a two column layout on a bigger screen to a single column on a small screen, given the constraints I explained before. LMK what you think.

[owidbot]

Quick links (staging server):

Site Dev	Site Preview	Admin	Wizard	Docs

Login: ssh owid@staging-site-people-rows

• Site-screenshots: https://github.com/owid/site-screenshots/compare/people-rows
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/people-rows

SVG tester:

Number of differences (default views): 0 ✅
Number of differences (all views): 0 ✅

Edited: 2024-11-29 17:30:53 UTC
Execution time: 1.29 seconds

[ikesau]

nice and easy 👍

the css grid saga continues 😂

[ikesau]

If I'm understanding the requirements correctly based on what it's currently doing when i test the article on staging, when columns: 2 is set, we want:

lg - 1 column
md - 2 coumns
sm - 1 column

if so, could you do something like:

const columnClassNames = {
1: "grid-cols-1",
2: "grid-sm-cols-1 grid-md-cols-2 grid-lg-cols-1"
}
<div className={cx("people grid", columnClassNames[columns])}>
  ...children
</div>

And then you don't have to worry about flex or that calc statement or anything. 🙂

[rakyi]

Yep, you are totally right. I somehow got the wrong impression about how ordering of elements changes in a grid when you change from two columns to a single column. Also, it should be just lg-up instead of lg-only. Thanks for being persistent. 🙂 Fortunately it's a small change and didn't cost us too much time.