From 815de3e528f27a7d6e9505c1874d7bad890ba825 Mon Sep 17 00:00:00 2001
From: Kyle Huggins <kyle.huggins7@gmail.com>
Date: Mon, 9 Dec 2024 11:43:19 +0000
Subject: [PATCH 1/2] feat: default images

---
 src/components/atoms/OakImage/OakImage.tsx            |  4 ++--
 .../organisms/shared/OakMediaClip/OakMediaClip.tsx    | 11 +++++++++--
 .../__snapshots__/OakMediaClip.test.tsx.snap          |  4 +---
 .../OakMediaClipStackListItem.tsx                     |  6 ++++++
 .../OakMediaClipStackListItem.test.tsx.snap           |  2 ++
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/atoms/OakImage/OakImage.tsx b/src/components/atoms/OakImage/OakImage.tsx
index 2a159c7b..43ba6f0f 100644
--- a/src/components/atoms/OakImage/OakImage.tsx
+++ b/src/components/atoms/OakImage/OakImage.tsx
@@ -44,7 +44,7 @@ type StyledImageProps = Omit<OakImageProps, "as"> & {
   $showOakPlaceholder: boolean;
 };
 
-const oakPlaceholder =
+export const oakPlaceholder =
   "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBhdGggZmlsbD0iIzIyMiIgZD0iTTI4Ljc3OSAxOS4xNzZhMjcuMTkxIDI3LjE5MSAwIDAgMC0zLjggMS42IDE2LjcgMTYuNyAwIDAgMC03LjEgOC40YzAgLjEtLjEuMi0uMS4zLS43IDIuNC0uNiAyIDEuMyAyLjMgMS45LjMgMSAuNSAxIDEuMy0uMSA4LjggNC4xIDE1LjEgMTEuNCAxOS42YTEuNSAxLjUgMCAwIDAgMS43LjJjNS43LTIuNiA5LjMtNyAxMC4zLTEzLjJhMSAxIDAgMCAxIDEtMWwzLS4yYy44IDAgMS4zLjIgMS4yIDEuMmExNy45IDE3LjkgMCAwIDEtMy4yIDkuMiAyMy43IDIzLjcgMCAwIDEtMTAuOSA5LjEgNS40MDEgNS40MDEgMCAwIDEtNC41LS4yIDI2LjI5OCAyNi4yOTggMCAwIDEtOC41LTYuNiAyNS45IDI1LjkgMCAwIDEtNi40LTE0LjRjMC0uNi0uMi0uNy0uOC0uOC0yLjUtLjQtMi41LS4xLTIuMy0yLjlhMTkuMyAxOS4zIDAgMCAxIDEwLjgtMTYuNiAzOC45OTkgMzguOTk5IDAgMCAxIDUuNy0yLjEgMi4xIDIuMSAwIDAgMCAuOS0xLjMgMTQuMSAxNC4xIDAgMCAxIDMuNS02LjNsLjMtLjNjMS45LTIgMi42LTIgNC4zLjJsLjQuNWMxLjEgMS4xIDEgMS41LS4xIDIuNmExMS45IDExLjkgMCAwIDAtMy4yIDQuNCAxNi45IDE2LjkgMCAwIDEgNy41IDIuM2M1LjcgMy41IDkuMiA4LjMgOS45IDE1IC4wMTYuOTAxLS4wMTcgMS44MDItLjEgMi43IDAgLjgtLjYgMS0xLjIgMS4yYTE2LjEgMTYuMSAwIDAgMS0xMS0uNyAxNy45MDEgMTcuOTAxIDAgMCAxLTEwLjktMTMuNiA5Ljc5NiA5Ljc5NiAwIDAgMS0uMS0xLjlabTE4LjEgMTIuMmMuNC01LjUtNi45LTEyLjYtMTMtMTIuMS41IDYuNSA3LjYgMTIuOCAxMyAxMi4xWiIgb3BhY2l0eT0iLjEiLz48L3N2Zz4=";
 
 const clickStyles = css<{ onClick?: MouseEventHandler }>`
@@ -58,7 +58,7 @@ const clickStyles = css<{ onClick?: MouseEventHandler }>`
     `}
 `;
 
-const placeholderStyles = css<StyledImageProps>`
+export const placeholderStyles = css<StyledImageProps>`
   ${(props) =>
     props.$showOakPlaceholder &&
     css`
diff --git a/src/components/organisms/shared/OakMediaClip/OakMediaClip.tsx b/src/components/organisms/shared/OakMediaClip/OakMediaClip.tsx
index 476922a8..dd1261bc 100644
--- a/src/components/organisms/shared/OakMediaClip/OakMediaClip.tsx
+++ b/src/components/organisms/shared/OakMediaClip/OakMediaClip.tsx
@@ -10,6 +10,8 @@ import {
   OakImage,
   OakP,
   OakLI,
+  oakPlaceholder,
+  placeholderStyles,
 } from "@/components/atoms";
 import { OakCombinedColorToken } from "@/styles";
 import { InternalButton } from "@/components/atoms/InternalButton";
@@ -75,6 +77,10 @@ const MediaButtonWrapper = styled(StyledButtonWrapper)`
   width: 100%;
 `;
 
+export const StyledMediaClipImage = styled(OakImage)`
+  ${placeholderStyles}
+`;
+
 const ImageBox = styled(OakFlex)<{ disabled?: boolean }>`
   img {
     border-radius: 2px;
@@ -231,12 +237,13 @@ export const OakMediaClip = ({
                 $flexShrink={0}
               >
                 {!isAudioClip && thumbnailImage ? (
-                  <OakImage
+                  <StyledMediaClipImage
                     fill
                     $height={"100%"}
                     $width={"100%"}
-                    src={thumbnailImage}
+                    src={thumbnailImage ?? oakPlaceholder}
                     alt={imageAltText}
+                    $showOakPlaceholder={!thumbnailImage ? true : false}
                     $borderRadius={"border-radius-xs"}
                   />
                 ) : (
diff --git a/src/components/organisms/shared/OakMediaClip/__snapshots__/OakMediaClip.test.tsx.snap b/src/components/organisms/shared/OakMediaClip/__snapshots__/OakMediaClip.test.tsx.snap
index 01264eb6..a6f2438d 100644
--- a/src/components/organisms/shared/OakMediaClip/__snapshots__/OakMediaClip.test.tsx.snap
+++ b/src/components/organisms/shared/OakMediaClip/__snapshots__/OakMediaClip.test.tsx.snap
@@ -34,8 +34,6 @@ exports[`OakMediaClip matches snapshot 1`] = `
 .c12 {
   position: relative;
   width: 100%;
-  height: 100%;
-  border-radius: 0.125rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -266,7 +264,7 @@ exports[`OakMediaClip matches snapshot 1`] = `
             className="c9 c10 c11"
           >
             <div
-              className="c12"
+              className="c12 "
               fill={true}
             >
               <img
diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
index 34b4ffbf..94db3b29 100644
--- a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
+++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
@@ -8,6 +8,8 @@ import {
   OakTypography,
   OakHeading,
   OakIcon,
+  placeholderStyles,
+  oakPlaceholder,
 } from "@/components/atoms";
 import { parseBorderRadius } from "@/styles/helpers/parseBorderRadius";
 import { parseColor } from "@/styles/helpers/parseColor";
@@ -56,6 +58,7 @@ const ImageStackShadow = styled(OakBox)`
   img {
     object-fit: fill;
     -webkit-filter: brightness(100%);
+    ${placeholderStyles}
   }
 
   &::after {
@@ -110,6 +113,9 @@ export const OakMediaClipStackListItem = (
           $height={["all-spacing-11", "all-spacing-11", "all-spacing-15"]}
           $position={"relative"}
           $mb={["space-between-none", "space-between-none", "space-between-xs"]}
+          $showOakPlaceholder={!imageUrl ? true : false}
+          src={imageUrl ?? oakPlaceholder}
+          alt={!imageUrl ? "oak" : ""}
         >
           <OakImage
             src={imageUrl}
diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
index 2c313640..686a102c 100644
--- a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
+++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
@@ -247,7 +247,9 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
     className="c3"
   >
     <div
+      alt=""
       className="c4 c5"
+      src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1698336494/samples/landscapes/nature-mountains.jpg"
     >
       <div
         className="c6"

From 3dea624d047ba592f82633f30855d57967f84851 Mon Sep 17 00:00:00 2001
From: Kyle Huggins <kyle.huggins7@gmail.com>
Date: Mon, 9 Dec 2024 13:23:36 +0000
Subject: [PATCH 2/2] feat: update styled image component

---
 .../OakMediaClipStackListItem.tsx             | 19 +++++----
 .../OakMediaClipStackListItem.test.tsx.snap   | 41 +++++++++----------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
index 94db3b29..0d10a7cc 100644
--- a/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
+++ b/src/components/organisms/shared/OakMediaClipStackListItem/OakMediaClipStackListItem.tsx
@@ -8,8 +8,8 @@ import {
   OakTypography,
   OakHeading,
   OakIcon,
-  placeholderStyles,
   oakPlaceholder,
+  placeholderStyles,
 } from "@/components/atoms";
 import { parseBorderRadius } from "@/styles/helpers/parseBorderRadius";
 import { parseColor } from "@/styles/helpers/parseColor";
@@ -58,7 +58,6 @@ const ImageStackShadow = styled(OakBox)`
   img {
     object-fit: fill;
     -webkit-filter: brightness(100%);
-    ${placeholderStyles}
   }
 
   &::after {
@@ -91,6 +90,12 @@ const ImageStackShadow = styled(OakBox)`
   }
 `;
 
+const StyledMediaStackImage = styled(OakImage)`
+  ${placeholderStyles}
+  height: 100%;
+  width: 100%;
+`;
+
 export const OakMediaClipStackListItem = (
   props: OakMediaClipStackListItemProps,
 ) => {
@@ -113,17 +118,13 @@ export const OakMediaClipStackListItem = (
           $height={["all-spacing-11", "all-spacing-11", "all-spacing-15"]}
           $position={"relative"}
           $mb={["space-between-none", "space-between-none", "space-between-xs"]}
-          $showOakPlaceholder={!imageUrl ? true : false}
-          src={imageUrl ?? oakPlaceholder}
-          alt={!imageUrl ? "oak" : ""}
         >
-          <OakImage
-            src={imageUrl}
+          <StyledMediaStackImage
+            src={imageUrl ?? oakPlaceholder}
+            $showOakPlaceholder={!imageUrl ? true : false}
             alt={imageAltText}
             $borderRadius={"border-radius-s"}
             $overflow={"hidden"}
-            $width={"100%"}
-            $height={"100%"}
           />
           <OakIcon
             id="play-icon"
diff --git a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
index 686a102c..93df92ba 100644
--- a/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
+++ b/src/components/organisms/shared/OakMediaClipStackListItem/__snapshots__/OakMediaClipStackListItem.test.tsx.snap
@@ -27,15 +27,11 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
 
 .c6 {
   position: relative;
-  overflow: hidden;
   width: 100%;
-  height: 100%;
-  border-radius: 0.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
-  overflow: hidden;
 }
 
-.c8 {
+.c9 {
   position: relative;
   width: 2rem;
   min-width: 2rem;
@@ -44,12 +40,12 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c9 {
+.c10 {
   margin-bottom: 0rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
-.c11 {
+.c12 {
   color: #575757;
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
@@ -61,7 +57,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
   letter-spacing: -0.005rem;
 }
 
-.c7 {
+.c8 {
   object-fit: contain;
 }
 
@@ -76,7 +72,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
   gap: 0.5rem;
 }
 
-.c10 {
+.c11 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
   font-size: 1rem;
@@ -88,7 +84,7 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
   color: #222222;
 }
 
-.c12 {
+.c13 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 300;
   font-size: 0.875rem;
@@ -151,6 +147,11 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
   margin-top: -16px;
 }
 
+.c7 {
+  height: 100%;
+  width: 100%;
+}
+
 @media (min-width:750px) {
   .c4 {
     width: 6.25rem;
@@ -188,13 +189,13 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
 }
 
 @media (min-width:750px) {
-  .c9 {
+  .c10 {
     margin-bottom: 0rem;
   }
 }
 
 @media (min-width:1280px) {
-  .c9 {
+  .c10 {
     margin-bottom: 1rem;
   }
 }
@@ -247,16 +248,14 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
     className="c3"
   >
     <div
-      alt=""
       className="c4 c5"
-      src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1698336494/samples/landscapes/nature-mountains.jpg"
     >
       <div
-        className="c6"
+        className="c6 c7"
       >
         <img
           alt="alt text for the image"
-          className="c7"
+          className="c8"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -282,12 +281,12 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
         />
       </div>
       <div
-        className="c8"
+        className="c9"
         id="play-icon"
       >
         <img
           alt="play"
-          className="c7"
+          className="c8"
           data-nimg="fill"
           decoding="async"
           loading="lazy"
@@ -313,15 +312,15 @@ exports[`OakMediaClipStackListItem matches snapshot 1`] = `
     </div>
   </div>
   <div
-    className="c9"
+    className="c10"
   >
     <h3
-      className="c10"
+      className="c11"
     >
       Learning cycle 3 videos
     </h3>
     <div
-      className="c11 c12"
+      className="c12 c13"
     >
       5