Two step dismissible banner (#14312)

* add buttons

* toggle icon, toggle layout css, toggle close button

* adds css ready for grid layout changes

* pass abtest through to component, use to alter style

* pass through abtest and use to show hide benefits

* move button, try layout change for collapsed

* fix isInTest prop type

* fix style lint issues

* prettier fix

* handle hide pill on choice card

* use mobile copy for collapsed banner

* tidy logic

* adds todo item reminder

* show only selected choice in collapsed state

* reduce complexity around passed booleans

* reduce complexity around passed booleans

* reduce complexity around passed booleans

* ensure using specific test, variant combo when applying dismissible changes

* wip: working on layout around close button

* close button layout fixes, change to LinkButton, surprising overrides required

* revert ThreeTierChoiceCards and hide if inABTest and isCollapsed

* revert body copy check and hide body copy on collapse

* tweaks to get phablet layout fixed

* style lint does not like tabs in grid-template-areas

* add margin-bottom to headline if collapsed

* ensure consistent tabs in grid-template-areas - useful to see layout more easily

* fix phablet to desktop layout

* ensure cta is level with headline, vert line, logo when collapsed

* ensure close button on left till phablet

* remove unnecessary style

* Update variant name

* add story

* tidy

* unnecessary fragment

* rename isInABTest

* Add tracking

* position tweaks

* margin at desktop only

* improve tablet and tidy

* remove unused code

* ===

* includes variant name

* Fix heading font size

* Use cta copy from tool if collapsed

---------

Co-authored-by: sookburt <“sue.burt@guardian.co.uk”>
Co-authored-by: Tom Forbes <tom.forbes@theguardian.com>

Author: 3 people

dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx

@@ -49,6 +49,8 @@ function getComponentIds(bannerId: BannerId) {
 		reminderCta: `${bannerId} : reminder-cta`,
 		reminderSet: `${bannerId} : reminder-set`,
 		reminderClose: `${bannerId} : reminder-close`,
+		collapse: `${bannerId} : collapse`,
+		expand: `${bannerId} : expand`,
 	};
 }
 
@@ -298,6 +300,8 @@ const withBannerData =
 		const onCloseClick = clickHandlerFor(componentIds.close, true);
 		const onNotNowClick = clickHandlerFor(componentIds.notNow, true);
 		const onSignInClick = clickHandlerFor(componentIds.signIn, false);
+		const onCollapseClick = clickHandlerFor(componentIds.collapse, false);
+		const onExpandClick = clickHandlerFor(componentIds.expand, false);
 
 		try {
 			const renderedContent = content && buildRenderedContent(content);
@@ -316,6 +320,8 @@ const withBannerData =
 					onCloseClick,
 					onSignInClick,
 					onNotNowClick,
+					onCollapseClick,
+					onExpandClick,
 					content: {
 						mainContent: renderedContent,
 						mobileContent: renderedMobileContent ?? renderedContent,

dotcom-rendering/src/components/marketing/banners/common/types.tsx

@@ -63,6 +63,8 @@ export interface BannerRenderProps {
 	onNotNowClick: () => void;
 	onCloseClick: () => void;
 	onSignInClick?: () => void;
+	onCollapseClick: () => void;
+	onExpandClick: () => void;
 	reminderTracking: ContributionsReminderTracking;
 	content: BannerTextContent;
 	countryCode?: string;