Ensure that Add component honors mods.tooltipDescriptions.add

Author: raymond-lam

src/formBuilder/Add.js

@@ -37,9 +37,11 @@ const useStyles = createUseStyles({
 export default function Add({
   addElem,
   hidden,
+  tooltipDescription,
 }: {
   addElem: (choice: string) => void,
   hidden?: boolean,
+  tooltipDescription?: string,
 }): Node {
   const classes = useStyles();
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -55,7 +57,7 @@ export default function Add({
         />
       </span>
       <UncontrolledTooltip placement='top' target={`${elementId}_add`}>
-        Create new form element
+        {tooltipDescription || 'Create new form element'}
       </UncontrolledTooltip>
       <Popover
         placement='bottom'

src/formBuilder/Card.js

@@ -249,7 +249,14 @@ export default function Card({
           TypeSpecificParameters={TypeSpecificParameters}
         />
       </Collapse>
-      {addElem ? <Add addElem={(choice: string) => addElem(choice)} /> : ''}
+      {addElem ? (
+        <Add
+          tooltipDescription={((mods || {}).tooltipDescriptions || {}).add}
+          addElem={(choice: string) => addElem(choice)}
+        />
+      ) : (
+        ''
+      )}
     </React.Fragment>
   );
 }

src/formBuilder/CardGallery.js

@@ -77,6 +77,7 @@ export default function CardGallery({
       {componentArr.length === 0 && <h5>No components in "definitions"</h5>}
       <div className='form_footer'>
         <Add
+          tooltipDescription={((mods || {}).tooltipDescriptions || {}).add}
           addElem={(choice: string) => {
             if (choice === 'card') {
               addCardObj({

src/formBuilder/FormBuilder.js

@@ -348,6 +348,7 @@ export default function FormBuilder({
       </div>
       <div className={`form-footer ${classes.formFooter}`}>
         <Add
+          tooltipDescription={((mods || {}).tooltipDescriptions || {}).add}
           addElem={(choice: string) => {
             if (choice === 'card') {
               addCardObj({

src/formBuilder/Section.js

@@ -438,6 +438,7 @@ export default function Section({
           </div>
           <div className='section-footer'>
             <Add
+              tooltipDescription={((mods || {}).tooltipDescriptions || {}).add}
               addElem={(choice: string) => {
                 if (choice === 'card') {
                   addCardObj({
@@ -520,7 +521,14 @@ export default function Section({
           TypeSpecificParameters={CardDefaultParameterInputs}
         />
       </Collapse>
-      {addElem ? <Add addElem={(choice: string) => addElem(choice)} /> : ''}
+      {addElem ? (
+        <Add
+          tooltipDescription={((mods || {}).tooltipDescriptions || {}).add}
+          addElem={(choice: string) => addElem(choice)}
+        />
+      ) : (
+        ''
+      )}
     </React.Fragment>
   );
 }