feat(Markdown): support blockquote (#1112)

Author: Lisa18289

packages/components/src/components/Markdown/Markdown.tsx

@@ -95,6 +95,11 @@ export const Markdown: FC<MarkdownProps> = (props) => {
         <ol>{props.children}</ol>
       </Text>
     ),
+    blockquote: (props) => (
+      <Text color={textColor}>
+        <blockquote>{props.children}</blockquote>
+      </Text>
+    ),
   };
 
   return (

packages/components/src/components/Markdown/stories/Default.stories.tsx

@@ -19,7 +19,8 @@ const meta: Meta<typeof Markdown> = {
         '    "name": "My Project"\n' +
         "}\n" +
         "```\n" +
-        "[link](#)" +
+        "[link](#)\n" +
+        "> Block quote" +
         "\n - Unordered list item 1 \n - Unordered list item 2 " +
         "\n 1. Ordered list item 1 \n 2. Ordered list item 2"}
     </Markdown>

packages/components/src/components/Text/Text.module.scss

@@ -11,7 +11,7 @@
 
   ul,
   ol {
-    padding-left: var(--size-rem--l);
+    padding-left: var(--text--list-padding);
   }
 
   ul {
@@ -23,4 +23,11 @@
   small {
     font-size: var(--font-size-text--s);
   }
+
+  blockquote {
+    border-left-width: var(--text--blockquote-border-width);
+    border-left-style: var(--text--blockquote-border-style);
+    border-left-color: var(--text--blockquote-border-color);
+    padding-left: var(--text--blockquote-padding);
+  }
 }

packages/design-tokens/src/content/text.yml

@@ -10,3 +10,15 @@ text:
       value: "{disabled-plain-content-color}"
   max-width:
     value: "780px"
+
+  blockquote-border-width:
+    value: "{border-width.300}"
+  blockquote-border-style:
+    value: "{border-style.default}"
+  blockquote-border-color:
+    value: "{info-outline-border-color}"
+  blockquote-padding:
+    value: "{size-rem.s}"
+
+  list-padding:
+    value: "{size-rem.l}"