OCRVS-11018: add new form field input NUMBER_WITH_UNIT

[pankaj-pant]

Description

Create a new form input called NUMBER_WITH_UNIT.

It has a number input next to a unit select. N number of units can be added the unit select.

https://www.loom.com/share/d2b006478d6546b080d7871dde58fcb9

Screen recording made using the config below

{
      id: 'child.birthDuration',
      analytics: true,
      type: FieldType.NUMBER_WITH_UNIT,
      required: true,
      label: {
        defaultMessage: 'Birth duration',
        description: 'This is the label for the field',
        id: 'event.birth.action.declare.form.section.child.field.birthDuration.label'
      },
      placeholder: {
        defaultMessage: 'Time Unit',
        description: 'This is the placeholder for the field',
        id: 'event.birth.action.declare.form.section.child.field.birthDuration.placeholder'
      },
      options: [
        {
          value: 'Days',
          label: {
            id: 'unit.days',
            defaultMessage: 'Days',
            description: 'Days'
          }
        },
        {
          value: 'Hours',
          label: {
            id: 'unit.hours',
            defaultMessage: 'Hours',
            description: 'Hours'
          }
        },
        {
          value: 'Minutes',
          label: {
            id: 'unit.minutes',
            defaultMessage: 'Minutes',
            description: 'Minutes'
          }
        }
      ],
      configuration: {
        min: 0,
        numberFieldPlaceholder: {
          defaultMessage: 'Interval',
          description: 'This is the placeholder for the field',
          id: 'event.birth.action.declare.form.section.child.field.birthDuration.placeholder'
        }
      },
      validation: [
        {
          message: {
            defaultMessage: 'Number and unit required for registration',
            description: 'This is the error message for invalid duration',
            id: 'event.birth.action.declare.form.section.child.field.birthDuration.error'
          },
          validator: and(
            field('child.birthDuration').get('numericValue').isGreaterThan(0),
            not(field('child.birthDuration').get('unit').isFalsy())
          )
        }
      ]
    }

Checklist

• I have linked the correct Github issue under "Development"
• I have tested the changes locally, and written appropriate tests
• I have tested beyond the happy path (e.g. edge cases, failure paths)
• I have updated the changelog with this change (if applicable)
• I have updated the GitHub issue status accordingly

[rikukissa]

Looking good :)

[rikukissa]

What is this used for?

[pankaj-pant]

Ah, so in V2 the height should be 48px for the Select to be aligned with the Number input field. Is it ok, to simply change 46px to 48px or do we need to think about V1 here too? If yes, then we need to make the height configurable