Use Smoot Design lib in MIT Learn (#1979)

* set @mitodl/smoot-design versions

* Remove ol-components ThemeProvider from test files

* switch to smoot-design themeprovider

* remove unused props

* replace Button, ActionButton usages

* bump smoot-design

* remove theme workaround, mui issue fixed

* remove button

* add a linting rule redirecting usage

* try installing inside docker

* fix testimonial button background

* update smoot (no unstable variants)

* bump smoot to npm version

* re-delete v1 drawer

frontends/.eslintrc.js

@@ -41,6 +41,16 @@ module.exports = {
           message:
             "Default import from 'lodash' is not allowed. Use named imports instead.",
         },
+        {
+          name: "ol-components",
+          importNames: [
+            "Button",
+            "ButtonLink",
+            "ActionButton",
+            "ActionButtonLink",
+          ],
+          message: "Please import from @mitodl/smoot-design instead.",
+        },
       ],
       patterns: [
         {

frontends/main/package.json

@@ -14,7 +14,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/styled": "^11.11.0",
     "@mitodl/course-search-utils": "3.3.2",
-    "@mitodl/smoot-design": "^0.0.0-preview215f7ae3fa",
+    "@mitodl/smoot-design": "^2.0.1",
     "@next/bundle-analyzer": "^14.2.15",
     "@nlux/react": "^2.17.1",
     "@nlux/themes": "^2.17.1",

frontends/main/src/app-pages/DashboardPage/DashboardPage.tsx

@@ -9,7 +9,6 @@ import {
   RiNotificationLine,
 } from "@remixicon/react"
 import {
-  ButtonLink,
   Card,
   Container,
   Skeleton,
@@ -23,6 +22,7 @@ import {
   TypographyProps,
   styled,
 } from "ol-components"
+import { ButtonLink } from "@mitodl/smoot-design"
 import Link from "next/link"
 import { useUserMe } from "api/hooks/user"
 import { useParams } from "next/navigation"

frontends/main/src/app-pages/DashboardPage/ProfileEditForm.tsx

@@ -3,14 +3,14 @@ import { useFormik } from "formik"
 import { Profile, useProfileMeMutation } from "api/hooks/profile"
 import {
   styled,
-  Button,
   CircularProgress,
   CheckboxChoiceBoxField,
   CheckboxChoiceField,
   RadioChoiceField,
   SimpleSelectField,
   TextField,
 } from "ol-components"
+import { Button } from "@mitodl/smoot-design"
 
 import { useLearningResourceTopics } from "api/hooks/learningResources"
 import {

frontends/main/src/app-pages/DashboardPage/SettingsPage.tsx

@@ -4,10 +4,10 @@ import {
   Typography,
   Link,
   styled,
-  Button,
   Dialog,
   DialogActions,
 } from "ol-components"
+import { Button } from "@mitodl/smoot-design"
 import { useUserMe } from "api/hooks/user"
 import {
   useSearchSubscriptionDelete,

frontends/main/src/app-pages/ErrorPage/ErrorPageTemplate.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { Container, ButtonLink, Typography, styled } from "ol-components"
+import { Container, Typography, styled } from "ol-components"
+import { ButtonLink } from "@mitodl/smoot-design"
 import { HOME } from "@/common/urls"
 
 type ErrorPageTemplateProps = {

frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx

@@ -5,9 +5,9 @@ import {
   styled,
   theme,
   Typography,
-  ButtonLink,
   TypographyProps,
 } from "ol-components"
+import { ButtonLink } from "@mitodl/smoot-design"
 import { useLearningResourceTopics } from "api/hooks/learningResources"
 import { RiArrowRightLine } from "@remixicon/react"
 import RootTopicIcon from "@/components/RootTopicIcon/RootTopicIcon"

frontends/main/src/app-pages/HomePage/PersonalizeSection.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { Typography, styled, Container, ButtonLink } from "ol-components"
+import { Typography, styled, Container } from "ol-components"
+import { ButtonLink } from "@mitodl/smoot-design"
 import { backgroundSrcSetCSS } from "ol-utilities"
 import { useUserMe } from "api/hooks/user"
 import * as urls from "@/common/urls"

frontends/main/src/app-pages/HomePage/TestimonialsSection.tsx

@@ -6,17 +6,27 @@ import {
   styled,
   theme,
   pxToRem,
-  ActionButton,
   TruncateText,
   onReInitSlickA11y,
 } from "ol-components"
+import { ActionButton } from "@mitodl/smoot-design"
 import { useTestimonialList } from "api/hooks/testimonials"
 import type { Attestation } from "api/v0"
 import { RiArrowRightLine, RiArrowLeftLine } from "@remixicon/react"
 import Slider from "react-slick"
 import AttestantBlock from "@/page-components/TestimonialDisplay/AttestantBlock"
 import Image from "next/image"
 
+const StyledActionButton = styled(ActionButton)(({ theme }) => ({
+  backgroundColor: theme.custom.colors.white,
+  "&:hover:not(:disabled)": {
+    // Picked via figma eyedropper.
+    // Figma specifies multiple backgrounds, background: linear-gradient(...), brightRed
+    // But that causes problems for the transition animation
+    backgroundColor: "#FCF2F4",
+  },
+}))
+
 const HeaderContainer = styled(Container)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
@@ -298,20 +308,20 @@ const SlickCarousel = () => {
       <TestimonialFadeLeft />
       <TestimonialFadeRight />
       <ButtonsContainer>
-        <ActionButton
+        <StyledActionButton
           aria-label="Show previous"
-          variant="inverted"
+          variant="secondary"
           onClick={slick?.slickPrev}
         >
           <RiArrowLeftLineStyled aria-hidden />
-        </ActionButton>
-        <ActionButton
+        </StyledActionButton>
+        <StyledActionButton
           aria-label="Show next"
-          variant="inverted"
+          variant="secondary"
           onClick={slick?.slickNext}
         >
           <RiArrowRightLineStyled aria-hidden />
-        </ActionButton>
+        </StyledActionButton>
       </ButtonsContainer>
     </OverlayContainer>
   )

frontends/main/src/app-pages/LearningPathListingPage/LearningPathListingPage.tsx

@@ -2,7 +2,6 @@
 
 import React, { useCallback, useMemo } from "react"
 import {
-  Button,
   SimpleMenu,
   Grid,
   LoadingSpinner,
@@ -14,6 +13,7 @@ import {
   LearningResourceListCard,
   ListCardActionButton,
 } from "ol-components"
+import { Button } from "@mitodl/smoot-design"
 import type { SimpleMenuItem } from "ol-components"
 import { RiPencilFill, RiMore2Line, RiDeleteBinLine } from "@remixicon/react"
 

frontends/main/src/app-pages/OnboardingPage/OnboardingPage.tsx

@@ -9,7 +9,6 @@ import {
   StepLabel,
   StepIconProps,
   Container,
-  Button,
   LoadingSpinner,
   CircularProgress,
   Typography,
@@ -19,6 +18,7 @@ import {
   Skeleton,
   VisuallyHidden,
 } from "ol-components"
+import { Button } from "@mitodl/smoot-design"
 
 import { RiArrowRightLine, RiArrowLeftLine } from "@remixicon/react"
 import { useProfileMeMutation, useProfileMeQuery } from "api/hooks/profile"

frontends/main/src/app-pages/SearchPage/SearchPage.test.tsx

@@ -707,7 +707,7 @@ describe("Search Page pagination controls", () => {
     // p3 is current page
     await within(pagination).findByRole("button", {
       name: "page 3",
-      current: true,
+      current: "page",
     })
     // as opposed to p4
     await within(pagination).findByRole("button", { name: "Go to page 4" })

frontends/main/src/app/global-error.tsx

@@ -15,7 +15,7 @@
 import React, { useEffect } from "react"
 import * as Sentry from "@sentry/nextjs"
 import FallbackErrorPage from "@/app-pages/ErrorPage/FallbackErrorPage"
-import { MITLearnGlobalStyles, ThemeProvider } from "ol-components"
+import { ThemeProvider, MITLearnGlobalStyles } from "ol-components"
 
 export default function GlobalError({ error }: { error: Error }) {
   useEffect(() => {

frontends/main/src/components/ChannelAvatar/ChannelAvatar.test.tsx

@@ -1,28 +1,25 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
-
-import { ThemeProvider } from "ol-components"
+import { screen } from "@testing-library/react"
 import { channels as factory } from "api/test-utils/factories"
 import ChannelAvatar from "./ChannelAvatar"
 import { getByImageSrc } from "ol-test-utilities"
 import invariant from "tiny-invariant"
+import { renderWithTheme } from "@/test-utils"
 
 describe("Avatar", () => {
   it("Displays a small avatar image for the channel", async () => {
     const channel = factory.channel()
-    const view = render(<ChannelAvatar channel={channel} imageSize="small" />, {
-      wrapper: ThemeProvider,
-    })
+    const view = renderWithTheme(
+      <ChannelAvatar channel={channel} imageSize="small" />,
+    )
     invariant(channel.avatar_small)
     const img = getByImageSrc(view.container, channel.avatar_small)
     expect(img.getAttribute("alt")).toBe("") // should be empty unless meaningful
   })
 
   it("Displays a medium avatar image by default", async () => {
     const channel = factory.channel()
-    const view = render(<ChannelAvatar channel={channel} />, {
-      wrapper: ThemeProvider,
-    })
+    const view = renderWithTheme(<ChannelAvatar channel={channel} />)
     invariant(channel.avatar_medium)
     const img = getByImageSrc(view.container, channel.avatar_medium)
     expect(img.getAttribute("alt")).toBe("") // should be empty unless meaningful
@@ -35,7 +32,7 @@ describe("Avatar", () => {
       avatar_small: null,
       avatar_medium: null,
     })
-    render(<ChannelAvatar channel={channel} />, { wrapper: ThemeProvider })
+    renderWithTheme(<ChannelAvatar channel={channel} />)
     const img = screen.queryByRole("img")
     expect(img).toBeNull()
     await screen.findByText("TT")

frontends/main/src/components/ChannelMenu/ChannelMenu.test.tsx

@@ -1,13 +1,12 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { screen } from "@testing-library/react"
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { BrowserRouter } from "react-router-dom"
 
 import ChannelMenu from "./ChannelMenu"
 import { urls } from "api/test-utils"
-import { setMockResponse, user } from "@/test-utils"
+import { renderWithTheme, setMockResponse, user } from "@/test-utils"
 import { channels as factory } from "api/test-utils/factories"
-import { ThemeProvider } from "ol-components"
 
 describe("ChannelMenu", () => {
   it("Includes links to channel management", async () => {
@@ -17,11 +16,10 @@ describe("ChannelMenu", () => {
       channel,
     )
 
-    render(
+    renderWithTheme(
       <BrowserRouter>
         <ChannelMenu channelType={channel.channel_type} name={channel.name} />
       </BrowserRouter>,
-      { wrapper: ThemeProvider },
     )
     const dropdown = await screen.findByRole("button")
     await user.click(dropdown)

frontends/main/src/components/ChannelMenu/ChannelMenu.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react"
 import * as routes from "@/common/urls"
-import { SimpleMenu, ActionButton, styled } from "ol-components"
+import { SimpleMenu, styled } from "ol-components"
+import { ActionButton } from "@mitodl/smoot-design"
 import type { SimpleMenuItem } from "ol-components"
 import { RiSettings4Fill } from "@remixicon/react"
 

frontends/main/src/page-components/ChannelDetails/ChannelDetails.test.tsx

@@ -1,12 +1,11 @@
 import React from "react"
-import { render, screen } from "@testing-library/react"
+import { screen } from "@testing-library/react"
 import { ChannelDetails } from "./ChannelDetails"
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { BrowserRouter } from "react-router-dom"
 import { urls } from "api/test-utils"
-import { setMockResponse } from "@/test-utils"
+import { renderWithTheme, setMockResponse } from "@/test-utils"
 import { channels as factory } from "api/test-utils/factories"
-import { ThemeProvider } from "ol-components"
 
 describe("ChannelDetails", () => {
   it("Includes channel detail info panel", async () => {
@@ -18,11 +17,10 @@ describe("ChannelDetails", () => {
       urls.channels.details(channel.channel_type, channel.name),
       channel,
     )
-    render(
+    renderWithTheme(
       <BrowserRouter>
         <ChannelDetails channel={channel} />
       </BrowserRouter>,
-      { wrapper: ThemeProvider },
     )
     const channelData = channel as unknown as Record<string, unknown>
     const unitDetail = channelData.unit_detail as unknown as Record<
@@ -51,11 +49,10 @@ describe("ChannelDetails", () => {
       urls.channels.details(channel.channel_type, channel.name),
       channel,
     )
-    render(
+    renderWithTheme(
       <BrowserRouter>
         <ChannelDetails channel={channel} />
       </BrowserRouter>,
-      { wrapper: ThemeProvider },
     )
 
     expect(screen.getByTestId("unit-details").firstChild).toHaveTextContent(

frontends/main/src/page-components/Dialogs/AddToListDialog.tsx

@@ -4,10 +4,10 @@ import {
   Typography,
   styled,
   CheckboxChoiceField,
-  Button,
   FormDialog,
   DialogActions,
 } from "ol-components"
+import { Button } from "@mitodl/smoot-design"
 
 import { RiAddLine } from "@remixicon/react"
 import { usePostHog } from "posthog-js/react"

frontends/main/src/page-components/FollowPopover/FollowPopover.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react"
-import { Popover, Typography, styled, Button } from "ol-components"
+import { Popover, Typography, styled } from "ol-components"
+import { Button } from "@mitodl/smoot-design"
 import type { PopoverProps } from "ol-components"
 import { getSearchParamMap } from "@/common/utils"
 
@@ -91,7 +92,7 @@ const FollowPopover: React.FC<FollowPopoverProps> = ({
           <Button
             size="medium"
             responsive={true}
-            variant="inverted"
+            variant="secondary"
             edge="rounded"
             data-testid="action-unfollow"
             onClick={handleFollowAction}
@@ -121,7 +122,7 @@ const FollowPopover: React.FC<FollowPopoverProps> = ({
           responsive={true}
           size="medium"
           edge="rounded"
-          variant="inverted"
+          variant="secondary"
           onClick={() => props.onClose()}
         >
           Close

frontends/main/src/page-components/Footer/Footer.test.tsx

@@ -1,16 +1,12 @@
-import { render, screen } from "@testing-library/react"
+import { screen } from "@testing-library/react"
 import Footer from "./Footer"
 import React from "react"
-import { ThemeProvider } from "ol-components"
 import * as urls from "@/common/urls"
+import { renderWithTheme } from "@/test-utils"
 
 describe("Footer", () => {
   test("Renders the appropriate text and links", async () => {
-    render(
-      <ThemeProvider>
-        <Footer />
-      </ThemeProvider>,
-    )
+    renderWithTheme(<Footer />)
     interface Links {
       [key: string]: string
     }

frontends/main/src/page-components/Header/Header.tsx

@@ -2,13 +2,8 @@
 
 import React, { FunctionComponent } from "react"
 import type { NavData } from "ol-components"
-import {
-  styled,
-  AppBar,
-  NavDrawer,
-  Toolbar,
-  ActionButtonLink,
-} from "ol-components"
+import { styled, AppBar, NavDrawer, Toolbar } from "ol-components"
+import { ActionButtonLink } from "@mitodl/smoot-design"
 import {
   RiSearch2Line,
   RiPencilRulerLine,