[Fairground 🎡] Add Titlepiece pillars component #11529

cemms1 · 2024-06-04T12:59:47Z

What does this change?

Extracts the pillars definition into their own component with Storybook story
- There's a "showBurgerMenu" prop to allow variation between the desktop designs and mobile designs
Leaves TODO comments for inclusion of new burger menu
Tweaks subnav styles and allows scrolling horizontally when items do not fit in the space
Tweaks Titlepiece component styles

Why?

As part of the work the Fairground team are doing to revamp the homepage, this is part of the task to update the "Masthead", which includes the new navigation elements collectively called the "Titlepiece"

See https://trello.com/c/KMzghGe3/23-masthead-titlepiece

Screenshots

Pillars component

Across different viewports

Screen.Recording.2024-07-02.at.15.40.19.mov

github-actions · 2024-06-04T13:04:21Z

Size Change: 0 B

Total Size: 867 kB

ℹ️ View Unchanged

Filename	Size
`dotcom-rendering/dist/1094.client.web.********************.js`	6 kB
`dotcom-rendering/dist/1225.client.web.********************.js`	785 B
`dotcom-rendering/dist/1299.client.web.********************.js`	937 B
`dotcom-rendering/dist/1445.client.web.********************.js`	18.1 kB
`dotcom-rendering/dist/1543.client.web.********************.js`	3.28 kB
`dotcom-rendering/dist/1692.client.web.********************.js`	3.13 kB
`dotcom-rendering/dist/1762.client.web.********************.js`	3.39 kB
`dotcom-rendering/dist/1889.client.web.********************.js`	3.63 kB
`dotcom-rendering/dist/2170.client.web.********************.js`	6.77 kB
`dotcom-rendering/dist/2207.client.web.********************.js`	2.98 kB
`dotcom-rendering/dist/226.client.web.********************.js`	3.93 kB
`dotcom-rendering/dist/2264.client.web.********************.js`	2.66 kB
`dotcom-rendering/dist/2342.client.web.********************.js`	1.01 kB
`dotcom-rendering/dist/2344.client.web.********************.js`	3.37 kB
`dotcom-rendering/dist/2373.client.web.********************.js`	11.5 kB
`dotcom-rendering/dist/2471.client.web.********************.js`	723 B
`dotcom-rendering/dist/2638.client.web.********************.js`	3.37 kB
`dotcom-rendering/dist/2692.client.web.********************.js`	2.9 kB
`dotcom-rendering/dist/2778.client.web.********************.js`	858 B
`dotcom-rendering/dist/2780.client.web.********************.js`	6.42 kB
`dotcom-rendering/dist/2920.client.web.********************.js`	523 B
`dotcom-rendering/dist/3000.client.web.********************.js`	895 B
`dotcom-rendering/dist/3114.client.web.********************.js`	663 B
`dotcom-rendering/dist/3118.client.web.********************.js`	499 B
`dotcom-rendering/dist/312.client.web.********************.js`	2.93 kB
`dotcom-rendering/dist/3255.client.web.********************.js`	809 B
`dotcom-rendering/dist/3336.client.web.********************.js`	785 B
`dotcom-rendering/dist/336.client.web.********************.js`	13.4 kB
`dotcom-rendering/dist/3371.client.web.********************.js`	3.28 kB
`dotcom-rendering/dist/3431.client.web.********************.js`	5.53 kB
`dotcom-rendering/dist/3494.client.web.********************.js`	834 B
`dotcom-rendering/dist/3523.client.web.********************.js`	3.35 kB
`dotcom-rendering/dist/3642.client.web.********************.js`	791 B
`dotcom-rendering/dist/3689.client.web.********************.js`	4.3 kB
`dotcom-rendering/dist/3787.client.web.********************.js`	5.49 kB
`dotcom-rendering/dist/3922.client.web.********************.js`	731 B
`dotcom-rendering/dist/393.client.web.********************.js`	5.91 kB
`dotcom-rendering/dist/3932.client.web.********************.js`	790 B
`dotcom-rendering/dist/4103.client.web.********************.js`	22.6 kB
`dotcom-rendering/dist/4129.client.web.********************.js`	4.43 kB
`dotcom-rendering/dist/424.client.web.********************.js`	757 B
`dotcom-rendering/dist/4442.client.web.********************.js`	833 B
`dotcom-rendering/dist/4639.client.web.********************.js`	3 kB
`dotcom-rendering/dist/4652.client.web.********************.js`	3.59 kB
`dotcom-rendering/dist/4666.client.web.********************.js`	9.24 kB
`dotcom-rendering/dist/4673.client.web.********************.js`	731 B
`dotcom-rendering/dist/4807.client.web.********************.js`	4.3 kB
`dotcom-rendering/dist/4811.client.web.********************.js`	1.01 kB
`dotcom-rendering/dist/5044.client.web.********************.js`	811 B
`dotcom-rendering/dist/5077.client.web.********************.js`	441 B
`dotcom-rendering/dist/5084.client.web.********************.js`	759 B
`dotcom-rendering/dist/5127.client.web.********************.js`	4.39 kB
`dotcom-rendering/dist/5247.client.web.********************.js`	2.86 kB
`dotcom-rendering/dist/5308.client.web.********************.js`	2.69 kB
`dotcom-rendering/dist/5353.client.web.********************.js`	12 kB
`dotcom-rendering/dist/5536.client.web.********************.js`	3.89 kB
`dotcom-rendering/dist/565.client.web.********************.js`	675 B
`dotcom-rendering/dist/5750.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/5817.client.web.********************.js`	922 B
`dotcom-rendering/dist/6002.client.web.********************.js`	3.09 kB
`dotcom-rendering/dist/606.client.web.********************.js`	3.53 kB
`dotcom-rendering/dist/6093.client.web.********************.js`	758 B
`dotcom-rendering/dist/6167.client.web.********************.js`	646 B
`dotcom-rendering/dist/6351.client.web.********************.js`	5.38 kB
`dotcom-rendering/dist/662.client.web.********************.js`	2.67 kB
`dotcom-rendering/dist/6640.client.web.********************.js`	913 B
`dotcom-rendering/dist/6793.client.web.********************.js`	5.71 kB
`dotcom-rendering/dist/6843.client.web.********************.js`	7.29 kB
`dotcom-rendering/dist/6908.client.web.********************.js`	3.48 kB
`dotcom-rendering/dist/6921.client.web.********************.js`	2.99 kB
`dotcom-rendering/dist/7062.client.web.********************.js`	2.29 kB
`dotcom-rendering/dist/7116.client.web.********************.js`	23 kB
`dotcom-rendering/dist/7196.client.web.********************.js`	895 B
`dotcom-rendering/dist/72.client.web.********************.js`	966 B
`dotcom-rendering/dist/7208.client.web.********************.js`	2.41 kB
`dotcom-rendering/dist/7265.client.web.********************.js`	3.21 kB
`dotcom-rendering/dist/7387.client.web.********************.js`	961 B
`dotcom-rendering/dist/7544.client.web.********************.js`	3.07 kB
`dotcom-rendering/dist/7660.client.web.********************.js`	3.67 kB
`dotcom-rendering/dist/7697.client.web.********************.js`	620 B
`dotcom-rendering/dist/7723.client.web.********************.js`	925 B
`dotcom-rendering/dist/8134.client.web.********************.js`	601 B
`dotcom-rendering/dist/8179.client.web.********************.js`	834 B
`dotcom-rendering/dist/8279.client.web.********************.js`	43.1 kB
`dotcom-rendering/dist/8363.client.web.********************.js`	3.67 kB
`dotcom-rendering/dist/8463.client.web.********************.js`	156 B
`dotcom-rendering/dist/8565.client.web.********************.js`	653 B
`dotcom-rendering/dist/8569.client.web.********************.js`	3.58 kB
`dotcom-rendering/dist/8791.client.web.********************.js`	1.01 kB
`dotcom-rendering/dist/8839.client.web.********************.js`	3.37 kB
`dotcom-rendering/dist/889.client.web.********************.js`	860 B
`dotcom-rendering/dist/8907.client.web.********************.js`	792 B
`dotcom-rendering/dist/9060.client.web.********************.js`	886 B
`dotcom-rendering/dist/9225.client.web.********************.js`	583 B
`dotcom-rendering/dist/9247.client.web.********************.js`	3.83 kB
`dotcom-rendering/dist/9287.client.web.********************.js`	2.42 kB
`dotcom-rendering/dist/9396.client.web.********************.js`	691 B
`dotcom-rendering/dist/9430.client.web.********************.js`	510 B
`dotcom-rendering/dist/9447.client.web.********************.js`	3.06 kB
`dotcom-rendering/dist/9604.client.web.********************.js`	528 B
`dotcom-rendering/dist/9789.client.web.********************.js`	924 B
`dotcom-rendering/dist/9826.client.web.********************.js`	3.42 kB
`dotcom-rendering/dist/9936.client.web.********************.js`	1.84 kB
`dotcom-rendering/dist/Accessibility-importable.client.web.********************.js`	5.79 kB
`dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js`	2.85 kB
`dotcom-rendering/dist/AdPortals-importable.client.web.********************.js`	3.84 kB
`dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js`	425 B
`dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js`	3.54 kB
`dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js`	3.64 kB
`dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js`	3.03 kB
`dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js`	2.47 kB
`dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js`	3.58 kB
`dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js`	2.57 kB
`dotcom-rendering/dist/Branding-importable.client.web.********************.js`	3.08 kB
`dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js`	37.2 kB
`dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js`	1.9 kB
`dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js`	6.73 kB
`dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js`	5.75 kB
`dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js`	4.91 kB
`dotcom-rendering/dist/Carousel-importable.client.web.********************.js`	1.17 kB
`dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js`	6.63 kB
`dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js`	539 B
`dotcom-rendering/dist/CommentCount-importable.client.web.********************.js`	3.26 kB
`dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js`	1.81 kB
`dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js`	3.08 kB
`dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js`	1.67 kB
`dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js`	3.55 kB
`dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js`	4.1 kB
`dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js`	2.02 kB
`dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js`	3.4 kB
`dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js`	5.21 kB
`dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js`	622 B
`dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js`	837 B
`dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js`	346 B
`dotcom-rendering/dist/frameworks.client.web.********************.js`	20.7 kB
`dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js`	4.53 kB
`dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js`	11.5 kB
`dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js`	7.88 kB
`dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js`	2.64 kB
`dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js`	16.7 kB
`dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js`	11.2 kB
`dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js`	3.02 kB
`dotcom-rendering/dist/HeaderTopBar-importable.client.web.********************.js`	7.07 kB
`dotcom-rendering/dist/index.client.web.********************.js`	45.8 kB
`dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js`	3.64 kB
`dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js`	851 B
`dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js`	6.3 kB
`dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js`	4.68 kB
`dotcom-rendering/dist/InteractiveSupportButton-importable.client.web.********************.js`	3.47 kB
`dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js`	4.9 kB
`dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js`	3.5 kB
`dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js`	4.85 kB
`dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js`	435 B
`dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js`	6.46 kB
`dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js`	3.7 kB
`dotcom-rendering/dist/Liveness-importable.client.web.********************.js`	4.97 kB
`dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js`	7.77 kB
`dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js`	5.76 kB
`dotcom-rendering/dist/Metrics-importable.client.web.********************.js`	2.96 kB
`dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js`	5.94 kB
`dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js`	8.52 kB
`dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js`	5.14 kB
`dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js`	6.62 kB
`dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js`	3.63 kB
`dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js`	3.04 kB
`dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js`	749 B
`dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js`	469 B
`dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js`	1.92 kB
`dotcom-rendering/dist/ReaderRevenueLinks-importable.client.web.********************.js`	6.37 kB
`dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js`	2.47 kB
`dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js`	4.8 kB
`dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js`	4.17 kB
`dotcom-rendering/dist/SendAMessage-importable.client.web.********************.js`	4.42 kB
`dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js`	2.15 kB
`dotcom-rendering/dist/sentry.client.web.********************.js`	764 B
`dotcom-rendering/dist/SetABTests-importable.client.web.********************.js`	3.81 kB
`dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js`	484 B
`dotcom-rendering/dist/ShareButton-importable.client.web.********************.js`	1.53 kB
`dotcom-rendering/dist/shimport.client.web.********************.js`	2.8 kB
`dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js`	713 B
`dotcom-rendering/dist/ShowMore-importable.client.web.********************.js`	4.04 kB
`dotcom-rendering/dist/SignInGateMain.client.web.********************.js`	3.9 kB
`dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js`	3.93 kB
`dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js`	5.78 kB
`dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js`	4.15 kB
`dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js`	5.61 kB
`dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js`	6.02 kB
`dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js`	9.31 kB
`dotcom-rendering/dist/SubNav-importable.client.web.********************.js`	3.37 kB
`dotcom-rendering/dist/SupportTheG-importable.client.web.********************.js`	6.49 kB
`dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js`	3.2 kB
`dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js`	3.23 kB
`dotcom-rendering/dist/TopBar-importable.client.web.********************.js`	5.03 kB
`dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js`	2.76 kB
`dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js`	1.02 kB
`dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js`	3.65 kB
`dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js`	5.77 kB
`dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js`	3.49 kB
`dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js`	5.51 kB
`dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js`	3.3 kB

_{compressed-size-action}

github-actions · 2024-06-04T13:38:02Z

Deploy build 35528 of `Mobile::mobile-apps-rendering` to CODE

All deployment options

From guardian/actions-riff-raff.

… for immediate future work

github-actions · 2024-07-02T14:32:09Z

Deploy build 11402 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2024-07-02T14:34:32Z

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.

frederickobrien

Looking good!

prout-bot · 2024-07-02T15:51:11Z

Seen on PROD (merged by @cemms1 8 minutes and 41 seconds ago) Please check your changes!

github-actions bot added the dotcom-rendering label Jun 4, 2024

cemms1 self-assigned this Jun 4, 2024

cemms1 force-pushed the fairground/titlepiece-use-nav-object branch from 040ab49 to 8fd783b Compare June 4, 2024 13:36

cemms1 added the fairground label Jun 19, 2024

cemms1 force-pushed the fairground/titlepiece-use-nav-object branch from 8fd783b to 095a8a4 Compare June 28, 2024 08:46

cemms1 requested a review from frederickobrien July 1, 2024 15:59

cemms1 added 3 commits July 2, 2024 15:21

adjust titlepiece styles, add separate pillars component, leave TODOs…

f0b3cca

… for immediate future work

add pillars story

c2c5645

redo comments in CSS compatible way

b7f5a8c

cemms1 force-pushed the fairground/titlepiece-use-nav-object branch from 095a8a4 to b7f5a8c Compare July 2, 2024 14:26

cemms1 added the run_chromatic Runs chromatic when label is applied label Jul 2, 2024

cemms1 changed the title ~~[Fairground 🎡] Titlepiece tweaks~~ [Fairground 🎡] Adds Titlepiece pillars component Jul 2, 2024

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Jul 2, 2024

cemms1 marked this pull request as ready for review July 2, 2024 14:34

cemms1 requested a review from a team as a code owner July 2, 2024 14:34

cemms1 removed the request for review from a team July 2, 2024 14:34

frederickobrien approved these changes Jul 2, 2024

View reviewed changes

cemms1 merged commit db2db83 into main Jul 2, 2024
35 checks passed

cemms1 deleted the fairground/titlepiece-use-nav-object branch July 2, 2024 15:42

prout-bot added the Pending-on-PROD label Jul 2, 2024

cemms1 changed the title ~~[Fairground 🎡] Adds Titlepiece pillars component~~ [Fairground 🎡] Add Titlepiece pillars component Jul 2, 2024

prout-bot added Seen-on-PROD and removed Pending-on-PROD labels Jul 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fairground 🎡] Add Titlepiece pillars component #11529

[Fairground 🎡] Add Titlepiece pillars component #11529

cemms1 commented Jun 4, 2024 •

edited

Loading

github-actions bot commented Jun 4, 2024 •

edited

Loading

github-actions bot commented Jun 4, 2024 •

edited

Loading

github-actions bot commented Jul 2, 2024

github-actions bot commented Jul 2, 2024

frederickobrien left a comment

prout-bot commented Jul 2, 2024

[Fairground 🎡] Add Titlepiece pillars component #11529

[Fairground 🎡] Add Titlepiece pillars component #11529

Conversation

cemms1 commented Jun 4, 2024 • edited Loading

What does this change?

Why?

Screenshots

github-actions bot commented Jun 4, 2024 • edited Loading

github-actions bot commented Jun 4, 2024 • edited Loading

Deploy build 35528 of Mobile::mobile-apps-rendering to CODE

github-actions bot commented Jul 2, 2024

Deploy build 11402 of dotcom:rendering-all to CODE

github-actions bot commented Jul 2, 2024

frederickobrien left a comment

Choose a reason for hiding this comment

prout-bot commented Jul 2, 2024

cemms1 commented Jun 4, 2024 •

edited

Loading

github-actions bot commented Jun 4, 2024 •

edited

Loading

github-actions bot commented Jun 4, 2024 •

edited

Loading

Deploy build 35528 of `Mobile::mobile-apps-rendering` to CODE

Deploy build 11402 of `dotcom:rendering-all` to CODE