Updates

quintype · Nov 14, 2023 · 4cfeab1 · 4cfeab1
1 parent 8707f58
commit 4cfeab1
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 170 deletions.
diff --git a/atoms_story-elements_text_text.tsx.html b/atoms_story-elements_text_text.tsx.html
@@ -145,7 +145,7 @@ <h1>atoms/story-elements/text/text.tsx</h1>
 import { conditionExternalLinks } from "./text.helpers";
 
 export const StyledText = styled.div&lt;StoryElementProps>`
-  color: ${(props) => props.theme.color.mono6};
+  color: ${(props) => props.theme.color.mono7};
   font-size: ${(props) => props.theme.font.size.xs};
   font-family: ${(props) => props.theme.font.family.primary};
   line-height: ${(props) => props.theme.font.lineHeight.level3};
@@ -186,6 +186,19 @@ <h1>atoms/story-elements/text/text.tsx</h1>
   }
 `;
 
+export const StyledVisualStoryText = styled(StyledText)`
+  line-height: normal;
+  p {
+    line-height: normal;
+  }
+  h2 {
+    line-height: normal;
+  }
+  h3 {
+    line-height: normal;
+  }
+`;
+
 const CtaText = styled.div&lt;StoryElementProps>`
   margin: ${(props) => props.theme.spacing.l};
   text-align: center;
@@ -198,21 +211,27 @@ <h1>atoms/story-elements/text/text.tsx</h1>
   }
 `;
 
-export const DefaultText = ({ element, config }: StoryElementProps) => {
+export const DefaultText = ({ element, config, story }: StoryElementProps) => {
   let text = element.text || "";
   text = conditionExternalLinks({ text, config });
+  const visualStoryTemplate = get(story, ["story-template"], null) === "visual-story";
+
   if (element.subtype === "cta") {
     return &lt;CtaText element={element} dangerouslySetInnerHTML={{ __html: text }} />;
   }
-  return &lt;StyledText element={element} dangerouslySetInnerHTML={{ __html: text }} />;
+  return visualStoryTemplate ? (
+    &lt;StyledVisualStoryText element={element} dangerouslySetInnerHTML={{ __html: text }} />
+  ) : (
+    &lt;StyledText element={element} dangerouslySetInnerHTML={{ __html: text }} />
+  );
 };
 
 export const TextBase = ({ element, story, config }: StoryElementProps) => {
   const textElementRender = get(config, ["opts", "render", "storyElementRender", "textElementRender"], null);
   return textElementRender ? (
     textElementRender({ story, config, element })
   ) : (
-    &lt;DefaultText element={element} config={config} />
+    &lt;DefaultText element={element} config={config} story={story} />
   );
 };
 /**

diff --git a/build/entry.js b/build/entry.js
diff --git a/build/entry.js.map b/build/entry.js.map
diff --git a/module-Text.html b/module-Text.html
@@ -359,7 +359,7 @@ <h5>Parameters:</h5>
         <p class="tag-source">
             <a href="atoms_story-elements_text_text.tsx.html" class="button">View Source</a>
             <span>
-                <a href="atoms_story-elements_text_text.tsx.html">atoms/story-elements/text/text.tsx</a>, <a href="atoms_story-elements_text_text.tsx.html#line71">line 71</a>
+                <a href="atoms_story-elements_text_text.tsx.html">atoms/story-elements/text/text.tsx</a>, <a href="atoms_story-elements_text_text.tsx.html#line84">line 84</a>
             </span>
         </p>
 

diff --git a/molecules_hero-image_hero-image.tsx.html b/molecules_hero-image_hero-image.tsx.html
@@ -154,10 +154,10 @@ <h1>molecules/hero-image/hero-image.tsx</h1>
 `;
 
 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;
+  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};
@@ -175,13 +175,12 @@ <h1>molecules/hero-image/hero-image.tsx</h1>
   const caption: string | null = get(story, "hero-image-caption", null);
 
   return (
-   &lt;>
+    &lt;>
       &lt;StyledDiv>
-        &lt;Image data-hero="true" metadata={metadata} slug={slug} alt={caption || attribution || ""}>
-        &lt;/Image>
+        &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;' }} />}
+        {caption &amp;&amp; &lt;StyledCaption dangerouslySetInnerHTML={{ __html: `${caption}` + "&amp;nbsp;" }} />}
         {attribution &amp;&amp; &lt;StyledAttribution dangerouslySetInnerHTML={{ __html: `${attribution}` }} />}
       &lt;/StyledFigcaption>
     &lt;/>