feat(suite): add support for multiline changelog, use markdown

packages/components/package.json

@@ -36,6 +36,7 @@
         "react-date-range": "^1.4.0",
         "react-dom": "18.2.0",
         "react-intl": "^6.6.2",
+        "react-markdown": "^9.0.1",
         "react-select": "^5.8.0",
         "react-svg": "^16.1.33",
         "react-use": "^17.5.0",

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

@@ -0,0 +1,79 @@
+import styled from 'styled-components';
+
+import ReactMarkdown, { Options } from 'react-markdown';
+import { variables } from '../../config';
+
+const StyledMarkdown = styled.div`
+    color: ${({ theme }) => theme.TYPE_LIGHT_GREY};
+    font-size: ${variables.FONT_SIZE.SMALL};
+    font-weight: ${variables.FONT_WEIGHT.MEDIUM};
+    line-height: 1.5;
+    padding: 0 0 32px;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: ${({ theme }) => theme.TYPE_DARK_GREY};
+        font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
+    }
+
+    h1 {
+        margin: 8px 0 16px;
+        font-size: ${variables.FONT_SIZE.BIG};
+    }
+
+    h2 {
+        margin-bottom: 8px 0 12px;
+        font-size: ${variables.FONT_SIZE.NORMAL};
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 4px 0 12px;
+        font-size: ${variables.FONT_SIZE.SMALL};
+    }
+
+    p,
+    ul,
+    ol {
+        margin: 4px 0 12px;
+    }
+
+    ul,
+    ol {
+        padding: 0 0 0 16px;
+    }
+
+    li {
+        margin: 0 0 8px;
+    }
+
+    a {
+        color: ${({ theme }) => theme.TYPE_GREEN};
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    strong {
+        font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD};
+    }
+`;
+
+export const Markdown = (options: Readonly<Options>) => {
+    return (
+        <StyledMarkdown>
+            <ReactMarkdown {...options}></ReactMarkdown>
+        </StyledMarkdown>
+    );
+};

packages/components/src/index.ts

@@ -31,7 +31,6 @@ export * from './components/Divider/Divider';
 export * from './components/Dropdown/Dropdown';
 export * from './components/ElevationContext/ElevationContext';
 export * from './components/Flex/Flex';
-export * from './components/HotkeyBadge/HotkeyBadge';
 export * from './components/form/Input/Input';
 export * from './components/form/InputStyles';
 export * from './components/form/Radio/Radio';
@@ -41,13 +40,15 @@ export * from './components/form/SelectBar/SelectBar';
 export * from './components/form/Switch/Switch';
 export * from './components/form/Textarea/Textarea';
 export * from './components/GradientOverlay/GradientOverlay';
+export * from './components/HotkeyBadge/HotkeyBadge';
 export * from './components/Image/Image';
 export * from './components/Image/images';
 export * from './components/loaders/LoadingContent/LoadingContent';
 export * from './components/loaders/ProgressBar/ProgressBar';
 export * from './components/loaders/ProgressPie/ProgressPie';
 export * from './components/loaders/Spinner/Spinner';
 export * from './components/loaders/Stepper/Stepper';
+export * from './components/Markdown/Markdown';
 export * from './components/modals/DialogModal/DialogModal';
 export * from './components/modals/Modal/Backdrop';
 export * from './components/modals/Modal/Modal';
@@ -60,13 +61,13 @@ export * from './components/skeletons/SkeletonRectangle';
 export * from './components/skeletons/SkeletonSpread';
 export * from './components/skeletons/SkeletonStack';
 export * from './components/skeletons/types';
-export * from './components/typography/Text/Text';
 export * from './components/Timerange/Timerange';
 export * from './components/Tooltip/Tooltip';
 export * from './components/Tooltip/TooltipDelay';
 export * from './components/typography/Heading/Heading';
 export * from './components/typography/Link/Link';
 export * from './components/typography/Paragraph/Paragraph';
+export * from './components/typography/Text/Text';
 export * from './components/typography/TruncateWithTooltip/TruncateWithTooltip';
 export * from './components/Warning/Warning';