CCM-11496: refactor content

Author: harrim91

frontend/src/components/forms/MessagePlan/MessagePlan.tsx

@@ -15,6 +15,7 @@ import { useTextInput } from '@hooks/use-text-input.hook';
 import { NHSNotifyFormWrapper } from '@molecules/NHSNotifyFormWrapper/NHSNotifyFormWrapper';
 import content from '@content/content';
 import { useNHSNotifyForm } from '@providers/form-provider';
+import { ContentRenderer } from '@molecules/ContentRenderer/ContentRenderer';
 
 const formContent = content.components.messagePlanForm;
 
@@ -53,16 +54,7 @@ export function MessagePlanForm({
             {formContent.fields.name.details.summary}
           </Details.Summary>
           <Details.Text>
-            <p>{formContent.fields.name.details.text.main}</p>
-            <p>{formContent.fields.name.details.text.commonNames.main}</p>
-            <ul className='nhsuk-list nhsuk-list--bullet'>
-              {formContent.fields.name.details.text.commonNames.list.map(
-                (item) => (
-                  <li key={item}>{item}</li>
-                )
-              )}
-            </ul>
-            <p>{formContent.fields.name.details.text.commonNames.example}</p>
+            <ContentRenderer content={formContent.fields.name.details.text} />
           </Details.Text>
         </Details>
         <TextInput

frontend/src/content/content.ts

@@ -1276,20 +1276,32 @@ const messagePlanForm = {
       hint: 'This will not be visible to recipients.',
       details: {
         summary: 'Naming your message plans',
-        text: {
-          main: 'You should name your message plans in a way that works best for your service or organisation.',
-          commonNames: {
-            main: 'Common message plan names include the:',
-            list: [
+        text: [
+          {
+            type: 'text',
+            text: 'You should name your message plans in a way that works best for your service or organisation.',
+          },
+          {
+            type: 'text',
+            text: 'Common message plan names include the:',
+          },
+          {
+            type: 'text',
+            text: markdownList('ul', [
               'channels it uses',
               'subject or reason for the message',
               'intended audience for the message',
               'version number',
-            ],
-            example:
-              "For example, 'Email, SMS, letter - covid19 2023 - over 65s - version 3'",
+            ]),
+            overrides: {
+              ul: { props: { className: 'nhsuk-list nhsuk-list--bullet' } },
+            },
           },
-        },
+          {
+            type: 'text',
+            text: "For example, 'Email, SMS, letter - covid19 2023 - over 65s - version 3'",
+          },
+        ] satisfies ContentBlock[],
       },
     },
     campaignId: {