CTC-97 updates to OakMediaClipList and OakVideoTranscript component

src/components/molecules/InternalChevronAccordion/InternalChevronAccordion.tsx

@@ -2,7 +2,14 @@ import React, { ReactNode } from "react";
 import styled from "styled-components";
 
 import { OakHandDrawnFocusUnderline } from "@/components/molecules/OakHandDrawnFocusUnderline";
-import { OakBoxProps, OakFlex, OakIcon, oakBoxCss } from "@/components/atoms";
+import {
+  OakBoxProps,
+  OakFlex,
+  OakIcon,
+  OakBox,
+  oakBoxCss,
+} from "@/components/atoms";
+import { parseDropShadow } from "@/styles/helpers/parseDropShadow";
 import {
   InternalAccordionButton,
   InternalAccordionContent,
@@ -48,9 +55,16 @@ export const StyledAccordionButton = styled(
 )<FlexStyleProps>`
   ${flexStyle}
   ${oakBoxCss}
+  position: relative;
   &:hover {
     text-decoration: underline;
   }
+  &:focus-visible {
+    .shadow {
+      box-shadow: ${parseDropShadow("drop-shadow-centered-lemon")},
+        ${parseDropShadow("drop-shadow-centered-grey")};
+    }
+  }
 `;
 
 const StyledContainer = styled(OakFlex)`
@@ -91,17 +105,27 @@ const Accordion = ({
         $alignItems={"center"}
       >
         {header}
-        <OakIcon
-          iconName="chevron-down"
-          $width="all-spacing-7"
-          $height="all-spacing-7"
-          alt="An arrow to indicate whether the item is open or closed"
-          style={{
-            transform: isOpen ? "rotate(180deg)" : "none",
-            transition: "all 0.3s ease 0s",
-          }}
-          $mr={"space-between-xs"}
-        />
+
+        <OakBox $position={"relative"} $mr={"space-between-xs"}>
+          <OakBox
+            className="shadow"
+            $position={"absolute"}
+            $borderRadius={"border-radius-s"}
+            $width={"100%"}
+            $height={"100%"}
+            $top="all-spacing-0"
+          />
+          <OakIcon
+            iconName="chevron-down"
+            $width="all-spacing-7"
+            $height="all-spacing-7"
+            alt="An arrow to indicate whether the item is open or closed"
+            style={{
+              transform: isOpen ? "rotate(180deg)" : "none",
+              transition: "all 0.3s ease 0s",
+            }}
+          />
+        </OakBox>
       </StyledAccordionButton>
       <InternalAccordionContent aria-labelledby={id} $overflow={"scroll"}>
         {children}

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

@@ -17,26 +17,40 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
 }
 
 .c8 {
+  position: relative;
+  margin-right: 0.75rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c9 {
+  position: absolute;
+  top: 0rem;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c10 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
   height: 2rem;
   min-height: 2rem;
-  margin-right: 0.75rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c10 {
+.c12 {
   overflow: scroll;
   font-family: --var(google-font),Lexend,sans-serif;
   overflow: scroll;
 }
 
-.c11 {
+.c13 {
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c9 {
+.c11 {
   object-fit: contain;
 }
 
@@ -62,7 +76,7 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   flex-grow: 1;
 }
 
-.c12 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -81,7 +95,7 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   padding: 0;
 }
 
-.c14 {
+.c16 {
   position: absolute;
   width: 100%;
   bottom: -0.25rem;
@@ -102,13 +116,18 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   justify-content: space-between;
   width: 100%;
   font-family: --var(google-font),Lexend,sans-serif;
+  position: relative;
 }
 
 .c7:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
+.c7:focus-visible .shadow {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%), 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
 .c2 {
   position: relative;
   padding-top: 0.75rem;
@@ -124,11 +143,11 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
   gap: 0.25rem;
 }
 
-.c2 .c13 {
+.c2 .c15 {
   visibility: hidden;
 }
 
-.c2 .c6:focus-visible ~ .c13 {
+.c2 .c6:focus-visible ~ .c15 {
   visibility: visible;
 }
 
@@ -145,49 +164,56 @@ exports[`InternalChevronAccordion matches snapshot 1`] = `
     See more
     <div
       className="c8"
-      style={
-        {
-          "transform": "rotate(180deg)",
-          "transition": "all 0.3s ease 0s",
-        }
-      }
     >
-      <img
-        alt="An arrow to indicate whether the item is open or closed"
-        className="c9"
-        data-nimg="fill"
-        decoding="async"
-        loading="lazy"
-        onError={[Function]}
-        onLoad={[Function]}
-        src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+      <div
+        className="c9 shadow"
+      />
+      <div
+        className="c10"
         style={
           {
-            "bottom": 0,
-            "color": "transparent",
-            "height": "100%",
-            "left": 0,
-            "objectFit": undefined,
-            "objectPosition": undefined,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "width": "100%",
+            "transform": "rotate(180deg)",
+            "transition": "all 0.3s ease 0s",
           }
         }
-      />
+      >
+        <img
+          alt="An arrow to indicate whether the item is open or closed"
+          className="c11"
+          data-nimg="fill"
+          decoding="async"
+          loading="lazy"
+          onError={[Function]}
+          onLoad={[Function]}
+          src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953557/icons/botfld6brychmttwtv6u.svg"
+          style={
+            {
+              "bottom": 0,
+              "color": "transparent",
+              "height": "100%",
+              "left": 0,
+              "objectFit": undefined,
+              "objectPosition": undefined,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "width": "100%",
+            }
+          }
+        />
+      </div>
     </div>
   </button>
   <div
     aria-labelledby="see-more"
-    className="c10"
+    className="c12"
     hidden={false}
     role="region"
   >
     Here it is
   </div>
   <div
-    className="c11 c12 c13 c14"
+    className="c13 c14 c15 c16"
   >
     <svg
       className=""

src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.stories.tsx → src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.stories.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
-import { OakSolidBorderAccordion } from "./OakSolidBorderAccordion";
+import { OakMediaClipListAccordion } from "./OakMediaClipListAccordion";
 
-const meta: Meta<typeof OakSolidBorderAccordion> = {
-  component: OakSolidBorderAccordion,
+const meta: Meta<typeof OakMediaClipListAccordion> = {
+  component: OakMediaClipListAccordion,
   tags: ["autodocs"],
-  title: "components/molecules/OakSolidBorderAccordion",
+  title: "components/molecules/OakMediaClipListAccordion",
   parameters: {
     controls: {
       include: ["header", "headerAfterSlot", "children"],
@@ -30,10 +30,10 @@ const meta: Meta<typeof OakSolidBorderAccordion> = {
     children:
       "Any cookies required for video or other embedded learning content to work",
   },
-  render: (args) => <OakSolidBorderAccordion {...args} />,
+  render: (args) => <OakMediaClipListAccordion {...args} />,
 };
 export default meta;
 
-type Story = StoryObj<typeof OakSolidBorderAccordion>;
+type Story = StoryObj<typeof OakMediaClipListAccordion>;
 
 export const Default: Story = {};

src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.test.tsx → src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.test.tsx

@@ -3,19 +3,19 @@ import { create } from "react-test-renderer";
 import { act, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import { OakSolidBorderAccordion } from "./OakSolidBorderAccordion";
+import { OakMediaClipListAccordion } from "./OakMediaClipListAccordion";
 
 import { OakThemeProvider } from "@/components/atoms";
 import { oakDefaultTheme } from "@/styles";
 import renderWithTheme from "@/test-helpers/renderWithTheme";
 
-describe(OakSolidBorderAccordion, () => {
+describe(OakMediaClipListAccordion, () => {
   it("matches snapshot", () => {
     const tree = create(
       <OakThemeProvider theme={oakDefaultTheme}>
-        <OakSolidBorderAccordion initialOpen header="See more" id="see-more">
+        <OakMediaClipListAccordion initialOpen header="See more" id="see-more">
           Here it is
-        </OakSolidBorderAccordion>
+        </OakMediaClipListAccordion>
       </OakThemeProvider>,
     ).toJSON();
 
@@ -24,9 +24,9 @@ describe(OakSolidBorderAccordion, () => {
 
   it("toggles open and closed", () => {
     const { queryByRole, queryByText, getByText } = renderWithTheme(
-      <OakSolidBorderAccordion header="See more" id="see-more">
+      <OakMediaClipListAccordion header="See more" id="see-more">
         Here it is
-      </OakSolidBorderAccordion>,
+      </OakMediaClipListAccordion>,
     );
 
     expect(queryByRole("region")).not.toBeInTheDocument();

src/components/molecules/OakSolidBorderAccordion/OakSolidBorderAccordion.tsx → src/components/molecules/OakMediaClipListAccordion/OakMediaClipListAccordion.tsx

@@ -48,7 +48,7 @@ const AccordionWrapper = styled(OakFlex)`
 /**
  * An accordion component that can be used to show/hide content
  */
-export const OakSolidBorderAccordion = ({
+export const OakMediaClipListAccordion = ({
   header,
   children,
   id,
@@ -65,6 +65,7 @@ export const OakSolidBorderAccordion = ({
         $borderStyle={"solid"}
         $borderColor={"border-primary"}
         $ba={"border-solid-m"}
+        $bl={["border-solid-m", "border-solid-m", "border-solid-none"]}
         {...styleProps}
       >
         {children}