Simplified CpsTable. Added checks for paragraph blocks in getInitialData

src/app/containers/CpsTable/CpsTableCell/index.jsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { arrayOf, shape } from 'prop-types';
+import { arrayOf, shape, string } from 'prop-types';
+import { GEL_SPACING } from '@bbc/gel-foundations/spacings';
 
 import Blocks from '../../Blocks';
 import CpsText from '../../CpsText';
 
 const StyledTd = styled.td`
   border-bottom: 1px solid #dbdbdb;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 8px;
+  padding-top: ${GEL_SPACING};
+  padding-bottom: ${GEL_SPACING};
+  padding-left: ${GEL_SPACING};
   vertical-align: middle;
 
+  ${({ isHeaderCell }) => isHeaderCell && 'background: #f7f7f5;'}
+
   & p {
     padding-bottom: 0;
   }
@@ -21,16 +24,22 @@ const componentsToRender = {
   text: CpsText,
 };
 
-const CpsTableCell = ({ blocks }) => {
+const CpsTableCell = ({ blocks, type }) => {
+  const isHeaderCell = type === 'tableHeader';
   return (
-    <StyledTd>
+    <StyledTd as={isHeaderCell ? 'th' : 'td'} isHeaderCell={isHeaderCell}>
       <Blocks blocks={blocks} componentsToRender={componentsToRender} />
     </StyledTd>
   );
 };
 
 CpsTableCell.propTypes = {
   blocks: arrayOf(shape({})).isRequired,
+  type: string,
+};
+
+CpsTableCell.defaultProps = {
+  type: 'tableCell',
 };
 
 export default CpsTableCell;

src/app/containers/CpsTable/CpsTableRow/index.jsx

@@ -4,7 +4,6 @@ import { arrayOf, shape } from 'prop-types';
 
 import Blocks from '../../Blocks';
 import CpsTableCell from '../CpsTableCell';
-import CpsTableHeader from '../CpsTableHeader';
 
 const StyledTr = styled.tr`
   &:hover {
@@ -14,16 +13,14 @@ const StyledTr = styled.tr`
 
 const componentsToRender = {
   tableCell: CpsTableCell,
-  tableHeader: CpsTableHeader,
+  tableHeader: CpsTableCell,
 };
 
-const CpsTableRow = ({ blocks }) => {
-  return (
-    <StyledTr>
-      <Blocks blocks={blocks} componentsToRender={componentsToRender} />
-    </StyledTr>
-  );
-};
+const CpsTableRow = ({ blocks }) => (
+  <StyledTr>
+    <Blocks blocks={blocks} componentsToRender={componentsToRender} />
+  </StyledTr>
+);
 
 CpsTableRow.propTypes = {
   blocks: arrayOf(shape({})).isRequired,

src/app/containers/CpsTable/index.jsx

@@ -25,11 +25,9 @@ const CpsTable = ({ blocks, supportedServices }) => {
   if (!supportedServices.includes(service)) return null;
 
   return (
-    <>
-      <StyledTable service={service}>
-        <Blocks blocks={blocks} componentsToRender={componentsToRender} />
-      </StyledTable>
-    </>
+    <StyledTable service={service}>
+      <Blocks blocks={blocks} componentsToRender={componentsToRender} />
+    </StyledTable>
   );
 };
 

src/app/routes/cpsAsset/getInitialData/convertToOptimoBlocks/blocks/table/index.js

@@ -1,11 +1,21 @@
 import convertParagraph from '../paragraph';
 
-const convertCells = async block => ({
-  type: block.cellType === 'header' ? 'tableHeader' : 'tableCell',
-  model: {
-    blocks: [await convertParagraph(block.content[0])],
-  },
-});
+const convertCells = async block => {
+  const paragraphContentOnly = block.content.filter(
+    content => content.type === 'paragraph',
+  );
+
+  const paragraphBlocks = await Promise.all(
+    paragraphContentOnly.map(convertParagraph),
+  );
+
+  return {
+    type: block.cellType === 'header' ? 'tableHeader' : 'tableCell',
+    model: {
+      blocks: paragraphBlocks,
+    },
+  };
+};
 
 const convertRows = async block => {
   const cellBlocks = await Promise.all(block.map(convertCells));