cozy-ui 68.9.0 → 69.1.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# [69.1.0](https://github.com/cozy/cozy-ui/compare/v69.0.0...v69.1.0) (2022-07-05)
+
+
+### Features
+
+* **Icon:** Add new tag icon ([514402f](https://github.com/cozy/cozy-ui/commit/514402f))
+
+# [69.0.0](https://github.com/cozy/cozy-ui/compare/v68.9.1...v69.0.0) (2022-07-01)
+
+
+### Bug Fixes
+
+* **Typography:** Removed forced color ([1880d93](https://github.com/cozy/cozy-ui/commit/1880d93))
+
+
+### BREAKING CHANGES
+
+* **Typography:** Old deprecated texts components are removed : `Text`, `Title`, `MainTitle`, `SubTitle`, `Bold`, `Uppercase`, `Caption`, `ErrorMessage`, `NewSubTitle` from `/react/Text`. You now have to rely on `Typography` component. You can use a codemod for that :
+```
+$ yarn global add @cozy/codemods
+$ jscodeshift -t $(yarn global dir)/node_modules/@cozy/codemods/src/transforms/transform-typography.js src --parser babel --ignore-pattern=src/targets/ --extensions js,jsx
+```
+
+## [68.9.1](https://github.com/cozy/cozy-ui/compare/v68.9.0...v68.9.1) (2022-06-30)
+
+
+### Bug Fixes
+
+* **ListSubheader:** Only 1rem of text indent on mobile ([af38d1d](https://github.com/cozy/cozy-ui/commit/af38d1d))
+
 # [68.9.0](https://github.com/cozy/cozy-ui/compare/v68.8.0...v68.9.0) (2022-06-30)
 
 

package/assets/icons/ui/tag.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/><path clip-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v5.89a2 2 0 0 0 .586 1.415l5.98 5.973a2.462 2.462 0 0 0 3.481 0l5.236-5.237.002-.002a2.461 2.461 0 0 0 0-3.47L9.303.587A2 2 0 0 0 7.888 0H2Zm0 2h5.888l5.978 5.98a.461.461 0 0 1 0 .649l-5.234 5.236a.46.46 0 0 1-.652 0L2 7.89V2Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "68.9.0",
+  "version": "69.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionMenu/__snapshots__/index.spec.jsx.snap

@@ -128,7 +128,7 @@ exports[`ActionMenu should render as expected 1`] = `
       class="styles__bd___1Uv-F u-mr-1 u-stack-xs"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom"
+        class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-gutterBottom"
       >
         Item 4
       </p>

package/react/ContactsList/__snapshots__/ContactRow.spec.js.snap

@@ -27,7 +27,7 @@ exports[`ContactRow should match the contact snapshot 1`] = `
       </span>
     </div>
     <p
-      className="MuiTypography-root u-ml-1 MuiTypography-body1 MuiTypography-noWrap MuiTypography-gutterBottom MuiTypography-displayInline"
+      className="MuiTypography-root u-ml-1 MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-noWrap MuiTypography-gutterBottom MuiTypography-displayInline"
     >
       <span
         className=""

package/react/CozyTheme/Readme.md

@@ -9,7 +9,6 @@ The inverted theme is not supported for several components but the work
 
 ```jsx
 import CozyTheme from 'cozy-ui/transpiled/react/CozyTheme'
-import { Title, SubTitle } from 'cozy-ui/transpiled/react/Text'
 import Button from 'cozy-ui/transpiled/react/Button'
 import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons'
 import TextField from 'cozy-ui/transpiled/react/MuiCozyTheme/TextField'
@@ -29,8 +28,8 @@ const themesSupportingContext = [
 
 <CozyTheme variant='inverted' className='u-stack-m'>
   <Paper className='u-p-1'>
-    <Title className='u-white u-mb-1'>Inverted theme</Title>
-    <SubTitle className='u-white'>Buttons</SubTitle>
+    <Typography className='u-white u-mb-1' variant="h4">Inverted theme</Typography>
+    <Typography className='u-white' variant="h5">Buttons</Typography>
     {themesSupportingContext.map(theme =>
       <p key={theme}>{
         props.map(
@@ -38,13 +37,13 @@ const themesSupportingContext = [
         )
       }</p>
     )}
-    <SubTitle className='u-white u-mt-1'>BarButton</SubTitle>
+    <Typography className='u-white u-mt-1' variant="h5">BarButton</Typography>
     <BarButton icon={DotsIcon} />
-    <SubTitle className='u-white u-mb-1'>MUI Buttons</SubTitle>
+    <Typography className='u-white u-mb-1' variant="h5">MUI Buttons</Typography>
     <MuiButton variant='outlined' color='primary'>
       A MUI button
     </MuiButton>
-    <SubTitle className='u-white u-mt-1'>MUI TextField</SubTitle>
+    <Typography className='u-white u-mt-1' variant="h5">MUI TextField</Typography>
     <TextField
       id="inverted-field"
       label="A field"
@@ -53,7 +52,7 @@ const themesSupportingContext = [
       variant="outlined"
       placeholder="placeholder"
     />
-    <SubTitle className='u-white u-mt-1'>Normal theme inside inverted theme</SubTitle>
+    <Typography className='u-white u-mt-1' variant="h5">Normal theme inside inverted theme</Typography>
     <CozyTheme variant='normal'>
       <Paper className='u-p-1 u-mv-1'>
           <Typography variant='body1'>

package/react/Icon/Readme.md

@@ -214,6 +214,7 @@ import Stats from 'cozy-ui/transpiled/react/Icons/Stats'
 import Subway from 'cozy-ui/transpiled/react/Icons/Subway'
 import Sync from 'cozy-ui/transpiled/react/Icons/Sync'
 import SyncCozy from 'cozy-ui/transpiled/react/Icons/SyncCozy'
+import Tag from 'cozy-ui/transpiled/react/Icons/Tag'
 import Target from 'cozy-ui/transpiled/react/Icons/Target'
 import Team from 'cozy-ui/transpiled/react/Icons/Team'
 import Telephone from 'cozy-ui/transpiled/react/Icons/Telephone'
@@ -426,6 +427,7 @@ const icons = [
   Subway,
   Sync,
   SyncCozy,
+  Tag,
   Target,
   Team,
   Telephone,
@@ -704,7 +706,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -526,7 +526,7 @@ module.exports = `<svg><defs>
             <path d="M8 2c2.21 0 4 1.79 4 4 2.21 0 4 1.79 4 4s-1.79 4-4 4H4c-2.21 0-4-1.79-4-4s1.79-4 4-4c0-2.21 1.79-4 4-4zM4.6 9.014c-.12-.025-.242-.004-.345.055l-.038.024c-.042.029-.08.063-.112.104l-.012.014c-.034.047-.059.1-.074.16l-.006.04C4.008 9.441 4 9.469 4 9.5v2c0 .276.224.5.5.5.237 0 .426-.168.478-.39C5.728 12.459 6.818 13 8 13c1.547 0 2.956-.899 3.632-2.268.122-.247.02-.547-.228-.67-.248-.121-.547-.02-.67.228C10.227 11.322 9.162 12 8 12c-.74 0-1.436-.286-1.976-.754.135-.007.267-.064.36-.176.177-.212.148-.527-.064-.704l-1.5-1.25c-.005-.005-.012-.006-.017-.011l-.04-.024c-.04-.025-.08-.045-.124-.057zM8 5c-1.57 0-2.992.906-3.653 2.291-.119.25-.013.548.236.667.25.118.548.013.667-.236C5.746 6.682 6.817 6 8 6c.769 0 1.477.287 2.017.758-.149-.005-.298.048-.401.172-.177.212-.148.527.064.704l1.5 1.25.011.007c.01.008.023.013.034.02.04.028.083.05.127.063l.04.01c.054.012.11.017.163.01.005 0 .009.002.013.001.063-.01.118-.031.17-.059.014-.007.025-.016.038-.024.04-.027.076-.059.107-.097l.02-.021c.034-.047.06-.1.077-.158.003-.01.002-.02.004-.03.008-.034.016-.068.016-.106v-2c0-.276-.224-.5-.5-.5-.226 0-.41.152-.471.357C10.284 5.523 9.196 5 7.999 5z"/>
         </g>
     </g>
-</symbol><symbol id="sync" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M16 7.2V3c0-.6-.4-1-1-1-.5 0-.8.3-.9.7A8.09 8.09 0 0 0 8 0C4.9 0 2 1.8.7 4.6c-.2.5 0 1.1.5 1.3.5.2 1.1 0 1.3-.5C3.5 3.4 5.6 2 8 2c1.5 0 3 .6 4 1.5-.3 0-.6.1-.8.3-.4.4-.3 1.1.1 1.4l3 2.5h.1c.1.1.2.1.3.1h.4c.1 0 .2-.1.3-.1h.1c.1-.1.2-.1.2-.2.2 0 .2-.1.3-.3 0 .1 0 0 0 0m-1.2 2.9c-.5-.2-1.1 0-1.3.5A6 6 0 0 1 8 14c-1.5 0-2.9-.6-4-1.5.3 0 .5-.1.7-.4.4-.4.3-1.1-.1-1.4l-3-2.5h-.1L1.3 8h-.1c-.2 0-.5 0-.7.1H.4c-.1.1-.1.2-.2.3-.1.1-.1.2-.2.3V13c0 .6.4 1 1 1 .5 0 .9-.3 1-.8C3.5 14.9 5.6 16 8 16c3.1 0 5.9-1.8 7.3-4.5.2-.5 0-1.1-.5-1.4"/></symbol><symbol id="target" viewBox="0 0 16 16">
+</symbol><symbol id="sync" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M16 7.2V3c0-.6-.4-1-1-1-.5 0-.8.3-.9.7A8.09 8.09 0 0 0 8 0C4.9 0 2 1.8.7 4.6c-.2.5 0 1.1.5 1.3.5.2 1.1 0 1.3-.5C3.5 3.4 5.6 2 8 2c1.5 0 3 .6 4 1.5-.3 0-.6.1-.8.3-.4.4-.3 1.1.1 1.4l3 2.5h.1c.1.1.2.1.3.1h.4c.1 0 .2-.1.3-.1h.1c.1-.1.2-.1.2-.2.2 0 .2-.1.3-.3 0 .1 0 0 0 0m-1.2 2.9c-.5-.2-1.1 0-1.3.5A6 6 0 0 1 8 14c-1.5 0-2.9-.6-4-1.5.3 0 .5-.1.7-.4.4-.4.3-1.1-.1-1.4l-3-2.5h-.1L1.3 8h-.1c-.2 0-.5 0-.7.1H.4c-.1.1-.1.2-.2.3-.1.1-.1.2-.2.3V13c0 .6.4 1 1 1 .5 0 .9-.3 1-.8C3.5 14.9 5.6 16 8 16c3.1 0 5.9-1.8 7.3-4.5.2-.5 0-1.1-.5-1.4"/></symbol><symbol id="tag" viewBox="0 0 16 16"><path d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/><path clip-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v5.89a2 2 0 0 0 .586 1.415l5.98 5.973a2.462 2.462 0 0 0 3.481 0l5.236-5.237.002-.002a2.461 2.461 0 0 0 0-3.47L9.303.587A2 2 0 0 0 7.888 0H2Zm0 2h5.888l5.978 5.98a.461.461 0 0 1 0 .649l-5.234 5.236a.46.46 0 0 1-.652 0L2 7.89V2Z"/></symbol><symbol id="target" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M9 12.899V12a1 1 0 0 0-2 0v.899A5.016 5.016 0 0 1 3.101 9H4a1 1 0 0 0 0-2h-.899A5.016 5.016 0 0 1 7 3.101V4a1 1 0 0 0 2 0v-.899A5.016 5.016 0 0 1 12.899 7H12a1 1 0 0 0 0 2h.899A5.016 5.016 0 0 1 9 12.899zM16 7h-1.08A7.005 7.005 0 0 0 9 1.08V1a1 1 0 0 0-2 0v.08A7.005 7.005 0 0 0 1.08 7H1a1 1 0 0 0 0 2h.08A7.004 7.004 0 0 0 7 14.92V15a1 1 0 0 0 2 0v-.08A7.004 7.004 0 0 0 14.92 9H16V7z"/>
 </symbol><symbol id="team" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M11.145 7.75C10.263 7.285 9.647 6.23 9.647 5c0-1.657 1.12-3 2.5-3 1.381 0 2.5 1.343 2.5 3 0 1.231-.618 2.29-1.502 2.752V9l1.105.553c.49.245 1.095.848 1.342 1.342l.106.21c.245.49 0 .895-.55.895H9.142c-.544 0-.797-.4-.55-.895l.106-.21c.245-.49.848-1.095 1.342-1.342L11.145 9V7.75zM4.647 10.8c-1.165-.48-2-1.776-2-3.3 0-1.933 1.343-3.5 3-3.5s3 1.567 3 3.5c0 1.524-.835 2.82-2 3.3V12l2.051.684c.532.177 1.15.717 1.397 1.21l.105.211c.245.49.002.895-.548.895h-8.01c-.539 0-.794-.4-.547-.895l.105-.21c.245-.49.872-1.037 1.397-1.211L4.647 12v-1.2z"/>

package/react/Icons/Tag.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/tag.svg` to regenerate;
+import React from 'react'
+
+function SvgTag(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <path d="M5 6a1 1 0 100-2 1 1 0 000 2z" />
+      <path
+        clipRule="evenodd"
+        d="M2 0a2 2 0 00-2 2v5.89a2 2 0 00.586 1.415l5.98 5.973a2.462 2.462 0 003.481 0l5.236-5.237.002-.002a2.461 2.461 0 000-3.47L9.303.587A2 2 0 007.888 0H2zm0 2h5.888l5.978 5.98a.461.461 0 010 .649l-5.234 5.236a.46.46 0 01-.652 0L2 7.89V2z"
+      />
+    </svg>
+  )
+}
+
+export default SvgTag

package/react/MuiCozyTheme/makeOverrides.js

@@ -432,14 +432,17 @@ const makeOverrides = theme => ({
       padding: 0,
       height: '2rem',
       backgroundColor: theme.palette.background.paper,
-      textIndent: '2rem',
+      textIndent: '1rem',
       fontWeight: 'bold',
       fontSize: '.75rem',
       textTransform: 'uppercase',
       alignItems: 'center',
       display: 'flex',
       lineHeight: 1.33,
-      color: theme.palette.text.secondary
+      color: theme.palette.text.secondary,
+      [theme.breakpoints.up('sm')]: {
+        textIndent: '2rem'
+      }
     },
     gutters: {
       paddingLeft: 0,

package/react/MuiCozyTheme/makeTypography.js

@@ -4,39 +4,33 @@ export const makeTypography = palette => ({
   fontFamily: getCssVariableValue('primaryFont') || 'Lato',
   h1: {
     fontSize: 48,
-    color: palette.text.primary,
     fontWeight: 'bold',
     lineHeight: 1.087,
     letterSpacing: -0.8
   },
   h2: {
     fontSize: 32,
-    color: palette.text.primary,
     fontWeight: 'bold',
     lineHeight: 1.313,
     letterSpacing: -0.4
   },
   h3: {
     fontSize: 24,
-    color: palette.text.primary,
     fontWeight: 'bold',
     lineHeight: 1.167
   },
   h4: {
     fontSize: 20,
-    color: palette.text.primary,
     fontWeight: 'bold',
     lineHeight: 1.167
   },
   h5: {
     fontSize: 18,
-    color: palette.text.primary,
     fontWeight: 'bold',
     lineHeight: 1.313
   },
   h6: {
     fontSize: 16,
-    color: palette.text.primary,
     fontWeight: 'bold',
     lineHeight: 1.313
   },
@@ -48,13 +42,11 @@ export const makeTypography = palette => ({
   },
   body1: {
     fontSize: 16,
-    lineHeight: 1.313,
-    color: palette.text.primary
+    lineHeight: 1.313
   },
   body2: {
     fontSize: 14,
-    lineHeight: 1.313,
-    color: palette.text.primary
+    lineHeight: 1.313
   },
   button: {
     fontWeight: 'bold',

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -35,7 +35,7 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-7 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-7 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -77,7 +77,7 @@ exports[`SquareAppIcon component should render an app correctly with the given n
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-1 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-1 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     modified
   </h6>
@@ -119,7 +119,7 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-13 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-13 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     testslug
   </h6>
@@ -168,7 +168,7 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-37 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-37 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   />
 </div>
 `;
@@ -220,7 +220,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-31 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-31 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -262,7 +262,7 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-25 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-25 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -304,7 +304,7 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-19 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-19 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -324,7 +324,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
       style="background-color: rgb(61, 166, 126);"
     >
       <h2
-        class="MuiTypography-root makeStyles-letter-44 MuiTypography-h2 MuiTypography-alignCenter"
+        class="MuiTypography-root makeStyles-letter-44 MuiTypography-h2 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
       >
         S
       </h2>
@@ -349,7 +349,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
     </span>
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-43 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-43 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     shortcut
   </h6>
@@ -392,7 +392,7 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-49 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-49 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     custom icon
   </h6>

package/react/Typography/Readme.md

@@ -1,25 +1,12 @@
-Use typographic components to have sensible defaults for text
-content. The typography variants naming is based on material design.
+Use typographic components to have sensible defaults for text content. The typography variants naming is based on material design.
 
-Read the original [Typography component](https://material-ui.com/components/typography/)
-documentation for more information.
-
-🆕 The Typography component should be used instead of Text components.
-
-<details>
-<summary>⤵️ A codemod can be used to help you migrate the code (click here for more information).</summary>
-
-```bash
-npm install -g jscodeshift
-jscodeshift -t node_modules/cozy-ui/codemods/transform-typography.js --parser babel src/
-```
-
-</details>
+Read the original [Typography component](https://v4.mui.com/components/typography/) documentation for more information.
 
 ```jsx
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
 import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
 
 const variants = [
   'h1',
@@ -32,58 +19,23 @@ const variants = [
   'body1',
   'body2',
   'caption',
-];
-
-<Stack spacing='s'>
-  { variants.map(variant => (
-    <Typography variant={variant}>{variant}</Typography>
-  )) }
-</Stack>
-```
-
-You can use `color="textSecondary"`:
-
-```jsx
-<Typography variant='body1' color="textSecondary">A text written in secondary text color.</Typography>
-```
-
-From old to new :
-
-```jsx
-import { Text, Caption, MainTitle, SubTitle, Title, Bold, ErrorMessage } from 'cozy-ui/transpiled/react/Text'
-import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
-import Typography from 'cozy-ui/transpiled/react/Typography';
-
-const trStyle = { borderBottom: '1px solid gray'}
-const tdStyle = { borderRight: '1px solid gray'};
-
-<table className='u-w-100'>
-  <tbody>
-  <tr style={trStyle}>
-    <td style={tdStyle}><MainTitle>MainTitle</MainTitle></td>
-    <td><Typography variant='h3'>is replaced by &lt;Typography variant="h3" &gt;</Typography></td>
-  </tr>
-  <tr style={trStyle}>
-    <td style={tdStyle}><Title>Title</Title></td>
-    <td><Typography variant='h4'>is replaced by &lt;Typography variant="h4" &gt;</Typography></td>
-  </tr>
-  <tr style={trStyle}>
-    <td style={tdStyle}><SubTitle>SubTitle</SubTitle></td>
-    <td><Typography variant='h5'>is replaced by &lt;Typography variant="h5" &gt;</Typography></td>
-  </tr>
-  <tr style={trStyle}>
-    <td style={tdStyle}><Bold>Bold</Bold></td>
-    <td><Typography variant='h6'>is replaced by &lt;Typography variant="h6" &gt;</Typography></td>
-  </tr>
-  <tr style={trStyle}>
-    <td style={tdStyle}><Caption>Caption</Caption></td>
-    <td><Typography variant='caption' color='textSecondary'>is replaced by &lt;Typography variant="caption" color="textSecondary" /&gt; </Typography></td>
-  </tr>
-  <tr style={trStyle}>
-    <td style={tdStyle}><ErrorMessage>ErrorMessage</ErrorMessage></td>
-    <td><Typography variant='body1' color='error'>is replaced by &lt;Typography color="error"  variant='body1' /&gt; </Typography></td>
-  </tr>
-  </tbody>
-</table>
-
+]
+const colors = ['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']
+
+;
+
+<Grid container>
+  {colors.map((color, index) =>
+    <Grid item xs={6} sm={3} md={2} className="u-mb-2" key={index}>
+      <Stack spacing="s">
+        <div>{color}</div>
+        {variants.map(variant =>
+          <div key={variant + color}>
+            <Typography variant={variant} color={color}>{variant}</Typography>
+          </div>
+        )}
+      </Stack>
+    </Grid>
+  )}
+</Grid>
 ```

package/react/Typography/index.jsx

@@ -1,3 +1,15 @@
-import Typography from '@material-ui/core/Typography'
+import React, { forwardRef } from 'react'
+import MuiTypography from '@material-ui/core/Typography'
+
+const Typography = forwardRef(({ color, variant, children, ...props }, ref) => {
+  const madeColor =
+    color || (variant === 'caption' ? 'textSecondary' : 'textPrimary')
+
+  return (
+    <MuiTypography ref={ref} variant={variant} color={madeColor} {...props}>
+      {children}
+    </MuiTypography>
+  )
+})
 
 export default Typography

package/react/Wizard/index.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames'
 
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Button from 'cozy-ui/transpiled/react/Button'
-import { MainTitle } from 'cozy-ui/transpiled/react/Text'
+import Typography from 'cozy-ui/transpiled/react/Typography'
 import Input from 'cozy-ui/transpiled/react/Input'
 
 import styles from './styles.styl'
@@ -58,12 +58,12 @@ export const WizardDescription = ({ children }) => {
 
 export const WizardTitle = ({ children, tag, className }) => {
   return (
-    <MainTitle
-      tag={tag || 'h1'}
+    <Typography
+      variant={tag || 'h3'}
       className={cx(styles['wizard-title'], className)}
     >
       {children}
-    </MainTitle>
+    </Typography>
   )
 }