From a9d4955e0b9d7aeb56eead6ee6df6e912f5916d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Castillo?= <tcastilloboireau@gmail.com>
Date: Wed, 13 Nov 2024 18:51:24 -0300
Subject: [PATCH] Add new fields for line height props
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tomás Castillo <tcastilloboireau@gmail.com>
---
 src/components/forms/badge-settings-form.js   | 106 ++++++++++++++++++
 src/i18n/en.json                              |  10 +-
 src/reducers/badges/badge-settings-reducer.js |   5 +
 3 files changed, 119 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/badge-settings-form.js b/src/components/forms/badge-settings-form.js
index a64d37435..1602f54ac 100644
--- a/src/components/forms/badge-settings-form.js
+++ b/src/components/forms/badge-settings-form.js
@@ -431,6 +431,26 @@ class BadgeSettingsForm extends React.Component {
                 isClearable
               />
             </div>
+            <div className="col-md-6">
+              <label>
+                {T.translate(
+                  "badge_settings.badge_template_text_fields_line_height"
+                )}{" "}
+                &nbsp;{" "}
+                <i
+                  className="fa fa-info-circle"
+                  aria-hidden="true"
+                  title={T.translate("badge_settings.line_height_info")}
+                />
+              </label>
+              <br />
+              <Input
+                className="form-control"
+                id="BADGE_TEMPLATE_TEXT_FIELDS_LINE_HEIGHT"
+                value={entity?.BADGE_TEMPLATE_TEXT_FIELDS_LINE_HEIGHT?.value}
+                onChange={this.handleChange}
+              />
+            </div>
           </div>
         </div>
 
@@ -589,6 +609,28 @@ class BadgeSettingsForm extends React.Component {
                 />
               </div>
             </div>
+            <div className="row form-group">
+              <div className="col-md-6">
+                <label>
+                  {T.translate(
+                    "badge_settings.badge_template_first_name_line_height"
+                  )}{" "}
+                  &nbsp;{" "}
+                  <i
+                    className="fa fa-info-circle"
+                    aria-hidden="true"
+                    title={T.translate("badge_settings.line_height_info")}
+                  />
+                </label>
+                <br />
+                <Input
+                  className="form-control"
+                  id="BADGE_TEMPLATE_FIRST_NAME_LINE_HEIGHT"
+                  value={entity?.BADGE_TEMPLATE_FIRST_NAME_LINE_HEIGHT?.value}
+                  onChange={this.handleChange}
+                />
+              </div>
+            </div>
           </div>
         </Panel>
 
@@ -744,6 +786,28 @@ class BadgeSettingsForm extends React.Component {
                 />
               </div>
             </div>
+            <div className="row form-group">
+              <div className="col-md-6">
+                <label>
+                  {T.translate(
+                    "badge_settings.badge_template_last_name_line_height"
+                  )}{" "}
+                  &nbsp;{" "}
+                  <i
+                    className="fa fa-info-circle"
+                    aria-hidden="true"
+                    title={T.translate("badge_settings.line_height_info")}
+                  />
+                </label>
+                <br />
+                <Input
+                  className="form-control"
+                  id="BADGE_TEMPLATE_LAST_NAME_LINE_HEIGHT"
+                  value={entity?.BADGE_TEMPLATE_LAST_NAME_LINE_HEIGHT?.value}
+                  onChange={this.handleChange}
+                />
+              </div>
+            </div>
           </div>
         </Panel>
 
@@ -897,6 +961,28 @@ class BadgeSettingsForm extends React.Component {
                 />
               </div>
             </div>
+            <div className="row form-group">
+              <div className="col-md-6">
+                <label>
+                  {T.translate(
+                    "badge_settings.badge_template_company_line_height"
+                  )}{" "}
+                  &nbsp;{" "}
+                  <i
+                    className="fa fa-info-circle"
+                    aria-hidden="true"
+                    title={T.translate("badge_settings.line_height_info")}
+                  />
+                </label>
+                <br />
+                <Input
+                  className="form-control"
+                  id="BADGE_TEMPLATE_COMPANY_LINE_HEIGHT"
+                  value={entity?.BADGE_TEMPLATE_COMPANY_LINE_HEIGHT?.value}
+                  onChange={this.handleChange}
+                />
+              </div>
+            </div>
           </div>
         </Panel>
 
@@ -1037,6 +1123,26 @@ class BadgeSettingsForm extends React.Component {
                   onChange={this.handleChange}
                 />
               </div>
+              <div className="col-md-6">
+                <label>
+                  {T.translate(
+                    "badge_settings.badge_template_title_line_height"
+                  )}{" "}
+                  &nbsp;{" "}
+                  <i
+                    className="fa fa-info-circle"
+                    aria-hidden="true"
+                    title={T.translate("badge_settings.line_height_info")}
+                  />
+                </label>
+                <br />
+                <Input
+                  className="form-control"
+                  id="BADGE_TEMPLATE_TITLE_LINE_HEIGHT"
+                  value={entity?.BADGE_TEMPLATE_TITLE_LINE_HEIGHT?.value}
+                  onChange={this.handleChange}
+                />
+              </div>
             </div>
           </div>
         </Panel>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4c4f5f04f..5651482aa 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -2360,14 +2360,16 @@
     "badge_template_margin": "BADGE_TEMPLATE_MARGIN",
     "badge_template_font_faces_inline_definition": "BADGE_TEMPLATE_FONT_FACES_INLINE_DEFINITION",
     "badge_template_text_fields_font_family": "BADGE_TEMPLATE_TEXT_FIELDS_FONT_FAMILY",
+    "badge_template_text_fields_line_height": "BADGE_TEMPLATE_TEXT_FIELDS_LINE_HEIGHT",
     "badge_template_name_display_mode": "BADGE_TEMPLATE_NAME_DISPLAY_MODE",
     "badge_template_title_padding": "BADGE_TEMPLATE_TITLE_PADDING",
     "badge_template_title_text_align": "BADGE_TEMPLATE_TITLE_TEXT_ALIGN",
     "badge_template_title_font_casing": "BADGE_TEMPLATE_TITLE_FONT_CASING",
     "badge_template_title_font_size_min": "BADGE_TEMPLATE_TITLE_FONT_SIZE_MIN",
     "badge_template_title_font_size_max": "BADGE_TEMPLATE_TITLE_FONT_SIZE_MAX",
-    "badge_template_title_text_fit_mode": "BADGE_TEMPLATE_TITLE_SHRINK_AT_LINE",
     "badge_template_title_font_family": "BADGE_TEMPLATE_TITLE_FONT_FAMILY",
+    "badge_template_title_shrink_at_line": "BADGE_TEMPLATE_TITLE_SHRINK_AT_LINE",
+    "badge_template_title_line_height": "BADGE_TEMPLATE_TITLE_LINE_HEIGHT",
     "badge_template_first_name_padding": "BADGE_TEMPLATE_FIRST_NAME_PADDING",
     "badge_template_first_name_text_align": "BADGE_TEMPLATE_FIRST_NAME_TEXT_ALIGN",
     "badge_template_first_name_font_casing": "BADGE_TEMPLATE_FIRST_NAME_FONT_CASING",
@@ -2375,6 +2377,7 @@
     "badge_template_first_name_font_size_max": "BADGE_TEMPLATE_FIRST_NAME_FONT_SIZE_MAX",
     "badge_template_first_name_shrink_at_line": "BADGE_TEMPLATE_FIRST_NAME_SHRINK_AT_LINE",
     "badge_template_first_name_font_family": "BADGE_TEMPLATE_FIRST_NAME_FONT_FAMILY",
+    "badge_template_first_name_line_height": "BADGE_TEMPLATE_FIRST_NAME_LINE_HEIGHT",
     "badge_template_last_name_padding": "BADGE_TEMPLATE_LAST_NAME_PADDING",
     "badge_template_last_name_text_align": "BADGE_TEMPLATE_LAST_NAME_TEXT_ALIGN",
     "badge_template_last_name_font_casing": "BADGE_TEMPLATE_LAST_NAME_FONT_CASING",
@@ -2382,13 +2385,15 @@
     "badge_template_last_name_font_size_max": "BADGE_TEMPLATE_LAST_NAME_FONT_SIZE_MAX",
     "badge_template_last_name_shrink_at_line": "BADGE_TEMPLATE_LAST_NAME_SHRINK_AT_LINE",
     "badge_template_last_name_font_family": "BADGE_TEMPLATE_LAST_NAME_FONT_FAMILY",
+    "badge_template_last_name_line_height": "BADGE_TEMPLATE_LAST_NAME_LINE_HEIGHT",
     "badge_template_company_padding": "BADGE_TEMPLATE_COMPANY_PADDING",
     "badge_template_company_text_align": "BADGE_TEMPLATE_COMPANY_TEXT_ALIGN",
     "badge_template_company_font_casing": "BADGE_TEMPLATE_COMPANY_FONT_CASING",
     "badge_template_company_font_size_min": "BADGE_TEMPLATE_COMPANY_FONT_SIZE_MIN",
     "badge_template_company_font_size_max": "BADGE_TEMPLATE_COMPANY_FONT_SIZE_MAX",
-    "badge_template_company_text_fit_mode": "BADGE_TEMPLATE_COMPANY_SHRINK_AT_LINE",
+    "badge_template_company_shrink_at_line": "BADGE_TEMPLATE_COMPANY_SHRINK_AT_LINE",
     "badge_template_company_font_family": "BADGE_TEMPLATE_COMPANY_FONT_FAMILY",
+    "badge_template_company_line_height": "BADGE_TEMPLATE_COMPANY_LINE_HEIGHT",
     "badge_template_font_family": "BADGE_TEMPLATE_FONT_FAMILY",
     "badge_template_qr_display": "BADGE_TEMPLATE_QR_DISPLAY",
     "badge_template_qr_size": "BADGE_TEMPLATE_QR_SIZE",
@@ -2416,6 +2421,7 @@
     "integer_value_info": "Integer value only (represents pixels, e.g., 20 for 20px)",
     "shrink_info": "Sets the maximum number of lines allowed before text size starts to shrink.",
     "url_info": "URL to file image at a CDN",
+    "line_height_info": "Enter a unitless value, either a whole number or a decimal (e.g., 1 or 1.1), to be multiplied by the element's font size.",
     "badge_template_settings_updated": "Badge settings updated."
   },
   "marketing": {
diff --git a/src/reducers/badges/badge-settings-reducer.js b/src/reducers/badges/badge-settings-reducer.js
index 49562d928..0fad272a3 100644
--- a/src/reducers/badges/badge-settings-reducer.js
+++ b/src/reducers/badges/badge-settings-reducer.js
@@ -47,6 +47,7 @@ const DEFAULT_BADGE_SETTINGS = {
   BADGE_TEMPLATE_TITLE_FONT_SIZE_MAX: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_TITLE_SHRINK_AT_LINE: { id: 0, value: "1", type: "TEXT" },
   BADGE_TEMPLATE_TITLE_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
+  BADGE_TEMPLATE_TITLE_LINE_HEIGHT: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_PADDING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_TEXT_ALIGN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_FONT_CASING: { id: 0, value: "", type: "TEXT" },
@@ -54,6 +55,7 @@ const DEFAULT_BADGE_SETTINGS = {
   BADGE_TEMPLATE_FIRST_NAME_FONT_SIZE_MAX: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_SHRINK_AT_LINE: { id: 0, value: "1", type: "TEXT" },
   BADGE_TEMPLATE_FIRST_NAME_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
+  BADGE_TEMPLATE_FIRST_NAME_LINE_HEIGHT: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_PADDING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_TEXT_ALIGN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_FONT_CASING: { id: 0, value: "", type: "TEXT" },
@@ -61,6 +63,7 @@ const DEFAULT_BADGE_SETTINGS = {
   BADGE_TEMPLATE_LAST_NAME_FONT_SIZE_MAX: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_SHRINK_AT_LINE: { id: 0, value: "1", type: "TEXT" },
   BADGE_TEMPLATE_LAST_NAME_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
+  BADGE_TEMPLATE_LAST_NAME_LINE_HEIGHT: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_PADDING: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_TEXT_ALIGN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_FONT_CASING: { id: 0, value: "", type: "TEXT" },
@@ -68,6 +71,7 @@ const DEFAULT_BADGE_SETTINGS = {
   BADGE_TEMPLATE_COMPANY_FONT_SIZE_MAX: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_SHRINK_AT_LINE: { id: 0, value: "1", type: "TEXT" },
   BADGE_TEMPLATE_COMPANY_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
+  BADGE_TEMPLATE_COMPANY_LINE_HEIGHT: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_QR_DISPLAY: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_QR_SIZE: { id: 0, value: "", type: "TEXT" },
@@ -76,6 +80,7 @@ const DEFAULT_BADGE_SETTINGS = {
   BADGE_TEMPLATE_QR_COLOR: { id: 0, value: "", type: "HEX_COLOR" },
   BADGE_TEMPLATE_TEXT_FIELDS_MARGIN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_TEXT_FIELDS_COLOR: { id: 0, value: "", type: "HEX_COLOR" },
+  BADGE_TEMPLATE_TEXT_FIELDS_LINE_HEIGHT: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FEATURES_MARGIN: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FEATURES_FONT_FAMILY: { id: 0, value: "", type: "TEXT" },
   BADGE_TEMPLATE_FEATURES_TEXT_COLOR: { id: 0, value: "", type: "HEX_COLOR" },