npm - @planetaexo/design-system - Versions diffs - 0.31.0 → 0.32.0 - Mend

@planetaexo/design-system 0.31.0 → 0.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -1090,16 +1090,21 @@ interface BookingSummaryProps {
 /**
  * Bloco "Booking summary" reusável entre os e-mails transacionais.
  *
- * Visual: card encaixotado (borderRadius 12px + border 1px) com padding 10px
- * nas células, separadores entre rows, value alinhado à direita com
- * `whiteSpace: nowrap`. Heading em 16px / fontWeight 700, externo ao card.
+ * Visual (canônico, espelhando o markup original do BookingPaymentConfirmationEmail):
+ * - heading 18px / fontWeight 700 / marginBottom 20px
+ * - card encaixotado (borderRadius 12px + border 1px)
+ * - cells com padding 12px 20px
+ * - label com `backgroundColor: t.muted` (coluna esquerda destacada)
+ * - value alinhado à esquerda; `valueColor` opcional por row (ex.: Booking Number em verde)
+ * - quando valueColor === t.primary, fontWeight do value vira 600 (paridade BookingPaymentConfirmation)
+ * - separador entre rows via `borderBottom` (na última row sem footer fica sem borda)
  *
- * Histórico: bloco originalmente inline em `BookingCreatedEmail.tsx`
- * (extraído na v0.29.0 — então chamado `BookingConfirmationEmail`) e duplicado
- * também inline em `PaymentReceiptEmail.tsx` com visual ligeiramente diferente.
- * Consolidado num único componente na v0.30.x — todos os e-mails
- * (`BookingCreatedEmail`, `PaymentReceiptEmail`, `RegistrationReminderEmail`)
- * usam exatamente o mesmo markup.
+ * Histórico: bloco originalmente inline em `BookingCreatedEmail.tsx` (extraído na
+ * v0.29.0) e duplicado também inline em `PaymentReceiptEmail.tsx` e
+ * `BookingPaymentConfirmationEmail.tsx`. Consolidado num único componente na
+ * v0.32.x — todos os 4 e-mails (`BookingPaymentConfirmationEmail`,
+ * `BookingCreatedEmail`, `PaymentReceiptEmail`, `RegistrationReminderEmail`)
+ * agora usam exatamente o mesmo markup.
  */
 declare function BookingSummary({ heading, rows, footer, className }: BookingSummaryProps): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts CHANGED Viewed

@@ -1090,16 +1090,21 @@ interface BookingSummaryProps {
 /**
  * Bloco "Booking summary" reusável entre os e-mails transacionais.
  *
- * Visual: card encaixotado (borderRadius 12px + border 1px) com padding 10px
- * nas células, separadores entre rows, value alinhado à direita com
- * `whiteSpace: nowrap`. Heading em 16px / fontWeight 700, externo ao card.
+ * Visual (canônico, espelhando o markup original do BookingPaymentConfirmationEmail):
+ * - heading 18px / fontWeight 700 / marginBottom 20px
+ * - card encaixotado (borderRadius 12px + border 1px)
+ * - cells com padding 12px 20px
+ * - label com `backgroundColor: t.muted` (coluna esquerda destacada)
+ * - value alinhado à esquerda; `valueColor` opcional por row (ex.: Booking Number em verde)
+ * - quando valueColor === t.primary, fontWeight do value vira 600 (paridade BookingPaymentConfirmation)
+ * - separador entre rows via `borderBottom` (na última row sem footer fica sem borda)
  *
- * Histórico: bloco originalmente inline em `BookingCreatedEmail.tsx`
- * (extraído na v0.29.0 — então chamado `BookingConfirmationEmail`) e duplicado
- * também inline em `PaymentReceiptEmail.tsx` com visual ligeiramente diferente.
- * Consolidado num único componente na v0.30.x — todos os e-mails
- * (`BookingCreatedEmail`, `PaymentReceiptEmail`, `RegistrationReminderEmail`)
- * usam exatamente o mesmo markup.
+ * Histórico: bloco originalmente inline em `BookingCreatedEmail.tsx` (extraído na
+ * v0.29.0) e duplicado também inline em `PaymentReceiptEmail.tsx` e
+ * `BookingPaymentConfirmationEmail.tsx`. Consolidado num único componente na
+ * v0.32.x — todos os 4 e-mails (`BookingPaymentConfirmationEmail`,
+ * `BookingCreatedEmail`, `PaymentReceiptEmail`, `RegistrationReminderEmail`)
+ * agora usam exatamente o mesmo markup.
  */
 declare function BookingSummary({ heading, rows, footer, className }: BookingSummaryProps): react_jsx_runtime.JSX.Element;

package/dist/index.js CHANGED Viewed

@@ -4451,6 +4451,98 @@ function BookingAdventureCard({
     }
   );
 }
+function BookingSummary({ heading, rows, footer, className }) {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs("div", { className, style: { marginBottom: "24px" }, children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          marginTop: 0,
+          marginBottom: "20px",
+          fontWeight: 700,
+          color: emailTokens.foreground,
+          fontSize: "18px",
+          fontFamily: emailTokens.fontFamily
+        },
+        children: heading
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          borderRadius: "12px",
+          border: `1px solid ${emailTokens.border}`,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          "table",
+          {
+            style: {
+              width: "100%",
+              fontSize: "14px",
+              borderCollapse: "collapse"
+            },
+            children: /* @__PURE__ */ jsxs("tbody", { children: [
+              rows.map((row, i) => {
+                var _a2;
+                const isLastRowWithoutFooter = i === rows.length - 1 && !footer;
+                return /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    style: !isLastRowWithoutFooter ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          style: {
+                            padding: "12px 20px",
+                            color: emailTokens.mutedForeground,
+                            backgroundColor: emailTokens.muted,
+                            verticalAlign: "top"
+                          },
+                          children: row.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          style: {
+                            padding: "12px 20px",
+                            fontWeight: row.valueColor === emailTokens.primary ? 600 : 500,
+                            color: (_a2 = row.valueColor) != null ? _a2 : emailTokens.foreground,
+                            verticalAlign: "top"
+                          },
+                          children: row.value
+                        }
+                      )
+                    ]
+                  },
+                  i
+                );
+              }),
+              footer && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: 2,
+                  style: {
+                    padding: "12px 20px",
+                    textAlign: "center",
+                    fontWeight: (_a = footer.fontWeight) != null ? _a : 600,
+                    color: (_b = footer.color) != null ? _b : emailTokens.foreground,
+                    backgroundColor: footer.backgroundColor
+                  },
+                  children: footer.text
+                }
+              ) })
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
 var DEFAULT_LABELS2 = {
   heading: "PAYMENT DETAILS"
 };
@@ -4658,27 +4750,18 @@ function BookingPaymentConfirmationEmail({
           ] }),
           /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
-          /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
-          /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
-            /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.bookingNumberLabel }),
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "600", color: emailTokens.primary }, children: bookingReference })
-            ] }),
-            /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.adventuresLabel }),
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: adventures.length })
-            ] }),
-            /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.totalTravellersLabel }),
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: allTravellers.length })
-            ] }),
-            /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.agentLabel }),
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: agent })
-            ] })
-          ] }) }) })
-        ] }),
+        /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: /* @__PURE__ */ jsx(
+          BookingSummary,
+          {
+            heading: l.bookingSummaryHeading,
+            rows: [
+              { label: l.bookingNumberLabel, value: bookingReference, valueColor: emailTokens.primary },
+              { label: l.adventuresLabel, value: adventures.length },
+              { label: l.totalTravellersLabel, value: allTravellers.length },
+              { label: l.agentLabel, value: agent }
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: adventures.map((adventure, adIdx) => {
           var _a, _b, _c, _d;
@@ -4798,97 +4881,6 @@ function BookingPaymentConfirmationEmail({
     }
   );
 }
-function BookingSummary({ heading, rows, footer, className }) {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs("div", { className, style: { marginBottom: "24px" }, children: [
-    /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: {
-          marginBottom: "12px",
-          fontWeight: 700,
-          color: emailTokens.foreground,
-          fontSize: "16px",
-          fontFamily: emailTokens.fontFamily
-        },
-        children: heading
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          borderRadius: "12px",
-          border: `1px solid ${emailTokens.border}`,
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */ jsx(
-          "table",
-          {
-            style: {
-              width: "100%",
-              fontSize: "14px",
-              borderCollapse: "collapse"
-            },
-            children: /* @__PURE__ */ jsxs("tbody", { children: [
-              rows.map((row, i) => {
-                var _a2;
-                return /* @__PURE__ */ jsxs(
-                  "tr",
-                  {
-                    style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {},
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "td",
-                        {
-                          style: {
-                            padding: "10px 16px",
-                            color: emailTokens.mutedForeground,
-                            verticalAlign: "top"
-                          },
-                          children: row.label
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "td",
-                        {
-                          style: {
-                            padding: "10px 16px",
-                            textAlign: "right",
-                            fontWeight: 500,
-                            color: (_a2 = row.valueColor) != null ? _a2 : emailTokens.foreground,
-                            whiteSpace: "nowrap"
-                          },
-                          children: row.value
-                        }
-                      )
-                    ]
-                  },
-                  i
-                );
-              }),
-              footer && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-                "td",
-                {
-                  colSpan: 2,
-                  style: {
-                    padding: "12px 16px",
-                    textAlign: "center",
-                    fontWeight: (_a = footer.fontWeight) != null ? _a : 600,
-                    color: (_b = footer.color) != null ? _b : emailTokens.foreground,
-                    backgroundColor: footer.backgroundColor,
-                    borderTop: `1px solid ${emailTokens.border}`
-                  },
-                  children: footer.text
-                }
-              ) })
-            ] })
-          }
-        )
-      }
-    )
-  ] });
-}
 var DEFAULT_LABELS4 = {
   ctaButton: "Add travellers to your booking",
   logoAlt: "PlanetaEXO",