Update default styling of Signature component

Author: frozenhelium

.changeset/tall-bees-flow.md

@@ -0,0 +1,5 @@
+---
+"@ifrc-go/ui": minor
+---
+
+Add printable Signature component

app/src/views/DrefApplicationExport/PgaExport/index.tsx

@@ -166,38 +166,14 @@ function PgaExport() {
                         strongLabel
                         withoutLabelColon
                     />
-                    <Signature
-                        label={strings.imminentSignature}
-                        strongLabel
-                    />
-                    <Signature
-                        label={strings.imminentSignature}
-                        strongLabel
-                    />
-                    <Signature
-                        label={strings.imminentPrintedSignatory}
-                        strongLabel
-                    />
-                    <Signature
-                        label={strings.imminentPrintedSignatory}
-                        strongLabel
-                    />
-                    <Signature
-                        label={strings.imminentTitle}
-                        strongLabel
-                    />
-                    <Signature
-                        label={strings.imminentTitle}
-                        strongLabel
-                    />
-                    <Signature
-                        label={strings.imminentDate}
-                        strongLabel
-                    />
-                    <Signature
-                        label={strings.imminentDate}
-                        strongLabel
-                    />
+                    <Signature label={strings.imminentSignature} />
+                    <Signature label={strings.imminentSignature} />
+                    <Signature label={strings.imminentPrintedSignatory} />
+                    <Signature label={strings.imminentPrintedSignatory} />
+                    <Signature label={strings.imminentTitle} />
+                    <Signature label={strings.imminentTitle} />
+                    <Signature label={strings.imminentDate} />
+                    <Signature label={strings.imminentDate} />
                 </div>
             </Container>
         </div>

packages/ui/src/components/printable/Signature/index.tsx

@@ -1,31 +1,17 @@
-import { _cs } from '@togglecorp/fujs';
-
 import styles from './styles.module.css';
 
 export interface Props {
     label: string;
-    labelClassName?: string;
-    strongLabel?: boolean;
 }
 
 function Signature(props: Props) {
-    const {
-        label,
-        labelClassName,
-        strongLabel,
-    } = props;
+    const { label } = props;
 
     return (
-        <div className={styles.signedContainer}>
-            <div className={styles.signaturePlace} />
+        <div className={styles.signature}>
+            <div className={styles.signatureSpace} />
             <div className={styles.line} />
-            <div
-                className={_cs(
-                    styles.label,
-                    strongLabel && styles.strong,
-                    labelClassName,
-                )}
-            >
+            <div className={styles.label}>
                 {label}
             </div>
         </div>

packages/ui/src/components/printable/Signature/styles.module.css

@@ -1,7 +1,8 @@
-.signed-container {
-    .signature-place {
-        padding: var(--go-ui-spacing-sm);
+.signature {
+    .signature-space {
+        height: var(--go-ui-spacing-sm);
     }
+
     .line {
         border: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
     }
@@ -10,9 +11,6 @@
         display: flex;
         align-items: center;
         flex-direction: column;
-    }
-
-    .strong {
         color: var(--go-ui-color-black);
         font-weight: var(--go-ui-font-weight-semibold);
     }

translationMigrations/000014-1738749892644.json renamed to translationMigrations/000014-1738752511308.json

@@ -253,6 +253,12 @@
             "namespace": "drefApplicationExport",
             "value": "If the National Society has developed contingency plans, or recently carried out PER assessment or readiness check for instance, kindly attached those documents to the request."
         },
+        {
+            "action": "add",
+            "key": "plannedInterventionAltText",
+            "namespace": "drefApplicationExport",
+            "value": "Planned Intervention Image"
+        },
         {
             "action": "add",
             "key": "priorityActionsBudget",