Export project interaction details

src/apps/routers.js

@@ -24,6 +24,7 @@ const reactRoutes = [
   '/export/create',
   '/export/:exportId/edit',
   '/export/:exportId/details',
+  '/export/:exportId/interactions',
   '/export/:exportId/delete',
   '/exportwins',
   '/companies/:companyId/exportwins/create',

src/client/components/ContactForm/index.jsx

@@ -5,7 +5,7 @@ import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
 import Link from '@govuk-react/link'
-import { FONT_WEIGHTS, SPACING } from '@govuk-react/constants'
+import { FONT_SIZE, FONT_WEIGHTS, SPACING } from '@govuk-react/constants'
 import styled from 'styled-components'
 import Label from '@govuk-react/label'
 
@@ -71,6 +71,11 @@ const StyledLabel = styled(Label)`
   font-weight: ${FONT_WEIGHTS.bold};
 `
 
+const StyledLink = styled(Link)({
+  fontSize: FONT_SIZE.SIZE_20,
+  lineHeight: '32px',
+})
+
 const _ContactForm = ({
   update,
   contactId,
@@ -131,7 +136,9 @@ const _ContactForm = ({
           <LocalHeader
             superheading={
               update && (
-                <Link href={`/companies/${company.id}`}>{company.name}</Link>
+                <StyledLink href={`/companies/${company.id}`}>
+                  {company.name}
+                </StyledLink>
               )
             }
             heading={`${update ? 'Edit' : 'Add'} contact`}

src/client/components/Layout/DefaultLayout.jsx

@@ -17,6 +17,7 @@ const GlobalStyles = createGlobalStyle`
 `
 
 const DefaultLayout = ({
+  superheading,
   heading,
   headingLink,
   subheading,
@@ -48,6 +49,7 @@ const DefaultLayout = ({
         localHeader
       ) : (
         <LocalHeader
+          superheading={superheading}
           heading={heading}
           headingLink={headingLink}
           subheading={subheading}
@@ -71,6 +73,7 @@ const DefaultLayout = ({
 }
 
 DefaultLayout.propTypes = {
+  superheading: PropTypes.node,
   heading: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   headingLink: PropTypes.shape({
     url: PropTypes.string.isRequired,

src/client/components/LocalHeader/LocalHeader.jsx

@@ -28,11 +28,6 @@ const BreadcrumbsWrapper = styled(Breadcrumbs)`
   margin-top: 0;
 `
 
-const StyledSuperheading = styled.div({
-  fontSize: 20,
-  lineHeight: '32px',
-})
-
 const StyledLink = styled('a')({
   fontSize: 20,
   display: 'inline-block',
@@ -47,10 +42,10 @@ const StyledLink = styled('a')({
 const LocalHeader = ({
   breadcrumbs,
   flashMessages,
+  superheading,
   heading,
-  subheading,
   headingLink,
-  superheading,
+  subheading,
   children,
   useReactRouter = false,
 }) => (
@@ -83,7 +78,7 @@ const LocalHeader = ({
         )}
       </BreadcrumbsWrapper>
       <FlashMessages flashMessages={flashMessages} />
-      {superheading && <StyledSuperheading>{superheading}</StyledSuperheading>}
+      {superheading}
       {headingLink && (
         <StyledLink data-test="heading-link" href={headingLink.url}>
           {headingLink.text}

src/client/components/LocalHeader/__stories__/LocalHeader.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import Link from '@govuk-react/link'
 
 import LocalHeader from '../LocalHeader'
 
@@ -35,8 +36,8 @@ WithLink.story = {
 export const WithSuperheading = () => (
   <LocalHeader
     breadcrumbs={breadcrumbs}
+    superheading={<Link href={`/companies`}>Company name</Link>}
     heading={exampleText}
-    superheading={exampleText}
   />
 )
 

src/client/components/Resource/Paginated.js

@@ -163,7 +163,7 @@ const PaginatedResource = multiInstance({
                       qsParamName={sortByQsParamName}
                     />
                   )}
-                  {result ? children(result.results) : null}
+                  {result ? children(result.results || result) : null}
                   <Pagination
                     totalPages={totalPages}
                     activePage={routePage}

src/client/components/TabNav/index.jsx

@@ -274,6 +274,7 @@ export const VerticalTabNav = styled(SmallScreenTabNav)({
           '&::before': {
             display: 'none',
           },
+          textAlign: 'left',
           textDecoration: 'none',
           border: 'none',
           background: 'none',

src/client/modules/ExportPipeline/Export.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import styled from 'styled-components'
+import { useLocation } from 'react-router-dom'
+
+import ExportInteractionsList from './ExportInteractionsList'
+import ExportResource from '../../components/Resource/Export'
+import { DefaultLayout } from '../../components'
+import TabNav from '../../components/TabNav'
+import ExportDetails from './ExportDetails'
+import urls from '../../../lib/urls'
+
+const EXPORT_ID_REGEX = /\/export\/([^/]+)\//
+const EXPORT_ASPECT_REGEX = /\/([^/]+)$/
+
+const StyledLink = styled('a')({
+  fontSize: 20,
+  display: 'inline-block',
+  fontFamily: 'Arial, sans-serif',
+  marginTop: 8,
+  marginBottom: 8,
+})
+
+export const CompanyLink = (props) => (
+  <ExportResource.Inline {...props}>
+    {({ company }) => (
+      <StyledLink
+        data-test="export-company-link"
+        href={urls.companies.detail(company.id)}
+      >
+        {company.name.toUpperCase()}
+      </StyledLink>
+    )}
+  </ExportResource.Inline>
+)
+
+export const ExportProjectTitle = (props) => (
+  <ExportResource.Inline {...props}>
+    {(exportProject) => exportProject.title}
+  </ExportResource.Inline>
+)
+
+const Export = () => {
+  const location = useLocation()
+  const matchId = location.pathname.match(EXPORT_ID_REGEX)
+  const exportId = matchId ? matchId[1] : null
+  const matchAspect = location.pathname.match(EXPORT_ASPECT_REGEX)
+  const aspect = matchAspect ? matchAspect[1] : null // aspect will be either 'details' or 'interactions'
+
+  return (
+    <DefaultLayout
+      superheading={<CompanyLink id={exportId} />}
+      heading={<ExportProjectTitle id={exportId} />}
+      pageTitle={`Export ${aspect}`}
+      breadcrumbs={[
+        { link: urls.exportPipeline.index(), text: 'Home' },
+        { text: <ExportProjectTitle id={exportId} /> },
+      ]}
+    >
+      <TabNav
+        id="export-tab-nav"
+        label="Export tab nav"
+        layout="vertical"
+        routed={true}
+        tabs={{
+          [urls.exportPipeline.details(exportId)]: {
+            label: 'Project details',
+            content: <ExportDetails />,
+          },
+          [urls.exportPipeline.interactions.index(exportId)]: {
+            label: 'Interactions',
+            content: <ExportInteractionsList exportId={exportId} />,
+          },
+        }}
+      />
+    </DefaultLayout>
+  )
+}
+
+export default Export