From b32243e2991003628cbfbf72bb57f96454b6da5d Mon Sep 17 00:00:00 2001
From: davidpmccormick <d.mccormick@wellcome.ac.uk>
Date: Tue, 9 Apr 2024 16:00:55 +0100
Subject: [PATCH 1/4] Move 'FeaturedText' out of the body map

---
 content/webapp/components/Body/Body.tsx | 516 ++++++++++++------------
 1 file changed, 266 insertions(+), 250 deletions(-)

diff --git a/content/webapp/components/Body/Body.tsx b/content/webapp/components/Body/Body.tsx
index 1dc52aa42e..c9cdc2e573 100644
--- a/content/webapp/components/Body/Body.tsx
+++ b/content/webapp/components/Body/Body.tsx
@@ -57,6 +57,7 @@ import TextAndImageOrIcons from '../TextAndImageOrIcons';
 import { SliceZone } from '@prismicio/react';
 import { components } from '@weco/common/views/slices';
 import { useToggles } from '@weco/common/server-data/Context';
+import { Slice } from '@weco/content/types/body';
 
 const BodyWrapper = styled.div<{ $splitBackground: boolean }>`
   ${props =>
@@ -172,13 +173,34 @@ const Body: FunctionComponent<Props> = ({
   contentType,
 }: Props) => {
   const { sliceMachine } = useToggles();
+  const featuredTextFromBody = body.find(
+    (slice, i) =>
+      i === 0 && slice.type === 'text' && slice.weight === 'featured'
+  ) as Slice<'text', prismic.RichTextField>;
+  const featuredTextFromUntransformedBody = untransformedBody.find(
+    (slice, i) =>
+      i === 0 && slice.slice_type === 'text' && slice.slice_label === 'featured'
+  ) as prismic.Slice<'text', { text: prismic.RichTextField }>;
+
   const filteredBody = body
+    .filter(
+      (slice, i) =>
+        !(i === 0 && slice.type === 'text' && slice.weight === 'featured')
+    )
     .filter(slice => !(slice.type === 'picture' && slice.weight === 'featured'))
     // The standfirst is now put into the header
     // and used exclusively by articles / article series
     .filter(slice => slice.type !== 'standfirst');
 
   const filteredUntransformedBody = untransformedBody
+    .filter(
+      (slice, i) =>
+        !(
+          i === 0 &&
+          slice.slice_type === 'text' &&
+          slice.slice_label === 'featured'
+        )
+    )
     .filter(
       slice =>
         !(
@@ -345,6 +367,28 @@ const Body: FunctionComponent<Props> = ({
       className={`content-type-${contentType}`}
       $splitBackground={isShortFilm}
     >
+      {featuredTextFromBody && featuredTextFromUntransformedBody && (
+        <Layout gridSizes={gridSize8(!sectionLevelPage)}>
+          <div className="body-text spaced-text">
+            <Space
+              $v={{
+                size: sectionLevelPage ? 'xl' : 'l',
+                properties: ['margin-bottom'],
+              }}
+            >
+              <FeaturedText
+                html={
+                  sliceMachine
+                    ? featuredTextFromUntransformedBody.primary.text
+                    : featuredTextFromBody.value
+                }
+                htmlSerializer={defaultSerializer}
+              />
+            </Space>
+          </div>
+        </Layout>
+      )}
+
       {filteredBody.length < 1 && (
         <AdditionalContent
           index={0}
@@ -374,274 +418,246 @@ const Body: FunctionComponent<Props> = ({
         filteredBody.map((slice, i) => (
           <Fragment key={i}>
             {/* If the first slice is featured text we display it and any static content, i.e. <AdditionalContent /> */}
-            {i === 0 &&
-              slice.type === 'text' &&
-              slice.weight === 'featured' && (
-                <Layout gridSizes={gridSize8(!sectionLevelPage)}>
-                  <div className="body-text spaced-text">
-                    <Space
-                      $v={{
-                        size: sectionLevelPage ? 'xl' : 'l',
-                        properties: ['margin-bottom'],
-                      }}
-                    >
-                      <FeaturedText
-                        html={slice.value}
-                        htmlSerializer={defaultSerializer}
-                      />
-                    </Space>
-                  </div>
-                </Layout>
-              )}
             <AdditionalContent
               index={i}
               sections={sections}
               isLanding={isLanding}
               staticContent={staticContent}
             />
-            {!(
-              i === 0 &&
-              slice.type === 'text' &&
-              slice.weight === 'featured'
-            ) && (
-              <>
-                {slice.type === 'text' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <div
-                        className={classNames({
-                          'body-text spaced-text': true,
-                          'first-text-slice': firstTextSliceIndex === i,
-                        })}
-                      >
-                        {slice.weight !== 'featured' &&
-                          (firstTextSliceIndex === i && isDropCapped ? (
-                            <>
-                              {/*
+
+            {slice.type === 'text' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <div
+                    className={classNames({
+                      'body-text spaced-text': true,
+                      'first-text-slice': firstTextSliceIndex === i,
+                    })}
+                  >
+                    {slice.weight !== 'featured' &&
+                      (firstTextSliceIndex === i && isDropCapped ? (
+                        <>
+                          {/*
                                 The featured text slice can contain multiple paragraphs,
                                 e.g. https://wellcomecollection.org/articles/XcMBBREAACUAtBoV
 
                                 The drop cap serializer will see them as two separate paragraphs,
                                 so we have to split out the first paragraph here.
                               */}
-                              <PrismicHtmlBlock
-                                html={[slice.value[0]] as prismic.RichTextField}
-                                htmlSerializer={dropCapSerializer}
-                              />
-                              <PrismicHtmlBlock
-                                html={
-                                  slice.value.slice(1) as prismic.RichTextField
-                                }
-                                htmlSerializer={defaultSerializer}
-                              />
-                            </>
-                          ) : (
-                            <PrismicHtmlBlock
-                              html={slice.value}
-                              htmlSerializer={defaultSerializer}
-                            />
-                          ))}
-                      </div>
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
+                          <PrismicHtmlBlock
+                            html={[slice.value[0]] as prismic.RichTextField}
+                            htmlSerializer={dropCapSerializer}
+                          />
+                          <PrismicHtmlBlock
+                            html={slice.value.slice(1) as prismic.RichTextField}
+                            htmlSerializer={defaultSerializer}
+                          />
+                        </>
+                      ) : (
+                        <PrismicHtmlBlock
+                          html={slice.value}
+                          htmlSerializer={defaultSerializer}
+                        />
+                      ))}
+                  </div>
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
 
-                {slice.type === 'textAndImage' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <Layout gridSizes={gridSize8()}>
-                      <TextAndImageOrIcons item={slice.value} />
-                    </Layout>
-                  </SpacingComponent>
-                )}
+            {slice.type === 'textAndImage' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <Layout gridSizes={gridSize8()}>
+                  <TextAndImageOrIcons item={slice.value} />
+                </Layout>
+              </SpacingComponent>
+            )}
 
-                {slice.type === 'textAndIcons' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <Layout gridSizes={gridSize8()}>
-                      <TextAndImageOrIcons item={slice.value} />
-                    </Layout>
-                  </SpacingComponent>
-                )}
+            {slice.type === 'textAndIcons' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <Layout gridSizes={gridSize8()}>
+                  <TextAndImageOrIcons item={slice.value} />
+                </Layout>
+              </SpacingComponent>
+            )}
 
-                {/* TODO: use one layout for all image weights if/when it's established
+            {/* TODO: use one layout for all image weights if/when it's established
               that width isn't an adequate means to illustrate a difference */}
-                {slice.type === 'picture' && slice.weight === 'default' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={isVisualStory ? 8 : 10}>
-                      <CaptionedImage {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'picture' && slice.weight === 'standalone' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <Layout gridSizes={gridSize12()}>
-                      <CaptionedImage {...slice.value} />
-                    </Layout>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'picture' && slice.weight === 'supporting' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <CaptionedImage {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'imageGallery' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <ImageGallery
-                      {...slice.value}
-                      id={imageGalleryIdCount++}
-                      comicPreviousNext={comicPreviousNext}
+            {slice.type === 'picture' && slice.weight === 'default' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={isVisualStory ? 8 : 10}>
+                  <CaptionedImage {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'picture' && slice.weight === 'standalone' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <Layout gridSizes={gridSize12()}>
+                  <CaptionedImage {...slice.value} />
+                </Layout>
+              </SpacingComponent>
+            )}
+            {slice.type === 'picture' && slice.weight === 'supporting' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <CaptionedImage {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'imageGallery' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <ImageGallery
+                  {...slice.value}
+                  id={imageGalleryIdCount++}
+                  comicPreviousNext={comicPreviousNext}
+                />
+              </SpacingComponent>
+            )}
+            {slice.type === 'quote' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <Quote {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'titledTextList' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <TitledTextList {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'contentList' && !isLanding && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  {/* FIXME: this makes what-we-do contentLists synchronous, but it's hacky. */}
+                  {pageId === prismicPageIds.whatWeDo ? (
+                    <SearchResults
+                      title={slice.value.title}
+                      items={slice.value.items}
                     />
-                  </SpacingComponent>
-                )}
-                {slice.type === 'quote' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <Quote {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'titledTextList' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <TitledTextList {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'contentList' && !isLanding && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      {/* FIXME: this makes what-we-do contentLists synchronous, but it's hacky. */}
-                      {pageId === prismicPageIds.whatWeDo ? (
-                        <SearchResults
-                          title={slice.value.title}
-                          items={slice.value.items}
-                        />
-                      ) : (
-                        <AsyncSearchResults
-                          title={slice.value.title}
-                          query={slice.value.items
-                            .map(item =>
-                              'id' in item ? `id:${item.id}` : undefined
-                            )
-                            .filter(isNotUndefined)
-                            .join(' ')}
-                        />
-                      )}
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'searchResults' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <AsyncSearchResults {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'videoEmbed' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={isShortFilm ? 12 : minWidth}>
-                      <VideoEmbed
-                        {...slice.value}
-                        hasFullSizePoster={isShortFilm}
-                      />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'soundcloudEmbed' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <SoundCloudEmbed {...slice.value} id={i} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'map' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <Map {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'gifVideo' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <Layout gridSizes={gridSize10()}>
-                      <GifVideo {...slice.value} />
-                    </Layout>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'iframe' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <Layout gridSizes={gridSize10()}>
-                      <Iframe {...slice.value} />
-                    </Layout>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'contact' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <Contact {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'collectionVenue' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    {slice.value.showClosingTimes ? (
-                      <LayoutWidth width={minWidth}>
-                        <VenueClosedPeriods venue={slice.value.content} />
-                      </LayoutWidth>
-                    ) : (
-                      <Layout
-                        gridSizes={
-                          slice.weight === 'featured'
-                            ? {
-                                s: 12,
-                                m: 12,
-                                l: 11,
-                                shiftL: 1,
-                                xl: 10,
-                                shiftXL: 2,
-                              }
-                            : {
-                                s: 12,
-                                m: 10,
-                                shiftM: 1,
-                                l: 8,
-                                shiftL: 2,
-                                xl: 8,
-                                shiftXL: 2,
-                              }
-                        }
-                      >
-                        <VenueHours
-                          venue={slice.value.content}
-                          weight={slice.weight || 'default'}
-                        />
-                      </Layout>
-                    )}
-                  </SpacingComponent>
-                )}
-                {slice.type === 'infoBlock' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <InfoBlock {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'tagList' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <TagsGroup {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
-                )}
-                {slice.type === 'audioPlayer' && (
-                  <SpacingComponent $sliceType={slice.type}>
-                    <LayoutWidth width={minWidth}>
-                      <AudioPlayer {...slice.value} />
-                    </LayoutWidth>
-                  </SpacingComponent>
+                  ) : (
+                    <AsyncSearchResults
+                      title={slice.value.title}
+                      query={slice.value.items
+                        .map(item =>
+                          'id' in item ? `id:${item.id}` : undefined
+                        )
+                        .filter(isNotUndefined)
+                        .join(' ')}
+                    />
+                  )}
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'searchResults' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <AsyncSearchResults {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'videoEmbed' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={isShortFilm ? 12 : minWidth}>
+                  <VideoEmbed
+                    {...slice.value}
+                    hasFullSizePoster={isShortFilm}
+                  />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'soundcloudEmbed' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <SoundCloudEmbed {...slice.value} id={i} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'map' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <Map {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'gifVideo' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <Layout gridSizes={gridSize10()}>
+                  <GifVideo {...slice.value} />
+                </Layout>
+              </SpacingComponent>
+            )}
+            {slice.type === 'iframe' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <Layout gridSizes={gridSize10()}>
+                  <Iframe {...slice.value} />
+                </Layout>
+              </SpacingComponent>
+            )}
+            {slice.type === 'contact' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <Contact {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'collectionVenue' && (
+              <SpacingComponent $sliceType={slice.type}>
+                {slice.value.showClosingTimes ? (
+                  <LayoutWidth width={minWidth}>
+                    <VenueClosedPeriods venue={slice.value.content} />
+                  </LayoutWidth>
+                ) : (
+                  <Layout
+                    gridSizes={
+                      slice.weight === 'featured'
+                        ? {
+                            s: 12,
+                            m: 12,
+                            l: 11,
+                            shiftL: 1,
+                            xl: 10,
+                            shiftXL: 2,
+                          }
+                        : {
+                            s: 12,
+                            m: 10,
+                            shiftM: 1,
+                            l: 8,
+                            shiftL: 2,
+                            xl: 8,
+                            shiftXL: 2,
+                          }
+                    }
+                  >
+                    <VenueHours
+                      venue={slice.value.content}
+                      weight={slice.weight || 'default'}
+                    />
+                  </Layout>
                 )}
-              </>
+              </SpacingComponent>
+            )}
+            {slice.type === 'infoBlock' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <InfoBlock {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'tagList' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <TagsGroup {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
+            )}
+            {slice.type === 'audioPlayer' && (
+              <SpacingComponent $sliceType={slice.type}>
+                <LayoutWidth width={minWidth}>
+                  <AudioPlayer {...slice.value} />
+                </LayoutWidth>
+              </SpacingComponent>
             )}
           </Fragment>
         ))}

From 6970adfc9e37d71f7a826ebc97ca1ad71e4c15f3 Mon Sep 17 00:00:00 2001
From: davidpmccormick <d.mccormick@wellcome.ac.uk>
Date: Wed, 10 Apr 2024 11:49:09 +0100
Subject: [PATCH 2/4] Move AdditionalContent out of body map and simplify to
 LandingPageSections

---
 content/webapp/components/Body/Body.tsx | 232 +++++++++++-------------
 1 file changed, 102 insertions(+), 130 deletions(-)

diff --git a/content/webapp/components/Body/Body.tsx b/content/webapp/components/Body/Body.tsx
index c9cdc2e573..c1fb40793d 100644
--- a/content/webapp/components/Body/Body.tsx
+++ b/content/webapp/components/Body/Body.tsx
@@ -243,122 +243,99 @@ const Body: FunctionComponent<Props> = ({
       featuredCardText: 'black',
     },
   ];
-  const AdditionalContent = ({
-    index,
-    sections = [],
-    isLanding = false,
-    staticContent,
-  }: {
-    index: number;
+
+  const LandingPageSections: FunctionComponent<{
     sections: ContentListSlice[];
-    isLanding: boolean;
-    staticContent: ReactElement | null;
-  }): ReactElement<Props> | null => {
-    if (index === 0) {
-      return (
-        <>
-          {staticContent}
-          {onThisPage && onThisPage.length > 2 && showOnThisPage && (
-            <SpacingComponent>
-              <LayoutWidth width={minWidth}>
-                <OnThisPageAnchors links={onThisPage} />
-              </LayoutWidth>
-            </SpacingComponent>
-          )}
-          {isLanding &&
-            sections.map((section, index) => {
-              const isFirst = index === 0;
-              const isLast = index === sections.length - 1;
-              const sectionTheme = sectionThemes[index % sectionThemes.length];
-              const hasFeatured = section.value.items.length === 1;
-              const firstItem = section.value.items?.[0];
-              const isCardType = firstItem?.type === 'card';
-
-              const firstItemProps =
-                firstItem &&
-                (isCardType
-                  ? convertCardToFeaturedCardProps(firstItem)
-                  : convertItemToFeaturedCardProps(firstItem));
-
-              const cardItems = hasFeatured
-                ? section.value.items.slice(1)
-                : section.value.items;
-              const featuredItem =
-                hasFeatured && firstItem ? (
-                  <FeaturedCard
-                    {...firstItemProps}
-                    background={sectionTheme.featuredCardBackground}
-                    textColor={sectionTheme.featuredCardText}
-                    isReversed={false}
-                  >
-                    <h3 className={font('wb', 2)}>{firstItem.title}</h3>
-                    {isCardType && firstItem.description && (
-                      <p className={font('intr', 5)}>{firstItem.description}</p>
-                    )}
-                    {'promo' in firstItem && firstItem.promo && (
-                      <p className={font('intr', 5)}>
-                        {firstItem.promo.caption}
-                      </p>
-                    )}
-                  </FeaturedCard>
-                ) : null;
-
-              const cards = cardItems.map((item, i) => {
-                const cardProps =
-                  item.type === 'card' ? item : convertItemToCardProps(item);
-                return <Card key={i} item={cardProps} />;
-              });
-
-              return (
-                <Fragment key={index}>
-                  {!isFirst && (
-                    <WobblyEdge
-                      backgroundColor={sectionTheme.rowBackground}
-                      isStatic
-                    />
-                  )}
-                  <Wrapper
-                    $v={{
-                      size: 'xl',
-                      properties:
-                        isLast && sectionTheme.rowBackground === 'white'
-                          ? ['padding-top']
-                          : isFirst && sectionTheme.rowBackground === 'white'
-                          ? ['padding-bottom']
-                          : ['padding-top', 'padding-bottom'],
-                    }}
-                    $cardBackgroundColor={sectionTheme.cardBackground}
-                    $rowBackgroundColor={sectionTheme.rowBackground}
-                  >
-                    {section.value.title && (
-                      <Space $v={{ size: 'l', properties: ['margin-bottom'] }}>
-                        <SectionHeader title={section.value.title} />
-                      </Space>
-                    )}
-                    {featuredItem && (
-                      <Space $v={{ size: 'l', properties: ['margin-bottom'] }}>
-                        <Layout gridSizes={gridSize12()}>{featuredItem}</Layout>
-                      </Space>
-                    )}
-                    {cards.length > 0 && (
-                      <GridFactory
-                        items={cards}
-                        overrideGridSizes={
-                          sectionLevelPage ? sectionLevelPageGrid : undefined
-                        }
-                      />
-                    )}
-                  </Wrapper>
-                  {!isLast && <WobblyEdge backgroundColor="white" isStatic />}
-                </Fragment>
-              );
-            })}
-        </>
-      );
-    } else {
-      return null;
-    }
-  };
+  }> = ({ sections = [] }) => (
+    <>
+      {sections.map((section, index) => {
+        const isFirst = index === 0;
+        const isLast = index === sections.length - 1;
+        const sectionTheme = sectionThemes[index % sectionThemes.length];
+        const hasFeatured = section.value.items.length === 1;
+        const firstItem = section.value.items?.[0];
+        const isCardType = firstItem?.type === 'card';
+
+        const firstItemProps =
+          firstItem &&
+          (isCardType
+            ? convertCardToFeaturedCardProps(firstItem)
+            : convertItemToFeaturedCardProps(firstItem));
+
+        const cardItems = hasFeatured
+          ? section.value.items.slice(1)
+          : section.value.items;
+        const featuredItem =
+          hasFeatured && firstItem ? (
+            <FeaturedCard
+              {...firstItemProps}
+              background={sectionTheme.featuredCardBackground}
+              textColor={sectionTheme.featuredCardText}
+              isReversed={false}
+            >
+              <h3 className={font('wb', 2)}>{firstItem.title}</h3>
+              {isCardType && firstItem.description && (
+                <p className={font('intr', 5)}>{firstItem.description}</p>
+              )}
+              {'promo' in firstItem && firstItem.promo && (
+                <p className={font('intr', 5)}>{firstItem.promo.caption}</p>
+              )}
+            </FeaturedCard>
+          ) : null;
+
+        const cards = cardItems.map((item, i) => {
+          const cardProps =
+            item.type === 'card' ? item : convertItemToCardProps(item);
+          return <Card key={i} item={cardProps} />;
+        });
+
+        return (
+          <Fragment key={index}>
+            {!isFirst && (
+              <WobblyEdge
+                backgroundColor={sectionTheme.rowBackground}
+                isStatic
+              />
+            )}
+            <Wrapper
+              $v={{
+                size: 'xl',
+                properties:
+                  isLast && sectionTheme.rowBackground === 'white'
+                    ? ['padding-top']
+                    : isFirst && sectionTheme.rowBackground === 'white'
+                    ? ['padding-bottom']
+                    : ['padding-top', 'padding-bottom'],
+              }}
+              $cardBackgroundColor={sectionTheme.cardBackground}
+              $rowBackgroundColor={sectionTheme.rowBackground}
+            >
+              {section.value.title && (
+                <Space $v={{ size: 'l', properties: ['margin-bottom'] }}>
+                  <SectionHeader title={section.value.title} />
+                </Space>
+              )}
+              {featuredItem && (
+                <Space $v={{ size: 'l', properties: ['margin-bottom'] }}>
+                  <Layout gridSizes={gridSize12()}>{featuredItem}</Layout>
+                </Space>
+              )}
+              {cards.length > 0 && (
+                <GridFactory
+                  items={cards}
+                  overrideGridSizes={
+                    sectionLevelPage ? sectionLevelPageGrid : undefined
+                  }
+                />
+              )}
+            </Wrapper>
+            {!isLast && <WobblyEdge backgroundColor="white" isStatic />}
+          </Fragment>
+        );
+      })}
+    </>
+  );
+
   const isShortFilm = contentType === 'short-film';
   const isVisualStory = contentType === 'visual-story';
 
@@ -389,15 +366,18 @@ const Body: FunctionComponent<Props> = ({
         </Layout>
       )}
 
-      {filteredBody.length < 1 && (
-        <AdditionalContent
-          index={0}
-          sections={sections}
-          isLanding={isLanding}
-          staticContent={staticContent}
-        />
+      {staticContent}
+
+      {onThisPage && onThisPage.length > 2 && showOnThisPage && (
+        <SpacingComponent>
+          <LayoutWidth width={minWidth}>
+            <OnThisPageAnchors links={onThisPage} />
+          </LayoutWidth>
+        </SpacingComponent>
       )}
 
+      {isLanding && <LandingPageSections sections={sections} />}
+
       {sliceMachine && (
         <SliceZone
           slices={filteredUntransformedBody}
@@ -417,14 +397,6 @@ const Body: FunctionComponent<Props> = ({
       {!sliceMachine &&
         filteredBody.map((slice, i) => (
           <Fragment key={i}>
-            {/* If the first slice is featured text we display it and any static content, i.e. <AdditionalContent /> */}
-            <AdditionalContent
-              index={i}
-              sections={sections}
-              isLanding={isLanding}
-              staticContent={staticContent}
-            />
-
             {slice.type === 'text' && (
               <SpacingComponent $sliceType={slice.type}>
                 <LayoutWidth width={minWidth}>

From 0d1372e2b5de09bceaa60ad506a05f3bac86f59b Mon Sep 17 00:00:00 2001
From: davidpmccormick <d.mccormick@wellcome.ac.uk>
Date: Wed, 10 Apr 2024 12:44:53 +0100
Subject: [PATCH 3/4] Spread context so that it is merged with defaultContext

---
 common/views/slices/ContentList/index.tsx    | 3 ++-
 common/views/slices/EditorialImage/index.tsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/common/views/slices/ContentList/index.tsx b/common/views/slices/ContentList/index.tsx
index f322ba0e6c..e9291af797 100644
--- a/common/views/slices/ContentList/index.tsx
+++ b/common/views/slices/ContentList/index.tsx
@@ -19,7 +19,8 @@ const ContentListSlice: FunctionComponent<ContentListProps> = ({
   slice,
   context,
 }) => {
-  const options = { ...defaultContext, context };
+  const options = { ...defaultContext, ...context };
+
   const transformedSlice = transformContentListSlice(slice);
   if (!options.isLanding) {
     return (
diff --git a/common/views/slices/EditorialImage/index.tsx b/common/views/slices/EditorialImage/index.tsx
index 9b3e51eba8..6f57456d73 100644
--- a/common/views/slices/EditorialImage/index.tsx
+++ b/common/views/slices/EditorialImage/index.tsx
@@ -22,7 +22,7 @@ const EditorialImageSlice: FunctionComponent<EditorialImageSliceProps> = ({
 }) => {
   const transformedSlice = transformEditorialImageSlice(slice);
 
-  const options = { ...defaultContext, context };
+  const options = { ...defaultContext, ...context };
   // TODO: use one layout for all image weights if/when it's established
   // that width isn't an adequate means to illustrate a difference
   return (

From 5e06522d747c26936c93be8077a43f184e464091 Mon Sep 17 00:00:00 2001
From: davidpmccormick <d.mccormick@wellcome.ac.uk>
Date: Wed, 10 Apr 2024 15:16:05 +0100
Subject: [PATCH 4/4] Make isFirstFeaturedTextSlice variable(s)

---
 content/webapp/components/Body/Body.tsx | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/content/webapp/components/Body/Body.tsx b/content/webapp/components/Body/Body.tsx
index c1fb40793d..d178a74895 100644
--- a/content/webapp/components/Body/Body.tsx
+++ b/content/webapp/components/Body/Body.tsx
@@ -172,21 +172,21 @@ const Body: FunctionComponent<Props> = ({
   comicPreviousNext,
   contentType,
 }: Props) => {
+  const isFirstFeaturedTextSliceFromBody = (slice, i) =>
+    i === 0 && slice.type === 'text' && slice.weight === 'featured';
+  const isFirstFeaturedTextSliceFromUntransformedBody = (slice, i) =>
+    i === 0 && slice.slice_type === 'text' && slice.slice_label === 'featured';
+
   const { sliceMachine } = useToggles();
   const featuredTextFromBody = body.find(
-    (slice, i) =>
-      i === 0 && slice.type === 'text' && slice.weight === 'featured'
+    isFirstFeaturedTextSliceFromBody
   ) as Slice<'text', prismic.RichTextField>;
   const featuredTextFromUntransformedBody = untransformedBody.find(
-    (slice, i) =>
-      i === 0 && slice.slice_type === 'text' && slice.slice_label === 'featured'
+    isFirstFeaturedTextSliceFromUntransformedBody
   ) as prismic.Slice<'text', { text: prismic.RichTextField }>;
 
   const filteredBody = body
-    .filter(
-      (slice, i) =>
-        !(i === 0 && slice.type === 'text' && slice.weight === 'featured')
-    )
+    .filter((slice, i) => !isFirstFeaturedTextSliceFromBody(slice, i))
     .filter(slice => !(slice.type === 'picture' && slice.weight === 'featured'))
     // The standfirst is now put into the header
     // and used exclusively by articles / article series
@@ -194,12 +194,7 @@ const Body: FunctionComponent<Props> = ({
 
   const filteredUntransformedBody = untransformedBody
     .filter(
-      (slice, i) =>
-        !(
-          i === 0 &&
-          slice.slice_type === 'text' &&
-          slice.slice_label === 'featured'
-        )
+      (slice, i) => !isFirstFeaturedTextSliceFromUntransformedBody(slice, i)
     )
     .filter(
       slice =>