CTC-98 Add shadow to OakMediaClipList accordion

src/components/atoms/InternalAccordion/InternalAccordion.tsx

@@ -25,12 +25,24 @@ const FlexWithReset = styled(OakFlex)`
 
 export const InternalAccordionContent = ({
   children,
+  onScroll,
+  ref,
   ...rest
-}: OakBoxProps & { "aria-labelledby": string }) => {
+}: OakBoxProps & {
+  "aria-labelledby": string;
+  onScroll?: () => void;
+  ref?: React.MutableRefObject<null | HTMLDivElement>;
+}) => {
   const { isOpen } = useAccordionContext();
 
   return (
-    <OakBox hidden={!isOpen} role="region" {...rest}>
+    <OakBox
+      hidden={!isOpen}
+      role="region"
+      {...rest}
+      onScroll={onScroll}
+      ref={ref}
+    >
       {children}
     </OakBox>
   );

src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.test.tsx

@@ -9,6 +9,8 @@ import { OakThemeProvider } from "@/components/atoms";
 import { oakDefaultTheme } from "@/styles";
 import renderWithTheme from "@/test-helpers/renderWithTheme";
 
+const useRefSpy = jest.spyOn(React, "useRef");
+
 describe(InternalChevronAccordion, () => {
   it("matches snapshot", () => {
     const tree = create(
@@ -44,4 +46,112 @@ describe(InternalChevronAccordion, () => {
 
     expect(queryByRole("region")).not.toBeInTheDocument();
   });
+
+  it("renders correct initial opacity of box shadow when scroll is present", () => {
+    Object.defineProperties(HTMLElement.prototype, {
+      scrollHeight: { get: () => 348, configurable: true },
+      clientHeight: { get: () => 300, configurable: true },
+      scrollTop: { get: () => 20, configurable: true },
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <InternalChevronAccordion
+        header="See more"
+        id="see-more"
+        initialOpen={true}
+      >
+        Here it is
+      </InternalChevronAccordion>,
+    );
+
+    const boxShadow = getByTestId("bottom-box-shadow");
+    const styles = getComputedStyle(boxShadow);
+
+    expect(useRefSpy).toHaveBeenCalled();
+    expect(styles.opacity).toBe("1");
+  });
+
+  it("renders correct initial opacity of box shadow when scroll is not present", () => {
+    Object.defineProperties(HTMLElement.prototype, {
+      scrollHeight: { get: () => 348, configurable: true },
+      clientHeight: { get: () => 348, configurable: true },
+      scrollTop: { get: () => 20, configurable: true },
+    });
+
+    const { getByTestId } = renderWithTheme(
+      <InternalChevronAccordion
+        header="See more"
+        id="see-more"
+        initialOpen={true}
+      >
+        Here it is
+      </InternalChevronAccordion>,
+    );
+
+    const boxShadow = getByTestId("bottom-box-shadow");
+    const styles = getComputedStyle(boxShadow);
+
+    expect(useRefSpy).toHaveBeenCalled();
+    expect(styles.opacity).toBe("0");
+  });
+
+  it("renders correct opacity of box shadow after scrolling to the end", () => {
+    const { getByTestId } = renderWithTheme(
+      <InternalChevronAccordion
+        header="See more"
+        id="see-more"
+        initialOpen={true}
+      >
+        Here it is
+      </InternalChevronAccordion>,
+    );
+
+    Object.defineProperties(HTMLElement.prototype, {
+      scrollHeight: { get: () => 348, configurable: true },
+      clientHeight: { get: () => 328, configurable: true },
+      scrollTop: { get: () => 0, configurable: true },
+    });
+
+    act(() => {
+      fireEvent.scroll(getByTestId("scrollable-content"), {
+        scrollY: 20,
+      });
+    });
+
+    const boxShadow = getByTestId("bottom-box-shadow");
+    const styles = getComputedStyle(boxShadow);
+
+    expect(useRefSpy).toHaveBeenCalled();
+    expect(styles.opacity).toBe("0");
+  });
+
+  it("renders correct opacity of box shadow after scrolling notto the end", async () => {
+    const { getByTestId } = renderWithTheme(
+      <InternalChevronAccordion
+        header="See more"
+        id="see-more"
+        initialOpen={true}
+      >
+        Here it is
+      </InternalChevronAccordion>,
+    );
+
+    Object.defineProperties(HTMLElement.prototype, {
+      scrollHeight: { get: () => 348, configurable: true },
+      clientHeight: { get: () => 328, configurable: true },
+      scrollTop: { get: () => 0, configurable: true },
+    });
+
+    act(() => {
+      fireEvent.scroll(getByTestId("scrollable-content"), {
+        scrollY: 10,
+      });
+    });
+
+    const boxShadow = getByTestId("bottom-box-shadow");
+    const styles = getComputedStyle(boxShadow);
+
+    expect(useRefSpy).toHaveBeenCalled();
+    expect(styles.opacity).toBe("1");
+  });
 });

src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 
 import { OakHandDrawnFocusUnderline } from "@/components/molecules/OakHandDrawnFocusUnderline";
@@ -19,6 +19,7 @@ import InternalAccordionProvider from "@/components/atoms/InternalAccordion/Inte
 import { InternalStyledSvgProps } from "@/components/atoms/InternalStyledSvg";
 import { FlexStyleProps, flexStyle } from "@/styles/utils/flexStyle";
 import { parseSpacing } from "@/styles/helpers/parseSpacing";
+import { parseOpacity } from "@/styles/helpers/parseOpacity";
 import { ColorStyleProps } from "@/styles/utils/colorStyle";
 
 export type InternalChevronAccordionProps = {
@@ -78,6 +79,26 @@ const StyledContainer = styled(OakFlex)`
   ${flexStyle}
 `;
 
+type BottomBoxShadowProps = {
+  shouldDisplayShadow: boolean;
+};
+
+export const BottomBoxShadow = styled(OakBox)<BottomBoxShadowProps>`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  opacity: ${(props) =>
+    props.shouldDisplayShadow
+      ? parseOpacity("opaque")
+      : parseOpacity("transparent")};
+  z-index: 100;
+  -webkit-box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
+  -moz-box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
+  box-shadow: inset 0px -55px 30px -30px rgba(255, 255, 255, 1);
+  padding: 2px;
+`;
+
 /**
  * An accordion component that can be used to show/hide content
  */
@@ -88,6 +109,36 @@ const Accordion = ({
   id,
   ...styleProps
 }: InternalChevronAccordionProps) => {
+  const [shouldDisplayShadow, setShouldDisplayShadow] = useState(false);
+  const scrollBox = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const scrollHeight = scrollBox.current?.scrollHeight;
+    const clientHeight = scrollBox.current?.clientHeight;
+
+    if (scrollHeight && clientHeight && scrollHeight > clientHeight) {
+      setShouldDisplayShadow(true);
+    } else {
+      setShouldDisplayShadow(false);
+    }
+  }, []);
+
+  const handleScroll = () => {
+    const scrollHeight = scrollBox.current?.scrollHeight;
+    const scrollTop = scrollBox.current?.scrollTop;
+    const clientHeight = scrollBox.current?.clientHeight;
+
+    if (scrollHeight && scrollTop) {
+      const bottom = scrollHeight - scrollTop === clientHeight;
+
+      if (bottom) {
+        setShouldDisplayShadow(false);
+      } else {
+        setShouldDisplayShadow(true);
+      }
+    }
+  };
+
   const { isOpen } = useAccordionContext();
 
   return (
@@ -127,10 +178,24 @@ const Accordion = ({
           />
         </OakBox>
       </StyledAccordionButton>
-      <InternalAccordionContent aria-labelledby={id} $overflow={"scroll"}>
-        {children}
-      </InternalAccordionContent>
+      <OakBox
+        ref={scrollBox}
+        $position={"relative"}
+        $overflow={"scroll"}
+        onScroll={handleScroll}
+        data-testid={"scrollable-content"}
+      >
+        <InternalAccordionContent aria-labelledby={id}>
+          {children}
+        </InternalAccordionContent>
+      </OakBox>
       <StyledAccordionUnderline $fill={"border-decorative5-stronger"} />
+      {isOpen && (
+        <BottomBoxShadow
+          shouldDisplayShadow={shouldDisplayShadow}
+          data-testid="bottom-box-shadow"
+        />
+      )}
     </StyledContainer>
   );
 };

src/components/molecules/InternalChevronAccordion/__snapshots__/InternalChevronAccordion.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
 }
 
 .c12 {
+  position: relative;
   overflow: scroll;
   font-family: --var(google-font),Lexend,sans-serif;
   overflow: scroll;
@@ -151,6 +152,19 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   visibility: visible;
 }
 
+.c17 {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  opacity: 0;
+  z-index: 100;
+  -webkit-box-shadow: inset 0px -55px 30px -30px rgba(255,255,255,1);
+  -moz-box-shadow: inset 0px -55px 30px -30px rgba(255,255,255,1);
+  box-shadow: inset 0px -55px 30px -30px rgba(255,255,255,1);
+  padding: 2px;
+}
+
 <div
   className="c0 c1 c2"
 >
@@ -205,12 +219,18 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
     </div>
   </button>
   <div
-    aria-labelledby="see-more"
     className="c12"
-    hidden={false}
-    role="region"
+    data-testid="scrollable-content"
+    onScroll={[Function]}
   >
-    Here it is
+    <div
+      aria-labelledby="see-more"
+      className="c13"
+      hidden={false}
+      role="region"
+    >
+      Here it is
+    </div>
   </div>
   <div
     className="c13 c14 c15 c16"
@@ -233,5 +253,9 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
       />
     </svg>
   </div>
+  <div
+    className="c13 c17"
+    data-testid="bottom-box-shadow"
+  />
 </div>
 `;

src/components/molecules/OakMediaClipListAccordion/__snapshots__/OakMediaClipListAccordion.test.tsx.snap

@@ -50,6 +50,7 @@ exports[`OakMediaClipListAccordion matches snapshot 1`] = `
 }
 
 .c15 {
+  position: relative;
   overflow: scroll;
   font-family: --var(google-font),Lexend,sans-serif;
   overflow: scroll;
@@ -174,6 +175,19 @@ exports[`OakMediaClipListAccordion matches snapshot 1`] = `
   visibility: visible;
 }
 
+.c20 {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  opacity: 0;
+  z-index: 100;
+  -webkit-box-shadow: inset 0px -55px 30px -30px rgba(255,255,255,1);
+  -moz-box-shadow: inset 0px -55px 30px -30px rgba(255,255,255,1);
+  box-shadow: inset 0px -55px 30px -30px rgba(255,255,255,1);
+  padding: 2px;
+}
+
 .c2 {
   position: relative;
   border-width: 2px;
@@ -260,12 +274,18 @@ exports[`OakMediaClipListAccordion matches snapshot 1`] = `
       </div>
     </button>
     <div
-      aria-labelledby="see-more"
       className="c15"
-      hidden={false}
-      role="region"
+      data-testid="scrollable-content"
+      onScroll={[Function]}
     >
-      Here it is
+      <div
+        aria-labelledby="see-more"
+        className="c16"
+        hidden={false}
+        role="region"
+      >
+        Here it is
+      </div>
     </div>
     <div
       className="c16 c17 c18 c19"
@@ -288,6 +308,10 @@ exports[`OakMediaClipListAccordion matches snapshot 1`] = `
         />
       </svg>
     </div>
+    <div
+      className="c16 c20"
+      data-testid="bottom-box-shadow"
+    />
   </div>
 </div>
 `;