Fix button colour logic with new prop

comicrelief · Oct 4, 2023 · dcba1ae · dcba1ae
1 parent fa20eb2
commit dcba1ae
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 10 deletions.
diff --git a/src/components/Molecules/Promo/Promo.js b/src/components/Molecules/Promo/Promo.js
@@ -72,7 +72,7 @@ const Promo = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const whiteButtonDebug = true; // to-do: suss out how this relates in context
+  const lightVideo = false; // to-do: suss out how this relates in context
 
   return (
     <Container backgroundColor={backgroundColor} position={position}>
@@ -105,7 +105,7 @@ const Promo = ({
           videoProgress={videoProgress}
           togglePlay={togglePlay}
           isPlaying={isPlaying}
-          whiteButton={whiteButtonDebug}
+          lightVideo={lightVideo}
         />
       </Media>
       )}
@@ -145,6 +145,7 @@ Promo.defaultProps = {
   loop: true,
   video: false,
   showPosterAfterPlaying: true
+
 };
 
 export default Promo;
diff --git a/src/components/Molecules/Promo/Promo.md b/src/components/Molecules/Promo/Promo.md
@@ -324,5 +324,45 @@ const src =
     </Link>
   </span>
 </Promo>
+
+<Text tag="h2" size="xl" color="black">
+  Promo None w/Video (no loop or autoplay, DARK text albeit the same video)
+</Text>
+<Promo
+  backgroundColor="blue_dark"
+  imageSet={defaultData.promoImage}
+  image={defaultData.promoImage}
+  imageLow={defaultData.promoImage}
+  imageAltText=""
+  copyLeft={true}
+  hasOverlay={true}
+  video={src}
+  poster={poster}
+  loop={false}
+  autoPlay={false}
+>
+  <Text
+    tag="h1"
+    color="black"
+    size="super"
+    family="Anton"
+    uppercase
+    weight="normal"
+  >
+    Curabitur pretium tincidunt lacus
+  </Text>
+  <Text tag="p" color="black">
+    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius,
+    turpis et commodo, est eros bibendum elit, nec luctus magna sollicitudin.
+  </Text>
+  <span>
+    <Link href="/" type="button" color="black">
+      <Text>
+        Show me this
+      </Text>
+    </Link>
+  </span>
+</Promo>
+
 </div>
 ```
diff --git a/src/components/Molecules/Promo/_PromoVideoButton.style.js b/src/components/Molecules/Promo/_PromoVideoButton.style.js
@@ -24,7 +24,8 @@ const PlayButton = styled.button`
   border-radius: 50%;
   background: black;
 
-  ${({ whiteButton }) => whiteButton && css`
+  // DARK VIDEO:
+  ${({ lightVideo }) => !lightVideo && css`
     background: ${({ theme }) => theme.color('white')};
   `}
 
@@ -79,7 +80,8 @@ const ProgressRingCircle = styled.circle`
     stroke: white; // need to changed based on Promo settings
     fill: transparent;
 
-    ${({ whiteButton }) => whiteButton && css`
+    // DARK VIDEO, WHITE BUTTON SO STROKE IS WHITE:
+    ${({ lightVideo }) => !lightVideo && css`
       stroke: ${({ theme }) => theme.color('black')};
     `}
 `;
@@ -89,23 +91,25 @@ const Icon = styled.span`
   width: 50px;
   background: no-repeat center/50% url(${playWhite}) transparent;
 
-  ${({ whiteButton, isPlaying }) => (!whiteButton && !isPlaying) && css`
+  // LIGHT VIDEO, BLACK BUTTON SO ICONS ARE WHITE
+  ${({ lightVideo, isPlaying }) => (lightVideo && !isPlaying) && css`
     background-image: url(${playWhite});
   `}
 
-  ${({ whiteButton, isPlaying }) => (!whiteButton && isPlaying) && css`
+  // LIGHT VIDEO, BLACK BUTTON SO ICONS ARE WHITE
+  ${({ lightVideo, isPlaying }) => (lightVideo && isPlaying) && css`
     background-image: url(${pauseWhite});
   `}
 
-  ${({ whiteButton, isPlaying }) => (whiteButton && !isPlaying) && css`
+  // DARK VIDEO, WHITE BUTTON SO ICONS ARE BLACK
+  ${({ lightVideo, isPlaying }) => (!lightVideo && !isPlaying) && css`
     background-image: url(${playBlack});
   `}
 
-  ${({ whiteButton, isPlaying }) => (whiteButton && isPlaying) && css`
+  // DARK VIDEO, WHITE BUTTON SO ICONS ARE BLACK
+  ${({ lightVideo, isPlaying }) => (!lightVideo && isPlaying) && css`
     background-image: url(${pauseBlack});
   `}
-
-
 `;
 
 export {