diff --git a/packages/palette/src/elements/ReadMore/ReadMore.story.tsx b/packages/palette/src/elements/ReadMore/ReadMore.story.tsx index c5b90a9e8..999010dbd 100644 --- 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 ( + + + + 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. 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. + `} + /> + + + ) +} + +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 index 32d628ec0..5bc2df15e 100644 --- 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 = ({ content: expandedHTML, disabled, + inlineReadMoreLink = true, isExpanded, maxChars = Infinity, onReadLessClicked, @@ -70,7 +72,14 @@ export const ReadMore: React.FC = ({ ) : ( - {" "} + {inlineReadMoreLink ? ( + <> + {" "} + + ) : ( + + )} +