Merge pull request #11399 from wellcomecollection/featured-text-position

Add 'featuredText' to page model (instead of text with a label)
wellcomecollection · Nov 14, 2024 · 1e96dd2 · 1e96dd2
2 parents 9140f1d + 29c22f7
commit 1e96dd2
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 21 deletions.
diff --git a/common/customtypes/pages/index.json b/common/customtypes/pages/index.json
@@ -42,6 +42,15 @@
           "placeholder": ""
         }
       },
+      "introText": {
+        "type": "StructuredText",
+        "config": {
+          "label": "Intro text",
+          "placeholder": "Introductory/important text to appear near the top of the page",
+          "allowTargetBlank": false,
+          "multi": "paragraph,strong,em,hyperlink"
+        }
+      },
       "body": {
         "type": "Slices",
         "fieldset": "Slice Zone",

diff --git a/common/prismicio-types.d.ts b/common/prismicio-types.d.ts
@@ -3849,6 +3849,17 @@ interface PagesDocumentData {
    */
   showOnThisPage: prismic.BooleanField;
 
+  /**
+   * Intro text field in *Page*
+   *
+   * - **Field Type**: Rich Text
+   * - **Placeholder**: Introductory/important text to appear near the top of the page
+   * - **API ID Path**: pages.introText
+   * - **Tab**: Page
+   * - **Documentation**: https://prismic.io/docs/field#rich-text-title
+   */
+  introText: prismic.RichTextField;
+
   /**
    * Slice Zone field in *Page*
    *
@@ -7203,6 +7214,17 @@ declare module '@prismicio/client' {
     ): prismic.Client<AllDocumentTypes>;
   }
 
+  interface CreateWriteClient {
+    (
+      repositoryNameOrEndpoint: string,
+      options: prismic.WriteClientConfig
+    ): prismic.WriteClient<AllDocumentTypes>;
+  }
+
+  interface CreateMigration {
+    (): prismic.Migration<AllDocumentTypes>;
+  }
+
   namespace Content {
     export type {
       ArticleFormatsDocument,

diff --git a/content/webapp/components/Body/Body.tsx b/content/webapp/components/Body/Body.tsx
@@ -84,6 +84,7 @@ export const LayoutWidth: FunctionComponent<LayoutWidthProps> = ({
 
 export type Props = {
   untransformedBody: prismic.Slice[];
+  introText?: prismic.RichTextField;
   onThisPage?: Link[];
   showOnThisPage?: boolean;
   isDropCapped?: boolean;
@@ -146,6 +147,7 @@ export const defaultContext: SliceZoneContext = {
 
 const Body: FunctionComponent<Props> = ({
   untransformedBody,
+  introText,
   onThisPage,
   showOnThisPage,
   isDropCapped,
@@ -157,25 +159,9 @@ const Body: FunctionComponent<Props> = ({
   comicPreviousNext,
   contentType,
 }: Props) => {
-  const isFirstFeaturedTextSliceFromUntransformedBody = (slice, i) =>
-    i === 0 && slice.slice_type === 'text' && slice.slice_label === 'featured';
-
-  const featuredTextFromUntransformedBody = untransformedBody.find(
-    isFirstFeaturedTextSliceFromUntransformedBody
-  ) as prismic.Slice<'text', { text: prismic.RichTextField }>;
-
-  const filteredUntransformedBody = untransformedBody
-    .filter(
-      (slice, i) => !isFirstFeaturedTextSliceFromUntransformedBody(slice, i)
-    )
-    .filter(
-      slice =>
-        !(
-          slice.slice_type === 'editorialImage' &&
-          slice.slice_label === 'featured'
-        )
-    )
-    .filter(slice => slice.slice_type !== 'standfirst');
+  const filteredUntransformedBody = untransformedBody.filter(
+    slice => slice.slice_type !== 'standfirst'
+  );
 
   const firstTextSliceIndex = filteredUntransformedBody
     .map(slice => slice.slice_type)
@@ -317,7 +303,7 @@ const Body: FunctionComponent<Props> = ({
       className={`content-type-${contentType}`}
       $splitBackground={isShortFilm}
     >
-      {featuredTextFromUntransformedBody && (
+      {introText && (
         <ContaineredLayout gridSizes={gridSize8(!sectionLevelPage)}>
           <div className="body-text spaced-text">
             <Space
@@ -327,7 +313,7 @@ const Body: FunctionComponent<Props> = ({
               }}
             >
               <FeaturedText
-                html={featuredTextFromUntransformedBody.primary.text}
+                html={introText}
                 htmlSerializer={defaultSerializer}
               />
             </Space>

diff --git a/content/webapp/pages/pages/[pageId].tsx b/content/webapp/pages/pages/[pageId].tsx
@@ -388,6 +388,7 @@ export const Page: FunctionComponent<Props> = ({
           <Body
             untransformedBody={untransformedBody}
             pageId={page.id}
+            introText={page.introText}
             onThisPage={page.onThisPage}
             showOnThisPage={page.showOnThisPage}
             isLanding={isLanding}

diff --git a/content/webapp/services/prismic/transformers/pages.test.ts b/content/webapp/services/prismic/transformers/pages.test.ts
@@ -27,6 +27,7 @@ const exampleTextSlice = {
 export const pageWithoutBody: RawPagesDocument = {
   ...emptyDocumentWithUid<RawPagesDocument>({
     title: [],
+    introText: exampleTextSlice.primary.text,
     datePublished: null,
     showOnThisPage: false,
     metadataDescription: exampleTextSlice.primary.text,

diff --git a/content/webapp/services/prismic/transformers/pages.ts b/content/webapp/services/prismic/transformers/pages.ts
@@ -55,6 +55,7 @@ export function transformPage(document: RawPagesDocument): Page {
       })
     : [];
 
+  const introText = data?.introText;
   const siteSections = headerLinks.map(link => link.siteSection);
   const siteSection = document.tags.find(tag =>
     siteSections.includes(tag as SiteSection)
@@ -97,6 +98,7 @@ export function transformPage(document: RawPagesDocument): Page {
     uid: document.uid,
     format: transformFormat(document),
     ...genericFields,
+    introText,
     metadataDescription,
     seasons,
     contributors,

diff --git a/content/webapp/types/pages.ts b/content/webapp/types/pages.ts
@@ -1,3 +1,5 @@
+import type * as prismic from '@prismicio/client';
+
 import { SiteSection } from '@weco/common/model/site-section';
 
 import { Contributor } from './contributors';
@@ -13,6 +15,7 @@ export type ParentPage = Page & {
 
 export type Page = GenericContentFields & {
   type: 'pages';
+  introText?: prismic.RichTextField;
   uid: string;
   format: Format | undefined;
   seasons: Season[];