Merge pull request #339 from oaknational/feat/update-typing

feat: stop double rendering placeholder image
oaknational · Dec 9, 2024 · 3e29783 · 3e29783
2 parents ac934c2 + 85b5804
commit 3e29783
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 38 deletions.
diff --git a/src/components/organisms/shared/OakMediaClip/OakMediaClip.stories.tsx b/src/components/organisms/shared/OakMediaClip/OakMediaClip.stories.tsx
@@ -108,58 +108,66 @@ export const Default: Story = {
 export const Playing: Story = {
   render: (args) => {
     return (
-      <OakMediaClip
-        {...args}
-        clipName="Playing Clip Name"
-        muxPlayingState={"playing"}
-        onClick={() => {
-          console.log(`Playing video`);
-        }}
-      />
+      <OakUL $reset>
+        <OakMediaClip
+          {...args}
+          clipName="Playing Clip Name"
+          muxPlayingState={"playing"}
+          onClick={() => {
+            console.log(`Playing video`);
+          }}
+        />
+      </OakUL>
     );
   },
 };
 
 export const Played: Story = {
   render: (args) => {
     return (
-      <OakMediaClip
-        {...args}
-        clipName="Played Clip Name"
-        muxPlayingState={"played"}
-        onClick={() => {
-          console.log(`Played video`);
-        }}
-      />
+      <OakUL $reset>
+        <OakMediaClip
+          {...args}
+          clipName="Played Clip Name"
+          muxPlayingState={"played"}
+          onClick={() => {
+            console.log(`Played video`);
+          }}
+        />
+      </OakUL>
     );
   },
 };
 
 export const Audio: Story = {
   render: (args) => {
     return (
-      <OakMediaClip
-        {...args}
-        isAudioClip={true}
-        clipName="Audio Clip Name"
-        onClick={() => {
-          console.log(`Audio clip`);
-        }}
-      />
+      <OakUL $reset>
+        <OakMediaClip
+          {...args}
+          isAudioClip={true}
+          clipName="Audio Clip Name"
+          onClick={() => {
+            console.log(`Audio clip`);
+          }}
+        />
+      </OakUL>
     );
   },
 };
 
 export const Disabled: Story = {
   render: (args) => {
     return (
-      <OakMediaClip
-        {...args}
-        disabled={true}
-        onClick={() => {
-          console.log(`Disabled video`);
-        }}
-      />
+      <OakUL $reset>
+        <OakMediaClip
+          {...args}
+          disabled={true}
+          onClick={() => {
+            console.log(`Disabled video`);
+          }}
+        />
+      </OakUL>
     );
   },
 };
diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
@@ -9,18 +9,18 @@ import {
   OakHeading,
   OakIcon,
   oakPlaceholder,
-  placeholderStyles,
 } from "@/components/atoms";
 import { parseBorderRadius } from "@/styles/helpers/parseBorderRadius";
 import { parseColor } from "@/styles/helpers/parseColor";
 import { parseDropShadow } from "@/styles/helpers/parseDropShadow";
 import { parseTransitions } from "@/styles/helpers/parseTransitions";
 import { getMediaQuery } from "@/styles/utils/responsiveStyle";
+import { parseSpacing } from "@/styles/helpers/parseSpacing";
 
 export type OakMediaClipStackListItemProps = {
   title: string;
   href: string;
-  imageUrl: string;
+  imageUrl?: string;
   imageAltText: string;
   numberOfClips: number;
 };
@@ -90,8 +90,11 @@ const ImageStackShadow = styled(OakBox)`
   }
 `;
 
-const StyledMediaStackImage = styled(OakImage)`
-  ${placeholderStyles}
+const StyledMediaClipImage = styled(OakImage)`
+  background-color: ${parseColor("bg-decorative2-very-subdued")};
+  background-size: ${parseSpacing("all-spacing-11")};
+  background-position: center;
+  background-repeat: no-repeat;
   height: 100%;
   width: 100%;
 `;
@@ -119,9 +122,8 @@ export const OakMediaClipStackListItem = (
           $position={"relative"}
           $mb={["space-between-none", "space-between-none", "space-between-xs"]}
         >
-          <StyledMediaStackImage
-            src={imageUrl ?? oakPlaceholder}
-            $showOakPlaceholder={!imageUrl ? true : false}
+          <StyledMediaClipImage
+            src={!imageUrl ? oakPlaceholder : imageUrl}
             alt={imageAltText}
             $borderRadius={"border-radius-s"}
             $overflow={"hidden"}

diff --git a/...ms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/...ms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
@@ -148,6 +148,10 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
 }
 
 .c7 {
+  background-color: #e7f6f5;
+  background-size: 4rem;
+  background-position: center;
+  background-repeat: no-repeat;
   height: 100%;
   width: 100%;
 }