Channel page updates (#1126)

mitodl · Jun 20, 2024 · 46a881c · 46a881c
1 parent fdaa66a
commit 46a881c
Show file tree

Hide file tree

Showing 8 changed files with 128 additions and 34 deletions.
diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx
@@ -475,6 +475,7 @@ interface SearchDisplayProps {
   clearAllFacets: UseResourceSearchParamsResult["clearAllFacets"]
   toggleParamValue: UseResourceSearchParamsResult["toggleParamValue"]
   patchParams: UseResourceSearchParamsResult["patchParams"]
+  showProfessionalToggle?: boolean
 }
 
 const SearchDisplay: React.FC<SearchDisplayProps> = ({
@@ -489,6 +490,7 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
   clearAllFacets,
   toggleParamValue,
   patchParams,
+  showProfessionalToggle,
 }) => {
   const allParams = useMemo(() => {
     return { ...constantSearchParams, ...requestParams }
@@ -512,10 +514,12 @@ const SearchDisplay: React.FC<SearchDisplayProps> = ({
   const filterContents = (
     <>
       <FacetStyles>
-        <ProfessionalToggle
-          professionalSetting={requestParams.professional}
-          setParamValue={setParamValue}
-        ></ProfessionalToggle>
+        {showProfessionalToggle && (
+          <ProfessionalToggle
+            professionalSetting={requestParams.professional}
+            setParamValue={setParamValue}
+          ></ProfessionalToggle>
+        )}
         <AvailableFacets
           facetManifest={facetManifest}
           activeFacets={requestParams}

diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchInput.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchInput.tsx
@@ -26,7 +26,7 @@ const StyledInput = styled(Input)`
   border-radius: 0;
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
-  max-width: 81%;
+  width: 556px;
   border-right: none;
   height: 48px;
 
@@ -39,6 +39,7 @@ const StyledInput = styled(Input)`
     height: 37px;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
+    width: 80%;
   }
 `
 
@@ -85,6 +86,8 @@ type SearchSubmitHandler = (event: SearchSubmissionEvent) => void
 
 interface SearchInputProps {
   className?: string
+  classNameInput?: string
+
   classNameClear?: string
   classNameSearch?: string
   value: string
@@ -118,13 +121,13 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
     )
 
   return (
-    <StyledFormGroup row>
+    <StyledFormGroup className={props.className} row>
       <StyledInput
         fullWidth={props.fullWidth}
         size={props.size}
         inputProps={muiInputProps}
         autoFocus={props.autoFocus}
-        className={props.className}
+        className={props.classNameInput}
         placeholder={props.placeholder}
         value={props.value}
         onChange={props.onChange}

diff --git a/frontends/mit-open/src/page-components/TestimonialDisplay/TestimonialDisplay.tsx b/frontends/mit-open/src/page-components/TestimonialDisplay/TestimonialDisplay.tsx
@@ -21,6 +21,10 @@ const QuoteContainer = styled.section(({ theme }) => ({
   color: theme.custom.colors.white,
   overflow: "auto",
   padding: "16px 0 24px 0",
+  marginBottom: "80px",
+  [theme.breakpoints.down("md")]: {
+    marginBottom: "40px",
+  },
 }))
 
 const QuoteBlock = styled.div(() => ({

diff --git a/frontends/mit-open/src/pages/FieldPage/FieldPage.tsx b/frontends/mit-open/src/pages/FieldPage/FieldPage.tsx
@@ -10,6 +10,11 @@ import type {
 } from "@mitodl/course-search-utils"
 import { ChannelTypeEnum } from "api/v0"
 import TestimonialDisplay from "@/page-components/TestimonialDisplay/TestimonialDisplay"
+import { styled } from "ol-components"
+
+export const StyledTestimonialDisplay = styled(TestimonialDisplay)`
+  margin-bottom: 80px;
+`
 
 type RouteParams = {
   channelType: ChannelTypeEnum
@@ -34,7 +39,7 @@ const FieldPage: React.FC = () => {
       <FieldPageSkeleton name={name} channelType={channelType}>
         <p>{fieldQuery.data?.public_description}</p>
         {channelType === "unit" ? (
-          <TestimonialDisplay offerors={[name]} />
+          <StyledTestimonialDisplay offerors={[name]} />
         ) : null}
         {fieldQuery.data?.search_filter && (
           <FieldSearch

diff --git a/frontends/mit-open/src/pages/FieldPage/FieldPageSkeleton.tsx b/frontends/mit-open/src/pages/FieldPage/FieldPageSkeleton.tsx
@@ -37,7 +37,7 @@ export const FieldTitleRow = styled.div`
 const FeaturedCoursesCarousel = styled(ResourceCarousel)(({ theme }) => ({
   margin: "80px 0",
   [theme.breakpoints.down("sm")]: {
-    marginTop: "0px",
+    marginTop: "32px",
     marginBottom: "32px",
   },
 }))

diff --git a/frontends/mit-open/src/pages/FieldPage/FieldSearch.test.tsx b/frontends/mit-open/src/pages/FieldPage/FieldSearch.test.tsx
@@ -179,7 +179,13 @@ describe("FieldSearch", () => {
   test.each([
     {
       fieldType: ChannelTypeEnum.Topic,
-      displayedFacets: ["Certificate", "Offered By", "Department", "Format"],
+      displayedFacets: [
+        "Professional",
+        "Certificate",
+        "Offered By",
+        "Department",
+        "Format",
+      ],
     },
     {
       fieldType: ChannelTypeEnum.Department,
@@ -231,6 +237,7 @@ describe("FieldSearch", () => {
       const facetsContainer = screen.getByTestId("facets-container")
 
       for (const facetName of [
+        "Professional",
         "Certificate",
         "Department",
         "Offered By",

diff --git a/frontends/mit-open/src/pages/FieldPage/FieldSearch.tsx b/frontends/mit-open/src/pages/FieldPage/FieldSearch.tsx
@@ -14,9 +14,38 @@ import type {
 } from "@mitodl/course-search-utils"
 import { useSearchParams } from "@mitodl/course-search-utils/react-router"
 import SearchDisplay from "@/page-components/SearchDisplay/SearchDisplay"
+import { SearchInput } from "@/page-components/SearchDisplay/SearchInput"
+
 import { getFacetManifest } from "@/pages/SearchPage/SearchPage"
 
 import _ from "lodash"
+import { styled } from "ol-components"
+
+const SearchInputContainer = styled.div`
+  padding-bottom: 40px;
+  margin-top: 80px;
+
+  ${({ theme }) => theme.breakpoints.down("md")} {
+    padding-bottom: 35px;
+    margin-top: 40px;
+  }
+`
+
+const StyledSearchInput = styled(SearchInput)`
+  justify-content: center;
+  ${({ theme }) => theme.breakpoints.up("md")} {
+    .input-field {
+      height: 40px;
+      width: 450px;
+    }
+
+    .button-field {
+      height: 40px;
+      padding: 12px 16px 12px 12px;
+      width: 20px;
+    }
+  }
+`
 
 const FACETS_BY_CHANNEL_TYPE: Record<ChannelTypeEnum, string[]> = {
   [ChannelTypeEnum.Topic]: [
@@ -35,32 +64,47 @@ const FACETS_BY_CHANNEL_TYPE: Record<ChannelTypeEnum, string[]> = {
   ],
   [ChannelTypeEnum.Unit]: [
     "free",
-    "certification_type",
     "topic",
+    "certification_type",
     "department",
     "learning_format",
   ],
   [ChannelTypeEnum.Pathway]: [],
 }
 
+const SHOW_PROFESSIONAL_TOGGLE_BY_CHANNEL_TYPE: Record<
+  ChannelTypeEnum,
+  boolean
+> = {
+  [ChannelTypeEnum.Topic]: true,
+  [ChannelTypeEnum.Department]: false,
+  [ChannelTypeEnum.Unit]: false,
+  [ChannelTypeEnum.Pathway]: false,
+}
+
 const getFacetManifestForChannelType = (
   channelType: ChannelTypeEnum,
   offerors: Record<string, LearningResourceOfferor>,
   constantSearchParams: Facets,
 ): FacetManifest => {
-  return getFacetManifest(offerors).filter(
-    (facetSetting) =>
-      !Object.keys(constantSearchParams).includes(facetSetting.name) &&
-      (FACETS_BY_CHANNEL_TYPE[channelType] || []).includes(facetSetting.name),
-  ) as FacetManifest
+  const facets = FACETS_BY_CHANNEL_TYPE[channelType] || []
+  return getFacetManifest(offerors)
+    .filter(
+      (facetSetting) =>
+        !Object.keys(constantSearchParams).includes(facetSetting.name) &&
+        facets.includes(facetSetting.name),
+    )
+    .sort(
+      (a, b) => facets.indexOf(a.name) - facets.indexOf(b.name),
+    ) as FacetManifest
 }
 
-interface FeildSearchProps {
+interface FieldSearchProps {
   constantSearchParams: Facets & BooleanFacets
   channelType: ChannelTypeEnum
 }
 
-const FieldSearch: React.FC<FeildSearchProps> = ({
+const FieldSearch: React.FC<FieldSearchProps> = ({
   constantSearchParams,
   channelType,
 }) => {
@@ -119,6 +163,9 @@ const FieldSearch: React.FC<FeildSearchProps> = ({
     clearAllFacets,
     toggleParamValue,
     patchParams,
+    currentText,
+    setCurrentText,
+    setCurrentTextAndQuery,
   } = useResourceSearchParams({
     searchParams,
     setSearchParams,
@@ -128,19 +175,40 @@ const FieldSearch: React.FC<FeildSearchProps> = ({
   const page = +(searchParams.get("page") ?? "1")
 
   return (
-    <SearchDisplay
-      page={page}
-      requestParams={params}
-      setPage={setPage}
-      facetManifest={facetManifest}
-      facetNames={facetNames}
-      constantSearchParams={constantSearchParams}
-      hasFacets={hasFacets}
-      setParamValue={setParamValue}
-      clearAllFacets={clearAllFacets}
-      toggleParamValue={toggleParamValue}
-      patchParams={patchParams}
-    />
+    <div>
+      <SearchInputContainer>
+        <StyledSearchInput
+          value={currentText}
+          onChange={(e) => setCurrentText(e.target.value)}
+          onSubmit={(e) => {
+            setCurrentTextAndQuery(e.target.value)
+          }}
+          onClear={() => {
+            setCurrentTextAndQuery("")
+          }}
+          classNameInput="input-field"
+          classNameSearch="button-field"
+          placeholder="Search for courses, programs, and learning materials..."
+        />
+      </SearchInputContainer>
+
+      <SearchDisplay
+        page={page}
+        requestParams={params}
+        setPage={setPage}
+        facetManifest={facetManifest}
+        facetNames={facetNames}
+        constantSearchParams={constantSearchParams}
+        hasFacets={hasFacets}
+        setParamValue={setParamValue}
+        clearAllFacets={clearAllFacets}
+        toggleParamValue={toggleParamValue}
+        patchParams={patchParams}
+        showProfessionalToggle={
+          SHOW_PROFESSIONAL_TOGGLE_BY_CHANNEL_TYPE[channelType]
+        }
+      />
+    </div>
   )
 }
 

diff --git a/frontends/mit-open/src/pages/SearchPage/SearchPage.tsx b/frontends/mit-open/src/pages/SearchPage/SearchPage.tsx
@@ -48,8 +48,10 @@ const BackgroundImage = styled.img`
 `
 
 const SearchField = styled(SearchInput)`
-  background-color: ${({ theme }) => theme.custom.colors.white};
-  width: 100%;
+  ${({ theme }) => theme.breakpoints.up("md")} {
+    width: 680px;
+    min-width: 680px;
+  }
 `
 
 export const getFacetManifest = (
@@ -178,7 +180,7 @@ const SearchPage: React.FC = () => {
         <BackgroundImage src="/static/images/search_page_vector.png" />
         <Container>
           <GridContainer>
-            <GridColumn variant="sidebar-2-wide-main"></GridColumn>
+            <GridColumn variant="sidebar-2"></GridColumn>
             <Grid item xs={12} md={6} container alignItems="center">
               <SearchField
                 value={currentText}
@@ -207,6 +209,7 @@ const SearchPage: React.FC = () => {
         clearAllFacets={clearAllFacets}
         toggleParamValue={toggleParamValue}
         patchParams={patchParams}
+        showProfessionalToggle
       />
     </>
   )