1 files changed, 51 insertions, 31 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx b/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx
index 26d0292d6..b5e0bd52b 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx
@@ -15,9 +15,9 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 import { ComponentChildren, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useGroupField } from "./useGroupField.js";
@@ -32,35 +32,55 @@ export interface Props<T> {
   initialActive?: boolean;
 }
 
-export function InputGroup<T>({ name, label, children, tooltip, alternative, fixed, initialActive }: Props<keyof T>): VNode {
+export function InputGroup<T>({
+  name,
+  label,
+  children,
+  tooltip,
+  alternative,
+  fixed,
+  initialActive,
+}: Props<keyof T>): VNode {
   const [active, setActive] = useState(initialActive || fixed);
   const group = useGroupField<T>(name);
 
-  return <div class="card">
-    <header class="card-header">
-      <p class="card-header-title">
-        {label}
-        {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
-          <i class="mdi mdi-information" />
-        </span>}
-        {group?.hasError && <span class="icon has-text-danger" data-tooltip={tooltip}>
-          <i class="mdi mdi-alert" />
-        </span>}
-      </p>
-      { !fixed && <button class="card-header-icon" aria-label="more options" onClick={(): void => setActive(!active)}>
-        <span class="icon">
-          {active ?
-            <i class="mdi mdi-arrow-up" /> :
-            <i class="mdi mdi-arrow-down" />}
-        </span>
-      </button> }
-    </header>
-    {active ? <div class="card-content">
-        {children}
-    </div> : (
-      alternative ? <div class="card-content">
-          {alternative}
-      </div> : undefined
-    )}
-  </div>;
+  return (
+    <div class="card">
+      <header class="card-header">
+        <p class="card-header-title">
+          {label}
+          {tooltip && (
+            <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+              <i class="mdi mdi-information" />
+            </span>
+          )}
+          {group?.hasError && (
+            <span class="icon has-text-danger" data-tooltip={tooltip}>
+              <i class="mdi mdi-alert" />
+            </span>
+          )}
+        </p>
+        {!fixed && (
+          <button
+            class="card-header-icon"
+            aria-label="more options"
+            onClick={(): void => setActive(!active)}
+          >
+            <span class="icon">
+              {active ? (
+                <i class="mdi mdi-arrow-up" />
+              ) : (
+                <i class="mdi mdi-arrow-down" />
+              )}
+            </span>
+          </button>
+        )}
+      </header>
+      {active ? (
+        <div class="card-content">{children}</div>
+      ) : alternative ? (
+        <div class="card-content">{alternative}</div>
+      ) : undefined}
+    </div>
+  );
 }