Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mini profiles tweaks #12919

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Mini profiles tweaks #12919

wants to merge 3 commits into from

Conversation

simonbyford
Copy link
Contributor

@simonbyford simonbyford commented Nov 27, 2024

What does this change?

Three separate tweaks to the mini profiles format:

  1. Render titles as h3s (with font size 24px) for mini profiles articles which include sections. Continue to render titles as h2s for mini profiles articles which don't include sections. This should help distinguish titles from section headers. More info here (see "Option 2").
  2. Don't display the bottom separator for mini profiles articles with sections. The bottom separator, borrowed from previous list elements, was intended to separate list elements from anything below them in the document (e.g. closing remarks), but was being mistakenly inserted between sections of mini profiles articles. This was happening because mini profiles articles with sections are actually multiple mini profiles elements with text elements between them.
  3. Don't display empty bios. The logic for hiding empty bios was broken because <p></p> was considered non-empty.

Why?

This was in response to feedback from Rich and Theresa

Screenshots

before after
Screenshot 2024-11-27 at 15 00 54 Screenshot 2024-11-27 at 15 09 18

Copy link

github-actions bot commented Nov 27, 2024

Size Change: 0 B

Total Size: 958 kB

ℹ️ View Unchanged
Filename Size
dotcom-rendering/dist/1000.client.web.********************.js 999 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B
dotcom-rendering/dist/1261.client.web.********************.js 1.89 kB
dotcom-rendering/dist/1391.client.web.********************.js 725 B
dotcom-rendering/dist/1458.client.web.********************.js 4.87 kB
dotcom-rendering/dist/1476.client.web.********************.js 784 B
dotcom-rendering/dist/1483.client.web.********************.js 3.19 kB
dotcom-rendering/dist/152.client.web.********************.js 5.3 kB
dotcom-rendering/dist/1559.client.web.********************.js 11.3 kB
dotcom-rendering/dist/1667.client.web.********************.js 918 B
dotcom-rendering/dist/169.client.web.********************.js 8.09 kB
dotcom-rendering/dist/1940.client.web.********************.js 507 B
dotcom-rendering/dist/222.client.web.********************.js 6.15 kB
dotcom-rendering/dist/2283.client.web.********************.js 3.03 kB
dotcom-rendering/dist/2310.client.web.********************.js 880 B
dotcom-rendering/dist/2368.client.web.********************.js 2.67 kB
dotcom-rendering/dist/2462.client.web.********************.js 3.87 kB
dotcom-rendering/dist/2487.client.web.********************.js 157 B
dotcom-rendering/dist/249.client.web.********************.js 3.69 kB
dotcom-rendering/dist/2611.client.web.********************.js 3.77 kB
dotcom-rendering/dist/267.client.web.********************.js 917 B
dotcom-rendering/dist/2751.client.web.********************.js 6.29 kB
dotcom-rendering/dist/2784.client.web.********************.js 3.64 kB
dotcom-rendering/dist/281.client.web.********************.js 642 B
dotcom-rendering/dist/2927.client.web.********************.js 441 B
dotcom-rendering/dist/3004.client.web.********************.js 3.29 kB
dotcom-rendering/dist/302.client.web.********************.js 4.52 kB
dotcom-rendering/dist/3060.client.web.********************.js 3.79 kB
dotcom-rendering/dist/3109.client.web.********************.js 803 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B
dotcom-rendering/dist/3539.client.web.********************.js 2.17 kB
dotcom-rendering/dist/3570.client.web.********************.js 3.41 kB
dotcom-rendering/dist/3613.client.web.********************.js 3.42 kB
dotcom-rendering/dist/3634.client.web.********************.js 3.87 kB
dotcom-rendering/dist/371.client.web.********************.js 3.83 kB
dotcom-rendering/dist/3769.client.web.********************.js 999 B
dotcom-rendering/dist/3777.client.web.********************.js 3.21 kB
dotcom-rendering/dist/3833.client.web.********************.js 4.55 kB
dotcom-rendering/dist/3839.client.web.********************.js 3.71 kB
dotcom-rendering/dist/403.client.web.********************.js 3.64 kB
dotcom-rendering/dist/4120.client.web.********************.js 11.1 kB
dotcom-rendering/dist/4132.client.web.********************.js 3.51 kB
dotcom-rendering/dist/4173.client.web.********************.js 3.14 kB
dotcom-rendering/dist/4215.client.web.********************.js 10.3 kB
dotcom-rendering/dist/4282.client.web.********************.js 685 B
dotcom-rendering/dist/4364.client.web.********************.js 13 kB
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB
dotcom-rendering/dist/4553.client.web.********************.js 3.35 kB
dotcom-rendering/dist/4556.client.web.********************.js 4.15 kB
dotcom-rendering/dist/456.client.web.********************.js 2.42 kB
dotcom-rendering/dist/4628.client.web.********************.js 654 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B
dotcom-rendering/dist/4985.client.web.********************.js 1.91 kB
dotcom-rendering/dist/5019.client.web.********************.js 619 B
dotcom-rendering/dist/5209.client.web.********************.js 22.7 kB
dotcom-rendering/dist/5222.client.web.********************.js 2.28 kB
dotcom-rendering/dist/5400.client.web.********************.js 4.94 kB
dotcom-rendering/dist/5410.client.web.********************.js 4.49 kB
dotcom-rendering/dist/5658.client.web.********************.js 750 B
dotcom-rendering/dist/5695.client.web.********************.js 2.59 kB
dotcom-rendering/dist/5757.client.web.********************.js 931 B
dotcom-rendering/dist/576.client.web.********************.js 11.2 kB
dotcom-rendering/dist/5880.client.web.********************.js 828 B
dotcom-rendering/dist/5920.client.web.********************.js 2.17 kB
dotcom-rendering/dist/6042.client.web.********************.js 4.04 kB
dotcom-rendering/dist/6044.client.web.********************.js 726 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B
dotcom-rendering/dist/632.client.web.********************.js 6.86 kB
dotcom-rendering/dist/6389.client.web.********************.js 5.88 kB
dotcom-rendering/dist/6390.client.web.********************.js 529 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB
dotcom-rendering/dist/6587.client.web.********************.js 4.41 kB
dotcom-rendering/dist/6598.client.web.********************.js 780 B
dotcom-rendering/dist/6638.client.web.********************.js 907 B
dotcom-rendering/dist/6655.client.web.********************.js 3.64 kB
dotcom-rendering/dist/6662.client.web.********************.js 523 B
dotcom-rendering/dist/678.client.web.********************.js 804 B
dotcom-rendering/dist/6976.client.web.********************.js 2.87 kB
dotcom-rendering/dist/6988.client.web.********************.js 4.27 kB
dotcom-rendering/dist/6990.client.web.********************.js 3.41 kB
dotcom-rendering/dist/7045.client.web.********************.js 5.13 kB
dotcom-rendering/dist/7047.client.web.********************.js 44.3 kB
dotcom-rendering/dist/7116.client.web.********************.js 23 kB
dotcom-rendering/dist/7366.client.web.********************.js 1.91 kB
dotcom-rendering/dist/7392.client.web.********************.js 3.21 kB
dotcom-rendering/dist/7691.client.web.********************.js 853 B
dotcom-rendering/dist/7729.client.web.********************.js 20.3 kB
dotcom-rendering/dist/7807.client.web.********************.js 3.21 kB
dotcom-rendering/dist/7824.client.web.********************.js 2.86 kB
dotcom-rendering/dist/7955.client.web.********************.js 5.03 kB
dotcom-rendering/dist/8122.client.web.********************.js 6 kB
dotcom-rendering/dist/83.client.web.********************.js 750 B
dotcom-rendering/dist/8347.client.web.********************.js 4.37 kB
dotcom-rendering/dist/8504.client.web.********************.js 827 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B
dotcom-rendering/dist/8586.client.web.********************.js 2 kB
dotcom-rendering/dist/8590.client.web.********************.js 4.01 kB
dotcom-rendering/dist/8626.client.web.********************.js 890 B
dotcom-rendering/dist/8637.client.web.********************.js 3.92 kB
dotcom-rendering/dist/8697.client.web.********************.js 956 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B
dotcom-rendering/dist/9203.client.web.********************.js 3.06 kB
dotcom-rendering/dist/9395.client.web.********************.js 4.41 kB
dotcom-rendering/dist/9460.client.web.********************.js 7.27 kB
dotcom-rendering/dist/9493.client.web.********************.js 785 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B
dotcom-rendering/dist/9835.client.web.********************.js 647 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 6.39 kB
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.71 kB
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 422 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.17 kB
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.46 kB
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.32 kB
dotcom-rendering/dist/AuEoy2024Wrapper-importable.client.web.********************.js 5.04 kB
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 2.3 kB
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.96 kB
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.72 kB
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.22 kB
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.95 kB
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.73 kB
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.53 kB
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 541 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.98 kB
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.74 kB
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 4.38 kB
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 967 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 619 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.44 kB
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 345 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.71 kB
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.63 kB
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.81 kB
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.7 kB
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.41 kB
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 kB
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10 kB
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B
dotcom-rendering/dist/index.client.web.********************.js 46.2 kB
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 853 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.56 kB
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.25 kB
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.86 kB
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.62 kB
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 4.56 kB
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.52 kB
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.82 kB
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.27 kB
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.82 kB
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 9.89 kB
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.97 kB
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.83 kB
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.07 kB
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.22 kB
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.33 kB
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.77 kB
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 749 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 543 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.96 kB
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.39 kB
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 7.07 kB
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.17 kB
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.75 kB
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.74 kB
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 6.98 kB
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB
dotcom-rendering/dist/sentry.client.web.********************.js 794 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.86 kB
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 485 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.94 kB
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 728 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.82 kB
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.51 kB
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.6 kB
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.18 kB
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.61 kB
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.8 kB
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.23 kB
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.17 kB
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 12.8 kB
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.24 kB
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.73 kB
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 5.48 kB
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.98 kB
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.65 kB
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 6.3 kB

compressed-size-action

@simonbyford simonbyford added the run_chromatic Runs chromatic when label is applied label Nov 27, 2024
@simonbyford simonbyford marked this pull request as ready for review November 27, 2024 15:10
@simonbyford simonbyford requested a review from a team as a code owner November 27, 2024 15:10
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 27, 2024
@@ -490,6 +492,7 @@ export const renderElement = ({
editionId={editionId}
RenderArticleElement={RenderArticleElement}
isLastElement={index === totalElements - 1}
sectioned={!!isSectionedMiniProfilesArticle}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does isSectionedMiniProfilesArticle need to be coerced to a boolean if it's already a boolean?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, it's optional. So it could be undefined.

@@ -204,3 +205,16 @@ export const WithSeparatorLine = {
},
decorators: [centreColumnDecorator],
} satisfies Story;

export const Sectioned = {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might just be me, but sectioned as a term is unclear to me. Does it mean it's in a section?

Copy link

@Fweddi Fweddi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haven't tested but code LGTM.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants