Allow users to override default labels using mods (#63)

Allow users to override default labels using mods

Author: Bradley Marques

docs/Mods.md

@@ -4,7 +4,7 @@ Mods provide for the customization of the Form Builder component, such as the de
 
 ## Type Definition
 
-Flow type defintions are available via [flow-typed](https://github.com/flow-typed/flow-typed).
+Flow type definitions are available via [flow-typed](https://github.com/flow-typed/flow-typed).
 
 The type definition for Mods is as follows:
 
@@ -27,6 +27,10 @@ declare type Mods = {|
   labels?: {|
     formNameLabel?: string,
     formDescriptionLabel?: string,
+    objectNameLabel?: string,
+    displayNameLabel?: string,
+    descriptionLabel?: string,
+    inputTypeLabel?: string,
   |},
   showFormHead?: boolean,
 |};
@@ -60,7 +64,7 @@ declare type FormInput = {|
   |};
 ```
 
-The `displayName` is the full name of the desired form input. For example, **Short Answer** is the `displayName` for the `shortAnswer` form input. 
+The `displayName` is the full name of the desired form input. For example, **Short Answer** is the `displayName` for the `shortAnswer` form input.
 
 `matchIf` is an array of scenarios that will cause the `FormBuilder` to recognize a piece of Data and UI schema as this custom input type. For more information, see the *Matching Algorithm* section on this page.
 
@@ -167,4 +171,8 @@ By passing in alternative text to the `tooltipDescriptions` object of the `mods`
 The text for the labels of a few of the inputs in the Form Builder can similarly be customized by specifying a `labels` object of `mods`.
 
 - `formNameLabel` - The label for the input for the name/title of the entire form.
-- `formDescriptionLabel` - The lable for the input for the description of the entire form.
+- `formDescriptionLabel` - The label for the input for the description of the entire form.
+- `objectNameLabel` - The label for the "Object Name" field.
+- `displayNameLabel` - The label for the "Display Name" field.
+- `descriptionLabel` - The label for the "Description" field.
+- `inputTypeLabel` - The label for the "Input Type" field.

flow-libdef/@ginkgo-bioworks/react-json-schema-form-builder_v1.x.x/flow_v0.92.x-/react-json-schema-form-builder_v1.x.x.js

@@ -73,6 +73,10 @@ declare module '@ginkgo-bioworks/react-json-schema-form-builder' {
     labels?: {|
       formNameLabel?: string,
       formDescriptionLabel?: string,
+      objectNameLabel?: string,
+      displayNameLabel?: string,
+      descriptionLabel?: string,
+      inputTypeLabel?: string,
     |},
     showFormHead?: boolean,
   |};

src/formBuilder/Card.test.js

@@ -33,6 +33,19 @@ const props = {
   allFormInputs: DEFAULT_FORM_INPUTS,
 };
 
+const mods = {
+  labels: {
+    objectNameLabel: 'Custom Object Name',
+    displayNameLabel: 'Custom Display Name',
+    descriptionLabel: 'Custom Description',
+    inputTypeLabel: 'Custom Input Type',
+  },
+};
+
+const getHeadingText = (wrapper, index) => {
+  return wrapper.find('.card-container').first().find('h5').at(index).html();
+};
+
 describe('Card', () => {
   it('renders without error', () => {
     const div = document.createElement('div');
@@ -143,4 +156,42 @@ describe('Card', () => {
     ]);
     mockEvent.mockClear();
   });
+
+  it('renders with default labels if no mods are passed', () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const wrapper = mount(<Card {...props} />, { attachTo: div });
+
+    const objectNameLabel = getHeadingText(wrapper, 0);
+    expect(objectNameLabel).toContain('Object Name');
+
+    const displayNameLabel = getHeadingText(wrapper, 1);
+    expect(displayNameLabel).toContain('Display Name');
+
+    const descriptionLabel = getHeadingText(wrapper, 2);
+    expect(descriptionLabel).toContain('Description');
+
+    const inputTypeLabel = getHeadingText(wrapper, 3);
+    expect(inputTypeLabel).toContain('Input Type');
+  });
+
+  it('renders with passed labels', () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+
+    const propsWithMods = { ...props, mods: mods };
+    const wrapper = mount(<Card {...propsWithMods} />, { attachTo: div });
+
+    const objectNameLabel = getHeadingText(wrapper, 0);
+    expect(objectNameLabel).toContain('Custom Object Name');
+
+    const displayNameLabel = getHeadingText(wrapper, 1);
+    expect(displayNameLabel).toContain('Custom Display Name');
+
+    const descriptionLabel = getHeadingText(wrapper, 2);
+    expect(descriptionLabel).toContain('Custom Description');
+
+    const inputTypeLabel = getHeadingText(wrapper, 3);
+    expect(inputTypeLabel).toContain('Custom Input Type');
+  });
 });

src/formBuilder/CardGeneralParameterInputs.js

@@ -32,11 +32,22 @@ export default function CardGeneralParameterInputs({
   );
   const categoryMap = categoryToNameMap(parameters.category, allFormInputs);
 
+  const fetchLabel = (labelName: string, defaultLabel: string): string => {
+    return mods && mods.labels && typeof mods.labels[labelName] === 'string'
+      ? mods.labels[labelName]
+      : defaultLabel;
+  };
+
+  const objectNameLabel = fetchLabel('objectNameLabel', 'Object Name');
+  const displayNameLabel = fetchLabel('displayNameLabel', 'Display Name');
+  const descriptionLabel = fetchLabel('descriptionLabel', 'Description');
+  const inputTypeLabel = fetchLabel('inputTypeLabel', 'Input Type');
+
   return (
     <div>
       <div className='card-entry'>
         <h5>
-          Object Name{' '}
+          {`${objectNameLabel} `}
           <Tooltip
             text={
               mods &&
@@ -72,7 +83,7 @@ export default function CardGeneralParameterInputs({
         }`}
       >
         <h5>
-          Display Name{' '}
+          {`${displayNameLabel} `}
           <Tooltip
             text={
               mods &&
@@ -101,7 +112,7 @@ export default function CardGeneralParameterInputs({
       </div>
       <div className={`card-entry ${parameters.$ref ? 'disabled-input' : ''}`}>
         <h5>
-          Description{' '}
+          {`${descriptionLabel} `}
           <Tooltip
             text={
               mods &&
@@ -130,7 +141,7 @@ export default function CardGeneralParameterInputs({
       </div>
       <div className='card-entry'>
         <h5>
-          Input Type{' '}
+          {`${inputTypeLabel} `}
           <Tooltip
             text={
               mods &&

src/formBuilder/types.js

@@ -120,6 +120,10 @@ export type Mods = {
   labels?: {
     formNameLabel?: string,
     formDescriptionLabel?: string,
+    objectNameLabel?: string,
+    displayNameLabel?: string,
+    descriptionLabel?: string,
+    inputTypeLabel?: string,
   },
   showFormHead?: boolean,
 };