feat(blockquote): add bottom margin

twilio-labs · Dec 2, 2024 · d8bc778 · d8bc778
1 parent 1afe45f
commit d8bc778
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/.changeset/rare-gifts-wash.md b/.changeset/rare-gifts-wash.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/blockquote": minor
+"@twilio-paste/core": minor
+---
+
+[Blockquote] add default bottom margin of space-70 to Blockquote, add marginBottom prop for the option to remove bottom margin when necessary.
diff --git a/packages/paste-core/components/blockquote/src/Blockquote.tsx b/packages/paste-core/components/blockquote/src/Blockquote.tsx
@@ -21,10 +21,16 @@ export interface BlockquoteProps extends HTMLPasteProps<"div"> {
    * @memberof BlockquoteProps
    */
   url?: string;
+  /**
+   * Remove the bottom margin
+   * @type {"space0" | "space70"}
+   * @memberof BlockquoteProps
+   */
+  marginBottom?: "space0" | "space70";
 }
 
 export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
-  ({ children, element = "BLOCKQUOTE", url, ...props }, ref) => {
+  ({ children, element = "BLOCKQUOTE", url, marginBottom = "space70", ...props }, ref) => {
     return (
       <Box
         {...safelySpreadBoxProps(props)}
@@ -34,6 +40,7 @@ export const Blockquote = React.forwardRef<HTMLDivElement, BlockquoteProps>(
         alignItems="flex-start"
         lineHeight="lineHeight30"
         fontSize="fontSize30"
+        marginBottom={marginBottom}
         element={element}
       >
         <BlockquoteIcon element={`${element}_ICON`} decorative={true} color="colorTextIcon" />

diff --git a/packages/paste-core/components/blockquote/stories/index.stories.tsx b/packages/paste-core/components/blockquote/stories/index.stories.tsx
@@ -48,6 +48,29 @@ export const WithoutSource: StoryFn = () => (
   </Box>
 );
 
+export const BottomMargin: StoryFn = () => (
+  <Box display="flex" flexDirection="column" rowGap="space60">
+    <Box maxWidth="600px" borderStyle="solid">
+      <Blockquote url="#">
+        <BlockquoteContent>
+          With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
+          human experience as a whole.
+        </BlockquoteContent>
+        <BlockquoteCitation author="Google" source="People + AI Guidebook" />
+      </Blockquote>
+    </Box>
+    <Box maxWidth="600px" borderStyle="solid">
+      <Blockquote url="#" marginBottom="space0">
+        <BlockquoteContent>
+          With AI-driven products, the design process is no longer just about aesthetics. It’s about designing for the
+          human experience as a whole.
+        </BlockquoteContent>
+        <BlockquoteCitation author="Google" source="People + AI Guidebook" />
+      </Blockquote>
+    </Box>
+  </Box>
+);
+
 export const CustomizationBlockquote: StoryFn = (_args, { parameters: { isTestEnvironment } }) => {
   const currentTheme = useTheme();
   return (