diff --git a/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/mit-open/src/page-components/SearchDisplay/SearchDisplay.tsx index 0dc9f2a402..51d28b61a2 100644 --- 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 = ({ @@ -489,6 +490,7 @@ const SearchDisplay: React.FC = ({ clearAllFacets, toggleParamValue, patchParams, + showProfessionalToggle, }) => { const allParams = useMemo(() => { return { ...constantSearchParams, ...requestParams } @@ -512,10 +514,12 @@ const SearchDisplay: React.FC = ({ const filterContents = ( <> - + {showProfessionalToggle && ( + + )} void interface SearchInputProps { className?: string + classNameInput?: string + classNameClear?: string classNameSearch?: string value: string @@ -118,13 +121,13 @@ const SearchInput: React.FC = (props) => { ) return ( - + ({ 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 index f82642a5fc..c6427fdeea 100644 --- 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 = () => {

{fieldQuery.data?.public_description}

{channelType === "unit" ? ( - + ) : null} {fieldQuery.data?.search_filter && ( ({ 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 index 2f0c284a45..2d74a04256 100644 --- 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 index 1af24092cc..4671755530 100644 --- 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.Topic]: [ @@ -35,32 +64,47 @@ const FACETS_BY_CHANNEL_TYPE: Record = { ], [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, 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 = ({ +const FieldSearch: React.FC = ({ constantSearchParams, channelType, }) => { @@ -119,6 +163,9 @@ const FieldSearch: React.FC = ({ clearAllFacets, toggleParamValue, patchParams, + currentText, + setCurrentText, + setCurrentTextAndQuery, } = useResourceSearchParams({ searchParams, setSearchParams, @@ -128,19 +175,40 @@ const FieldSearch: React.FC = ({ const page = +(searchParams.get("page") ?? "1") return ( - +
+ + 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..." + /> + + + +
) } diff --git a/frontends/mit-open/src/pages/SearchPage/SearchPage.tsx b/frontends/mit-open/src/pages/SearchPage/SearchPage.tsx index 61d88de735..66edf789f0 100644 --- 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 = () => { - + { clearAllFacets={clearAllFacets} toggleParamValue={toggleParamValue} patchParams={patchParams} + showProfessionalToggle /> )