cozy-ui 82.10.0 → 82.12.0

package/.nvmrc

@@ -1 +1 @@
-16
+16.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [82.12.0](https://github.com/cozy/cozy-ui/compare/v82.11.0...v82.12.0) (2023-04-06)
+
+
+### Features
+
+* Update Fab component ([cd4f0a6](https://github.com/cozy/cozy-ui/commit/cd4f0a6))
+
+# [82.11.0](https://github.com/cozy/cozy-ui/compare/v82.10.0...v82.11.0) (2023-04-05)
+
+
+### Features
+
+* **ExpandedAttributes:** Add some translated attributes as expanded ([866bb00](https://github.com/cozy/cozy-ui/commit/866bb00))
+
 # [82.10.0](https://github.com/cozy/cozy-ui/compare/v82.9.0...v82.10.0) (2023-04-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "82.10.0",
+  "version": "82.12.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -67,7 +67,7 @@
     "intersection-observer"
   ],
   "devDependencies": {
-    "@argos-ci/cli": "^0.2.1",
+    "@argos-ci/cli": "0.4.4",
     "@babel/cli": "7.17.6",
     "@babel/core": "7.17.8",
     "@babel/helper-builder-react-jsx": "7.16.7",
@@ -128,7 +128,7 @@
     "postcss-loader": "2.1.6",
     "pretty": "2.0.0",
     "prop-types": "15.7.2",
-    "puppeteer": "10.1.0",
+    "puppeteer": "18.2.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-hot-loader": "^4.3.11",

package/react/Fab/Readme.md

@@ -1,18 +1,79 @@
 See [Material UI documentation](https://material-ui.com/components/floating-action-button/) to learn more about Floating Action Button (Fab).
 
+### Default
+
+```jsx
+import Fab from 'cozy-ui/transpiled/react/Fab'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const props = [{ color: 'primary' }, { color: 'secondary' }, { color: 'inherit', default: true }]
+const initialVariants = [{ small: false, medium: false, large: true }]
+
+;
+<Variants initialVariants={initialVariants} radio screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {props.map(prop =>
+        <Grid item xs={12} sm={4} className="u-mb-1" key={Object.values(prop)[0]}>
+          <Stack spacing="s">
+            <div className="u-mb-half u-mt-1">{prop.color} {prop.default && '(default)'}</div>
+            <Fab aria-label="add" {...prop} size={Object.keys(variant).find(key => variant[key])}>
+              <Icon icon={PlusIcon} />
+            </Fab>
+          </Stack>
+        </Grid>
+      )}
+      {props.map(prop =>
+        <Grid item xs={12} sm={4} className="u-mb-1" key={Object.values(prop)[0]}>
+          <Stack spacing="s">
+            <Fab aria-label="add" {...prop} variant="extended" size={Object.keys(variant).find(key => variant[key])}>
+              <Icon icon={PlusIcon} className='u-mr-half' />
+              Extended
+            </Fab>
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
+```
+
+### Disabled colors
+
 ```jsx
 import Fab from 'cozy-ui/transpiled/react/Fab'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+
+const props = [{ color: 'primary' }, { color: 'secondary' }, { color: 'inherit', default: true }]
 
 ;
-<>
-  <Fab color="primary" aria-label="add">
-    <Icon icon={PlusIcon} />
-  </Fab>
-  <Fab color="secondary" aria-label="edit">
-    <Icon icon={RenameIcon} />
-  </Fab>
-</>
+<Grid container>
+  {props.map(prop =>
+    <Grid item xs={12} sm={4} className="u-mb-1" key={Object.values(prop)[0]}>
+      <Stack spacing="s">
+        <div className="u-mb-half u-mt-1">{prop.color} {prop.default && '(default)'}</div>
+        <Fab aria-label="add" {...prop} disabled>
+          <Icon icon={PlusIcon} />
+        </Fab>
+      </Stack>
+    </Grid>
+  )}
+  {props.map(prop =>
+    <Grid item xs={12} sm={4} className="u-mb-1" key={Object.values(prop)[0]}>
+      <Stack spacing="s">
+        <Fab aria-label="add" {...prop} disabled variant="extended">
+          <Icon icon={PlusIcon} className='u-mr-half' />
+          Extended
+        </Fab>
+      </Stack>
+  </Grid>
+  )}
+</Grid>
 ```

package/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers.js

@@ -4,34 +4,23 @@ import { formatDate } from '../../../Viewer/helpers'
 
 export const normalizeExpandedAttribute = attr =>
   attr
-    .split('[]')[0]
-    .replace(':', '.')
+    .replaceAll(':', '.')
     .replace('flexsearchProps.', '')
+    .replace('translated.', '')
 
 // attributes not considered as expanded attributes
 export const notExpandedAttributes = {
-  'io.cozy.contacts': [
-    'fullname',
-    'civility',
-    'note',
-    'flexsearchProps:translated:phone',
-    'flexsearchProps:translated:email',
-    'flexsearchProps:translated:birthday',
-    'flexsearchProps:translated:address'
-  ],
+  'io.cozy.contacts': ['fullname', 'civility', 'note'],
   'io.cozy.files': [
     'name',
     'flexsearchProps:translated:qualificationLabel',
-    'flexsearchProps:translated:refTaxIncome',
-    'flexsearchProps:translated:contractType',
     'flexsearchProps:translated:driverLicense',
     'flexsearchProps:translated:paymentProofFamilyAllowance',
     'flexsearchProps:translated:vehicleRegistration',
     'flexsearchProps:translated:nationalIdCard',
     'flexsearchProps:translated:bankDetails',
     'flexsearchProps:translated:passport',
-    'flexsearchProps:translated:residencePermit',
-    'flexsearchProps:translated:expirationDate'
+    'flexsearchProps:translated:residencePermit'
   ]
 }
 

package/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers.spec.js

@@ -1,4 +1,8 @@
-import { formatAttrValue, makeAttrKey } from './helpers'
+import {
+  formatAttrValue,
+  makeAttrKey,
+  normalizeExpandedAttribute
+} from './helpers'
 
 const f = () => 'someMockedDate'
 const lang = 'en'
@@ -133,3 +137,39 @@ describe('makeAttrKey', () => {
     expect(res).toBe('civility')
   })
 })
+
+describe('normalizeExpandedAttribute', () => {
+  it('sould remove flexsearchProps and translated words', () => {
+    const res = normalizeExpandedAttribute(
+      'flexsearchProps:translated:qualificationLabel'
+    )
+
+    expect(res).toBe('qualificationLabel')
+  })
+
+  it('should keep metadata.x intact', () => {
+    const res = normalizeExpandedAttribute(
+      'flexsearchProps:translated:metadata.contractType'
+    )
+
+    expect(res).toBe('metadata.contractType')
+  })
+
+  it('should keep email[1] intact', () => {
+    const res = normalizeExpandedAttribute('flexsearchProps:email[1].address')
+
+    expect(res).toBe('email[1].address')
+  })
+
+  it('should replace : by .', () => {
+    const res = normalizeExpandedAttribute('metadata:number')
+
+    expect(res).toBe('metadata.number')
+  })
+
+  it('should do nothing for simple word', () => {
+    const res = normalizeExpandedAttribute('fullname')
+
+    expect(res).toBe('fullname')
+  })
+})

package/react/MuiCozyTheme/makeOverrides.js

@@ -966,6 +966,36 @@ const makeOverrides = theme => ({
       padding: '4px 12px',
       backgroundColor: theme.palette.grey[600]
     }
+  },
+  MuiFab: {
+    root: {
+      color: theme.palette.text.primary,
+      backgroundColor: theme.palette.background.paper,
+      '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.background.paper
+        }
+      }
+    },
+    extended: {
+      borderRadius: 56 / 2,
+      height: 56,
+      minWidth: 56,
+      padding: '0 20px',
+      '&$sizeSmall': {
+        borderRadius: 40 / 2,
+        height: 40,
+        minWidth: 40,
+        padding: '0 12px'
+      },
+      '&$sizeMedium': {
+        borderRadius: 48 / 2,
+        height: 48,
+        minWidth: 48,
+        padding: '0 16px'
+      }
+    }
   }
 })
 

package/transpiled/react/MuiCozyTheme/ListItem/ExpandedAttributes/helpers.js

@@ -1,12 +1,12 @@
 import get from 'lodash/get';
 import { formatDate } from "cozy-ui/transpiled/react/Viewer/helpers";
 export var normalizeExpandedAttribute = function normalizeExpandedAttribute(attr) {
-  return attr.split('[]')[0].replace(':', '.').replace('flexsearchProps.', '');
+  return attr.replaceAll(':', '.').replace('flexsearchProps.', '').replace('translated.', '');
 }; // attributes not considered as expanded attributes
 
 export var notExpandedAttributes = {
-  'io.cozy.contacts': ['fullname', 'civility', 'note', 'flexsearchProps:translated:phone', 'flexsearchProps:translated:email', 'flexsearchProps:translated:birthday', 'flexsearchProps:translated:address'],
-  'io.cozy.files': ['name', 'flexsearchProps:translated:qualificationLabel', 'flexsearchProps:translated:refTaxIncome', 'flexsearchProps:translated:contractType', 'flexsearchProps:translated:driverLicense', 'flexsearchProps:translated:paymentProofFamilyAllowance', 'flexsearchProps:translated:vehicleRegistration', 'flexsearchProps:translated:nationalIdCard', 'flexsearchProps:translated:bankDetails', 'flexsearchProps:translated:passport', 'flexsearchProps:translated:residencePermit', 'flexsearchProps:translated:expirationDate']
+  'io.cozy.contacts': ['fullname', 'civility', 'note'],
+  'io.cozy.files': ['name', 'flexsearchProps:translated:qualificationLabel', 'flexsearchProps:translated:driverLicense', 'flexsearchProps:translated:paymentProofFamilyAllowance', 'flexsearchProps:translated:vehicleRegistration', 'flexsearchProps:translated:nationalIdCard', 'flexsearchProps:translated:bankDetails', 'flexsearchProps:translated:passport', 'flexsearchProps:translated:residencePermit']
 }; // attributes that we want to display if no attribute of the document is related to the search
 
 export var defaultExpandedAttributes = {

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -884,6 +884,36 @@ var makeOverrides = function makeOverrides(theme) {
         padding: '4px 12px',
         backgroundColor: theme.palette.grey[600]
       }
+    },
+    MuiFab: {
+      root: {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.background.paper,
+        '&:hover': {
+          backgroundColor: theme.palette.action.hover,
+          '@media (hover: none)': {
+            backgroundColor: theme.palette.background.paper
+          }
+        }
+      },
+      extended: {
+        borderRadius: 56 / 2,
+        height: 56,
+        minWidth: 56,
+        padding: '0 20px',
+        '&$sizeSmall': {
+          borderRadius: 40 / 2,
+          height: 40,
+          minWidth: 40,
+          padding: '0 12px'
+        },
+        '&$sizeMedium': {
+          borderRadius: 48 / 2,
+          height: 48,
+          minWidth: 48,
+          padding: '0 16px'
+        }
+      }
     }
   };
 };