@financial-times/cp-content-pipeline-ui 9.5.0 → 9.7.0

package/src/components/content-tree/Flourish/index.tsx

@@ -10,7 +10,14 @@ interface FlourishProps extends ContentProps<ContentTreeWorkarounds.Flourish> {
 }
 
 const Flourish: React.FC<FlourishProps> = ({
-  content: { id, flourishType, description, layoutWidth, fallbackImage },
+  content: {
+    id,
+    flourishType,
+    description,
+    layoutWidth,
+    fallbackImage,
+    fragmentIdentifier,
+  },
   iFrame = false,
   inArticleBody = true,
 }) => {
@@ -39,6 +46,7 @@ const Flourish: React.FC<FlourishProps> = ({
 
   return (
     <div
+      id={fragmentIdentifier}
       className={classnames({
         'n-content-layout': inArticleBody,
         flourish: iFrame,

package/src/components/content-tree/Flourish/test/snapshot.spec.tsx

@@ -88,6 +88,24 @@ describe('Flourish component', () => {
     )
     expect(container).toMatchSnapshot()
   })
+
+  it('renders with fragmentIdentifier as ID', () => {
+    const { container } = render(
+      <Flourish
+        content={{
+          type: 'flourish',
+          id: '123',
+          fragmentIdentifier: 'test',
+          flourishType: 'bar',
+          description: 'foo',
+          layoutWidth: 'full-grid',
+          fallbackImage: anImage,
+        }}
+      />
+    )
+    const flourishElement = container.querySelector('[id="test"]')
+    expect(flourishElement).toBeTruthy()
+  })
 })
 
 it('sets the hideTitle param in the iframe url to true when not in article body', async () => {

package/src/components/content-tree/Heading/index.tsx

@@ -7,22 +7,33 @@ const Heading: React.FC<
 > = (props) => {
   if (!React.Children.count(props.children)) return null
 
+  const { fragmentIdentifier } = props.content
+
   switch (props.content.level) {
     case 'chapter':
       return (
-        <h2 className="n-content-heading-2 o3-editorial-typography-chapter">
+        <h2
+          id={fragmentIdentifier}
+          className="n-content-heading-2 o3-editorial-typography-chapter"
+        >
           {props.children}
         </h2>
       )
     case 'subheading':
       return (
-        <h3 className="n-content-heading-3 o3-editorial-typography-subheading">
+        <h3
+          id={fragmentIdentifier}
+          className="n-content-heading-3 o3-editorial-typography-subheading"
+        >
           {props.children}
         </h3>
       )
     case 'label':
       return (
-        <h5 className="n-content-heading-5 o3-type-label">
+        <h5
+          id={fragmentIdentifier}
+          className="n-content-heading-5 o3-type-label"
+        >
           {props.children}
         </h5>
       )

package/src/components/content-tree/ImageSet/index.tsx

@@ -216,7 +216,9 @@ export const FallbackImage: React.FC<FallbackImageProps> = (props) => {
 }
 
 export interface ImageSetProps
-  extends ContentProps<ComponentWorkarounds.ImageSet> {
+  extends ContentProps<
+    ComponentWorkarounds.ImageSet & { fragmentIdentifier?: string }
+  > {
   isMainImage?: boolean
 }
 
@@ -229,6 +231,8 @@ const ImageSet: React.FC<ImageSetProps> = (props) => {
 
   const { reduceFullBleedImages } = useContext(PresentationFlagsContext)
 
+  const { fragmentIdentifier } = imageSet
+
   const Wrapper =
     // HACK:20240618:IM don't stretch out the main image to the full grid in
     // the app as it can clash with the right hand rail
@@ -243,6 +247,7 @@ const ImageSet: React.FC<ImageSetProps> = (props) => {
   return (
     <Wrapper>
       <figure
+        id={fragmentIdentifier}
         className={
           (imageSet.picture.layoutWidth &&
             figureClassNameMap[imageSet.picture.layoutWidth]) ??