Merge pull request #3690 from techmatters/CHI-3368-data_translations

CHI-3368: Add more translation templates for values that come from config

Author: stephenhand

plugin-hrm-form/src/components/callTypeButtons/CallTypeButtons.tsx

@@ -170,7 +170,7 @@ const CallTypeButtons: React.FC<Props> = ({
                 marginRight={i % 2 === 0}
                 disabled={loadingStatus === LoadingStatus.LOADING}
               >
-                {callType.label}
+                <Template code={callType.label} />
               </NonDataCallTypeButton>
             ))}
         </Box>

plugin-hrm-form/src/components/callTypeButtons/styles.tsx

@@ -70,8 +70,8 @@ type NonDataCallTypeButtonProps = {
 export const NonDataCallTypeButton = styled(Button)<NonDataCallTypeButtonProps>`
   white-space: normal;
   width: 140px;
-  height: 44px;
-  margin-bottom: 10px;
+  min-height: 44px;
+  padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;

plugin-hrm-form/src/components/common/forms/CategoryCheckboxes.tsx

@@ -15,6 +15,7 @@
  */
 import React from 'react';
 import { CategoryEntry } from 'hrm-form-definitions';
+import { Template } from '@twilio/flex-ui';
 
 import {
   SubcategoriesWrapper,
@@ -56,7 +57,7 @@ const createSubcategoryCheckbox = (
             checked={selected}
             data-testid={`categories.${category}.${label}`}
           />
-          {label}
+          <Template code={label} />
         </CategoryCheckboxField>
       </CategoryCheckboxLabel>
       {toolkitUrl && (

plugin-hrm-form/src/components/common/forms/Section.tsx

@@ -31,7 +31,7 @@ const ArrowDownIcon = ContactDetailsIcon(ArrowDropDownTwoTone);
 const ArrowUpIcon = ContactDetailsIcon(ArrowDropUpTwoTone);
 
 type MyProps = {
-  sectionTitle: string | JSX.Element;
+  sectionTitle: string;
   color?: string;
   expanded: boolean;
   handleExpandClick: (event?: any) => void;
@@ -67,7 +67,9 @@ const Section: React.FC<MyProps> = ({
         onClick={handleExpandClick}
         data-testid={buttonDataTestid}
       >
-        <SectionTitleText>{sectionTitle}</SectionTitleText>
+        <SectionTitleText>
+          <Template code={sectionTitle} />
+        </SectionTitleText>
         {!hideIcon && (expanded ? <ArrowUpIcon /> : <ArrowDownIcon />)}
       </SectionTitleButton>
       {showEditButton && (

plugin-hrm-form/src/components/resources/mappingComponents/khpMappings/ResourceSearchFilters.tsx

@@ -189,7 +189,8 @@ const ResourceSearchFilters: React.FC<{}> = () => {
                     );
                   }}
                 />
-                &nbsp;&nbsp;{label ?? value}
+                &nbsp;&nbsp;
+                <Template code={label ?? value} />
               </FormLabel>
             </Grid>
           ))}