cozy-ui 111.8.1 → 111.10.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [111.10.0](https://github.com/cozy/cozy-ui/compare/v111.9.0...v111.10.0) (2024-09-16)
+
+
+### Features
+
+* Add secret in GA deploy script ([67e17f2](https://github.com/cozy/cozy-ui/commit/67e17f2))
+* **Badge:** Add `success`, `warning`, `info` colors ([2445e51](https://github.com/cozy/cozy-ui/commit/2445e51))
+* Revert adding token, seems not to be the problem ([4898612](https://github.com/cozy/cozy-ui/commit/4898612))
+* Try to use GITHUB_TOKEN to deploy ([8a18c13](https://github.com/cozy/cozy-ui/commit/8a18c13))
+* Update deploy config to avoid Protected branch update failed error ([5a13cfa](https://github.com/cozy/cozy-ui/commit/5a13cfa))
+
+# [111.9.0](https://github.com/cozy/cozy-ui/compare/v111.8.1...v111.9.0) (2024-09-05)
+
+
+### Features
+
+* Add markdwon component ([366def6](https://github.com/cozy/cozy-ui/commit/366def6))
+
 ## [111.8.1](https://github.com/cozy/cozy-ui/compare/v111.8.0...v111.8.1) (2024-08-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "111.8.1",
+  "version": "111.10.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -137,7 +137,6 @@
     "prettier": "2.6.0",
     "pretty": "2.0.0",
     "prop-types": "15.7.2",
-    "puppeteer-core": "22.15.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-hot-loader": "^4.3.11",

package/react/AppSections/generateI18nConfig.ts

@@ -1,6 +1,6 @@
-export const generateI18nConfig = (categories?: {
-  [key: string]: string
-}): {
+export const generateI18nConfig = (
+  categories?: Record<string, string>
+): {
   en: Record<string, string>
   fr: Record<string, string>
 } => {
@@ -11,7 +11,7 @@ export const generateI18nConfig = (categories?: {
   for (const [key, value] of Object.entries(categories)) {
     // Extract the final part of the path as the display name
     const displayName =
-      value?.split('/').pop() ?? ''.replace(/([A-Z])/g, ' $1').trim()
+      value.split('/').pop() ?? ''.replace(/([A-Z])/g, ' $1').trim()
 
     i18nConfig[`app_categories.${key}`] = displayName
   }

package/react/Badge/Readme.md

@@ -13,19 +13,15 @@ import Variants from 'cozy-ui/docs/components/Variants'
 import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled"
 
 const initialVariants = [
-  { overlap: true, error: false, dot: false, withBorder: false, left: false, bottom: false, small: false, large: false }
+  { overlap: true, dot: false, withBorder: false, left: false, bottom: false, small: false, large: false }
 ]
 
-;
-
-<Variants initialVariants={initialVariants} screenshotAllVariants>
-  {variant => (
+const DemoBadge = ({ variant, ...props }) => {
+  return (
     <Badge
+      {...props}
       className="u-m-half"
       badgeContent={4}
-      color={
-        variant.error ? "error" : variant.secondaryColor ? "secondary" : "primary"
-      }
       variant={variant.dot ? "dot" : "standard"}
       size={variant.large ? "large" : variant.small ? "small" : "medium"}
       anchorOrigin={{
@@ -41,6 +37,22 @@ const initialVariants = [
         color="var(--slateGrey)"
       />
     </Badge>
+  )
+}
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <>
+      <DemoBadge variant={variant} color="default" />
+      <DemoBadge variant={variant} color="primary" />
+      <DemoBadge variant={variant} color="secondary" />
+      <DemoBadge variant={variant} color="success" />
+      <DemoBadge variant={variant} color="error" />
+      <DemoBadge variant={variant} color="warning" />
+      <DemoBadge variant={variant} color="info" />
+    </>
   )}
 </Variants>
 ```

package/react/Badge/index.jsx

@@ -8,6 +8,7 @@ const Badge = ({
   size,
   withBorder,
   overlap: overlapProp,
+  color,
   ...props
 }) => {
   const sizeClasses = {
@@ -28,10 +29,16 @@ const Badge = ({
   return (
     <MuiBadge
       classes={{
-        badge: cx(sizeClasses[size], withBorder ? 'badgeBorder' : null),
+        badge: cx(sizeClasses[size], {
+          badgeBorder: !!withBorder,
+          colorSuccess: color === 'success',
+          colorWarning: color === 'warning',
+          colorInfo: color === 'info'
+        }),
         ...classes
       }}
       overlap={overlap}
+      color={['success', 'warning', 'info'].includes(color) ? 'primary' : color}
       {...props}
     />
   )
@@ -42,6 +49,16 @@ Badge.propTypes = {
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'top'])
   }),
+  className: PropTypes.string,
+  color: PropTypes.oneOf([
+    'default',
+    'success',
+    'warning',
+    'error',
+    'info',
+    'primary',
+    'secondary'
+  ]),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   showZero: PropTypes.bool,
   variant: PropTypes.oneOf(['standard', 'dot']),

package/react/ContactsListModal/ContactsListModal.jsx

@@ -17,12 +17,12 @@ import {
 import { DialogTitle, DialogContent } from '../Dialog'
 import Icon from '../Icon'
 import PlusIcon from '../Icons/Plus'
+import TextField from '../TextField'
 import useEventListener from '../hooks/useEventListener'
 import useRealtime from '../hooks/useRealtime'
-import CozyTheme from '../providers/CozyTheme'
 import useBreakpoints from '../providers/Breakpoints'
+import CozyTheme from '../providers/CozyTheme'
 import { useI18n } from '../providers/I18n'
-import TextField from '../TextField'
 
 const ContactsListModal = ({
   onItemClick,

package/react/Dialog/DialogEffects.spec.tsx

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom'
 import { Theme } from '@material-ui/core'
+import '@testing-library/jest-dom'
 import { render } from '@testing-library/react'
 import React from 'react'
 

package/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} />
+
+```

package/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

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -723,6 +723,20 @@ export const makeLightNormalOverrides = theme => ({
         fontSize: '.5rem'
       }
     },
+    colorPrimary: {
+      '&.colorSuccess': {
+        backgroundColor: theme.palette.success.main,
+        color: theme.palette.success.contrastText
+      },
+      '&.colorWarning': {
+        backgroundColor: theme.palette.warning.main,
+        color: theme.palette.warning.contrastText
+      },
+      '&.colorInfo': {
+        backgroundColor: theme.palette.info.main,
+        color: theme.palette.info.contrastText
+      }
+    },
     anchorOriginTopRightRectangular: {
       transform: 'scale(1) translate(37%, -37%)'
     },

package/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}

package/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',

package/react/__snapshots__/examples.spec.jsx.snap

@@ -356,8 +356,8 @@ exports[`Avatar should render examples: Avatar 1`] = `
 exports[`Badge should render examples: Badge 1`] = `
 "<div data-testid=\\"mountNode\\">
   <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
-    <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"OVERLAP\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">OVERLAP</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ERROR\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ERROR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"DOT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"WITHBORDER\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHBORDER</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LEFT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LEFT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BOTTOM\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BOTTOM</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"SMALL\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SMALL</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LARGE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGE</span></label>
-  </div><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span>
+    <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"OVERLAP\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">OVERLAP</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"DOT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"WITHBORDER\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHBORDER</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LEFT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LEFT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BOTTOM\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BOTTOM</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"SMALL\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SMALL</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LARGE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGE</span></label>
+  </div><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorSecondary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium colorSuccess MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightCircular MuiBadge-colorError\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium colorWarning MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span><span class=\\"MuiBadge-root u-m-half\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle></svg><span class=\\"MuiBadge-badge badgeSizeMedium colorInfo MuiBadge-anchorOriginTopRightCircular MuiBadge-colorPrimary\\">4</span></span>
 </div>"
 `;
 

package/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'

package/transpiled/react/AppSections/generateI18nConfig.d.ts

@@ -1,6 +1,4 @@
-export declare const generateI18nConfig: (categories?: {
-    [key: string]: string;
-} | undefined) => {
+export declare const generateI18nConfig: (categories?: Record<string, string> | undefined) => {
     en: Record<string, string>;
     fr: Record<string, string>;
 };

package/transpiled/react/AppSections/generateI18nConfig.js

@@ -10,12 +10,12 @@ export var generateI18nConfig = function generateI18nConfig(categories) {
     var _value$split$pop;
 
     var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-        _key = _Object$entries$_i[0],
+        key = _Object$entries$_i[0],
         value = _Object$entries$_i[1];
 
     // Extract the final part of the path as the display name
-    var displayName = (_value$split$pop = value === null || value === void 0 ? void 0 : value.split('/').pop()) !== null && _value$split$pop !== void 0 ? _value$split$pop : ''.replace(/([A-Z])/g, ' $1').trim();
-    i18nConfig["app_categories.".concat(_key)] = displayName;
+    var displayName = (_value$split$pop = value.split('/').pop()) !== null && _value$split$pop !== void 0 ? _value$split$pop : ''.replace(/([A-Z])/g, ' $1').trim();
+    i18nConfig["app_categories.".concat(key)] = displayName;
   }
 
   return {

package/transpiled/react/Badge/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["classes", "size", "withBorder", "overlap"];
+var _excluded = ["classes", "size", "withBorder", "overlap", "color"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -18,6 +18,7 @@ var Badge = function Badge(_ref) {
       size = _ref.size,
       withBorder = _ref.withBorder,
       overlapProp = _ref.overlap,
+      color = _ref.color,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var sizeClasses = {
@@ -30,9 +31,15 @@ var Badge = function Badge(_ref) {
   var overlap = overlapProp === 'circle' ? 'circular' : overlapProp === 'rectangle' ? 'rectangular' : overlapProp;
   return /*#__PURE__*/React.createElement(MuiBadge, _extends({
     classes: _objectSpread({
-      badge: cx(sizeClasses[size], withBorder ? 'badgeBorder' : null)
+      badge: cx(sizeClasses[size], {
+        badgeBorder: !!withBorder,
+        colorSuccess: color === 'success',
+        colorWarning: color === 'warning',
+        colorInfo: color === 'info'
+      })
     }, classes),
-    overlap: overlap
+    overlap: overlap,
+    color: ['success', 'warning', 'info'].includes(color) ? 'primary' : color
   }, props));
 };
 
@@ -41,6 +48,8 @@ Badge.propTypes = {
     horizontal: PropTypes.oneOf(['left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'top'])
   }),
+  className: PropTypes.string,
+  color: PropTypes.oneOf(['default', 'success', 'warning', 'error', 'info', 'primary', 'secondary']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   showZero: PropTypes.bool,
   variant: PropTypes.oneOf(['standard', 'dot']),

package/transpiled/react/ContactsListModal/ContactsListModal.js

@@ -15,12 +15,12 @@ import { TopAnchoredDialog, DialogCloseButton, useCozyDialog } from "cozy-ui/tra
 import { DialogTitle, DialogContent } from "cozy-ui/transpiled/react/Dialog";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import PlusIcon from "cozy-ui/transpiled/react/Icons/Plus";
+import TextField from "cozy-ui/transpiled/react/TextField";
 import useEventListener from "cozy-ui/transpiled/react/hooks/useEventListener";
 import useRealtime from "cozy-ui/transpiled/react/hooks/useRealtime";
-import CozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
+import CozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
-import TextField from "cozy-ui/transpiled/react/TextField";
 
 var ContactsListModal = function ContactsListModal(_ref) {
   var onItemClick = _ref.onItemClick,

package/transpiled/react/Markdown/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import Link from "cozy-ui/transpiled/react/Link";
+import Typography from "cozy-ui/transpiled/react/Typography";
+
+var Markdown = function Markdown(_ref) {
+  var content = _ref.content;
+  return /*#__PURE__*/React.createElement(ReactMarkdown, {
+    source: content,
+    renderers: {
+      link: function link(_ref2) {
+        var children = _ref2.children,
+            href = _ref2.href;
+        return /*#__PURE__*/React.createElement(Link, {
+          href: href,
+          rel: "noreferrer",
+          target: "_blank"
+        }, children);
+      },
+      heading: function heading(_ref3) {
+        var children = _ref3.children,
+            level = _ref3.level;
+        return /*#__PURE__*/React.createElement(Typography, {
+          variant: "h".concat(level),
+          className: "u-mb-1"
+        }, children);
+      },
+      paragraph: function paragraph(_ref4) {
+        var children = _ref4.children;
+        return /*#__PURE__*/React.createElement(Typography, {
+          variant: "body1",
+          className: "u-mb-1"
+        }, children);
+      }
+    }
+  });
+};
+
+export default Markdown;

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -753,6 +753,20 @@ export function makeDarkInvertedOverrides(theme: any): {
                 fontSize: string;
             };
         };
+        colorPrimary: {
+            '&.colorSuccess': {
+                backgroundColor: any;
+                color: any;
+            };
+            '&.colorWarning': {
+                backgroundColor: any;
+                color: any;
+            };
+            '&.colorInfo': {
+                backgroundColor: any;
+                color: any;
+            };
+        };
         anchorOriginTopRightRectangular: {
             transform: string;
         };

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -753,6 +753,20 @@ export function makeDarkNormalOverrides(theme: any): {
                 fontSize: string;
             };
         };
+        colorPrimary: {
+            '&.colorSuccess': {
+                backgroundColor: any;
+                color: any;
+            };
+            '&.colorWarning': {
+                backgroundColor: any;
+                color: any;
+            };
+            '&.colorInfo': {
+                backgroundColor: any;
+                color: any;
+            };
+        };
         anchorOriginTopRightRectangular: {
             transform: string;
         };

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -753,6 +753,20 @@ export function makeLightInvertedOverrides(theme: any): {
                 fontSize: string;
             };
         };
+        colorPrimary: {
+            '&.colorSuccess': {
+                backgroundColor: any;
+                color: any;
+            };
+            '&.colorWarning': {
+                backgroundColor: any;
+                color: any;
+            };
+            '&.colorInfo': {
+                backgroundColor: any;
+                color: any;
+            };
+        };
         anchorOriginTopRightRectangular: {
             transform: string;
         };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -753,6 +753,20 @@ export function makeLightNormalOverrides(theme: any): {
                 fontSize: string;
             };
         };
+        colorPrimary: {
+            '&.colorSuccess': {
+                backgroundColor: any;
+                color: any;
+            };
+            '&.colorWarning': {
+                backgroundColor: any;
+                color: any;
+            };
+            '&.colorInfo': {
+                backgroundColor: any;
+                color: any;
+            };
+        };
         anchorOriginTopRightRectangular: {
             transform: string;
         };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -667,6 +667,20 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
           fontSize: '.5rem'
         }
       },
+      colorPrimary: {
+        '&.colorSuccess': {
+          backgroundColor: theme.palette.success.main,
+          color: theme.palette.success.contrastText
+        },
+        '&.colorWarning': {
+          backgroundColor: theme.palette.warning.main,
+          color: theme.palette.warning.contrastText
+        },
+        '&.colorInfo': {
+          backgroundColor: theme.palette.info.main,
+          color: theme.palette.info.contrastText
+        }
+      },
       anchorOriginTopRightRectangular: {
         transform: 'scale(1) translate(37%, -37%)'
       },