@@ -248,6 +250,7 @@ const UnitsListingPage: React.FC = () => {
}
title="Academic & Professional Learning"
header="Non-degree learning resources tailored to the needs of students and working professionals."
+ backgroundUrl={backgroundSrcSetCSS(backgroundSteps)}
/>
diff --git a/frontends/main/src/app/c/[channelType]/[name]/page.tsx b/frontends/main/src/app/c/[channelType]/[name]/page.tsx
index 5c33fb3e1a..5cc73220e1 100644
--- a/frontends/main/src/app/c/[channelType]/[name]/page.tsx
+++ b/frontends/main/src/app/c/[channelType]/[name]/page.tsx
@@ -5,6 +5,10 @@ import { ChannelTypeEnum } from "api/v0"
import { getMetadataAsync } from "@/common/metadata"
import handleNotFound from "@/common/handleNotFound"
+type SearchParams = {
+ [key: string]: string | string[] | undefined
+}
+
type RouteParams = {
channelType: ChannelTypeEnum
name: string
@@ -14,10 +18,10 @@ export async function generateMetadata({
searchParams,
params,
}: {
- searchParams: { [key: string]: string | string[] | undefined }
- params: RouteParams
+ searchParams: Promise
+ params: Promise
}) {
- const { channelType, name } = params
+ const { channelType, name } = await params
const { data } = await handleNotFound(
channelsApi.channelsTypeRetrieve({ channel_type: channelType, name: name }),
diff --git a/frontends/main/src/app/dashboard/[tab]/page.tsx b/frontends/main/src/app/dashboard/[tab]/page.tsx
index 3586bb6208..082710c443 100644
--- a/frontends/main/src/app/dashboard/[tab]/page.tsx
+++ b/frontends/main/src/app/dashboard/[tab]/page.tsx
@@ -10,6 +10,7 @@ export const metadata: Metadata = standardizeMetadata({
title: "Your MIT Learning Journey",
social: false,
})
+
const Page: React.FC = () => {
return (
diff --git a/frontends/main/src/app/page.tsx b/frontends/main/src/app/page.tsx
index f6406e519a..34dd27b718 100644
--- a/frontends/main/src/app/page.tsx
+++ b/frontends/main/src/app/page.tsx
@@ -3,10 +3,14 @@ import type { Metadata } from "next"
import HomePage from "@/app-pages/HomePage/HomePage"
import { getMetadataAsync } from "@/common/metadata"
+type SearchParams = {
+ [key: string]: string | string[] | undefined
+}
+
export async function generateMetadata({
searchParams,
}: {
- searchParams: { [key: string]: string | string[] | undefined }
+ searchParams: Promise
}): Promise {
return await getMetadataAsync({
title: "Learn with MIT",
diff --git a/frontends/main/src/app/program_letter/[id]/view/page.tsx b/frontends/main/src/app/program_letter/[id]/view/page.tsx
index faa058688c..849a6050e5 100644
--- a/frontends/main/src/app/program_letter/[id]/view/page.tsx
+++ b/frontends/main/src/app/program_letter/[id]/view/page.tsx
@@ -1,5 +1,5 @@
import React from "react"
-import ProgramLetterPage from "@/app-pages/ProgramLetterPage/[id]/view/ProgramLetterPage"
+import ProgramLetterPage from "@/app-pages/ProgramLetterPage/ProgramLetterPage"
const Page: React.FC = () => {
return
diff --git a/frontends/main/src/app/search/page.tsx b/frontends/main/src/app/search/page.tsx
index adc7151f65..71c7723373 100644
--- a/frontends/main/src/app/search/page.tsx
+++ b/frontends/main/src/app/search/page.tsx
@@ -2,10 +2,14 @@ import React from "react"
import { getMetadataAsync } from "@/common/metadata"
import SearchPage from "@/app-pages/SearchPage/SearchPage"
+type SearchParams = {
+ [key: string]: string | string[] | undefined
+}
+
export async function generateMetadata({
searchParams,
}: {
- searchParams: { [key: string]: string | string[] | undefined }
+ searchParams: Promise
}) {
return await getMetadataAsync({
title: "Search",
@@ -18,7 +22,7 @@ export async function generateMetadata({
* 1. wrap the in Suspense
* 2. or force-dynamic.
*
- * (1) caused a hydration error for authenticated users. We haven not found
+ * (1) caused a hydration error for authenticated users. We have not found
* the root cause of the hydration error.
*
* (2) seems to work well.
diff --git a/frontends/main/src/common/feature_flags.ts b/frontends/main/src/common/feature_flags.ts
index 8d6e479d1e..0a21e9c50c 100644
--- a/frontends/main/src/common/feature_flags.ts
+++ b/frontends/main/src/common/feature_flags.ts
@@ -3,4 +3,5 @@
export enum FeatureFlags {
EnableEcommerce = "enable-ecommerce",
+ DrawerV2Enabled = "lr_drawer_v2",
}
diff --git a/frontends/main/src/common/metadata.ts b/frontends/main/src/common/metadata.ts
index c112873175..583e5a6383 100644
--- a/frontends/main/src/common/metadata.ts
+++ b/frontends/main/src/common/metadata.ts
@@ -10,7 +10,7 @@ type MetadataAsyncProps = {
description?: string
image?: string
imageAlt?: string
- searchParams?: { [key: string]: string | string[] | undefined }
+ searchParams?: Promise<{ [key: string]: string | string[] | undefined }>
social?: boolean
} & Metadata
@@ -28,7 +28,7 @@ export const getMetadataAsync = async ({
...otherMeta
}: MetadataAsyncProps) => {
// The learning resource drawer is open
- const learningResourceId = searchParams?.[RESOURCE_DRAWER_QUERY_PARAM]
+ const learningResourceId = (await searchParams)?.[RESOURCE_DRAWER_QUERY_PARAM]
if (learningResourceId) {
const { data } = await handleNotFound(
learningResourcesApi.learningResourcesRetrieve({
diff --git a/frontends/main/src/page-components/Header/Header.tsx b/frontends/main/src/page-components/Header/Header.tsx
index e5cb4b7584..93ef5bcdb9 100644
--- a/frontends/main/src/page-components/Header/Header.tsx
+++ b/frontends/main/src/page-components/Header/Header.tsx
@@ -295,7 +295,7 @@ const Header: FunctionComponent = () => {
desktopTrigger.current,
mobileTrigger.current,
]}
- navdata={navData}
+ navData={navData}
open={drawerOpen}
onClose={toggleDrawer.off}
/>
diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
index f44c66a218..91b245197a 100644
--- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
+++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
@@ -101,7 +101,6 @@ const ImageContainer = styled.div(({ theme }) => ({
alignItems: "center",
justifyContent: "center",
marginTop: "44px",
- transform: "translateX(48px)",
width: "513px",
aspectRatio: "513 / 522",
[theme.breakpoints.down("md")]: {
@@ -109,6 +108,7 @@ const ImageContainer = styled.div(({ theme }) => ({
},
img: {
width: "100%",
+ transform: "translateX(48px)",
},
position: "relative",
}))
@@ -209,13 +209,7 @@ const HeroImage: React.FC = () => {
return (
-
+
)
}
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
index eea8943d73..5eee0c4a99 100644
--- a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
@@ -1,132 +1,14 @@
-import React, { Suspense, useCallback, useEffect, useMemo } from "react"
-import {
- RoutedDrawer,
- LearningResourceExpanded,
- imgConfigs,
-} from "ol-components"
-import type {
- LearningResourceCardProps,
- RoutedDrawerProps,
-} from "ol-components"
-import { useLearningResourcesDetail } from "api/hooks/learningResources"
-import { useSearchParams, ReadonlyURLSearchParams } from "next/navigation"
-
+import React, { useCallback } from "react"
import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
-import { useUserMe } from "api/hooks/user"
-import NiceModal from "@ebay/nice-modal-react"
-import {
- AddToLearningPathDialog,
- AddToUserListDialog,
-} from "../Dialogs/AddToListDialog"
-import { SignupPopover } from "../SignupPopover/SignupPopover"
-import { usePostHog } from "posthog-js/react"
-
-const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const
-
-const useCapturePageView = (resourceId: number) => {
- const { data, isSuccess } = useLearningResourcesDetail(Number(resourceId))
- const posthog = usePostHog()
- const apiKey = process.env.NEXT_PUBLIC_POSTHOG_API_KEY
-
- useEffect(() => {
- if (!apiKey || apiKey.length < 1) return
- if (!isSuccess) return
- posthog.capture("lrd_view", {
- resourceId: data?.id,
- readableId: data?.readable_id,
- platformCode: data?.platform?.code,
- resourceType: data?.resource_type,
- })
- }, [
- isSuccess,
- posthog,
- data?.id,
- data?.readable_id,
- data?.platform?.code,
- data?.resource_type,
- apiKey,
- ])
-}
-
-/**
- * Convert HTML to plaintext, removing any HTML tags.
- * This conversion method has some issues:
- * 1. It is unsafe for untrusted HTML
- * 2. It must be run in a browser, not on a server.
- */
-// eslint-disable-next-line camelcase
-// const unsafe_html2plaintext = (text: string) => {
-// const div = document.createElement("div")
-// div.innerHTML = text
-// return div.textContent || div.innerText || ""
-// }
-
-const DrawerContent: React.FC<{
- resourceId: number
-}> = ({ resourceId }) => {
- const resource = useLearningResourcesDetail(Number(resourceId))
- const [signupEl, setSignupEl] = React.useState(null)
- const { data: user } = useUserMe()
- const handleAddToLearningPathClick: LearningResourceCardProps["onAddToLearningPathClick"] =
- useMemo(() => {
- if (user?.is_learning_path_editor) {
- return (event, resourceId: number) => {
- NiceModal.show(AddToLearningPathDialog, { resourceId })
- }
- }
- return null
- }, [user])
- const handleAddToUserListClick: LearningResourceCardProps["onAddToUserListClick"] =
- useMemo(() => {
- return (event, resourceId: number) => {
- if (!user?.is_authenticated) {
- setSignupEl(event.currentTarget)
- return
- }
- NiceModal.show(AddToUserListDialog, { resourceId })
- }
- }, [user])
- useCapturePageView(Number(resourceId))
-
- return (
- <>
-
- setSignupEl(null)} />
-
- )
-}
-
-const PAPER_PROPS: RoutedDrawerProps["PaperProps"] = {
- sx: {
- maxWidth: (theme) => theme.breakpoints.values.sm,
- minWidth: (theme) => ({
- [theme.breakpoints.down("sm")]: {
- minWidth: "100%",
- },
- }),
- },
-}
+import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import LearningResourceDrawerV2 from "./LearningResourceDrawerV2"
+import LearningResourceDrawerV1 from "./LearningResourceDrawerV1"
+import { FeatureFlags } from "@/common/feature_flags"
const LearningResourceDrawer = () => {
- return (
-
-
- {({ params }) => {
- return
- }}
-
-
- )
+ const drawerV2 = useFeatureFlagEnabled(FeatureFlags.DrawerV2Enabled)
+ return drawerV2 ? :
}
const getOpenDrawerSearchParams = (
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV1.test.tsx
similarity index 83%
rename from frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx
rename to frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV1.test.tsx
index 391c2a25e9..b056bd0cc7 100644
--- a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.test.tsx
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV1.test.tsx
@@ -6,9 +6,9 @@ import {
waitFor,
within,
} from "@/test-utils"
-import LearningResourceDrawer from "./LearningResourceDrawer"
+import LearningResourceDrawerV1 from "./LearningResourceDrawerV1"
import { urls, factories, setMockResponse } from "api/test-utils"
-import { LearningResourceExpanded } from "ol-components"
+import { LearningResourceExpandedV1 } from "ol-components"
import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
import { ResourceTypeEnum } from "api"
import invariant from "tiny-invariant"
@@ -17,7 +17,7 @@ jest.mock("ol-components", () => {
const actual = jest.requireActual("ol-components")
return {
...actual,
- LearningResourceExpanded: jest.fn(actual.LearningResourceExpanded),
+ LearningResourceExpandedV1: jest.fn(actual.LearningResourceExpandedV1),
}
})
@@ -33,7 +33,7 @@ jest.mock("posthog-js/react", () => ({
},
}))
-describe("LearningResourceDrawer", () => {
+describe("LearningResourceDrawerV1", () => {
it.each([
{ descriptor: "is enabled", enablePostHog: true },
{ descriptor: "is not enabled", enablePostHog: false },
@@ -50,12 +50,12 @@ describe("LearningResourceDrawer", () => {
resource,
)
- renderWithProviders(, {
+ renderWithProviders(, {
url: `?dog=woof&${RESOURCE_DRAWER_QUERY_PARAM}=${resource.id}`,
})
- expect(LearningResourceExpanded).toHaveBeenCalled()
+ expect(LearningResourceExpandedV1).toHaveBeenCalled()
await waitFor(() => {
- expectProps(LearningResourceExpanded, { resource })
+ expectProps(LearningResourceExpandedV1, { resource })
})
await screen.findByRole("heading", { name: resource.title })
@@ -68,10 +68,10 @@ describe("LearningResourceDrawer", () => {
)
it("Does not render drawer content when resource=id is NOT in the URL", async () => {
- renderWithProviders(, {
+ renderWithProviders(, {
url: "?dog=woof",
})
- expect(LearningResourceExpanded).not.toHaveBeenCalled()
+ expect(LearningResourceExpandedV1).not.toHaveBeenCalled()
})
test.each([
@@ -118,14 +118,14 @@ describe("LearningResourceDrawer", () => {
setMockResponse.get(urls.userMe.get(), null, { code: 403 })
}
- renderWithProviders(, {
+ renderWithProviders(, {
url: `?resource=${resource.id}`,
})
- expect(LearningResourceExpanded).toHaveBeenCalled()
+ expect(LearningResourceExpandedV1).toHaveBeenCalled()
await waitFor(() => {
- expectProps(LearningResourceExpanded, { resource })
+ expectProps(LearningResourceExpandedV1, { resource })
})
const section = screen
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV1.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV1.tsx
new file mode 100644
index 0000000000..cade51dba8
--- /dev/null
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV1.tsx
@@ -0,0 +1,131 @@
+import React, { Suspense, useEffect, useMemo } from "react"
+import {
+ RoutedDrawer,
+ LearningResourceExpandedV1,
+ imgConfigs,
+} from "ol-components"
+import type {
+ LearningResourceCardProps,
+ RoutedDrawerProps,
+} from "ol-components"
+import { useLearningResourcesDetail } from "api/hooks/learningResources"
+
+import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
+import { useUserMe } from "api/hooks/user"
+import NiceModal from "@ebay/nice-modal-react"
+import {
+ AddToLearningPathDialog,
+ AddToUserListDialog,
+} from "../Dialogs/AddToListDialog"
+import { SignupPopover } from "../SignupPopover/SignupPopover"
+import { usePostHog } from "posthog-js/react"
+
+const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const
+
+const useCapturePageView = (resourceId: number) => {
+ const { data, isSuccess } = useLearningResourcesDetail(Number(resourceId))
+ const posthog = usePostHog()
+ const apiKey = process.env.NEXT_PUBLIC_POSTHOG_API_KEY
+
+ useEffect(() => {
+ if (!apiKey || apiKey.length < 1) return
+ if (!isSuccess) return
+ posthog.capture("lrd_view", {
+ resourceId: data?.id,
+ readableId: data?.readable_id,
+ platformCode: data?.platform?.code,
+ resourceType: data?.resource_type,
+ })
+ }, [
+ isSuccess,
+ posthog,
+ data?.id,
+ data?.readable_id,
+ data?.platform?.code,
+ data?.resource_type,
+ apiKey,
+ ])
+}
+
+/**
+ * Convert HTML to plaintext, removing any HTML tags.
+ * This conversion method has some issues:
+ * 1. It is unsafe for untrusted HTML
+ * 2. It must be run in a browser, not on a server.
+ */
+// eslint-disable-next-line camelcase
+// const unsafe_html2plaintext = (text: string) => {
+// const div = document.createElement("div")
+// div.innerHTML = text
+// return div.textContent || div.innerText || ""
+// }
+
+const DrawerContent: React.FC<{
+ resourceId: number
+}> = ({ resourceId }) => {
+ const resource = useLearningResourcesDetail(Number(resourceId))
+ const [signupEl, setSignupEl] = React.useState(null)
+ const { data: user } = useUserMe()
+ const handleAddToLearningPathClick: LearningResourceCardProps["onAddToLearningPathClick"] =
+ useMemo(() => {
+ if (user?.is_learning_path_editor) {
+ return (event, resourceId: number) => {
+ NiceModal.show(AddToLearningPathDialog, { resourceId })
+ }
+ }
+ return null
+ }, [user])
+ const handleAddToUserListClick: LearningResourceCardProps["onAddToUserListClick"] =
+ useMemo(() => {
+ return (event, resourceId: number) => {
+ if (!user?.is_authenticated) {
+ setSignupEl(event.currentTarget)
+ return
+ }
+ NiceModal.show(AddToUserListDialog, { resourceId })
+ }
+ }, [user])
+ useCapturePageView(Number(resourceId))
+
+ return (
+ <>
+
+ setSignupEl(null)} />
+
+ )
+}
+
+const PAPER_PROPS: RoutedDrawerProps["PaperProps"] = {
+ sx: {
+ maxWidth: (theme) => theme.breakpoints.values.sm,
+ minWidth: (theme) => ({
+ [theme.breakpoints.down("sm")]: {
+ minWidth: "100%",
+ },
+ }),
+ },
+}
+
+const LearningResourceDrawerV1 = () => {
+ return (
+
+
+ {({ params }) => {
+ return
+ }}
+
+
+ )
+}
+
+export default LearningResourceDrawerV1
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.test.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.test.tsx
new file mode 100644
index 0000000000..dfdb890a32
--- /dev/null
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.test.tsx
@@ -0,0 +1,142 @@
+import React from "react"
+import {
+ expectProps,
+ renderWithProviders,
+ screen,
+ waitFor,
+ within,
+} from "@/test-utils"
+import LearningResourceDrawerV2 from "./LearningResourceDrawerV2"
+import { urls, factories, setMockResponse } from "api/test-utils"
+import { LearningResourceExpandedV2 } from "ol-components"
+import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
+import { ResourceTypeEnum } from "api"
+
+jest.mock("ol-components", () => {
+ const actual = jest.requireActual("ol-components")
+ return {
+ ...actual,
+ LearningResourceExpandedV2: jest.fn(actual.LearningResourceExpandedV2),
+ }
+})
+
+const mockedPostHogCapture = jest.fn()
+
+jest.mock("posthog-js/react", () => ({
+ PostHogProvider: (props: { children: React.ReactNode }) => (
+ {props.children}
+ ),
+
+ usePostHog: () => {
+ return { capture: mockedPostHogCapture }
+ },
+}))
+
+describe("LearningResourceDrawerV2", () => {
+ it.each([
+ { descriptor: "is enabled", enablePostHog: true },
+ { descriptor: "is not enabled", enablePostHog: false },
+ ])(
+ "Renders drawer content when resource=id is in the URL and captures the view if PostHog $descriptor",
+ async ({ enablePostHog }) => {
+ setMockResponse.get(urls.userMe.get(), {})
+ process.env.NEXT_PUBLIC_POSTHOG_API_KEY = enablePostHog
+ ? "12345abcdef" // pragma: allowlist secret
+ : ""
+ const resource = factories.learningResources.resource()
+ setMockResponse.get(
+ urls.learningResources.details({ id: resource.id }),
+ resource,
+ )
+
+ renderWithProviders(, {
+ url: `?dog=woof&${RESOURCE_DRAWER_QUERY_PARAM}=${resource.id}`,
+ })
+ expect(LearningResourceExpandedV2).toHaveBeenCalled()
+ await waitFor(() => {
+ expectProps(LearningResourceExpandedV2, { resource })
+ })
+ await screen.findByText(resource.title)
+
+ if (enablePostHog) {
+ expect(mockedPostHogCapture).toHaveBeenCalled()
+ } else {
+ expect(mockedPostHogCapture).not.toHaveBeenCalled()
+ }
+ },
+ )
+
+ it("Does not render drawer content when resource=id is NOT in the URL", async () => {
+ renderWithProviders(, {
+ url: "?dog=woof",
+ })
+ expect(LearningResourceExpandedV2).not.toHaveBeenCalled()
+ })
+
+ test.each([
+ {
+ isLearningPathEditor: true,
+ isAuthenticated: true,
+ expectAddToLearningPathButton: true,
+ },
+ {
+ isLearningPathEditor: false,
+ isAuthenticated: true,
+ expectAddToLearningPathButton: false,
+ },
+ {
+ isLearningPathEditor: false,
+ isAuthenticated: false,
+ expectAddToLearningPathButton: false,
+ },
+ ])(
+ "Renders call to action section list buttons correctly",
+ async ({
+ isLearningPathEditor,
+ isAuthenticated,
+ expectAddToLearningPathButton,
+ }) => {
+ const resource = factories.learningResources.resource({
+ resource_type: ResourceTypeEnum.Course,
+ runs: [
+ factories.learningResources.run({
+ languages: ["en-us", "es-es", "fr-fr"],
+ }),
+ ],
+ })
+ setMockResponse.get(
+ urls.learningResources.details({ id: resource.id }),
+ resource,
+ )
+ const user = factories.user.user({
+ is_learning_path_editor: isLearningPathEditor,
+ })
+ if (isAuthenticated) {
+ setMockResponse.get(urls.userMe.get(), user)
+ } else {
+ setMockResponse.get(urls.userMe.get(), null, { code: 403 })
+ }
+
+ renderWithProviders(, {
+ url: `?resource=${resource.id}`,
+ })
+
+ expect(LearningResourceExpandedV2).toHaveBeenCalled()
+
+ await waitFor(() => {
+ expectProps(LearningResourceExpandedV2, { resource })
+ })
+
+ const section = screen.getByTestId("drawer-cta")
+
+ const buttons = within(section).getAllByRole("button")
+ const expectedButtons = expectAddToLearningPathButton ? 2 : 1
+ expect(buttons).toHaveLength(expectedButtons)
+ expect(
+ !!within(section).queryByRole("button", {
+ name: "Add to Learning Path",
+ }),
+ ).toBe(expectAddToLearningPathButton)
+ },
+ )
+})
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx
new file mode 100644
index 0000000000..a6bf8352b5
--- /dev/null
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawerV2.tsx
@@ -0,0 +1,146 @@
+import React, { Suspense, useEffect, useMemo } from "react"
+import {
+ RoutedDrawer,
+ LearningResourceExpandedV2,
+ imgConfigs,
+} from "ol-components"
+import type {
+ LearningResourceCardProps,
+ RoutedDrawerProps,
+} from "ol-components"
+import { useLearningResourcesDetail } from "api/hooks/learningResources"
+
+import { RESOURCE_DRAWER_QUERY_PARAM } from "@/common/urls"
+import { useUserMe } from "api/hooks/user"
+import NiceModal from "@ebay/nice-modal-react"
+import {
+ AddToLearningPathDialog,
+ AddToUserListDialog,
+} from "../Dialogs/AddToListDialog"
+import { SignupPopover } from "../SignupPopover/SignupPopover"
+import { usePostHog } from "posthog-js/react"
+
+const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const
+
+const useCapturePageView = (resourceId: number) => {
+ const { data, isSuccess } = useLearningResourcesDetail(Number(resourceId))
+ const posthog = usePostHog()
+ const apiKey = process.env.NEXT_PUBLIC_POSTHOG_API_KEY
+
+ useEffect(() => {
+ if (!apiKey || apiKey.length < 1) return
+ if (!isSuccess) return
+ posthog.capture("lrd_view", {
+ resourceId: data?.id,
+ readableId: data?.readable_id,
+ platformCode: data?.platform?.code,
+ resourceType: data?.resource_type,
+ })
+ }, [
+ isSuccess,
+ posthog,
+ data?.id,
+ data?.readable_id,
+ data?.platform?.code,
+ data?.resource_type,
+ apiKey,
+ ])
+}
+
+/**
+ * Convert HTML to plaintext, removing any HTML tags.
+ * This conversion method has some issues:
+ * 1. It is unsafe for untrusted HTML
+ * 2. It must be run in a browser, not on a server.
+ */
+// eslint-disable-next-line camelcase
+// const unsafe_html2plaintext = (text: string) => {
+// const div = document.createElement("div")
+// div.innerHTML = text
+// return div.textContent || div.innerText || ""
+// }
+
+const DrawerContent: React.FC<{
+ resourceId: number
+ closeDrawer: () => void
+}> = ({ resourceId, closeDrawer }) => {
+ const resource = useLearningResourcesDetail(Number(resourceId))
+ const [signupEl, setSignupEl] = React.useState(null)
+ const { data: user } = useUserMe()
+ const handleAddToLearningPathClick: LearningResourceCardProps["onAddToLearningPathClick"] =
+ useMemo(() => {
+ if (user?.is_learning_path_editor) {
+ return (event, resourceId: number) => {
+ NiceModal.show(AddToLearningPathDialog, { resourceId })
+ }
+ }
+ return null
+ }, [user])
+ const handleAddToUserListClick: LearningResourceCardProps["onAddToUserListClick"] =
+ useMemo(() => {
+ return (event, resourceId: number) => {
+ if (!user?.is_authenticated) {
+ setSignupEl(event.currentTarget)
+ return
+ }
+ NiceModal.show(AddToUserListDialog, { resourceId })
+ }
+ }, [user])
+ useCapturePageView(Number(resourceId))
+
+ return (
+ <>
+
+ setSignupEl(null)} />
+
+ )
+}
+
+const PAPER_PROPS: RoutedDrawerProps["PaperProps"] = {
+ sx: {
+ maxWidth: (theme) => ({
+ [theme.breakpoints.up("md")]: {
+ maxWidth: theme.breakpoints.values.md,
+ },
+ [theme.breakpoints.down("sm")]: {
+ maxWidth: "100%",
+ },
+ }),
+ minWidth: (theme) => ({
+ [theme.breakpoints.down("md")]: {
+ minWidth: "100%",
+ },
+ }),
+ },
+}
+
+const LearningResourceDrawerV2 = () => {
+ return (
+
+
+ {({ params, closeDrawer }) => {
+ return (
+
+ )
+ }}
+
+
+ )
+}
+
+export default LearningResourceDrawerV2
diff --git a/frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx b/frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx
index 71a7bedde3..79ef2ade33 100644
--- a/frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx
+++ b/frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx
@@ -15,6 +15,7 @@ import {
Drawer,
Checkbox,
VisuallyHidden,
+ Stack,
} from "ol-components"
import {
@@ -60,8 +61,6 @@ const StyledResourceTabs = styled(ResourceCategoryTabs.TabList)`
`
const DesktopSortContainer = styled.div`
- float: right;
-
${({ theme }) => theme.breakpoints.down("md")} {
display: none;
}
@@ -439,10 +438,17 @@ const MobileFacetsTitleContainer = styled.div`
}
`
-const StyledGridContainer = styled(GridContainer)`
+const ReversedGridContainer = styled(GridContainer)`
max-width: 1272px !important;
margin-left: 0 !important;
width: 100% !important;
+
+ /**
+ We want the facets to be visually on left, but occur second in the DOM / tab
+ order. This makes it easier for keyboard navigators to get directly to the
+ search results.
+ */
+ flex-direction: row-reverse;
`
const ExplanationContainer = styled.div`
@@ -860,33 +866,8 @@ const SearchDisplay: React.FC = ({
return (
-
+
-
-
-
-
- Filter
-
-
-
- {hasFacets ? (
-
- ) : null}
-
- {filterContents}
-
Search Results
@@ -901,13 +882,15 @@ const SearchDisplay: React.FC = ({
*/}
{isFetching || isLoading ? "" : `${data?.count} results`}
- {sortDropdown}
- setPage(1)}
- />
+
+ setPage(1)}
+ />
+ {sortDropdown}
+
+
+
+
+
+ Filter
+
+
+
+ {hasFacets ? (
+
+ ) : null}
+
+ {filterContents}
+
-
+
)
}
diff --git a/frontends/main/src/page-components/UserListCard/UserListCardCondensed.test.tsx b/frontends/main/src/page-components/UserListCard/UserListCardCondensed.test.tsx
index 562600c4c3..be64937987 100644
--- a/frontends/main/src/page-components/UserListCard/UserListCardCondensed.test.tsx
+++ b/frontends/main/src/page-components/UserListCard/UserListCardCondensed.test.tsx
@@ -3,7 +3,8 @@ import { screen } from "@testing-library/react"
import UserListCardCondensed from "./UserListCardCondensed"
import * as factories from "api/test-utils/factories"
import { userListView } from "@/common/urls"
-import { renderWithProviders } from "@/test-utils"
+import { renderWithProviders, user } from "@/test-utils"
+import invariant from "tiny-invariant"
const userListFactory = factories.userLists
@@ -18,4 +19,16 @@ describe("UserListCard", () => {
)
screen.getByText(userList.title)
})
+
+ test("Clicking card navigates to href", async () => {
+ const userList = userListFactory.userList()
+ renderWithProviders(
+ ,
+ )
+ const link = screen.getByRole("link", { name: userList.title })
+ expect(link).toHaveAttribute("href", "#test")
+ invariant(link.parentElement)
+ await user.click(link.parentElement)
+ expect(window.location.hash).toBe("#test")
+ })
})
diff --git a/frontends/main/src/page-components/UserListCard/UserListCardCondensed.tsx b/frontends/main/src/page-components/UserListCard/UserListCardCondensed.tsx
index 1689b5bd71..fb6514c113 100644
--- a/frontends/main/src/page-components/UserListCard/UserListCardCondensed.tsx
+++ b/frontends/main/src/page-components/UserListCard/UserListCardCondensed.tsx
@@ -3,6 +3,7 @@ import { UserList } from "api"
import { pluralize } from "ol-utilities"
import { RiListCheck3 } from "@remixicon/react"
import { ListCardCondensed, styled, theme, Typography } from "ol-components"
+import Link from "next/link"
const StyledCard = styled(ListCardCondensed)({
display: "flex",
@@ -37,24 +38,29 @@ const IconContainer = styled.div(({ theme }) => ({
},
}))
-type UserListCardCondensedProps = {
- userList: U
- href?: string
+type UserListCardCondensedProps = {
+ userList: UserList
+ href: string
className?: string
}
-const UserListCardCondensed = ({
+const UserListCardCondensed = ({
userList,
href,
className,
-}: UserListCardCondensedProps) => {
+}: UserListCardCondensedProps) => {
return (
-
+
-
- {userList.title}
-
+
+
+ {userList.title}
+
+
{userList.item_count} {pluralize("item", userList.item_count)}
diff --git a/frontends/ol-components/package.json b/frontends/ol-components/package.json
index 3cdaeab6f4..78045e5752 100644
--- a/frontends/ol-components/package.json
+++ b/frontends/ol-components/package.json
@@ -16,11 +16,11 @@
"@dnd-kit/utilities": "^3.2.1",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@mui/base": "5.0.0-beta.60",
- "@mui/lab": "^5.0.0-alpha.172",
- "@mui/material": "^5.16.1",
- "@mui/material-nextjs": "^5.16.6",
- "@mui/system": "^5.16.1",
+ "@mui/base": "5.0.0-beta.61",
+ "@mui/lab": "6.0.0-beta.14",
+ "@mui/material": "^6.1.6",
+ "@mui/material-nextjs": "^6.1.6",
+ "@mui/system": "^6.1.6",
"@remixicon/react": "^4.2.0",
"@testing-library/dom": "^10.4.0",
"@types/react-dom": "^18.3.0",
@@ -30,7 +30,7 @@
"iso-639-1": "^3.1.2",
"lodash": "^4.17.21",
"material-ui-popup-state": "^5.1.0",
- "next": "^14.2.7",
+ "next": "^15.0.2",
"ol-test-utilities": "0.0.0",
"ol-utilities": "0.0.0",
"react": "18.3.1",
diff --git a/frontends/ol-components/src/components/Banner/Banner.tsx b/frontends/ol-components/src/components/Banner/Banner.tsx
index a908fb5a74..22dd0bdaa6 100644
--- a/frontends/ol-components/src/components/Banner/Banner.tsx
+++ b/frontends/ol-components/src/components/Banner/Banner.tsx
@@ -27,26 +27,32 @@ const BannerBackground = styled.div(
backgroundUrl = DEFAULT_BACKGROUND_IMAGE_URL,
backgroundSize = "cover",
backgroundDim = 0,
- }) => ({
- backgroundAttachment: "fixed",
- backgroundImage: backgroundDim
- ? `linear-gradient(rgba(0 0 0 / ${backgroundDim}%), rgba(0 0 0 / ${backgroundDim}%)), url('${backgroundUrl}')`
- : `url(${backgroundUrl})`,
- backgroundSize: backgroundSize,
- backgroundPosition: "center top",
- backgroundRepeat: "no-repeat",
- color: theme.custom.colors.white,
- padding: "48px 0 48px 0",
- [theme.breakpoints.up("lg")]: {
- backgroundSize:
- backgroundUrl === DEFAULT_BACKGROUND_IMAGE_URL
- ? "140%"
- : backgroundSize,
- },
- [theme.breakpoints.down("sm")]: {
- padding: "32px 0 32px 0",
- },
- }),
+ }) => {
+ const backgroundUrlFn = backgroundUrl.startsWith("image-set(")
+ ? backgroundUrl
+ : `url('${backgroundUrl}')`
+
+ return {
+ backgroundAttachment: "fixed",
+ backgroundImage: backgroundDim
+ ? `linear-gradient(rgba(0 0 0 / ${backgroundDim}%), rgba(0 0 0 / ${backgroundDim}%)), ${backgroundUrlFn}`
+ : backgroundUrlFn,
+ backgroundSize: backgroundSize,
+ backgroundPosition: "center top",
+ backgroundRepeat: "no-repeat",
+ color: theme.custom.colors.white,
+ padding: "48px 0 48px 0",
+ [theme.breakpoints.up("lg")]: {
+ backgroundSize:
+ backgroundUrl === DEFAULT_BACKGROUND_IMAGE_URL
+ ? "140%"
+ : backgroundSize,
+ },
+ [theme.breakpoints.down("sm")]: {
+ padding: "32px 0 32px 0",
+ },
+ }
+ },
)
const InnerContainer = styled.div(({ theme }) => ({
diff --git a/frontends/ol-components/src/components/Card/Card.stories.tsx b/frontends/ol-components/src/components/Card/Card.stories.tsx
index 2d309b5996..9e07de7686 100644
--- a/frontends/ol-components/src/components/Card/Card.stories.tsx
+++ b/frontends/ol-components/src/components/Card/Card.stories.tsx
@@ -1,10 +1,11 @@
import React from "react"
import type { Meta, StoryObj } from "@storybook/react"
import { Card } from "./Card"
+import type { CardProps } from "./Card"
import { ActionButton } from "../Button/Button"
import { RiMenuAddLine, RiBookmarkLine } from "@remixicon/react"
-const meta: Meta = {
+const meta: Meta = {
title: "smoot-design/Cards/Card",
argTypes: {
size: {
@@ -19,7 +20,7 @@ const meta: Meta = {
alt="Provide a meaningful description or leave this blank."
/>
Info
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit
@@ -51,7 +52,7 @@ const meta: Meta = {
export default meta
-type Story = StoryObj
+type Story = StoryObj
export const Medium: Story = {
args: {
diff --git a/frontends/ol-components/src/components/Card/Card.test.tsx b/frontends/ol-components/src/components/Card/Card.test.tsx
index a087bedb6d..8c1afc94cf 100644
--- a/frontends/ol-components/src/components/Card/Card.test.tsx
+++ b/frontends/ol-components/src/components/Card/Card.test.tsx
@@ -1,8 +1,10 @@
-import { render } from "@testing-library/react"
+import { render, screen } from "@testing-library/react"
+import user from "@testing-library/user-event"
import { Card } from "./Card"
import React from "react"
import { getOriginalSrc } from "ol-test-utilities"
import invariant from "tiny-invariant"
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider"
describe("Card", () => {
test("has class MitCard-root on root element", () => {
@@ -14,6 +16,7 @@ describe("Card", () => {
Footer
Actions
,
+ { wrapper: ThemeProvider },
)
const card = container.firstChild as HTMLElement
const title = card.querySelector(".MitCard-title")
@@ -37,4 +40,99 @@ describe("Card", () => {
expect(footer).toHaveTextContent("Footer")
expect(actions).toHaveTextContent("Actions")
})
+
+ test.each([
+ { forwardClicksToLink: true, finalHref: "#woof" },
+ { forwardClicksToLink: false, finalHref: "" },
+ ])(
+ "The whole card is clickable as a link if forwardClicksToLink ($forwardClicksToLink)",
+ async ({ forwardClicksToLink, finalHref }) => {
+ render(
+
+ Title
+
+ Info
+ Footer
+ Actions
+ ,
+ { wrapper: ThemeProvider },
+ )
+ const card = document.querySelector(".MitCard-root")
+ invariant(card instanceof HTMLDivElement) // Sanity: Chceck it's not an anchor
+
+ await user.click(card)
+ expect(window.location.hash).toBe(finalHref)
+ },
+ )
+
+ test.each([
+ { forwardClicksToLink: true, finalHref: "#meow" },
+ { forwardClicksToLink: false, finalHref: "" },
+ ])(
+ "The whole card is clickable as a link when using Content when forwardClicksToLink ($forwardClicksToLink), except buttons and links",
+ async ({ finalHref, forwardClicksToLink }) => {
+ const href = "#meow"
+ const onClick = jest.fn()
+ render(
+
+
+ Hello!
+
+
+
+
+ Link
+
+
+ ,
+ { wrapper: ThemeProvider },
+ )
+ const button = screen.getByRole("button", { name: "Button" })
+ await user.click(button)
+ expect(onClick).toHaveBeenCalled()
+ expect(window.location.hash).toBe("")
+
+ // outermost wrapper is not actually clickable
+ const card = document.querySelector(".MitCard-root")
+ invariant(card instanceof HTMLDivElement) // Sanity: Chceck it's not an anchor
+
+ await user.click(card)
+ expect(window.location.hash).toBe(finalHref)
+ },
+ )
+
+ test("Clicks on interactive elements are not forwarded", async () => {
+ const btnOnClick = jest.fn()
+ const divOnClick = jest.fn()
+ render(
+
+ Title
+
+ Info
+
+
+ Link Two
+ {/*
+ eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+ */}
+
+ Interactive Div
+
+
+ ,
+ { wrapper: ThemeProvider },
+ )
+ const button = screen.getByRole("button", { name: "Button" })
+ screen.getByRole("link", { name: "Title" })
+ const link2 = screen.getByRole("link", { name: "Link Two" })
+ const div = screen.getByText("Interactive Div")
+ await user.click(button)
+ expect(btnOnClick).toHaveBeenCalled()
+ expect(window.location.hash).toBe("")
+ await user.click(link2)
+ expect(window.location.hash).toBe("#two")
+ await user.click(div)
+ expect(divOnClick).toHaveBeenCalled()
+ expect(window.location.hash).toBe("#two")
+ })
})
diff --git a/frontends/ol-components/src/components/Card/Card.tsx b/frontends/ol-components/src/components/Card/Card.tsx
index a04dc0302a..c2b6876f83 100644
--- a/frontends/ol-components/src/components/Card/Card.tsx
+++ b/frontends/ol-components/src/components/Card/Card.tsx
@@ -4,6 +4,8 @@ import React, {
Children,
isValidElement,
CSSProperties,
+ useCallback,
+ AriaAttributes,
} from "react"
import styled from "@emotion/styled"
import { theme } from "../ThemeProvider/ThemeProvider"
@@ -13,52 +15,69 @@ import { default as NextImage, ImageProps as NextImageProps } from "next/image"
export type Size = "small" | "medium"
-/*
- *The relative positioned wrapper allows the action buttons to live adjacent to the
- * Link container in the DOM structure. They cannot be a descendent of it as
- * buttons inside anchors are not valid HTML.
+type LinkableProps = {
+ href?: string
+ children?: ReactNode
+ className?: string
+}
+/**
+ * Render a NextJS link if href is provided, otherwise a span.
+ * Does not scroll if the href is a query string.
*/
-export const Wrapper = styled.div<{ size?: Size }>`
- position: relative;
- ${({ size }) => {
- let width
- if (!size) return ""
- if (size === "medium") width = 300
- if (size === "small") width = 192
- return `
- min-width: ${width}px;
- max-width: ${width}px;
- `
- }}
-`
-
-export const containerStyles = `
- border-radius: 8px;
- border: 1px solid ${theme.custom.colors.lightGray2};
- background: ${theme.custom.colors.white};
- overflow: hidden;
-`
-
-const LinkContainer = styled(Link)`
- ${containerStyles}
- display: block;
- position: relative;
-
- :hover {
- text-decoration: none;
- border-color: ${theme.custom.colors.silverGrayLight};
- box-shadow:
- 0 2px 4px 0 rgb(37 38 43 / 10%),
- 0 2px 4px 0 rgb(37 38 43 / 10%);
- cursor: pointer;
+export const Linkable: React.FC = ({
+ href,
+ children,
+ className,
+ ...others
+}) => {
+ if (href) {
+ return (
+
+ {children}
+
+ )
}
-`
+ return (
+
+ {children}
+
+ )
+}
-const Container = styled.div`
- ${containerStyles}
- display: block;
- position: relative;
-`
+export const BaseContainer = styled.div<{ display?: CSSProperties["display"] }>(
+ ({ theme, onClick, display = "block" }) => [
+ {
+ borderRadius: "8px",
+ border: `1px solid ${theme.custom.colors.lightGray2}`,
+ background: theme.custom.colors.white,
+ display,
+ overflow: "hidden", // to clip image so they match border radius
+ },
+ onClick && {
+ "&:hover": {
+ borderColor: theme.custom.colors.silverGrayLight,
+ boxShadow:
+ "0 2px 4px 0 rgb(37 38 43 / 10%), 0 2px 4px 0 rgb(37 38 43 / 10%)",
+ cursor: "pointer",
+ },
+ },
+ ],
+)
+const CONTAINER_WIDTHS: Record = {
+ small: 192,
+ medium: 300,
+}
+const Container = styled(BaseContainer)<{ size?: Size }>(({ size }) => [
+ size && {
+ minWidth: CONTAINER_WIDTHS[size],
+ maxWidth: CONTAINER_WIDTHS[size],
+ },
+])
const Content = () => <>
@@ -83,7 +102,10 @@ const Info = styled.div<{ size?: Size }>`
margin-bottom: ${({ size }) => (size === "small" ? 4 : 8)}px;
`
-const Title = styled.span<{ lines?: number; size?: Size }>`
+const titleOpts = {
+ shouldForwardProp: (prop: string) => prop !== "lines" && prop !== "size",
+}
+const Title = styled(Linkable, titleOpts)<{ lines?: number; size?: Size }>`
text-overflow: ellipsis;
height: ${({ lines, size }) => {
const lineHeightPx = size === "small" ? 18 : 20
@@ -130,17 +152,70 @@ const Bottom = styled.div`
const Actions = styled.div`
display: flex;
gap: 8px;
- position: absolute;
- bottom: 16px;
- right: 16px;
`
+/**
+ * Click the child anchor element if the click event target is not the anchor itself.
+ *
+ * Allows making a whole region clickable as a link, even if the link is not the
+ * direct target of the click event.
+ */
+export const useClickChildLink = (
+ onClick?: React.MouseEventHandler,
+): React.MouseEventHandler => {
+ return useCallback(
+ (e) => {
+ onClick?.(e)
+ if (!e.currentTarget.contains(e.target as Node)) {
+ // This happens if click target is a child in React tree but not DOM tree
+ // This can happen with portals.
+ // In such cases, data-card-actions won't be a parent of the target.
+ return
+ }
+ const anchor = e.currentTarget.querySelector(
+ 'a[data-card-link="true"]',
+ )
+ const target = e.target as HTMLElement
+ if (!anchor || target.closest("a, button, [data-card-action]")) return
+ if (e.metaKey || e.ctrlKey) {
+ /**
+ * Enables ctrl+click to open card's link in new tab.
+ * Without this, ctrl+click only works on the anchor itself.
+ */
+ const opts: PointerEventInit = {
+ bubbles: false,
+ metaKey: e.metaKey,
+ ctrlKey: e.ctrlKey,
+ }
+ anchor.dispatchEvent(new PointerEvent("click", opts))
+ } else {
+ anchor.click()
+ }
+ },
+ [onClick],
+ )
+}
+
type CardProps = {
children: ReactNode[] | ReactNode
className?: string
size?: Size
- href?: string
-}
+ /**
+ * Defaults to `false`. If `true`, clicking the whole card will click the
+ * child anchor with data-card-link="true".
+ *
+ * NOTES:
+ * - By default, Card.Title has `data-card-link="true"`.
+ * - If using Card.Content to customize, you must ensure the content includes
+ * an anchor with data-card-link attribute. Its value is irrelevant.
+ * - Clicks will NOT be forwarded if it is (or is a child of):
+ * - an anchor or button element
+ * - OR an element with data-card-action
+ */
+ forwardClicksToLink?: boolean
+ onClick?: React.MouseEventHandler
+ as?: React.ElementType
+} & AriaAttributes
export type ImageProps = NextImageProps & {
size?: Size
@@ -149,21 +224,50 @@ export type ImageProps = NextImageProps & {
}
type TitleProps = {
children?: ReactNode
+ href?: string
lines?: number
style?: CSSProperties
}
+
type SlotProps = { children?: ReactNode; style?: CSSProperties }
+/**
+ * Card component with slots for image, info, title, footer, and actions:
+ * ```tsx
+ *
+ *
+ * Info
+ * Title
+ * Footer
+ * Actions
+ *
+ * ```
+ *
+ * **Links:** Card.Title will be a link if `href` is supplied; the entire card
+ * will be clickable if `forwardClicksToLink` is `true`.
+ *
+ * **Custom Layout:** Use Card.Content to create a custom layout.
+ */
type Card = FC & {
Content: FC<{ children: ReactNode }>
Image: FC
Info: FC
+ /**
+ * Card title with optional `href`.
+ */
Title: FC
Footer: FC
Actions: FC
}
-const Card: Card = ({ children, className, size, href }) => {
+const Card: Card = ({
+ children,
+ className,
+ size,
+ onClick,
+ forwardClicksToLink = false,
+ ...others
+}) => {
let content,
image: ImageProps | null = null,
info: SlotProps = {},
@@ -171,8 +275,6 @@ const Card: Card = ({ children, className, size, href }) => {
footer: SlotProps = {},
actions: SlotProps = {}
- const _Container = href ? LinkContainer : Container
-
/*
* Allows rendering child elements to specific "slots":
*
@@ -196,54 +298,68 @@ const Card: Card = ({ children, className, size, href }) => {
else if (child.type === Actions) actions = child.props
})
+ const handleHrefClick = useClickChildLink(onClick)
+ const handleClick = forwardClicksToLink ? handleHrefClick : onClick
+
const allClassNames = ["MitCard-root", className ?? ""].join(" ")
if (content) {
return (
-
- <_Container className={className} href={href!}>
- {content}
-
-
+
+ {content}
+
)
}
return (
-
- <_Container href={href!} scroll={!href?.startsWith("?")}>
- {image && (
- // alt text will be checked on Card.Image
- // eslint-disable-next-line styled-components-a11y/alt-text
-
- )}
-
- {info.children && (
-
- {info.children}
-
- )}
-
- {title.children}
-
-
-
-
-
-
- {actions.children && (
-
- {actions.children}
-
+
+ {image && (
+ // alt text will be checked on Card.Image
+ // eslint-disable-next-line styled-components-a11y/alt-text
+
)}
-
+
+ {info.children && (
+
+ {info.children}
+
+ )}
+
+ {title.children}
+
+
+
+
+ {actions.children && (
+
+ {actions.children}
+
+ )}
+
+
)
}
@@ -255,3 +371,4 @@ Card.Footer = Footer
Card.Actions = Actions
export { Card }
+export type { CardProps }
diff --git a/frontends/ol-components/src/components/Card/ListCard.test.tsx b/frontends/ol-components/src/components/Card/ListCard.test.tsx
index 3fc65edb90..ecd730ab4d 100644
--- a/frontends/ol-components/src/components/Card/ListCard.test.tsx
+++ b/frontends/ol-components/src/components/Card/ListCard.test.tsx
@@ -1,17 +1,114 @@
-import { render } from "@testing-library/react"
+import { render, screen } from "@testing-library/react"
+import user from "@testing-library/user-event"
import { ListCard } from "./ListCard"
import React from "react"
+import invariant from "tiny-invariant"
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider"
describe("ListCard", () => {
- test("has class MitCard-root on root element", () => {
+ test("has class MitListCard-root on root element", () => {
const { container } = render(
Hello world
,
+ { wrapper: ThemeProvider },
)
const card = container.firstChild
expect(card).toHaveClass("MitListCard-root")
expect(card).toHaveClass("Foo")
})
+
+ test.each([
+ { forwardClicksToLink: true, finalHref: "#woof" },
+ { forwardClicksToLink: false, finalHref: "" },
+ ])(
+ "The whole card is clickable as a link",
+ async ({ forwardClicksToLink, finalHref }) => {
+ const href = "#woof"
+ render(
+
+ Title
+ Info
+ Footer
+ Actions
+ ,
+ { wrapper: ThemeProvider },
+ )
+ // outermost wrapper is not actually clickable
+ const card = document.querySelector(".MitListCard-root > *")
+ invariant(card instanceof HTMLDivElement) // Sanity: Chceck it's not an anchor
+
+ await user.click(card)
+ expect(window.location.hash).toBe(finalHref)
+ },
+ )
+
+ test.each([
+ { forwardClicksToLink: true, finalHref: "#meow" },
+ { forwardClicksToLink: false, finalHref: "" },
+ ])(
+ "The whole card is clickable as a link when using Content, except buttons and links",
+ async ({ forwardClicksToLink, finalHref }) => {
+ const onClick = jest.fn()
+ const href = "#meow"
+ render(
+
+
+ Hello!
+
+
+ Link
+
+
+ ,
+ { wrapper: ThemeProvider },
+ )
+ const button = screen.getByRole("button", { name: "Button" })
+ await user.click(button)
+ expect(onClick).toHaveBeenCalled()
+ expect(window.location.hash).toBe("")
+
+ // outermost wrapper is not actually clickable
+ const card = document.querySelector(".MitListCard-root > *")
+ invariant(card instanceof HTMLDivElement) // Sanity: Chceck it's not an anchor
+
+ await user.click(card)
+ expect(window.location.hash).toBe(finalHref)
+ },
+ )
+
+ test("Clicks on interactive elements are not forwarded", async () => {
+ const btnOnClick = jest.fn()
+ const divOnClick = jest.fn()
+ render(
+
+ Title
+ Info
+
+
+ Link Two
+ {/*
+ eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+ */}
+
+ Interactive Div
+
+
+ ,
+ { wrapper: ThemeProvider },
+ )
+ const button = screen.getByRole("button", { name: "Button" })
+ screen.getByRole("link", { name: "Title" })
+ const link2 = screen.getByRole("link", { name: "Link Two" })
+ const div = screen.getByText("Interactive Div")
+ await user.click(button)
+ expect(btnOnClick).toHaveBeenCalled()
+ expect(window.location.hash).toBe("")
+ await user.click(link2)
+ expect(window.location.hash).toBe("#two")
+ await user.click(div)
+ expect(divOnClick).toHaveBeenCalled()
+ expect(window.location.hash).toBe("#two")
+ })
})
diff --git a/frontends/ol-components/src/components/Card/ListCard.tsx b/frontends/ol-components/src/components/Card/ListCard.tsx
index 18f0ff33f1..fbb0c387ed 100644
--- a/frontends/ol-components/src/components/Card/ListCard.tsx
+++ b/frontends/ol-components/src/components/Card/ListCard.tsx
@@ -1,41 +1,22 @@
-import React, { FC, ReactNode, Children, isValidElement } from "react"
-import Link from "next/link"
+import React, {
+ FC,
+ ReactNode,
+ Children,
+ isValidElement,
+ AriaAttributes,
+} from "react"
import styled from "@emotion/styled"
import { RiDraggable } from "@remixicon/react"
import { theme } from "../ThemeProvider/ThemeProvider"
-import { Wrapper, containerStyles, ImageProps } from "./Card"
+import { BaseContainer, ImageProps, useClickChildLink, Linkable } from "./Card"
import { TruncateText } from "../TruncateText/TruncateText"
import { ActionButton, ActionButtonProps } from "../Button/Button"
import { default as NextImage } from "next/image"
-export const LinkContainer = styled(Link)`
- ${containerStyles}
- display: flex;
-
- :hover {
- text-decoration: none;
- border-color: ${theme.custom.colors.silverGrayLight};
- box-shadow:
- 0 2px 4px 0 rgb(37 38 43 / 10%),
- 0 2px 4px 0 rgb(37 38 43 / 10%);
- cursor: pointer;
- }
-`
-
-export const Container = styled.div`
- ${containerStyles}
-`
-
-export const DraggableContainer = styled.div`
- ${containerStyles}
- display: flex;
-`
-
const Content = () => <>
export const Body = styled.div`
flex-grow: 1;
- overflow: hidden;
margin: 24px;
${theme.breakpoints.down("md")} {
margin: 12px;
@@ -102,7 +83,11 @@ export const Info = styled.div`
align-items: center;
`
-export const Title = styled.span`
+export type TitleProps = {
+ children?: ReactNode
+ href?: string
+}
+export const Title: React.FC
= styled(Linkable)`
flex-grow: 1;
color: ${theme.custom.colors.darkGray2};
text-overflow: ellipsis;
@@ -136,19 +121,12 @@ export const Bottom = styled.div`
/**
* Slot intended to contain ListCardAction buttons.
*/
-export const Actions = styled.div<{ hasImage?: boolean }>`
+export const Actions = styled.div`
display: flex;
gap: 8px;
- position: absolute;
- bottom: 24px;
- right: ${({ hasImage }) => (hasImage ? "284px" : "24px")};
${theme.breakpoints.down("md")} {
- bottom: 8px;
gap: 4px;
- right: ${({ hasImage }) => (hasImage ? "120px" : "8px")};
}
-
- background-color: ${theme.custom.colors.white};
`
const ListCardActionButton = styled(ActionButton)<{ isMobile?: boolean }>(
@@ -168,34 +146,73 @@ const ListCardActionButton = styled(ActionButton)<{ isMobile?: boolean }>(
type CardProps = {
children: ReactNode[] | ReactNode
className?: string
- href?: string
+ /**
+ * Defaults to `false`. If `true`, clicking the whole card will click the
+ * child anchor with data-card-link.
+ *
+ * NOTES:
+ * - By default, Card.Title has `data-card-link="true"`.
+ * - If using Card.Content to customize, you must ensure the content includes
+ * an anchor with data-card-link attribute. Its value is irrelevant.
+ * - Clicks will NOT be forwarded if:
+ * - The click target is a child of Card.Actions OR an element with
+ * - The click target is a child of any element with data-card-actions attribute
+ */
+ forwardClicksToLink?: boolean
draggable?: boolean
-}
+ onClick?: () => void
+ as?: React.ElementType
+} & AriaAttributes
+
+/**
+ * Row-like card component with slots for image, info, title, footer, and actions:
+ * ```tsx
+ *
+ *
+ * Info
+ * Title
+ * Footer
+ * Actions
+ *
+ * ```
+ *
+ * **Links:** Card.Title will be a link if `href` is supplied; the entire card
+ * will be clickable if `forwardClicksToLink` is `true`.
+ *
+ * **Custom Layout:** Use ListCard.Content to create a custom layout.
+ */
export type Card = FC & {
Content: FC<{ children: ReactNode }>
Image: FC
Info: FC<{ children: ReactNode }>
- Title: FC<{ children: ReactNode }>
+ /**
+ * Card title with optional `href`.
+ */
+ Title: FC
Footer: FC<{ children: ReactNode }>
Actions: FC<{ children: ReactNode }>
Action: FC
}
-const ListCard: Card = ({ children, className, href, draggable }) => {
- const _Container = draggable
- ? DraggableContainer
- : href
- ? LinkContainer
- : Container
-
- let content, imageProps, info, title, footer, actions
+const ListCard: Card = ({
+ children,
+ className,
+ forwardClicksToLink = false,
+ draggable,
+ onClick,
+ ...others
+}) => {
+ let content, imageProps, info, footer, actions
+ let title: TitleProps = {}
+ const handleHrefClick = useClickChildLink(onClick)
+ const handleClick = forwardClicksToLink ? handleHrefClick : onClick
Children.forEach(children, (child) => {
if (!isValidElement(child)) return
if (child.type === Content) content = child.props.children
else if (child.type === Image) imageProps = child.props
else if (child.type === Info) info = child.props.children
- else if (child.type === Title) title = child.props.children
+ else if (child.type === Title) title = child.props
else if (child.type === Footer) footer = child.props.children
else if (child.type === Actions) actions = child.props.children
})
@@ -203,37 +220,42 @@ const ListCard: Card = ({ children, className, href, draggable }) => {
const classNames = ["MitListCard-root", className ?? ""].join(" ")
if (content) {
return (
- <_Container className={classNames} href={href!}>
+
{content}
-
+
)
}
return (
-
- <_Container href={href!} scroll={!href?.startsWith("?")}>
- {draggable && (
-
-
-
- )}
-
- {info}
-
- <TruncateText lineClamp={2}>{title}</TruncateText>
+ <BaseContainer
+ {...others}
+ className={classNames}
+ display="flex"
+ onClick={handleClick}
+ >
+ {draggable && (
+ <DragArea>
+ <RiDraggable />
+ </DragArea>
+ )}
+ <Body>
+ <Info>{info}</Info>
+ {title && (
+ <Title data-card-link={!!title.href} {...title} href={title.href}>
+ <TruncateText lineClamp={2}>{title.children}</TruncateText>
-
-
-
-
- {imageProps && (
- // alt text will be checked on ListCard.Image
- // eslint-disable-next-line styled-components-a11y/alt-text
-
)}
-
- {actions && {actions}}
-
+
+
+ {actions && {actions}}
+
+