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

Add multi byline element #12496

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

Add multi byline element #12496

wants to merge 24 commits into from

Conversation

rhystmills
Copy link
Contributor

@rhystmills rhystmills commented Oct 3, 2024

What does this change?

This adds the rendering logic for the Multi-byline element.

This is a variant of the List element from CAPI, in addition to the Key Takeaways, Q&A and Mini Profiles elements, which are rendered by DCR.

The designs for this element can be found here: https://www.figma.com/design/TK4X89VBAIZ65zmIqApOkI/Formats-%E2%80%94-Structured-elements?node-id=5-165675&t=Fm8oqMKrRoOKTHyp-1

Why?

MultiBylines are one of a number of new structure articles formats that Content Production have been developing which needs to be supported by our website.

Screenshots

Screenshot 2024-11-01 at 12 57 45 Screenshot 2024-11-01 at 12 57 56 Screenshot 2024-11-01 at 12 59 14

Copy link

github-actions bot commented Oct 3, 2024

Size Change: +51 B (+0.01%)

Total Size: 933 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1000.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/1014.client.web.********************.js 3.97 kB 0 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B 0 B
dotcom-rendering/dist/1347.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1451.client.web.********************.js 3.34 kB 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/1752.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1877.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/1919.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/1989.client.web.********************.js 4.01 kB 0 B
dotcom-rendering/dist/2145.client.web.********************.js 5.03 kB 0 B
dotcom-rendering/dist/2186.client.web.********************.js 6.17 kB 0 B
dotcom-rendering/dist/2291.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/2565.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/2613.client.web.********************.js 530 B 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/27.client.web.********************.js 6.01 kB 0 B
dotcom-rendering/dist/2706.client.web.********************.js 3 kB 0 B
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/3109.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/3136.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/3215.client.web.********************.js 158 B 0 B
dotcom-rendering/dist/3265.client.web.********************.js 44.3 kB 0 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/3284.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/3386.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/3469.client.web.********************.js 11.4 kB 0 B
dotcom-rendering/dist/3601.client.web.********************.js 3.22 kB 0 B
dotcom-rendering/dist/3641.client.web.********************.js 12.3 kB +8 B (+0.06%)
dotcom-rendering/dist/3657.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/3707.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/3728.client.web.********************.js 4.04 kB 0 B
dotcom-rendering/dist/3746.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3778.client.web.********************.js 8.08 kB 0 B
dotcom-rendering/dist/3992.client.web.********************.js 3.4 kB 0 B
dotcom-rendering/dist/4100.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/4198.client.web.********************.js 1.89 kB 0 B
dotcom-rendering/dist/4228.client.web.********************.js 11 kB +17 B (+0.15%)
dotcom-rendering/dist/4258.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/4273.client.web.********************.js 3.02 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/442.client.web.********************.js 4.27 kB 0 B
dotcom-rendering/dist/4449.client.web.********************.js 2 kB 0 B
dotcom-rendering/dist/4456.client.web.********************.js 5.88 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4628.client.web.********************.js 654 B 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/504.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/5127.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/5129.client.web.********************.js 5.17 kB 0 B
dotcom-rendering/dist/5153.client.web.********************.js 6.33 kB 0 B
dotcom-rendering/dist/5336.client.web.********************.js 3.33 kB 0 B
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5677.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/5713.client.web.********************.js 3.87 kB 0 B
dotcom-rendering/dist/5752.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/5766.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/5941.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/6012.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/6044.client.web.********************.js 726 B 0 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B 0 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/6325.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/6459.client.web.********************.js 20.2 kB 0 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6520.client.web.********************.js 6.86 kB 0 B
dotcom-rendering/dist/6554.client.web.********************.js 12.8 kB 0 B
dotcom-rendering/dist/6598.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/6612.client.web.********************.js 3.21 kB 0 B
dotcom-rendering/dist/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7170.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/7304.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/7547.client.web.********************.js 4.26 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/8148.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/83.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/8355.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/8359.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/8429.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/8504.client.web.********************.js 827 B 0 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B 0 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8768.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/8776.client.web.********************.js 3.64 kB 0 B
dotcom-rendering/dist/8826.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/8891.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/8946.client.web.********************.js 5.3 kB 0 B
dotcom-rendering/dist/8975.client.web.********************.js 4.41 kB 0 B
dotcom-rendering/dist/9138.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/9171.client.web.********************.js 10.3 kB 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 0 B
dotcom-rendering/dist/9493.client.web.********************.js 785 B 0 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B 0 B
dotcom-rendering/dist/9631.client.web.********************.js 4.55 kB 0 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9812.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/9835.client.web.********************.js 647 B 0 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.7 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.46 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.08 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.33 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.88 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.54 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.71 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 8.23 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.96 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 540 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.14 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.97 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.02 kB 0 B
dotcom-rendering/dist/ExpandableMarketingCardWrapper-importable.client.web.********************.js 4.21 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 967 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 617 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 3.43 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.72 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.6 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.41 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.8 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.2 kB -1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.79 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.25 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.78 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 2.1 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.51 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 5.26 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.83 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 4.97 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 4 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 6.22 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.2 kB +9 B (+0.17%)
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.33 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.76 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 541 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.3 kB +9 B (+0.14%)
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 4.75 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 5.08 kB +9 B (+0.18%)
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.6 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 793 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 483 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 732 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.61 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.49 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 4.79 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.24 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.68 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.26 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/UsEoy2024Wrapper-importable.client.web.********************.js 5.05 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 4.99 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 2.65 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 6.55 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 6.3 kB 0 B

compressed-size-action

@rebecca-thompson rebecca-thompson changed the title Rm/add multi byline Add multi byline element Nov 1, 2024
@rebecca-thompson rebecca-thompson added the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@rebecca-thompson rebecca-thompson added the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@rebecca-thompson rebecca-thompson added the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@rebecca-thompson rebecca-thompson marked this pull request as ready for review November 1, 2024 14:51
@rebecca-thompson rebecca-thompson requested a review from a team as a code owner November 1, 2024 14:51
Copy link

github-actions bot commented Nov 1, 2024

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

@rebecca-thompson rebecca-thompson added the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Nov 1, 2024
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