Merge pull request #530 from CBIIT/fix-css-import

fix: Remove directly imported CSS

src/components/ScrollButton/ScrollButtonView.test.tsx

@@ -0,0 +1,50 @@
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { axe } from "jest-axe";
+import ScrollButton from "./ScrollButtonView";
+
+describe("Accessibility", () => {
+  it("should not have accessibility violations", async () => {
+    const { container } = render(<ScrollButton />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Basic Functionality", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should be hidden by default", () => {
+    const { getByTestId } = render(<ScrollButton />);
+
+    expect(getByTestId("scroll-top-button")).toBeInTheDocument();
+    expect(getByTestId("scroll-top-button")).not.toBeVisible();
+  });
+
+  it("should only appear when the user scrolls down", async () => {
+    const { getByTestId } = render(<ScrollButton />);
+
+    // TOP
+    expect(getByTestId("scroll-top-button")).not.toBeVisible();
+    expect(getByTestId("scroll-top-button")).toBeInTheDocument();
+
+    // SCROLL DOWN
+    fireEvent.scroll(window, { target: { scrollY: 300 } });
+    await waitFor(() => expect(getByTestId("scroll-top-button")).toBeVisible());
+
+    // SCROLL UP
+    fireEvent.scroll(window, { target: { scrollY: 0 } });
+    await waitFor(() => expect(getByTestId("scroll-top-button")).not.toBeVisible());
+  });
+
+  it("should scroll to the top of the page when clicked", () => {
+    window.scrollTo = jest.fn();
+
+    const { getByTestId } = render(<ScrollButton />);
+
+    fireEvent.scroll(window, { target: { scrollY: 300 } });
+    fireEvent.click(getByTestId("scroll-top-button"));
+
+    expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
+  });
+});

src/components/ScrollButton/ScrollButtonView.tsx

@@ -1,8 +1,57 @@
-import React, { useState, useEffect, useRef } from "react";
-import "./ScrollButtonStyles.css";
+import { useState, useEffect, useRef, memo } from "react";
+import { styled } from "@mui/material";
+import ArrowUp from "../../assets/icons/arrow_up.svg";
+
+const StyledScrollButton = styled("button")(({ theme }) => ({
+  background: "#007bbd",
+  borderTopLeftRadius: "100%",
+  color: "#fff",
+  position: "fixed",
+  right: "0",
+  bottom: "0",
+  height: "80px",
+  width: "80px",
+  fontFamily: "Open Sans",
+  fontWeight: 700,
+  fontSize: "12px",
+  lineHeight: "1.2",
+  textAlign: "center",
+  padding: "36px 4px 0 18px",
+  textDecoration: "none",
+  transition: "all 0.25s ease-out",
+  zIndex: 999,
+  cursor: "pointer",
+  "&:active": {
+    outline: "solid 4px #2491ff",
+    transition: "none",
+  },
+  "&:after": {
+    content: "''",
+    display: "none",
+  },
+  [theme.breakpoints.down("md")]: {
+    "&:after": {
+      background: "none",
+      backgroundColor: "#fff",
+      mask: `url(${ArrowUp}) no-repeat center/contain`,
+      display: "inline-block",
+      height: "4ex",
+      marginLeft: "1px",
+      verticalAlign: "middle",
+      width: "4ex",
+      color: "white",
+    },
+  },
+}));
+
+const StyledText = styled("span")(({ theme }) => ({
+  [theme.breakpoints.down("md")]: {
+    display: "none",
+  },
+}));
 
 const ScrollButton = () => {
-  const [scroll, setScroll] = useState(0);
+  const [scroll, setScroll] = useState<number>(0);
   const clickToTopRef = useRef<HTMLButtonElement>(null);
 
   const updateScroll = () => {
@@ -25,27 +74,25 @@ const ScrollButton = () => {
   }, []);
 
   return (
-    <button
+    <StyledScrollButton
+      data-testid="scroll-top-button"
       type="button"
       ref={clickToTopRef}
-      id="stt"
       style={
         scroll < 200
           ? {
               opacity: 0,
               visibility: "hidden",
-              cursor: "pointer",
             }
           : {
               visibility: "visible",
               opacity: 1,
-              cursor: "pointer",
             }
       }
     >
-      <span id="stt-span">BACK TO TOP</span>
-    </button>
+      <StyledText>BACK TO TOP</StyledText>
+    </StyledScrollButton>
   );
 };
 
-export default ScrollButton;
+export default memo(ScrollButton);