Merge pull request #1368 from artsy/damassi/feat/read-more-pos

feat(read-more): Add `inlineReadMoreLink` prop
artsy · Mar 1, 2024 · da13745 · da13745
2 parents 4c51894 + 720da25
commit da13745
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 1 deletion.
diff --git a/packages/palette/src/elements/ReadMore/ReadMore.story.tsx b/packages/palette/src/elements/ReadMore/ReadMore.story.tsx
@@ -1,6 +1,7 @@
 import React from "react"
 import { HTML } from "../HTML"
 import { ReadMore } from "./ReadMore"
+import { Box } from "../Box"
 
 export default {
   title: "Components/ReadMore",
@@ -183,3 +184,29 @@ export const CharacterCapWithHtmlDisabled = () => {
 CharacterCapWithHtmlDisabled.story = {
   name: "Character cap with html (disabled)",
 }
+
+export const WithBottomReadMore = () => {
+  return (
+    <Box textAlign="center" width={600}>
+      <HTML variant="lg">
+        <ReadMore
+          inlineReadMoreLink={false}
+          maxChars={280}
+          content={`<div>
+          Donald Judd, widely regarded as one of the most significant American
+          artists of <a href="#">the post-war period</a>, is perhaps best-known
+          for the large-scale outdoor installations and long, spacious interiors
+          he designed in Marfa. Donald Judd, widely regarded as one of the most
+          significant American artists of the post-war period, is perhaps
+          best-known for the large-scale outdoor installations and long,
+          spacious interiors he designed in Marfa.
+        </div>`}
+        />
+      </HTML>
+    </Box>
+  )
+}
+
+WithBottomReadMore.story = {
+  name: "With bottom placed 'Read More'",
+}
diff --git a/packages/palette/src/elements/ReadMore/ReadMore.tsx b/packages/palette/src/elements/ReadMore/ReadMore.tsx
@@ -8,6 +8,7 @@ import { Box } from "../Box"
 export interface ReadMoreProps {
   content: string
   disabled?: boolean
+  inlineReadMoreLink?: boolean
   isExpanded?: boolean
   maxChars?: number
   onReadLessClicked?: () => void
@@ -18,6 +19,7 @@ export interface ReadMoreProps {
 export const ReadMore: React.FC<ReadMoreProps> = ({
   content: expandedHTML,
   disabled,
+  inlineReadMoreLink = true,
   isExpanded,
   maxChars = Infinity,
   onReadLessClicked,
@@ -70,7 +72,14 @@ export const ReadMore: React.FC<ReadMoreProps> = ({
         </>
       ) : (
         <Clickable onClick={handleClick}>
-          <span dangerouslySetInnerHTML={{ __html: truncatedHTML }} />{" "}
+          {inlineReadMoreLink ? (
+            <>
+              <span dangerouslySetInnerHTML={{ __html: truncatedHTML }} />{" "}
+            </>
+          ) : (
+            <Box dangerouslySetInnerHTML={{ __html: truncatedHTML }} />
+          )}
+
           <Text
             as="span"
             variant="xs"