Updates

HeroImage.html

@@ -225,7 +225,7 @@ <h4 class="name" id="HeroImage">
         <p class="tag-source">
             <a href="molecules_hero-image_hero-image.tsx.html" class="button">View Source</a>
             <span>
-                <a href="molecules_hero-image_hero-image.tsx.html">molecules/hero-image/hero-image.tsx</a>, <a href="molecules_hero-image_hero-image.tsx.html#line55">line 55</a>
+                <a href="molecules_hero-image_hero-image.tsx.html">molecules/hero-image/hero-image.tsx</a>, <a href="molecules_hero-image_hero-image.tsx.html#line47">line 47</a>
             </span>
         </p>
 

molecules_hero-image_hero-image.tsx.html

@@ -141,41 +141,31 @@ <h1>molecules/hero-image/hero-image.tsx</h1>
 import { HeroImageBaseTypes } from "./types";
 import { HeroImageMetadata } from "../../types/story";
 import styled from "styled-components";
-import { media } from "../../utils/media";
 import { withStoryAndConfig } from "../../context";
 import { Image } from "../../atoms";
 import get from "lodash.get";
 
-const StyledWrapper = styled.figcaption`
-  display: flex;
-  align-items: center;
-  text-align: left;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 8px 0;
-  max-height: 90px;
-  color: ${(props) => props.theme.color.white};
-  line-height: ${(props) => props.theme.font.lineHeight.level1};
-  background: ${(props) => `${props.theme.color.black}60`};
+const StyledCaption = styled.span`
+  margin-right: 8px;
+  color: ${(props) => props.theme.color.mono6};
+  line-height: ${(props) => props.theme.font.lineHeight.level3};
   font-size: ${(props) => props.theme.font.size.xxs};
-  z-index: ${(props) => props.theme.zIndex.z100};
-
-  ${media.laptop`
-		max-height: 130px;
-		overflow-y: scroll;
-	`}
+  word-wrap: break-word;
 `;
 
-const StyledText = styled.div`
-  margin: 0 8px;
+const StyledAttribution = styled.span`
+   color: ${(props) => props.theme.color.mono4};
+   font-size: ${(props) => props.theme.font.size.xxs};
+   line-height: ${(props) => props.theme.font.lineHeight.level3};
+   word-wrap: break-word;
 `;
-
 const StyledDiv = styled.div`
   background-color: ${(props) => props.theme.color.mono2};
 `;
-
+const StyledFigcaption = styled.div`
+  text-align: left;
+  padding-top: 8px;
+`;
 export const HeroImageBase = ({ story }: HeroImageBaseTypes) => {
   const metadata: HeroImageMetadata = get(story, "hero-image-metadata", null);
   const slug: string | null = get(story, "hero-image-s3-key", null);
@@ -185,15 +175,16 @@ <h1>molecules/hero-image/hero-image.tsx</h1>
   const caption: string | null = get(story, "hero-image-caption", null);
 
   return (
-    &lt;StyledDiv>
-      &lt;Image data-hero="true" metadata={metadata} slug={slug} alt={caption || attribution || ""}>
-        &lt;StyledWrapper>
-          {caption &amp;&amp; &lt;StyledText dangerouslySetInnerHTML={{ __html: `${caption}` }} />}
-          {caption &amp;&amp; attribution &amp;&amp; &lt;span>|&lt;/span>}
-          {attribution &amp;&amp; &lt;StyledText dangerouslySetInnerHTML={{ __html: `${attribution}` }} />}
-        &lt;/StyledWrapper>
-      &lt;/Image>
-    &lt;/StyledDiv>
+   &lt;>
+      &lt;StyledDiv>
+        &lt;Image data-hero="true" metadata={metadata} slug={slug} alt={caption || attribution || ""}>
+        &lt;/Image>
+      &lt;/StyledDiv>
+      &lt;StyledFigcaption>
+        {caption &amp;&amp; &lt;StyledCaption dangerouslySetInnerHTML={{ __html: `${caption}` + '&amp;nbsp;' }} />}
+        {attribution &amp;&amp; &lt;StyledAttribution dangerouslySetInnerHTML={{ __html: `${attribution}` }} />}
+      &lt;/StyledFigcaption>
+    &lt;/>
   );
 };