cozy-ui 128.8.0 → 128.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [128.9.0](https://github.com/cozy/cozy-ui/compare/v128.8.0...v128.9.0) (2025-09-16)
+
+
+### Bug Fixes
+
+* **ContactForm:** Remove button position wasn't correct on mobile ([d96647f](https://github.com/cozy/cozy-ui/commit/d96647f))
+
+
+### Features
+
+* **ContactForm/FieldInput:** Add className prop ([38d48f5](https://github.com/cozy/cozy-ui/commit/38d48f5))
+* **ContactForm:** Add `isSecondary` attribute ([ff1bf5f](https://github.com/cozy/cozy-ui/commit/ff1bf5f))
+* **ContactForm:** Add FieldInputAccordion component ([f285990](https://github.com/cozy/cozy-ui/commit/f285990))
+
 # [128.8.0](https://github.com/cozy/cozy-ui/compare/v128.7.0...v128.8.0) (2025-09-09)
 
 

package/package.json

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

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

@@ -16,6 +16,7 @@ import { fieldInputAttributesTypes, labelPropTypes } from '../types'
 const FieldInput = ({
   name,
   labelProps,
+  className,
   attributes: { subFields, ...restAttributes },
   contacts,
   error,
@@ -48,6 +49,7 @@ const FieldInput = ({
   return (
     <div
       className={cx(
+        className,
         styles['contact-form-field__wrapper'],
         'u-flex',
         'u-flex-column-s'
@@ -98,6 +100,7 @@ const FieldInput = ({
 
 FieldInput.propTypes = {
   name: PropTypes.string.isRequired,
+  className: PropTypes.string,
   labelProps: labelPropTypes,
   attributes: fieldInputAttributesTypes,
   contacts: PropTypes.shape({

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

@@ -0,0 +1,57 @@
+import cx from 'classnames'
+import React, { useState } from 'react'
+
+import FieldInput from './FieldInput'
+import { locales } from './locales'
+import Icon from '../../../Icon'
+import IconButton from '../../../IconButton'
+import DropdownIcon from '../../../Icons/Dropdown'
+import DropupIcon from '../../../Icons/Dropup'
+import { useI18n, useExtendI18n } from '../../../providers/I18n'
+
+const FieldInputAccordion = ({
+  attributes: { name, label, subFields, ...restAttributes },
+  contacts,
+  error,
+  helperText
+}) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const [showExtended, setShowExtended] = useState(false)
+
+  return (
+    <>
+      <div className="u-flex u-flex-items-baseline">
+        <FieldInput
+          attributes={restAttributes}
+          contacts={contacts}
+          error={error}
+          helperText={helperText}
+          name={name}
+          label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+          labelProps={label}
+        />
+        <IconButton
+          className="u-ml-half"
+          size="medium"
+          onClick={() => setShowExtended(v => !v)}
+        >
+          <Icon icon={showExtended ? DropupIcon : DropdownIcon} />
+        </IconButton>
+      </div>
+      {subFields.map(({ name, ...attributes }, index) => {
+        return (
+          <FieldInput
+            key={index}
+            className={cx('u-mt-1', { 'u-dn': !showExtended })}
+            attributes={attributes}
+            name={name}
+            label={t(`Contacts.AddModal.ContactForm.fields.${name}`)}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+export default FieldInputAccordion

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

@@ -36,7 +36,7 @@ const FieldInputArray = ({
               return (
                 <div
                   key={key}
-                  className={cx('u-flex u-flex-items-center', {
+                  className={cx('u-flex u-flex-items-baseline', {
                     'u-mt-1': index !== 0
                   })}
                 >

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import FieldInput from './FieldInput'
+import FieldInputAccordion from './FieldInputAccordion'
 import FieldInputArray from './FieldInputArray'
 import { fieldsRequired } from './helpers'
 import { locales } from './locales'
@@ -10,8 +11,9 @@ import Icon from '../../../Icon'
 import { useI18n, useExtendI18n } from '../../../providers/I18n'
 
 const FieldInputLayout = ({
-  attributes: { isArray, icon, ...attributes }, // ⚠️ isArray and icon here are removed from attributes to avoid DOM propagration
+  attributes: { layout, icon, isSecondary, ...attributes }, // ⚠️ `layout` `icon` `isSecondary` here are removed from attributes to avoid DOM propagration
   contacts,
+  showSecondaryFields,
   formProps
 }) => {
   useExtendI18n(locales)
@@ -24,20 +26,28 @@ const FieldInputLayout = ({
   return (
     <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
       })}
     >
       <div className="u-w-2-half">
         {icon && <Icon icon={icon} color="var(--iconTextColor)" />}
       </div>
       <div className="u-w-100">
-        {isArray ? (
+        {layout === 'array' ? (
           <FieldInputArray
             attributes={attributes}
             contacts={contacts}
             formProps={formProps}
           />
+        ) : layout === 'accordion' ? (
+          <FieldInputAccordion
+            attributes={attributes}
+            contacts={contacts}
+            error={isError}
+            helperText={isError ? errors[name] : null}
+          />
         ) : (
           <FieldInput
             attributes={restAttributes}

package/react/Contacts/AddModal/ContactForm/contactToFormValues.js

@@ -8,8 +8,8 @@ import { makeItemLabel, makeRelatedContact, movePrimaryToHead } from './helpers'
 const contactToFormValues = (contact, t) => {
   // initialize the form values, required so that array fields start with at least one editable field
   const initialFieldValues = fields.reduce(
-    (initialValues, { name, isArray }) => {
-      initialValues[name] = isArray ? [undefined] : undefined
+    (initialValues, { name, layout }) => {
+      initialValues[name] = layout === 'array' ? [undefined] : undefined
       return initialValues
     },
     {}

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

@@ -35,37 +35,44 @@ export const fields = [
   {
     name: 'givenName',
     icon: null,
-    type: 'text'
-  },
-  {
-    name: 'additionalName',
-    icon: null,
-    type: 'text'
+    type: 'text',
+    layout: 'accordion',
+    subFields: [
+      {
+        name: 'additionalName',
+        icon: null,
+        type: 'text'
+      },
+      {
+        name: 'surname',
+        icon: null,
+        type: 'text'
+      }
+    ]
   },
   {
     name: 'familyName',
     icon: null,
     type: 'text'
   },
-  {
-    name: 'surname',
-    icon: null,
-    type: 'text'
-  },
   {
     name: 'company',
     icon: CompanyIcon,
-    type: 'text'
-  },
-  {
-    name: 'jobTitle',
-    icon: null,
-    type: 'text'
+    type: 'text',
+    layout: 'accordion',
+    subFields: [
+      {
+        name: 'jobTitle',
+        icon: null,
+        type: 'text'
+      }
+    ]
   },
   {
     name: 'phone',
     icon: TelephoneIcon,
     type: 'tel',
+    layout: 'array',
     label: {
       name: 'phoneLabel',
       select: true,
@@ -103,13 +110,13 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.phone.fax-work'
         }
       ]
-    },
-    isArray: true
+    }
   },
   {
     name: 'email',
     icon: EmailIcon,
     type: 'email',
+    layout: 'array',
     label: {
       name: 'emailLabel',
       select: true,
@@ -131,13 +138,13 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.work'
         }
       ]
-    },
-    isArray: true
+    }
   },
   {
     name: 'address',
     icon: LocationIcon,
     type: 'text',
+    layout: 'array',
     InputProps: {
       readOnly: true
     },
@@ -224,13 +231,19 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.address.work'
         }
       ]
-    },
-    isArray: true
+    }
+  },
+  {
+    name: 'note',
+    icon: CommentIcon,
+    type: 'text',
+    multiline: true
   },
   {
     name: 'cozy',
     icon: CloudIcon,
     type: 'url',
+    isSecondary: true,
     label: {
       name: 'cozyLabel',
       select: true,
@@ -258,16 +271,20 @@ export const fields = [
     name: 'birthday',
     icon: CalendarIcon,
     type: 'date',
+    isSecondary: true,
     InputLabelProps: { shrink: true }
   },
   {
     name: 'birthplace',
     icon: null,
-    type: 'text'
+    type: 'text',
+    isSecondary: true
   },
   {
     name: 'relatedContact',
     icon: RelationshipIcon,
+    layout: 'array',
+    isSecondary: true,
     InputProps: {
       readOnly: true,
       endAdornment: (
@@ -329,13 +346,6 @@ export const fields = [
           label: 'Contacts.AddModal.ContactForm.label.relationship.recipient'
         }
       ]
-    },
-    isArray: true
-  },
-  {
-    name: 'note',
-    icon: CommentIcon,
-    type: 'text',
-    multiline: true
+    }
   }
 ]

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/locales/en.json

@@ -6,6 +6,7 @@
           "man": "Man",
           "woman": "Woman"
         },
+        "other-fields": "Other fields",
         "fields": {
           "gender": "Civility",
           "givenName": "Firstname",

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",

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

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

@@ -7,8 +7,8 @@ var contactToFormValues = function contactToFormValues(contact, t) {
   // initialize the form values, required so that array fields start with at least one editable field
   var initialFieldValues = fields.reduce(function (initialValues, _ref) {
     var name = _ref.name,
-        isArray = _ref.isArray;
-    initialValues[name] = isArray ? [undefined] : undefined;
+        layout = _ref.layout;
+    initialValues[name] = layout === 'array' ? [undefined] : undefined;
     return initialValues;
   }, {});
 

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

@@ -29,31 +29,36 @@ export var fields = [{
 }, {
   name: 'givenName',
   icon: null,
-  type: 'text'
-}, {
-  name: 'additionalName',
-  icon: null,
-  type: 'text'
+  type: 'text',
+  layout: 'accordion',
+  subFields: [{
+    name: 'additionalName',
+    icon: null,
+    type: 'text'
+  }, {
+    name: 'surname',
+    icon: null,
+    type: 'text'
+  }]
 }, {
   name: 'familyName',
   icon: null,
   type: 'text'
-}, {
-  name: 'surname',
-  icon: null,
-  type: 'text'
 }, {
   name: 'company',
   icon: CompanyIcon,
-  type: 'text'
-}, {
-  name: 'jobTitle',
-  icon: null,
-  type: 'text'
+  type: 'text',
+  layout: 'accordion',
+  subFields: [{
+    name: 'jobTitle',
+    icon: null,
+    type: 'text'
+  }]
 }, {
   name: 'phone',
   icon: TelephoneIcon,
   type: 'tel',
+  layout: 'array',
   label: {
     name: 'phoneLabel',
     select: true,
@@ -83,12 +88,12 @@ export var fields = [{
       value: '{"type":"fax","label":"work"}',
       label: 'Contacts.AddModal.ContactForm.label.phone.fax-work'
     }]
-  },
-  isArray: true
+  }
 }, {
   name: 'email',
   icon: EmailIcon,
   type: 'email',
+  layout: 'array',
   label: {
     name: 'emailLabel',
     select: true,
@@ -106,12 +111,12 @@ export var fields = [{
       value: '{"label":"work"}',
       label: 'Contacts.AddModal.ContactForm.label.work'
     }]
-  },
-  isArray: true
+  }
 }, {
   name: 'address',
   icon: LocationIcon,
   type: 'text',
+  layout: 'array',
   InputProps: {
     readOnly: true
   },
@@ -181,12 +186,17 @@ export var fields = [{
       value: '{"label":"work"}',
       label: 'Contacts.AddModal.ContactForm.label.address.work'
     }]
-  },
-  isArray: true
+  }
+}, {
+  name: 'note',
+  icon: CommentIcon,
+  type: 'text',
+  multiline: true
 }, {
   name: 'cozy',
   icon: CloudIcon,
   type: 'url',
+  isSecondary: true,
   label: {
     name: 'cozyLabel',
     select: true,
@@ -209,16 +219,20 @@ export var fields = [{
   name: 'birthday',
   icon: CalendarIcon,
   type: 'date',
+  isSecondary: true,
   InputLabelProps: {
     shrink: true
   }
 }, {
   name: 'birthplace',
   icon: null,
-  type: 'text'
+  type: 'text',
+  isSecondary: true
 }, {
   name: 'relatedContact',
   icon: RelationshipIcon,
+  layout: 'array',
+  isSecondary: true,
   InputProps: {
     readOnly: true,
     endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
@@ -268,11 +282,5 @@ export var fields = [{
       value: '{"type":"recipient"}',
       label: 'Contacts.AddModal.ContactForm.label.relationship.recipient'
     }]
-  },
-  isArray: true
-}, {
-  name: 'note',
-  icon: CommentIcon,
-  type: 'text',
-  multiline: true
+  }
 }];

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

@@ -1,11 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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';
 import FieldInputLayout from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/FieldInputLayout";
@@ -14,6 +15,7 @@ import { fields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/f
 import formValuesToContact from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/formValuesToContact";
 import { validateFields } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/helpers";
 import { locales } from "cozy-ui/transpiled/react/Contacts/AddModal/ContactForm/locales";
+import Button from "cozy-ui/transpiled/react/Buttons";
 import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n"; // import { fullContactPropTypes } from '../../ContactPropTypes' // !!
 // this variable will be set in the form's render prop
 // and used by the submit button in ContactFormModal
@@ -42,6 +44,12 @@ var ContactForm = function ContactForm(_ref) {
   var contact = _ref.contact,
       _onSubmit = _ref.onSubmit,
       contacts = _ref.contacts;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showSecondaryFields = _useState2[0],
+      setShowSecondaryFields = _useState2[1];
+
   useExtendI18n(locales);
 
   var _useI18n = useI18n(),
@@ -75,13 +83,21 @@ var ContactForm = function ContactForm(_ref) {
           key: index,
           attributes: attributes,
           contacts: contacts,
+          showSecondaryFields: showSecondaryFields,
           formProps: {
             valid: valid,
             submitFailed: submitFailed,
             errors: errors
           }
         });
-      }));
+      }), !showSecondaryFields && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+        className: "u-db u-ml-2 u-mt-1",
+        variant: "text",
+        label: t('Contacts.AddModal.ContactForm.other-fields'),
+        onClick: function onClick() {
+          return setShowSecondaryFields(true);
+        }
+      })));
     }
   });
 }; // Used to avoid unnecessary multiple rendering of ContactForm when creating a new contact in another way.

package/transpiled/react/Contacts/AddModal/ContactForm/locales/index.js

@@ -6,6 +6,7 @@ var en = {
           man: "Man",
           woman: "Woman"
         },
+        "other-fields": "Other fields",
         fields: {
           gender: "Civility",
           givenName: "Firstname",
@@ -79,6 +80,7 @@ var fr = {
           man: "Homme",
           woman: "Femme"
         },
+        "other-fields": "Autres champs",
         fields: {
           gender: "Civilit\xE9",
           givenName: "Pr\xE9nom",

package/transpiled/react/Contacts/AddModal/types.d.ts

@@ -26,7 +26,7 @@ export const fieldInputAttributesTypes: PropTypes.Requireable<PropTypes.InferPro
             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/types.js

@@ -17,7 +17,7 @@ export var 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,
     icon: PropTypes.string,