@bitrise/bitkit 13.20.0 → 13.21.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.20.0",
+  "version": "13.21.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -4,13 +4,17 @@ import ReactMarkdown, { Components } from 'react-markdown';
 import List from '../List/List';
 import Link from '../Link/Link';
 import ListItem from '../List/ListItem';
-import Box from '../Box/Box';
+import Box, { BoxProps } from '../Box/Box';
 import Divider from '../Divider/Divider';
 import Text from '../Text/Text';
 import CodeBlock from '../CodeBlock/CodeBlock';
 import CodeSnippet from '../CodeSnippet/CodeSnippet';
 
-const defaultComponents = (size: 'md' | 'lg'): Components => {
+type GapType = Exclude<BoxProps['gap'], undefined>;
+
+const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Components => {
+  const codeSize = size === 'lg' ? 'lg' : 'md';
+
   return {
     a: ({ node, ...props }) => <Link colorScheme="purple" isUnderlined target="_blank" {...props} />,
     blockquote: ({ children }) => (
@@ -27,7 +31,7 @@ const defaultComponents = (size: 'md' | 'lg'): Components => {
       </Box>
     ),
     code: ({ node, ...props }) => (
-      <CodeSnippet size={size} {...props}>
+      <CodeSnippet size={codeSize} {...props}>
         {props.children as string}
       </CodeSnippet>
     ),
@@ -37,24 +41,26 @@ const defaultComponents = (size: 'md' | 'lg'): Components => {
     h4: ({ node, ...props }) => <Text as="h4" textStyle="heading/h4" {...props} />,
     h5: ({ node, ...props }) => <Text as="h5" textStyle="heading/h5" {...props} />,
     h6: ({ node, ...props }) => <Text as="h6" textStyle="heading/h6" {...props} />,
-    hr: () => <Divider borderColor="separator.primary" my="16" size="2" />,
+    hr: () => <Divider borderColor="separator.primary" my={gap} size="2" />,
     li: ({ node, ...props }) => <ListItem {...props} />,
     ol: ({ node, ...props }) => <List isOrdered {...props} />,
     p: ({ node, ...props }) => <Text {...props} />,
-    pre: ({ node, ...props }) => <CodeBlock size={size}>{props.children as string}</CodeBlock>,
+    pre: ({ node, ...props }) => <CodeBlock size={codeSize}>{props.children as string}</CodeBlock>,
     ul: ({ node, ...props }) => <List {...props} />,
   };
 };
 
-type NoteMarkdownContentProps = { md: string; size?: 'md' | 'lg' } & Pick<
-  ComponentProps<typeof ReactMarkdown>,
-  'components' | 'rehypePlugins'
->;
-const NoteMarkdownContent = ({ components, md, size = 'lg', ...rest }: NoteMarkdownContentProps) => {
+type NoteMarkdownContentProps = {
+  md: string;
+  gap?: GapType;
+  size?: 'sm' | 'md' | 'lg';
+} & Pick<ComponentProps<typeof ReactMarkdown>, 'components' | 'rehypePlugins'>;
+
+const NoteMarkdownContent = ({ components, md, gap = '16', size = 'lg', ...rest }: NoteMarkdownContentProps) => {
   const extendedComponents = { ...defaultComponents(size), ...components };
   const textStyle = `body/${size}/regular`;
   return (
-    <Box display="flex" flexDirection="column" gap="16" textStyle={textStyle}>
+    <Box display="flex" flexDirection="column" gap={gap} textStyle={textStyle}>
       <ReactMarkdown components={extendedComponents} {...rest}>
         {md}
       </ReactMarkdown>