Add a textTransform property to the InputString widget.

* This lets one force input to be lowercase, uppercase, etc.
* This is necessary in order to force postal code to be uppercase,
  as specified in od_mtl_2023 issue chairemobilite#400 (chairemobilite/od_mtl_2023#400)
* This only changes how the text is displayed on the web page.
  It does not change the text that is sent to the backend.
* Modify an InputString unit test to consider the new `textTransform` property
* Add an example usage of textTransform to the postal code widget in the demo survey

example/demo_survey/src/survey/widgets/home.tsx

@@ -444,6 +444,7 @@ export const homePostalCode = {
   inputType: "string",
   path: "home.postalCode",
   datatype: "string",
+  textTransform: "uppercase",
   twoColumns: true,
   label: {
     fr: "Code postal",

packages/evolution-common/src/services/widgets/WidgetConfig.ts

@@ -37,6 +37,7 @@ export type InputStringType<CustomSurvey, CustomHousehold, CustomHome, CustomPer
     maxLength?: number;
     datatype?: 'string' | 'integer' | 'float';
     size?: 'large' | 'small' | 'medium';
+    textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase';
 };
 
 export type InputTextType<CustomSurvey, CustomHousehold, CustomHome, CustomPerson> = {

packages/evolution-frontend/src/components/inputs/InputString.tsx

@@ -47,6 +47,7 @@ export const InputString = <CustomSurvey, CustomHousehold, CustomHome, CustomPer
     }, [props.updateKey]);
     return (
         <input
+            style={{textTransform: props.widgetConfig.textTransform || 'none' as any}}
             autoComplete="none"
             type="text"
             className={`apptr__form-input apptr__input-string input-${props.size || 'large'}`}

packages/evolution-frontend/src/components/inputs/__tests__/InputString.test.tsx

@@ -32,6 +32,7 @@ test('Should correctly render InputString with all parameters', () =>{
         datatype: 'string' as const,
         maxLength: 20,
         defaultValue: 'test',
+        textTransform: 'lowercase' as const,
         containsHtml: true,
         label: {
             fr: `Texte en français`,
@@ -194,4 +195,4 @@ test('Test update value through props', () => {
         updateKey: 1
     });
     expect(inputElement.getDOMNode<HTMLInputElement>().value).toBe(updateByServerVal);
-});
+});

packages/evolution-frontend/src/components/inputs/__tests__/__snapshots__/InputString.test.tsx.snap

@@ -8,6 +8,11 @@ exports[`Should correctly render InputString with a value of 0 1`] = `
   maxLength={255}
   name="test"
   onChange={[Function]}
+  style={
+    Object {
+      "textTransform": "none",
+    }
+  }
   type="text"
   value={0}
 />
@@ -22,6 +27,11 @@ exports[`Should correctly render InputString with all parameters 1`] = `
   name="test"
   onBlur={[Function]}
   onChange={[Function]}
+  style={
+    Object {
+      "textTransform": "lowercase",
+    }
+  }
   type="text"
   value="test"
 />
@@ -35,6 +45,11 @@ exports[`Should correctly render InputString with base parameters 1`] = `
   maxLength={255}
   name="test"
   onChange={[Function]}
+  style={
+    Object {
+      "textTransform": "none",
+    }
+  }
   type="text"
   value="value"
 />
@@ -49,6 +64,11 @@ exports[`Should correctly render InputString with default value as function 1`]
   name="test"
   onBlur={[Function]}
   onChange={[Function]}
+  style={
+    Object {
+      "textTransform": "none",
+    }
+  }
   type="text"
   value="fctDefault"
 />