some tidy up. extract code, extract css

Author: jonathanwelch1-nhs

.github/workflows/run_regression_tests.yml

@@ -73,7 +73,7 @@ jobs:
           GITHUB-TOKEN: ${{ steps.generate-token.outputs.token }}
         run: |
           if [[ "$TARGET_ENVIRONMENT" != "prod" && "$TARGET_ENVIRONMENT" != "ref" ]]; then
-            REGRESSION_TEST_REPO_TAG="v3.5.10" # This is the tag or branch of the regression test code to run, usually a version tag like v3.1.0 or a branch name
+            REGRESSION_TEST_REPO_TAG="aea-5327-tabsets" # This is the tag or branch of the regression test code to run, usually a version tag like v3.1.0 or a branch name
             REGRESSION_TEST_WORKFLOW_TAG="v3.5.10" # This is the tag of the github workflow to run, usually the same as REGRESSION_TEST_REPO_TAG
 
             if [[ -z "$REGRESSION_TEST_REPO_TAG" || -z "$REGRESSION_TEST_WORKFLOW_TAG" ]]; then

packages/cpt-ui/src/pages/SearchPrescriptionPage.tsx

@@ -14,6 +14,7 @@ import BasicDetailsSearch from "@/components/prescriptionSearch/BasicDetailsSear
 
 import {HERO_TEXT} from "@/constants/ui-strings/SearchForAPrescriptionStrings"
 import {PRESCRIPTION_SEARCH_TABS} from "@/constants/ui-strings/SearchTabStrings"
+import "@/styles/searchforaprescription.scss"
 
 export default function SearchPrescriptionPage() {
   const location = useLocation()
@@ -41,48 +42,49 @@ export default function SearchPrescriptionPage() {
     setActiveTab(tabIndex)
   }, [pathname])
 
-  const handleTabClick = (tabIndex: number) => {
-    setActiveTab(tabIndex)
-    navigate(PRESCRIPTION_SEARCH_TABS[tabIndex].link)
-
-    // Focus on the search input after navigation
-    setTimeout(() => {
-      let inputId: string | null = null
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Only handle arrow keys when not focused on an input element
+      const activeElement = document.activeElement
+      const isInputFocused = activeElement && (
+        activeElement.tagName === "INPUT" ||
+        activeElement.tagName === "TEXTAREA" ||
+        activeElement.tagName === "SELECT" ||
+        activeElement.hasAttribute("contenteditable")
+      )
 
-      switch (tabIndex) {
-        case 0:
-          inputId = "presc-id-input"
-          break
-        case 1:
-          inputId = "nhs-number-input"
-          break
-        case 2: {
-          // Remove focus from the tab after navigation for basic details
-          const activeElement = document.activeElement as HTMLElement
-          if (activeElement && activeElement.blur) {
-            activeElement.blur()
-          }
-          break
-        }
-        default:
-          break
+      if (isInputFocused) {
+        return
       }
 
-      if (inputId) {
-        const inputElement = document.getElementById(inputId) as HTMLInputElement
-        if (inputElement) {
-          inputElement.focus()
-        }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        const newIndex = activeTab > 0 ? activeTab - 1 : PRESCRIPTION_SEARCH_TABS.length - 1
+        handleTabClick(newIndex)
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        const newIndex = activeTab < PRESCRIPTION_SEARCH_TABS.length - 1 ? activeTab + 1 : 0
+        handleTabClick(newIndex)
       }
-    }, 100)
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [activeTab])
+
+  const handleTabClick = (tabIndex: number) => {
+    setActiveTab(tabIndex)
+    navigate(PRESCRIPTION_SEARCH_TABS[tabIndex].link)
   }
 
   // Default to prescription ID search if path not found
   const content = pathContent[pathname] || <PrescriptionIdSearch />
 
   return (
     <Fragment>
-      <title>Search for a prescription</title>
+      <title>{HERO_TEXT}</title>
       <main id="search-for-a-prescription" data-testid="search-for-a-prescription">
         <Container className="hero-container" data-testid="search-hero-container">
           <Row>
@@ -112,22 +114,12 @@ export default function SearchPrescriptionPage() {
             </Col>
           </Row>
         </Container>
-        <div style={{
-          width: "100vw",
-          marginLeft: "calc(-50vw + 50%)",
-          borderBottom: "1px solid #d8dde0",
-          height: "1px",
-          backgroundColor: "white"
-        }}></div>
-        <div style={{
-          width: "100vw",
-          marginLeft: "calc(-50vw + 50%)",
-          backgroundColor: "#F0F4F5"
-        }}>
+        <div className="tab-divider"></div>
+        <div className="content-wrapper">
           <Container>
             <Row>
               <Col width="full">
-                <div style={{padding: "2rem"}}>
+                <div className="content-padding">
                   {content}
                 </div>
               </Col>

packages/cpt-ui/src/styles/searchforaprescription.scss

@@ -22,3 +22,25 @@
     margin: 0 16px;
     max-width: 960px;
 }
+
+.nhsuk-tab-set {
+    text-decoration: underline;
+}
+
+.tab-divider {
+    width: 100vw;
+    margin-left: calc(-50vw + 50%);
+    border-bottom: 1px solid #d8dde0;
+    height: 1px;
+    background-color: white;
+}
+
+.content-wrapper {
+    width: 100vw;
+    margin-left: calc(-50vw + 50%);
+    background-color: #F0F4F5;
+}
+
+.content-padding {
+    padding: 2rem;
+}