Banner accessibility - refactor moment template

packages/modules/src/modules/banners/momentTemplate/MomentTemplateBanner.stories.tsx

@@ -52,15 +52,19 @@ const GlobalNYBanner = bannerWrapper(
             mainUrl:
                 'https://media.guim.co.uk/a1087c3f7e6da4f1e97947acccdd7f0d15f327d4/0_0_142_124/140.png',
             altText: 'Guardian logo being held up by supporters of the Guardian',
+            tabletPosition: 'end',
+            desktopPosition: 'end',
         },
     }),
     'global-new-year-banner',
 );
 
-const GlobalNYTemplate: Story<BannerProps> = (props: BannerProps) => <GlobalNYBanner {...props} />;
+const GlobalNewYearTemplate: Story<BannerProps> = (props: BannerProps) => (
+    <GlobalNYBanner {...props} />
+);
 
-export const GlobalNY = GlobalNYTemplate.bind({});
-GlobalNY.args = {
+export const GlobalNewYear = GlobalNewYearTemplate.bind({});
+GlobalNewYear.args = {
     ...props,
     content: {
         heading: 'As 2022 begins, will you support us?',
@@ -85,7 +89,7 @@ GlobalNY.args = {
         },
     },
     mobileContent: {
-        heading: 'As 2022 begins, will you support us?',
+        heading: 'Please support us in 2022',
         messageText:
             'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
         paragraphs: [
@@ -108,7 +112,7 @@ GlobalNY.args = {
     numArticles: 50,
 };
 
-const AusElectionBanner = bannerWrapper(
+const WithImageBanner = bannerWrapper(
     getMomentTemplateBanner({
         backgroundColour: '#e4e4e3',
         primaryCtaSettings: {
@@ -171,28 +175,79 @@ const AusElectionBanner = bannerWrapper(
                 'https://i.guim.co.uk/img/media/4fa98ca4b70ee9b21b74d16f2586b5d6c513297f/0_319_2836_1837/2000.png?quality=85&s=3ef36bd5ab569f310b0f975372f54d29',
             altText:
                 'Head shots of Anthony Albanese, leader of the Australian Labor Party, and Scott Morrison, current Prime Minister and leader of the Liberal Party of Australia, who are running for the office of Prime Minister in the Australian federal election, to be held on 21 May 2022.',
+            tabletPosition: 'center',
+            desktopPosition: 'center',
         },
     }),
     'aus-moment-banner',
 );
 
-const AusElectionTemplate: Story<BannerProps> = (props: BannerProps) => (
-    <AusElectionBanner {...props} />
+const WithImageTemplate: Story<BannerProps> = (props: BannerProps) => (
+    <WithImageBanner {...props} />
 );
 
-export const AusElection = AusElectionTemplate.bind({});
-AusElection.args = {
-    ...GlobalNY.args,
+export const WithImage = WithImageTemplate.bind({});
+WithImage.args = {
+    ...props,
     content: {
-        ...GlobalNY.args.content,
+        heading: 'As 2022 begins, will you support us?',
+        messageText:
+            'Fearless, investigative reporting shapes a fairer world. At the Guardian, our independence allows us to chase the truth wherever it takes us. We have no shareholders. No vested interests. Just the determination and passion to bring readers quality reporting, including groundbreaking investigations. We do not shy away. And we provide all this for free, for everyone.',
+        paragraphs: [
+            'Fearless, investigative reporting shapes a fairer world. At the Guardian, our independence allows us to chase the truth wherever it takes us. We have no shareholders. No vested interests. Just the determination and passion to bring readers quality reporting, including groundbreaking investigations.',
+            'We do not shy away. And we provide all this for free, for everyone.',
+        ],
+        highlightedText:
+            'Show your support today from just %%CURRENCY_SYMBOL%%1, or sustain us long term with a little more. Thank you.',
+        cta: {
+            text: 'Support the Guardian',
+            baseUrl: 'https://support.theguardian.com/contribute',
+        },
         secondaryCta: {
             type: SecondaryCtaType.ContributionsReminder,
         },
     },
     mobileContent: {
-        ...GlobalNY.args.mobileContent,
+        heading: 'Please support us in 2022',
+        messageText:
+            'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
+        paragraphs: [
+            'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus',
+        ],
+        highlightedText:
+            'Show your support today from just %%CURRENCY_SYMBOL%%1, or sustain us long term with a little more. Thank you.',
+        cta: {
+            text: 'Support us',
+            baseUrl: 'https://support.theguardian.com/contribute',
+        },
         secondaryCta: {
             type: SecondaryCtaType.ContributionsReminder,
         },
     },
+    numArticles: 50,
+};
+
+export const WithImageNoArticleCount = WithImageTemplate.bind({});
+WithImageNoArticleCount.args = {
+    ...WithImage.args,
+    numArticles: 0,
+};
+
+export const WithImageNoSupportCtaIcons = WithImageTemplate.bind({});
+WithImageNoSupportCtaIcons.args = {
+    ...WithImage.args,
+    content: {
+        ...WithImage.args.content,
+        cta: {
+            baseUrl: 'https://theguardian.com',
+            text: 'The Guardian',
+        },
+    },
+    mobileContent: {
+        ...WithImage.args.mobileContent,
+        cta: {
+            baseUrl: 'https://theguardian.com',
+            text: 'The Guardian',
+        },
+    },
 };