change drawer CTA label (#1471)

mitodl · Aug 28, 2024 · be034b1 · be034b1
1 parent 694edc1
commit be034b1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/frontends/ol-components/src/components/Button/Button.tsx b/frontends/ol-components/src/components/Button/Button.tsx
@@ -286,10 +286,12 @@ type ButtonLinkProps = ButtonStyleProps &
   }
 
 const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
-  ({ children, href = "", ...props }, ref) => {
+  ({ children, href = "", endIcon, ...props }, ref) => {
     return (
       <LinkStyled to={href} {...props} ref={ref}>
-        <ButtonInner {...props}>{children}</ButtonInner>
+        <ButtonInner endIcon={endIcon} {...props}>
+          {children}
+        </ButtonInner>
       </LinkStyled>
     )
   },

diff --git a/...s/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx b/...s/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.test.tsx
@@ -7,7 +7,6 @@ import type { LearningResourceExpandedProps } from "./LearningResourceExpanded"
 import { ResourceTypeEnum, PodcastEpisodeResource, AvailabilityEnum } from "api"
 import { factories } from "api/test-utils"
 import { ThemeProvider } from "../ThemeProvider/ThemeProvider"
-import { getReadableResourceType } from "ol-utilities"
 import invariant from "tiny-invariant"
 import type { LearningResource } from "api"
 import { faker } from "@faker-js/faker/locale/en"
@@ -58,7 +57,7 @@ describe("Learning Resource Expanded", () => {
         resource.resource_type === ResourceTypeEnum.Podcast ||
         resource.resource_type === ResourceTypeEnum.PodcastEpisode
           ? "Listen to Podcast"
-          : `Take ${getReadableResourceType(resource.resource_type)}`
+          : "Learn More"
 
       const url =
         resource.resource_type === ResourceTypeEnum.PodcastEpisode
@@ -97,8 +96,7 @@ describe("Learning Resource Expanded", () => {
 
       setup(resource)
 
-      const linkName = `Take ${getReadableResourceType(resource.resource_type)}`
-
+      const linkName = "Learn More"
       if (linkName) {
         const link = screen.getByRole("link", {
           name: linkName,

diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpanded.tsx
@@ -9,10 +9,10 @@ import {
   formatDate,
   capitalize,
   resourceThumbnailSrc,
-  getReadableResourceType,
   DEFAULT_RESOURCE_IMG,
   showStartAnytime,
 } from "ol-utilities"
+import { RiExternalLinkLine } from "@remixicon/react"
 import type { EmbedlyConfig } from "ol-utilities"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import { SimpleSelect } from "../SimpleSelect/SimpleSelect"
@@ -98,7 +98,7 @@ const CallToAction = styled.div`
 
 const StyledLink = styled(ButtonLink)`
   text-align: center;
-  width: 220px;
+  width: 224px;
   ${({ theme }) => theme.breakpoints.down("sm")} {
     width: 100%;
     margin-top: 10px;
@@ -211,19 +211,27 @@ const CallToActionSection = ({
   const platformImage =
     PLATFORMS[resource?.platform?.code as PlatformEnum]?.image
 
-  const { resource_type: type, platform } = resource!
+  const { platform } = resource!
 
-  const cta =
-    type === ResourceTypeEnum.Podcast ||
-    type === ResourceTypeEnum.PodcastEpisode
-      ? "Listen to Podcast"
-      : `Take ${getReadableResourceType(type)}`
+  const getCallToActionText = (resource: LearningResource): string => {
+    if (resource?.platform?.code === PlatformEnum.Ocw) {
+      return "Access Course Materials"
+    } else if (
+      resource?.resource_type === ResourceTypeEnum.Podcast ||
+      resource?.resource_type === ResourceTypeEnum.PodcastEpisode
+    ) {
+      return "Listen to Podcast"
+    }
+    return "Learn More"
+  }
 
+  const cta = getCallToActionText(resource)
   return (
     <CallToAction>
       <StyledLink
         target="_blank"
-        size="large"
+        size="medium"
+        endIcon={<RiExternalLinkLine />}
         href={getCallToActionUrl(resource) || ""}
       >
         {cta}