Merge pull request #195 from uktrade/feature/ORPD-208-prototype-align…

…ment

feature/ORPD-208 - prototype alignment

app/search/templates/document.html

@@ -17,7 +17,7 @@
   </nav>
   <main class="govuk-main-wrapper" id="main-content">
     <div class="govuk-grid-row govuk-!-margin-bottom-4">
-      <div class="govuk-grid-column-two-thirds">
+      <div class="govuk-grid-column-three-quarters">
         <span class="govuk-caption-xl">{{ result.type }}</span>
         <h1 class="govuk-heading-xl">{{ result.title }}</h1>
       </div>

app/search/templates/intro.html

@@ -1,6 +1,8 @@
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds">
+  <div class="govuk-grid-column-full">
     <h1 class="govuk-heading-xl govuk-!-margin-bottom-4">{{service_name_long}}</h1>
+  </div>
+  <div class="govuk-grid-column-two-thirds">
     <p class="govuk-body-s govuk-!-margin-bottom-7">From: <a href="#"
         class="govuk-link govuk-link--no-visited-state">Department for Business
         and Trade</a></p>

front_end/stylesheets/helpers.scss

@@ -59,8 +59,8 @@
 
 }
 
-.fbr-max-height-250 {
-  max-height: 250px;
+.fbr-max-height-350 {
+  max-height: 350px;
 }
 
 .fbr-flex {
@@ -88,3 +88,17 @@
   font-weight: bold;
   background-color: inherit;
 }
+
+.fbr-clickable-tag {
+  border: none;
+  background: govuk-colour("light-grey");
+  padding: 2px 4px;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+
+  &:active, &:focus {
+    outline: 3px solid #ffdd00;
+    box-shadow: inset 0 0 0 4px #0b0c0c;
+  }
+}

react_front_end/src/App.js

@@ -114,6 +114,14 @@ function App() {
     fetchDataWithLoading(filterParams)
   }, [searchInput, docTypeQuery, publisherQuery, sortQuery, setPageQuery])
 
+  const handlePublisherClick = (publisherKey) => {
+    if (publisherQuery.includes(publisherKey)) return false
+
+    const updatedPublisherQuery = [...publisherQuery, publisherKey]
+    setPublisherQuery(updatedPublisherQuery)
+    setPublisherCheckedState(generateCheckedState(publishers, updatedPublisherQuery))
+  }
+
   useEffect(() => {
     if (isSearchSubmitted) {
       setIsSearchSubmitted(false)
@@ -243,7 +251,13 @@ function App() {
         {data.results_total_count === 0 && !isLoading ? (
           <NoResultsContent />
         ) : (
-          <Results results={data.results} isLoading={isLoading} searchQuery={searchQuery[0]} />
+          <Results
+            results={data.results}
+            isLoading={isLoading}
+            searchQuery={searchQuery[0]}
+            publishers={publishers}
+            onPublisherClick={handlePublisherClick}
+          />
         )}
 
         <Pagination pageData={data} pageQuery={pageQuery[0]} setPageQuery={setPageQuery} />

react_front_end/src/components/Results.js

@@ -1,7 +1,7 @@
 import { SkeletonResults } from "./SkeletonResults"
 import { formatDateToGovukStyle } from "../utils/date"
 
-function Results({ results, isLoading, searchQuery = "" }) {
+function Results({ results, isLoading, searchQuery = "", publishers, onPublisherClick }) {
   if (isLoading) {
     return <SkeletonResults />
   }
@@ -50,6 +50,7 @@ function Results({ results, isLoading, searchQuery = "" }) {
       {results.map((result) => {
         const { id, type, title, description, publisher, date_modified, date_valid, regulatory_topics } = result
 
+        const publisherName = publishers.find((publisherName) => publisherName.label === publisher).name
         // const highlightedTitle = title ? <span dangerouslySetInnerHTML={highlight(title)} /> : ""
         const highlightedDescription = description ? truncateAndHighlightDescription(description) : ""
 
@@ -66,7 +67,17 @@ function Results({ results, isLoading, searchQuery = "" }) {
               </a>
             </h2>
             <p className="govuk-body">{highlightedDescription}</p>
-            <p className="govuk-body-s fbr-secondary-text-colour govuk-!-margin-bottom-2">Published by: {publisher}</p>
+            <p className="govuk-body-s fbr-secondary-text-colour govuk-!-margin-bottom-2">
+              Published by:{" "}
+              <button
+                onClick={() => onPublisherClick(publisherName)}
+                className="fbr-clickable-tag"
+                role="button"
+                tabIndex="0"
+              >
+                {publisher}
+              </button>
+            </p>
             <p className="govuk-body-s fbr-secondary-text-colour">Last updated: {govukDate}</p>
             {regulatory_topics && regulatory_topics.length > 0 ? (
               <ul className="govuk-list fbr-topics-list">{renderRegulatoryTopics(regulatory_topics, searchQuery)}</ul>

react_front_end/src/components/__tests__/Results.test.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { render, screen, fireEvent } from "@testing-library/react"
 import "@testing-library/jest-dom"
 import { Results } from "../Results"
 import { SkeletonResults } from "../SkeletonResults"
@@ -32,35 +32,82 @@ describe("Results", () => {
     },
   ]
 
+  const mockPublishers = [
+    { name: "test-publisher", label: "Test Publisher" },
+    { name: "another-publisher", label: "Another Publisher" },
+  ]
+
+  const mockOnPublisherClick = jest.fn()
+
   test("renders SkeletonResults when isLoading is true", () => {
-    render(<Results results={[]} isLoading={true} searchQuery="" />)
+    render(
+      <Results
+        results={[]}
+        isLoading={true}
+        searchQuery=""
+        publishers={mockPublishers}
+        onPublisherClick={mockOnPublisherClick}
+      />,
+    )
     expect(screen.getByTestId("skeleton-results")).toBeInTheDocument()
   })
 
   test("renders results when isLoading is false", () => {
-    render(<Results results={mockResults} isLoading={false} searchQuery="" />)
+    render(
+      <Results
+        results={mockResults}
+        isLoading={false}
+        searchQuery=""
+        publishers={mockPublishers}
+        onPublisherClick={mockOnPublisherClick}
+      />,
+    )
     expect(screen.getByText("Test Document 1")).toBeInTheDocument()
     expect(screen.getByText("Test Document 2")).toBeInTheDocument()
   })
 
-  // test("highlights search query in title and description", () => {
-  //   render(<Results results={mockResults} isLoading={false} searchQuery="test" />)
-  //   expect(screen.getByText("Test Document 1")).toBeInTheDocument()
-  //   expect(screen.getByText("Test Document 2")).toBeInTheDocument()
-  //   expect(screen.getByText("This is a test document description.")).toBeInTheDocument()
-  //   expect(screen.getByText("Another test document description.")).toBeInTheDocument()
-  // })
-
   test("renders regulatory topics", () => {
-    render(<Results results={mockResults} isLoading={false} searchQuery="" />)
+    render(
+      <Results
+        results={mockResults}
+        isLoading={false}
+        searchQuery=""
+        publishers={mockPublishers}
+        onPublisherClick={mockOnPublisherClick}
+      />,
+    )
     expect(screen.getByText("Topic 1")).toBeInTheDocument()
     expect(screen.getByText("Topic 2")).toBeInTheDocument()
     expect(screen.getByText("Topic 3")).toBeInTheDocument()
   })
 
   test("formats date to GOV.UK style", () => {
-    render(<Results results={mockResults} isLoading={false} searchQuery="" />)
+    render(
+      <Results
+        results={mockResults}
+        isLoading={false}
+        searchQuery=""
+        publishers={mockPublishers}
+        onPublisherClick={mockOnPublisherClick}
+      />,
+    )
     expect(screen.getByText("Last updated: 1 January 2023")).toBeInTheDocument()
     expect(screen.getByText("Last updated: 1 February 2023")).toBeInTheDocument()
   })
+
+  test("calls onPublisherClick with the correct publisher key", () => {
+    render(
+      <Results
+        results={mockResults}
+        isLoading={false}
+        searchQuery=""
+        publishers={mockPublishers}
+        onPublisherClick={mockOnPublisherClick}
+      />,
+    )
+    fireEvent.click(screen.getByText("Test Publisher"))
+    expect(mockOnPublisherClick).toHaveBeenCalledWith("test-publisher")
+    fireEvent.click(screen.getByText("Another Publisher"))
+    expect(mockOnPublisherClick).toHaveBeenCalledWith("another-publisher")
+  })
 })