[VO-710] feat: Add Markdown component

docs/styleguide.config.js

@@ -65,7 +65,8 @@ module.exports = {
         '../react/TextField',
         '../react/Thumbnail',
         '../react/Tooltip',
-        '../react/Typography'
+        '../react/Typography',
+        '../react/Markdown'
       ]
     },
     {

react/Markdown/Readme.md

@@ -0,0 +1,71 @@
+This component is used to render markdown content. To see more about the Markdown, you can check the [Markdown Guide](https://www.markdownguide.org/).
+
+```jsx
+
+import Markdown from 'cozy-ui/transpiled/react/Markdown'
+
+const textInMarkdown = `
+# Demo
+
+This is a text to test all possibilities of markdown.
+
+## Headers
+
+# H1 Header
+## H2 Header
+### H3 Header
+#### H4 Header
+##### H5 Header
+###### H6 Header
+
+## Paragraphs
+
+I really like using Markdown.
+
+I think I'll use it to format all of my documents from now on.
+
+## Emphasis
+
+_Italic Text_
+
+***Bold Text***
+
+__Bold and Italic Text__
+
+~~Strikethrough~~
+
+<u>Underline</u>
+
+## Lists
+
+1. Ordered List Item 1
+2. Ordered List Item 2
+3. Ordered List Item 3
+
+- Unordered List Item 1
+- Unordered List Item 2
+- Unordered List Item 3
+
+## Links
+
+[Link to GitHub](https://github.com/cozy/cozy-ui)
+
+## Images
+
+![The San Juan Mountains are beautiful!](/assets/images/san-juan-mountains.jpg "San Juan Mountains")
+
+## Code
+
+Inline code: \`const variable = 'value';\`
+
+Block code:
+\`\`\`javascript function add(a, b) { return a + b; }\`\`\`
+
+## Blockquotes
+
+> This is a blockquote.
+`;
+
+<Markdown content={textInMarkdown} />
+
+```

react/Markdown/index.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+
+import Link from '../Link'
+import Typography from '../Typography'
+
+const Markdown = ({ content }) => {
+  return (
+    <ReactMarkdown
+      source={content}
+      renderers={{
+        link: ({ children, href }) => (
+          <Link href={href} rel="noreferrer" target="_blank">
+            {children}
+          </Link>
+        ),
+        heading: ({ children, level }) => (
+          <Typography variant={`h${level}`} className="u-mb-1">
+            {children}
+          </Typography>
+        ),
+        paragraph: ({ children }) => (
+          <Typography variant="body1" className="u-mb-1">
+            {children}
+          </Typography>
+        )
+      }}
+    />
+  )
+}
+
+export default Markdown

react/Paywall/Paywall.jsx

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
 
 import { useInstanceInfo } from 'cozy-client'
 import { buildPremiumLink } from 'cozy-client/dist/models/instance'
@@ -14,6 +13,7 @@ import Button from '../Buttons'
 import { IllustrationDialog } from '../CozyDialogs'
 import Icon from '../Icon'
 import CozyUpgradeIcon from '../Icons/CozyUpgrade'
+import Markdown from '../Markdown'
 import Spinner from '../Spinner'
 import Typography from '../Typography'
 import { useI18n } from '../providers/I18n'
@@ -94,13 +94,10 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
         />
       }
       content={
-        <ReactMarkdown
-          source={t(`${variant}Paywall.${type}.content`, {
+        <Markdown
+          content={t(`${variant}Paywall.${type}.content`, {
             ...contentInterpolation
           })}
-          renderers={{
-            paragraph: ({ children }) => <p className="u-mt-0">{children}</p>
-          }}
         />
       }
       onClose={onClose}

react/Paywall/Readme.md

@@ -94,15 +94,15 @@ const makeClient = premiumLink =>
           }
         ]
       },
-      'io.cozy.settings/context': {
+      'io.cozy.settings/io.cozy.settings.context': {
         doctype: 'io.cozy.settings',
         definition: {
           doctype: 'io.cozy.settings',
-          id: 'io.cozy.settings/context'
+          id: 'io.cozy.settings/io.cozy.settings.context'
         },
         data: [
           {
-            id: 'io.cozy.settings/context',
+            id: 'io.cozy.settings/io.cozy.settings.context',
             attributes: {
               enable_premium_links: premiumLink,
               manager_url: 'http://mycozy.cloud',

react/index.js

@@ -137,3 +137,4 @@ export { default as AlertProvider, useAlert } from './Alert'
 export { default as Modal } from './Modal'
 export { ListSkeleton, ListItemSkeleton } from './Skeletons'
 export { default as ActionsBar } from './ActionsBar'
+export { default as Markdown } from './Markdown'