feat(contacts): support pronouns property

src/components/Properties/PropertyTitleIcon.vue

@@ -28,6 +28,7 @@
 	<IconTranslateVariant v-else-if="icon === 'icon-spoken-lang'" :size="20" />
 	<IconAccountBoxMultiple v-else-if="icon === 'icon-related-contact'" :size="20" />
 	<IconAccountSwitch v-else-if="icon === 'icon-relation-to-you'" :size="20" />
+	<IconSlashForward v-else-if="icon === 'icon-pronouns'" :size="20" />
 </template>
 
 <script>
@@ -50,6 +51,7 @@ import IconMessageReplyText from 'vue-material-design-icons/MessageReplyTextOutl
 import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
 import IconPhone from 'vue-material-design-icons/PhoneOutline.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
+import IconSlashForward from 'vue-material-design-icons/SlashForward.vue'
 import IconText from 'vue-material-design-icons/Text.vue'
 import IconTranslateVariant from 'vue-material-design-icons/TranslateVariant.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
@@ -82,6 +84,7 @@ export default {
 		IconTranslateVariant,
 		IconAccountBoxMultiple,
 		IconAccountSwitch,
+		IconSlashForward,
 	},
 
 	props: {

src/models/rfcProps.js

@@ -362,6 +362,16 @@ const properties = {
 		],
 		primary: false,
 	},
+	pronouns: {
+		multiple: true,
+		readableName: t('contacts', 'Pronouns'),
+		icon: 'icon-pronouns',
+		force: 'text',
+		defaultValue: {
+			value: '',
+		},
+		primary: false,
+	},
 	tz: {
 		readableName: t('contacts', 'Time zone'),
 		force: 'select',
@@ -420,6 +430,7 @@ const fieldOrder = [
 	'x-phonetic-first-name',
 	'x-phonetic-last-name',
 	'gender',
+	'pronouns',
 	'cloud',
 	'impp',
 	'geo',

src/services/updateDesignSet.js

@@ -51,6 +51,23 @@ function setTypeMultiValueSeparateDQuote() {
 	return false
 }
 
+/**
+ * Registers RFC 9554 PRONOUNS as a text property so its value is escaped
+ * and unescaped, which ical.js does not do for unknown properties.
+ *
+ * @return {boolean} Whether or not the design set has been altered.
+ */
+function addPronounsProperty() {
+	if (ICAL.design.vcard.property.pronouns && ICAL.design.vcard3.property.pronouns) {
+		return false
+	}
+
+	ICAL.design.vcard.property.pronouns = { defaultType: 'text' }
+	ICAL.design.vcard3.property.pronouns = { defaultType: 'text' }
+
+	return true
+}
+
 /**
 /**
  * Check whether the ical.js design sets need updating (and if so, do it)
@@ -62,6 +79,7 @@ export default function(vCard) {
 	let madeChanges = false
 
 	madeChanges |= setTypeMultiValueSeparateDQuote()
+	madeChanges |= addPronounsProperty()
 	madeChanges |= addGroupedProperties(vCard)
 
 	return madeChanges

tests/javascript/models/rfcProps.test.js

@@ -29,4 +29,20 @@ describe('RFC props', () => {
 		expect(property.getParameter('type')).toEqual(defaultData.type)
 		expect(contact.vCard.toString()).toMatch(/^IMPP;TYPE=.+:$/m)
 	})
+
+	test.each(['3.0', '4.0'])('pronouns text is escaped and unescaped in vCard %s', (version) => {
+		const pronouns = new Contact(`
+			BEGIN:VCARD
+			VERSION:${version}
+			UID:123456789-123465-123456-123456789
+			FN:Test contact
+			PRONOUNS:she\\, they
+			END:VCARD`.replace(/\t/gmi, ''))
+
+		expect(pronouns.vCard.getFirstPropertyValue('pronouns')).toBe('she, they')
+
+		pronouns.vCard.getFirstProperty('pronouns').setValue('xe, they')
+
+		expect(pronouns.vCard.toString()).toMatch(/^PRONOUNS:xe\\, they$/m)
+	})
 })