cozy-ui 128.8.0 → 128.10.0

package/react/Contacts/AddModal/ContactForm/helpers.spec.js

@@ -2,6 +2,7 @@ import {
   moveToHead,
   makeItemLabel,
   makeTypeAndLabel,
+  makeImppValues,
   makeInitialCustomValue
 } from './helpers'
 
@@ -73,6 +74,143 @@ describe('makeTypeAndLabel', () => {
   })
 })
 
+describe('makeImppValues', () => {
+  it('should replace only uri for {label: "work", protocol: "matrix"}', () => {
+    const res = makeImppValues(
+      {
+        impp: [
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'home',
+            primary: false
+          },
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'work',
+            primary: false
+          },
+          {
+            uri: 'john@doe.matrix.net',
+            protocol: 'matrix',
+            label: 'work',
+            primary: true
+          },
+          {
+            uri: 'john@doe.matrix.home',
+            protocol: 'matrix',
+            label: 'home'
+          }
+        ]
+      },
+      'newMatrixURI'
+    )
+
+    expect(res).toStrictEqual([
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'home',
+        primary: false
+      },
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'work',
+        primary: false
+      },
+      {
+        uri: 'newMatrixURI',
+        protocol: 'matrix',
+        label: 'work',
+        primary: true
+      },
+      {
+        uri: 'john@doe.matrix.home',
+        protocol: 'matrix',
+        label: 'home'
+      }
+    ])
+  })
+
+  it('should remove correctly', () => {
+    const res = makeImppValues(
+      {
+        impp: [
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'home',
+            primary: false
+          },
+          {
+            uri: 'john.doe@xmpp.net',
+            protocol: 'xmpp',
+            label: 'work',
+            primary: false
+          },
+          {
+            uri: 'john@doe.matrix.net',
+            protocol: 'matrix',
+            label: 'work',
+            primary: true
+          },
+          {
+            uri: 'john@doe.matrix.home',
+            protocol: 'matrix',
+            label: 'home'
+          }
+        ]
+      },
+      ''
+    )
+
+    expect(res).toStrictEqual([
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'home',
+        primary: false
+      },
+      {
+        uri: 'john.doe@xmpp.net',
+        protocol: 'xmpp',
+        label: 'work',
+        primary: false
+      },
+      {
+        uri: 'john@doe.matrix.home',
+        protocol: 'matrix',
+        label: 'home'
+      }
+    ])
+  })
+
+  it('should add the matrix impp values for the first time if no impp attribute', () => {
+    const expected = [
+      {
+        uri: 'newMatrixURI',
+        protocol: 'matrix',
+        label: 'work',
+        primary: true
+      }
+    ]
+
+    expect(makeImppValues({ impp: undefined }, 'newMatrixURI')).toStrictEqual(
+      expected
+    )
+
+    expect(makeImppValues({ impp: [] }, 'newMatrixURI')).toStrictEqual(expected)
+  })
+
+  it('should not add empty object if value is empty', () => {
+    expect(makeImppValues({ impp: undefined }, '')).toStrictEqual([])
+
+    expect(makeImppValues({ impp: [] }, '')).toStrictEqual([])
+  })
+})
+
 describe('makeInitialCustomValue', () => {
   it('should return undefined if no name', () => {
     const res = makeInitialCustomValue(

package/react/Contacts/AddModal/ContactForm/index.jsx

@@ -1,5 +1,5 @@
 import arrayMutators from 'final-form-arrays'
-import React from 'react'
+import React, { useState } from 'react'
 import { Form } from 'react-final-form'
 
 import { getHasManyItems } from 'cozy-client/dist/associations/HasMany'
@@ -10,6 +10,7 @@ import { fields } from './fieldsConfig'
 import formValuesToContact from './formValuesToContact'
 import { validateFields } from './helpers'
 import { locales } from './locales'
+import Button from '../../../Buttons'
 import { useI18n, useExtendI18n } from '../../../providers/I18n'
 // import { fullContactPropTypes } from '../../ContactPropTypes' // !!
 
@@ -36,6 +37,7 @@ export function getSubmitContactForm() {
  * @returns
  */
 const ContactForm = ({ contact, onSubmit, contacts }) => {
+  const [showSecondaryFields, setShowSecondaryFields] = useState(false)
   useExtendI18n(locales)
   const { t } = useI18n()
 
@@ -60,6 +62,7 @@ const ContactForm = ({ contact, onSubmit, contacts }) => {
                 key={index}
                 attributes={attributes}
                 contacts={contacts}
+                showSecondaryFields={showSecondaryFields}
                 formProps={{
                   valid,
                   submitFailed,
@@ -67,6 +70,16 @@ const ContactForm = ({ contact, onSubmit, contacts }) => {
                 }}
               />
             ))}
+            {!showSecondaryFields && (
+              <div>
+                <Button
+                  className="u-db u-ml-2 u-mt-1"
+                  variant="text"
+                  label={t('Contacts.AddModal.ContactForm.other-fields')}
+                  onClick={() => setShowSecondaryFields(true)}
+                />
+              </div>
+            )}
           </form>
         )
       }}

package/react/Contacts/AddModal/ContactForm/index.spec.jsx

@@ -21,6 +21,7 @@ const labels = [
   'Phone',
   'Email',
   'Address',
+  'Matrix ID',
   'Twake URL',
   'Company',
   'Job title',
@@ -54,6 +55,7 @@ describe('ContactForm', () => {
     expect(screen.queryByDisplayValue(contact.name.familyName)).not.toBeNull()
     expect(screen.queryByDisplayValue(contact.phone[0].number)).not.toBeNull()
     expect(screen.queryByDisplayValue(contact.email[0].address)).not.toBeNull()
+    expect(screen.queryByDisplayValue(contact.impp[2].uri)).not.toBeNull()
     expect(
       screen.queryByDisplayValue(contact.address[0].formattedAddress)
     ).not.toBeNull()
@@ -78,6 +80,14 @@ describe('ContactForm', () => {
           type: undefined
         }
       ],
+      impp: [
+        {
+          uri: '123-matrixID-456',
+          protocol: 'matrix',
+          label: 'work',
+          primary: true
+        }
+      ],
       birthday: '2015-12-31',
       birthplace: 'somewhere',
       gender: 'male',
@@ -124,6 +134,7 @@ describe('ContactForm', () => {
       additionalName: '',
       'phone[0].phone': '+33678987654',
       'email[0].email': 'jcvc@cozy.cloud',
+      matrix: '123-matrixID-456',
       cozy: 'https://jcvd.cozy.cloud',
       company: 'Cozy CLoud',
       jobTitle: 'Dreamer',
@@ -171,6 +182,7 @@ describe('ContactForm', () => {
       Lastname: 'Van Cozy',
       Phone: '+33678987654',
       Email: 'jcvc@cozy.cloud',
+      Matrix: '123-matrixID-456',
       Address: '18 rue des fleurs, Pecado',
       'Twake URL': 'https://jcvd.cozy.cloud',
       Company: 'Cozy CLoud',

package/react/Contacts/AddModal/ContactForm/locales/en.json

@@ -6,6 +6,7 @@
           "man": "Man",
           "woman": "Woman"
         },
+        "other-fields": "Other fields",
         "fields": {
           "gender": "Civility",
           "givenName": "Firstname",
@@ -14,6 +15,7 @@
           "familyName": "Lastname",
           "phone": "Phone",
           "email": "Email",
+          "matrix": "Matrix ID",
           "address": "Address",
           "cozy": "Twake URL",
           "company": "Company",

package/react/Contacts/AddModal/ContactForm/locales/fr.json

@@ -6,6 +6,7 @@
           "man": "Homme",
           "woman": "Femme"
         },
+        "other-fields": "Autres champs",
         "fields": {
           "gender": "Civilité",
           "givenName": "Prénom",
@@ -15,6 +16,7 @@
           "phone": "Téléphone",
           "email": "Email",
           "address": "Adresse",
+          "matrix": "ID Matrix",
           "cozy": "URL du Twake",
           "company": "Entreprise",
           "jobTitle": "Fonction",

package/react/Contacts/AddModal/Readme.md

@@ -8,7 +8,7 @@ import ContactsAddModal from 'cozy-ui/transpiled/react/Contacts/AddModal'
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import AlertProvider from 'cozy-ui/transpiled/react/providers/Alert'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import { johnDoeContact, johnDoeFormValues } from 'cozy-ui/transpiled/react/Contacts/AddModal/mocks'
+import { johnDoeContact } from 'cozy-ui/transpiled/react/Contacts/AddModal/mocks'
 import contacts from 'cozy-ui/transpiled/react/ContactsList/_mockContacts.json'
 import Variants from 'cozy-ui/docs/components/Variants'
 

package/react/Contacts/AddModal/mocks.js

@@ -30,6 +30,31 @@ export const johnDoeContact = {
       primary: true
     }
   ],
+  impp: [
+    {
+      uri: 'john.doe@xmpp.net',
+      protocol: 'xmpp',
+      label: 'home',
+      primary: false
+    },
+    {
+      uri: 'john.doe@xmpp.net',
+      protocol: 'xmpp',
+      label: 'work',
+      primary: false
+    },
+    {
+      uri: 'john@doe.matrix.net',
+      protocol: 'matrix',
+      label: 'work',
+      primary: true
+    },
+    {
+      uri: 'john@doe.matrix.home',
+      protocol: 'matrix',
+      label: 'home'
+    }
+  ],
   birthday: '1999-5-1',
   birthplace: 'somewhere',
   gender: 'male',
@@ -71,6 +96,7 @@ export const johnDoeFormValues = {
   gender: 'male',
   cozy: 'https://johndoe.mycozy.cloud',
   cozyLabel: '{"type":"MyCozy"}',
+  matrix: 'john@doe.matrix.net',
   address: [
     {
       fieldId: 'fieldId_1',
@@ -167,6 +193,20 @@ export const johnDoeContactWithRelated = {
       type: 'Work'
     }
   ],
+  impp: [
+    {
+      uri: 'john.doe@xmpp.net',
+      protocol: 'xmpp',
+      label: 'home',
+      primary: false
+    },
+    {
+      uri: 'john@doe.matrix.net',
+      protocol: 'matrix',
+      label: 'work',
+      primary: true
+    }
+  ],
   email: [
     {
       address: 'john.doe@posteo.net',
@@ -211,7 +251,6 @@ export const johnDoeContactWithRelated = {
       primary: false
     }
   ],
-
   relationships: {
     accounts: { data: [] },
     groups: { data: [] },

package/react/Contacts/AddModal/types.js

@@ -22,7 +22,7 @@ export const fieldInputAttributesTypes = PropTypes.shape({
   icon: iconPropType,
   type: PropTypes.string,
   label: labelPropTypes,
-  isArray: PropTypes.bool,
+  layout: PropTypes.string,
   subFields: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,

package/react/Icon/Readme.md

@@ -229,6 +229,7 @@ import Logout from 'cozy-ui/transpiled/react/Icons/Logout'
 import MagicTrick from 'cozy-ui/transpiled/react/Icons/MagicTrick'
 import Magnet from 'cozy-ui/transpiled/react/Icons/Magnet'
 import Magnifier from 'cozy-ui/transpiled/react/Icons/Magnifier'
+import Matrix from 'cozy-ui/transpiled/react/Icons/Matrix'
 import Merge from 'cozy-ui/transpiled/react/Icons/Merge'
 import Moped from 'cozy-ui/transpiled/react/Icons/Moped'
 import Mosaic from 'cozy-ui/transpiled/react/Icons/Mosaic'
@@ -512,6 +513,7 @@ const icons = [
   MagicTrick,
   Magnet,
   Magnifier,
+  Matrix,
   Merge,
   Moped,
   Mosaic,
@@ -992,7 +994,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','arrowUp','assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','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','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','eye-closed','eye','face-id','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-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','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','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','eye-closed','eye','face-id','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-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 
 <Grid container spacing={2}>

package/react/Icons/Matrix.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/matrix.svg` to regenerate;
+import React from 'react'
+
+function SvgMatrix(props) {
+  return (
+    <svg viewBox="0 0 16 10" {...props}>
+      <path d="M3 1.111H1.333V8.89H3V10H0V0h3v1.111zM16 10h-3V8.889h1.667V1.11H13V0h3v10zM9.807 3.667c.587 0 1.043.167 1.368.503.328.332.492.79.492 1.374V9h-1.23V5.72c0-.688-.311-1.032-.931-1.032a.983.983 0 00-.531.162.945.945 0 00-.36.372V9h-1.23V5.53c0-.258-.08-.462-.241-.612-.161-.153-.387-.23-.68-.23-.153 0-.323.057-.507.171-.18.114-.312.24-.394.377V9h-1.23V3.765h.847l.25.459c.342-.372.784-.557 1.325-.557.699 0 1.226.188 1.58.566.154-.172.369-.309.644-.41.276-.104.552-.156.828-.156z" />
+    </svg>
+  )
+}
+
+export default SvgMatrix

package/transpiled/react/Contacts/AddModal/ContactAddressDialog/index.d.ts

@@ -24,7 +24,7 @@ declare namespace ContactAddressModal {
                     defaultLabel: PropTypes.Requireable<string>;
                 }>>;
             }>>;
-            isArray: PropTypes.Requireable<boolean>;
+            layout: PropTypes.Requireable<string>;
             subFields: PropTypes.Requireable<(PropTypes.InferProps<{
                 name: PropTypes.Validator<string>;
                 icon: PropTypes.Requireable<string>;

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInput.d.ts

@@ -1,7 +1,8 @@
 export default FieldInput;
-declare function FieldInput({ name, labelProps, attributes: { subFields, ...restAttributes }, contacts, error, helperText, label, required }: {
+declare function FieldInput({ name, labelProps, className, attributes: { subFields, ...restAttributes }, contacts, error, helperText, label, required }: {
     name: any;
     labelProps: any;
+    className: any;
     attributes: {
         [x: string]: any;
         subFields: any;
@@ -15,6 +16,7 @@ declare function FieldInput({ name, labelProps, attributes: { subFields, ...rest
 declare namespace FieldInput {
     namespace propTypes {
         export const name: PropTypes.Validator<string>;
+        export const className: PropTypes.Requireable<string>;
         export { labelPropTypes as labelProps };
         export { fieldInputAttributesTypes as attributes };
         export const contacts: PropTypes.Requireable<PropTypes.InferProps<{

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInput.js

@@ -20,6 +20,7 @@ import { fieldInputAttributesTypes, labelPropTypes } from "cozy-ui/transpiled/re
 var FieldInput = function FieldInput(_ref) {
   var name = _ref.name,
       labelProps = _ref.labelProps,
+      className = _ref.className,
       _ref$attributes = _ref.attributes,
       subFields = _ref$attributes.subFields,
       restAttributes = _objectWithoutProperties(_ref$attributes, _excluded),
@@ -69,7 +70,7 @@ var FieldInput = function FieldInput(_ref) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(styles['contact-form-field__wrapper'], 'u-flex', 'u-flex-column-s')
+    className: cx(className, styles['contact-form-field__wrapper'], 'u-flex', 'u-flex-column-s')
   }, /*#__PURE__*/React.createElement(Field, {
     required: required,
     error: error,
@@ -109,6 +110,7 @@ var FieldInput = function FieldInput(_ref) {
 
 FieldInput.propTypes = {
   name: PropTypes.string.isRequired,
+  className: PropTypes.string,
   labelProps: labelPropTypes,
   attributes: fieldInputAttributesTypes,
   contacts: PropTypes.shape({

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputAccordion.d.ts

@@ -0,0 +1,12 @@
+export default FieldInputAccordion;
+declare function FieldInputAccordion({ attributes: { name, label, subFields, ...restAttributes }, contacts, error, helperText }: {
+    attributes: {
+        [x: string]: any;
+        name: any;
+        label: any;
+        subFields: any;
+    };
+    contacts: any;
+    error: any;
+    helperText: any;
+}): JSX.Element;

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputAccordion.js

@@ -0,0 +1,71 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "label", "subFields"],
+    _excluded2 = ["name"];
+import cx from 'classnames';
+import React, { useState } from 'react';
+import FieldInput from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInput";
+import { locales } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/locales";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import IconButton from "cozy-ui/transpiled/react/IconButton";
+import DropdownIcon from "cozy-ui/transpiled/react/Icons/Dropdown";
+import DropupIcon from "cozy-ui/transpiled/react/Icons/Dropup";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var FieldInputAccordion = function FieldInputAccordion(_ref) {
+  var _ref$attributes = _ref.attributes,
+      name = _ref$attributes.name,
+      label = _ref$attributes.label,
+      subFields = _ref$attributes.subFields,
+      restAttributes = _objectWithoutProperties(_ref$attributes, _excluded),
+      contacts = _ref.contacts,
+      error = _ref.error,
+      helperText = _ref.helperText;
+
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showExtended = _useState2[0],
+      setShowExtended = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex u-flex-items-baseline"
+  }, /*#__PURE__*/React.createElement(FieldInput, {
+    attributes: restAttributes,
+    contacts: contacts,
+    error: error,
+    helperText: helperText,
+    name: name,
+    label: t("Contacts.AddModal.ContactForm.fields.".concat(name)),
+    labelProps: label
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    className: "u-ml-half",
+    size: "medium",
+    onClick: function onClick() {
+      return setShowExtended(function (v) {
+        return !v;
+      });
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: showExtended ? DropupIcon : DropdownIcon
+  }))), subFields.map(function (_ref2, index) {
+    var name = _ref2.name,
+        attributes = _objectWithoutProperties(_ref2, _excluded2);
+
+    return /*#__PURE__*/React.createElement(FieldInput, {
+      key: index,
+      className: cx('u-mt-1', {
+        'u-dn': !showExtended
+      }),
+      attributes: attributes,
+      name: name,
+      label: t("Contacts.AddModal.ContactForm.fields.".concat(name))
+    });
+  }));
+};
+
+export default FieldInputAccordion;

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputArray.js

@@ -43,7 +43,7 @@ var FieldInputArray = function FieldInputArray(_ref) {
       var isError = fieldsRequired.includes(inputName) && !valid && submitFailed;
       return /*#__PURE__*/React.createElement("div", {
         key: key,
-        className: cx('u-flex u-flex-items-center', {
+        className: cx('u-flex u-flex-items-baseline', {
           'u-mt-1': index !== 0
         })
       }, /*#__PURE__*/React.createElement(FieldInput, {

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputLayout.d.ts

@@ -1,11 +1,13 @@
 export default FieldInputLayout;
-declare function FieldInputLayout({ attributes: { isArray, icon, ...attributes }, contacts, formProps }: {
+declare function FieldInputLayout({ attributes: { layout, icon, isSecondary, ...attributes }, contacts, showSecondaryFields, formProps }: {
     attributes: {
         [x: string]: any;
-        isArray: any;
+        layout: any;
         icon: any;
+        isSecondary: any;
     };
     contacts: any;
+    showSecondaryFields: any;
     formProps: any;
 }): JSX.Element;
 declare namespace FieldInputLayout {

package/transpiled/react/Contacts/AddModal/ContactForm/FieldInputLayout.js

@@ -1,10 +1,11 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isArray", "icon"],
+var _excluded = ["layout", "icon", "isSecondary"],
     _excluded2 = ["name", "label"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import FieldInput from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInput";
+import FieldInputAccordion from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInputAccordion";
 import FieldInputArray from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInputArray";
 import { fieldsRequired } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/helpers";
 import { locales } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/locales";
@@ -13,10 +14,12 @@ import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n"
 
 var FieldInputLayout = function FieldInputLayout(_ref) {
   var _ref$attributes = _ref.attributes,
-      isArray = _ref$attributes.isArray,
+      layout = _ref$attributes.layout,
       icon = _ref$attributes.icon,
+      isSecondary = _ref$attributes.isSecondary,
       attributes = _objectWithoutProperties(_ref$attributes, _excluded),
       contacts = _ref.contacts,
+      showSecondaryFields = _ref.showSecondaryFields,
       formProps = _ref.formProps;
 
   useExtendI18n(locales);
@@ -35,8 +38,9 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
   var isError = fieldsRequired.includes(name) && !valid && submitFailed;
   return /*#__PURE__*/React.createElement("div", {
     className: cx('u-flex u-mt-1', {
-      'u-flex-items-center': !isArray,
-      'u-flex-items-baseline': isArray
+      'u-flex-items-center': !layout,
+      'u-flex-items-baseline': !!layout,
+      'u-dn': isSecondary && !showSecondaryFields
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: "u-w-2-half"
@@ -45,10 +49,15 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
     color: "var(--iconTextColor)"
   })), /*#__PURE__*/React.createElement("div", {
     className: "u-w-100"
-  }, isArray ? /*#__PURE__*/React.createElement(FieldInputArray, {
+  }, layout === 'array' ? /*#__PURE__*/React.createElement(FieldInputArray, {
     attributes: attributes,
     contacts: contacts,
     formProps: formProps
+  }) : layout === 'accordion' ? /*#__PURE__*/React.createElement(FieldInputAccordion, {
+    attributes: attributes,
+    contacts: contacts,
+    error: isError,
+    helperText: isError ? errors[name] : null
   }) : /*#__PURE__*/React.createElement(FieldInput, {
     attributes: restAttributes,
     contacts: contacts,