cozy-ui 58.1.2 → 58.4.1

package/.nvmrc

@@ -0,0 +1 @@
+10

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [58.4.1](https://github.com/cozy/cozy-ui/compare/v58.4.0...v58.4.1) (2022-01-04)
+
+
+### Bug Fixes
+
+* BottomSheet no longer opens fully ([ddb8715](https://github.com/cozy/cozy-ui/commit/ddb8715))
+
+# [58.4.0](https://github.com/cozy/cozy-ui/compare/v58.3.0...v58.4.0) (2021-12-14)
+
+
+### Features
+
+* Added Qualification panel block ([9fbaaa6](https://github.com/cozy/cozy-ui/commit/9fbaaa6))
+* Upgrade cozy-client ([8820f81](https://github.com/cozy/cozy-ui/commit/8820f81))
+
+# [58.3.0](https://github.com/cozy/cozy-ui/compare/v58.2.0...v58.3.0) (2021-12-13)
+
+
+### Features
+
+* Disable sharing button on Viewer ([c7303b3](https://github.com/cozy/cozy-ui/commit/c7303b3))
+
+# [58.2.0](https://github.com/cozy/cozy-ui/compare/v58.1.2...v58.2.0) (2021-12-08)
+
+
+### Features
+
+* Add `noWrap` prop on BarTitle ([74e3742](https://github.com/cozy/cozy-ui/commit/74e3742))
+
 ## [58.1.2](https://github.com/cozy/cozy-ui/compare/v58.1.1...v58.1.2) (2021-12-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "58.1.2",
+  "version": "58.4.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -87,7 +87,7 @@
     "commitlint": "7.6.1",
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.1.1",
-    "cozy-client": "^18.1.2",
+    "cozy-client": "^27.5.1",
     "cozy-device-helper": "1.12.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
@@ -164,7 +164,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": "4",
-    "cozy-client": ">=18.1.2",
+    "cozy-client": ">=27.5.1",
     "cozy-device-helper": "^1.10.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",

package/react/Alerter/Readme.md

@@ -1,7 +1,7 @@
 Display notications!
 Include the `<Alerter />` component somewhere in your app, but only once. After that, you can use the static methods `Alerter.info`, `Alerter.success` and `Alerter.error` to trigger a notification.
 
-```
+```jsx
 import Alerter from 'cozy-ui/transpiled/react/Alerter';
 
 if (isTesting()) {
@@ -23,7 +23,7 @@ if (isTesting()) {
 
 The `Alerter` methods support an optionnal second parameter, which can be used to add a button to the notification, with the `buttonText` and `buttonAction` keys:
 
-```
+```jsx
 import Alerter from 'cozy-ui/transpiled/react/Alerter';
 const triggerAlert = () => {
   Alerter.info("Accept our terms and conditions and subscribe to our newsletter", {
@@ -56,7 +56,7 @@ const triggerAlertSuccess = () => {
 
 A dismiss function is provided to the `buttonAction` as argument which allow you to dismiss the alert before the duration ends from anywhere in your `buttonAction` code:
 
-```
+```jsx
 import Alerter from 'cozy-ui/transpiled/react/Alerter';
 
 const triggerAlertWithDismiss = () => {

package/react/AppLinker/Readme.md

@@ -14,7 +14,7 @@ Handles several cases:
 As it uses the render props pattern, it is flexible and can be used to build components that are more complex than a simple
 anchor.
 
-```
+```jsx
 import AppLinker from 'cozy-ui/transpiled/react/AppLinker';
 <AppLinker slug='banks' href='http://dalailama-banks.mycozy.cloud'>{
   ({ onClick, href, name }) => (

package/react/AppSections/Readme.md

@@ -1,8 +1,8 @@
 ```jsx
 import { useState } from 'react'
 import mockApps from './_mockApps'
-import { I18n } from '../I18n'
-import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import { I18n } from 'cozy-ui/transpiled/react/I18n'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import Sections from 'cozy-ui/transpiled/react/AppSections'
 import Variants from 'cozy-ui/docs/components/Variants'
 

package/react/AppTile/Readme.md

@@ -2,9 +2,9 @@ Component used to show an app status, can be used in
 a list of apps for example in the Store.
 
 ```jsx
-import AppTile from '.'
+import AppTile from 'cozy-ui/transpiled/react/AppTile'
 import mockApps from '../AppSections/_mockApps'
-import { I18n } from '../I18n'
+import { I18n } from 'cozy-ui/transpiled/react/I18n'
 import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
 
 const locale = {}

package/react/AppTitle/Readme.md

@@ -2,7 +2,7 @@ Displays the App title in the Cozy Bar
 
 ### Default
 
-```
+```jsx
 import AppTitle from 'cozy-ui/transpiled/react/AppTitle';
 
 <AppTitle>Drive</AppTitle>

package/react/BarTitle/Readme.md

@@ -15,12 +15,22 @@ const MyPage = () => {
 }
 ```
 
-### Display
+### Basic usage
 
-The border is here to show the area of the bar.
+The red border is here only to show the area of the bar.
 
-```
-<div style={{ height: '3rem', border: '1px solid var(--dividerColor) ' }}>
+```jsx
+<div style={{ border: '1px solid red' }}>
   <BarTitle>My transactions</BarTitle>
 </div>
 ```
+
+### Long title with ellipsis
+
+The red border is here only to show the area of the bar.
+
+```jsx
+<div style={{ border: '1px solid red' }}>
+  <BarTitle noWrap>{content.ada.short}</BarTitle>
+</div>
+```

package/react/BarTitle/index.jsx

@@ -1,13 +1,27 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+
 import Typography from '../Typography'
+
 import styles from './styles.styl'
 
-const BarTitle = ({ children }) => {
+const BarTitle = ({ noWrap, children }) => {
   return (
-    <Typography variant="h5" component="h1" className={styles.BarTitle}>
-      {children}
-    </Typography>
+    <div className={styles.BarTitle}>
+      <Typography variant="h5" component="h1" noWrap={noWrap}>
+        {children}
+      </Typography>
+    </div>
   )
 }
 
+BarTitle.defaultProps = {
+  noWrap: false
+}
+
+BarTitle.propTypes = {
+  /** Add an ellipsis like `noWrap` prop on Typography component does */
+  noWrap: PropTypes.bool
+}
+
 export default BarTitle

package/react/BottomDrawer/Readme.md

@@ -1,6 +1,6 @@
 Displays content coming up from the bottom of the screen.
 
-```
+```jsx
 import BottomDrawer from 'cozy-ui/transpiled/react/BottomDrawer';
 import Card from 'cozy-ui/transpiled/react/Card';
 import Button from 'cozy-ui/transpiled/react/Button';

package/react/Breadcrumbs/Readme.md

@@ -4,10 +4,10 @@ of the application.
 Below is an example where the breadcrumbs are used in a file application
 context.
 
-```
+```jsx
 import { Component } from 'react'
-import Breadcrumbs from '.';
-import Icon from '../Icon';
+import Breadcrumbs from 'cozy-ui/transpiled/react/Breadcrumbs';
+import Icon from 'cozy-ui/transpiled/react/Icon';
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
 import FolderIcon from 'cozy-ui/transpiled/react/Icons/Folder'
 

package/react/Button/Readme.md

@@ -15,7 +15,7 @@ when `<ButtonLink>` has:
 
 #### Themes
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 const props = [{}, { disabled: true}, { busy: true }];
 const themes = ['regular', 'ghost', 'danger', 'highlight', 'secondary', 'danger-outline', 'alpha', 'text'];
@@ -33,7 +33,7 @@ const themes = ['regular', 'ghost', 'danger', 'highlight', 'secondary', 'danger-
 
 #### Sizes
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 
 <div>
@@ -50,7 +50,7 @@ import Button from 'cozy-ui/transpiled/react/Button';
 * `narrow` to ignore Button's `min-width`
 * `full` to enable full width
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 import Stack from 'cozy-ui/transpiled/react/Stack';
 
@@ -67,7 +67,7 @@ import Stack from 'cozy-ui/transpiled/react/Stack';
 * `right` to align the label to the right
 * `center` to center the label (default)
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 
 <div>
@@ -80,7 +80,7 @@ import Button from 'cozy-ui/transpiled/react/Button';
 
 #### Extra right content
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 import Chip from 'cozy-ui/transpiled/react/Chip';
 
@@ -91,19 +91,19 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 
 #### Add a action on click
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 <Button theme='danger-outline' onClick={ () => alert('yay !') } label='Show alert' />
 ```
 
 #### When loading, put a spinner
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 <Button busy label='Loading'/>
 ```
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 initialState = { busy:false };
 <Button onClick={() => {setState(state => ({busy: !state.busy}))}} busy={state.busy} label='Toggle busy'/>
@@ -111,7 +111,7 @@ initialState = { busy:false };
 
 #### Disable a button
 
-```
+```jsx
 import Button, { ButtonLink } from 'cozy-ui/transpiled/react/Button';
 <div>
   <Button disabled label='Loading' />
@@ -124,7 +124,7 @@ import Button, { ButtonLink } from 'cozy-ui/transpiled/react/Button';
 The color of the icon is taken care of by the button style, there's no need to specify it.
 If you want a button with only an icon as content, you must set the `iconOnly` prop.
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash";
 import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
@@ -136,7 +136,7 @@ import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 
 You can also pass an Icon directly if you need more flexibility.
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash";
@@ -147,7 +147,7 @@ import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash";
 
 #### Create a round button with an icon
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 import PlusIcon from "cozy-ui/transpiled/react/Icons/Plus";
 import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
@@ -161,7 +161,7 @@ import CrossIcon from "cozy-ui/transpiled/react/Icons/Cross";
 
 Subtle buttons are buttons without background and borders, wich look "inverted" compared to the basic Buttons.
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 import PlusIcon from "cozy-ui/transpiled/react/Icons/Plus";
 import CozyIcon from "cozy-ui/transpiled/react/Icons/Cozy";
@@ -197,7 +197,7 @@ import CozyIcon from "cozy-ui/transpiled/react/Icons/Cozy";
 
 #### Using Links
 
-```
+```jsx
 import { ButtonLink } from 'cozy-ui/transpiled/react/Button';
 import CozyIcon from "cozy-ui/transpiled/react/Icons/Cozy";
 <div>
@@ -226,7 +226,7 @@ Sometimes you want to change the tag or component used to render the Button. For
 You can pass `tag={NavLink}` and `NavLink` will be used. Any props that you
 pass to the `Button` will be passed down to the component.
 
-```
+```jsx
 import Button from 'cozy-ui/transpiled/react/Button';
 const NavLink = props => (
   <span onClick={() => alert(`Navigating to ${props.to}`)} {...props}>{

package/react/Card/Readme.md

@@ -1,6 +1,6 @@
 A card is a small block used to separate some content from the rest of the UI.
 
-```
+```jsx
 import Card from 'cozy-ui/transpiled/react/Card';
 import Button from 'cozy-ui/transpiled/react/Button';
 import Typography from "cozy-ui/transpiled/react/Typography";
@@ -18,7 +18,7 @@ import Typography from "cozy-ui/transpiled/react/Typography";
 
 Renders the Card with increased margins.
 
-```
+```jsx
 import Card from 'cozy-ui/transpiled/react/Card';
 import Typography from "cozy-ui/transpiled/react/Typography";
 
@@ -31,7 +31,7 @@ import Typography from "cozy-ui/transpiled/react/Typography";
 
 Uses the provided tag to render the root element of the Card
 
-```
+```jsx
 import Card from 'cozy-ui/transpiled/react/Card';
 import Typography from "cozy-ui/transpiled/react/Typography";
 

package/react/Chip/Readme.md

@@ -1,6 +1,6 @@
 Chips represent complex entities in small blocks, such as a contact.
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';
@@ -26,7 +26,7 @@ const ContactChip = ({ contact }) => (
 
 ### Round chip
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
@@ -37,7 +37,7 @@ import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
 
 ### Chip separator
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 <Chip>
   Something
@@ -48,7 +48,7 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 
 ### Chip buttons
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import RightIcon from "cozy-ui/transpiled/react/Icons/Right";
@@ -61,7 +61,7 @@ import LeftIcon from "cozy-ui/transpiled/react/Icons/Left";
 
 ### Specify underlying tag/component
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 <div>
   <Chip component="button" onClick={() => alert('You clicked')}>This is a button</Chip>
@@ -72,7 +72,7 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 
 ### Sizes
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 <div>
   <Chip size="tiny">This is a tiny Chip</Chip>
@@ -83,7 +83,7 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 
 ### Variants
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 <div>
   <Chip variant="normal">This is a normal Chip (default)</Chip>
@@ -94,7 +94,7 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 
 ### Themes
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 <div>
   <div>
@@ -117,7 +117,7 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 
 ### Mix sizes, variants and themes
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 <div>
   <div>
@@ -140,7 +140,7 @@ import Chip from 'cozy-ui/transpiled/react/Chip';
 
 ### Complete example
 
-```
+```jsx
 import Chip from 'cozy-ui/transpiled/react/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import FileIcon from "cozy-ui/transpiled/react/Icons/File";

package/react/CipherIcon/Readme.md

@@ -1,6 +1,6 @@
 This is an icon representing a cipher for a given konnector
 
-```
+```jsx
 import CipherIcon from 'cozy-ui/transpiled/react/CipherIcon';
 
 <div>

package/react/CompositeRow/Readme.md

@@ -1,8 +1,8 @@
-```js
-import { Media, Bd, Img } from '../Media'
-import UIChip from '../Chip'
-import Icon from '../Icon'
-import Circle from '../Circle'
+```jsx
+import { Media, Bd, Img } from 'cozy-ui/transpiled/react/Media'
+import UIChip from 'cozy-ui/transpiled/react/Chip'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Circle from 'cozy-ui/transpiled/react/Circle'
 import Variants from 'cozy-ui/docs/components/Variants'
 import CompositeRow from 'cozy-ui/transpiled/react/CompositeRow'
 

package/react/ContactPicker/Readme.md

@@ -1,7 +1,7 @@
 ```jsx
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import ContactPicker from 'cozy-ui/transpiled/react/ContactPicker'
-import DemoProvider from '../ContactsListModal/DemoProvider'
+import DemoProvider from 'cozy-ui/transpiled/react/ContactsListModal/DemoProvider'
 
 initialState = { selectedContact: null }
 

package/react/ContactPicker/index.spec.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 
 import DemoProvider from '../ContactsListModal/DemoProvider'
 import { BreakpointsProvider } from '../hooks/useBreakpoints'
-import contacts from '../ContactsList/data.json'
+import contacts from '../ContactsList/_mockContacts.json'
 
 import ContactPicker from '.'
 

package/react/ContactsList/Readme.md

@@ -3,7 +3,7 @@
 ```jsx
 import ContactsList from 'cozy-ui/transpiled/react/ContactsList';
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
-import contacts from './data.json';
+import contacts from './_mockContacts.json';
 
 <BreakpointsProvider>
   <div style={{ height: 500, overflowY: 'scroll' }}>
@@ -16,7 +16,7 @@ import contacts from './data.json';
 
 ```jsx
 import ContactsList from 'cozy-ui/transpiled/react/ContactsList';
-import contacts from './data.json';
+import contacts from './_mockContacts.json';
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
 
 initialState = { contact: null };

package/react/ContactsListModal/DemoProvider.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import contacts from '../ContactsList/data.json'
+import contacts from '../ContactsList/_mockContacts.json'
 import CozyClient, { CozyProvider } from 'cozy-client'
 
 const mockClient = new CozyClient({

package/react/Counter/Readme.md

@@ -2,7 +2,7 @@ A simple way to show how many _things_ there are.
 
 ### Default
 
-```
+```jsx
 import Counter from 'cozy-ui/transpiled/react/Counter';
 <div >
   <Counter count={42} />
@@ -13,7 +13,7 @@ import Counter from 'cozy-ui/transpiled/react/Counter';
 
 Above a certain number, an approximation is displayed. The default treshold is 99.
 
-```
+```jsx
 import Counter from 'cozy-ui/transpiled/react/Counter';
 <div >
   <Counter count={14} max={5} />

package/react/DateMonthPicker/Readme.md

@@ -1,4 +1,4 @@
-```
+```jsx
 import I18n from 'cozy-ui/transpiled/react/I18n';
 import DateMonthPicker from 'cozy-ui/transpiled/react/DateMonthPicker';
 import Stack from 'cozy-ui/transpiled/react/Stack';

package/react/DropdownButton/Readme.md

@@ -1,6 +1,6 @@
 This component can be used as a trigger to open menus, for example an ActionMenu component.
 
-```
+```jsx
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Typography from "cozy-ui/transpiled/react/Typography";
 

package/react/Field/Readme.md

@@ -169,8 +169,8 @@ const options = [
 
 ```jsx
 import Field from 'cozy-ui/transpiled/react/Field'
-import DemoProvider from '../ContactsListModal/DemoProvider'
-import { BreakpointsProvider } from '../hooks/useBreakpoints'
+import DemoProvider from 'cozy-ui/transpiled/react/ContactsListModal/DemoProvider'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 
 initialState = { selectedContact: null }
 

package/react/FileImageLoader/Readme.md

@@ -3,7 +3,7 @@
 A component to get the image in `links` prop of a file, according to its class (could be `image` or `pdf`).
 
 ```jsx
-import DemoProvider from '../Viewer/docs/DemoProvider'
+import DemoProvider from 'cozy-ui/transpiled/react/Viewer/docs/DemoProvider'
 
 import FileImageLoader from 'cozy-ui/transpiled/react/FileImageLoader'
 import Icon from 'cozy-ui/transpiled/react/Icon'

package/react/Filename/Readme.md

@@ -1,6 +1,6 @@
 #### Filename with extension (ellipsis by default)
 
-```
+```jsx
 import Filename from 'cozy-ui/transpiled/react/Filename';
 <div>
   <Filename filename="Lacinia condimentum potenti id est tortor dictumst lectus tincidunt hac ultricies, curae mattis nisi neque sodales sagittis dui nulla aliquam turpis eros, finibus ac iaculis dictum et orci elit posuere ex" extension=".pdf" />
@@ -9,7 +9,7 @@ import Filename from 'cozy-ui/transpiled/react/Filename';
 
 #### Filename with extension and icon
 
-```
+```jsx
 import Filename from 'cozy-ui/transpiled/react/Filename';
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File';
 

package/react/GhostFileBadge/Readme.md

@@ -1,6 +1,6 @@
 Ghost badges are specifically used to indicate that a file in a Cozy is a ghost file — it is not truly in the Cozy (usually it is shared from another instance).
 
-```
+```jsx
 import GhostFileBadge from 'cozy-ui/transpiled/react/GhostFileBadge';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Avatar from 'cozy-ui/transpiled/react/Avatar';

package/react/IconStack/Readme.md

@@ -5,7 +5,7 @@ other component on the foreground.
 
 Use IconStack when the resulting combination of icons is considered a single entity.
 
-```
+```jsx
 import IconStack from 'cozy-ui/transpiled/react/IconStack';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import FileDuotoneIcon from "cozy-ui/transpiled/react/Icons/FileDuotone";

package/react/InfosCarrousel/Readme.md

@@ -2,7 +2,7 @@
 
 Displays several Infos component in a Carrousel. [react-swipeable-views](https://react-swipeable-views.com/) is used under the hood and can be configured.
 
-```
+```jsx
 import InfosCarrousel from 'cozy-ui/transpiled/react/InfosCarrousel'
 import Infos from 'cozy-ui/transpiled/react/Infos'
 import Button from 'cozy-ui/transpiled/react/Button'
@@ -41,7 +41,7 @@ const handleDismissAction = () => {
 
 Arrows are not displayed if there is only 1 info.
 
-```
+```jsx
 import InfosCarrousel from 'cozy-ui/transpiled/react/InfosCarrousel'
 import Infos from 'cozy-ui/transpiled/react/Infos'
 import Button from 'cozy-ui/transpiled/react/Button'

package/react/InlineCard/Readme.md

@@ -1,6 +1,6 @@
 A inline card is a small inline block used to separate some content from the rest of the UI.
 
-```
+```jsx
 import InlineCard from 'cozy-ui/transpiled/react/InlineCard';
 <InlineCard>
   I am an inline card