From ba6c908fbad9bbbda05126afc784e9d8e207b406 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Mon, 16 Dec 2024 13:22:07 +0100
Subject: [PATCH] feat: Support `fontWeight` prop on `Text` (#2959)

Add support for specifying the `fontWeight` prop on the `Text`
component.
---
 .../examples/packages/browserify-plugin/snap.manifest.json | 2 +-
 packages/examples/packages/browserify/snap.manifest.json   | 2 +-
 packages/snaps-sdk/src/jsx/components/Text.test.tsx        | 7 ++++++-
 packages/snaps-sdk/src/jsx/components/Text.ts              | 7 +++++++
 packages/snaps-sdk/src/jsx/validation.test.tsx             | 3 +++
 packages/snaps-sdk/src/jsx/validation.ts                   | 3 +++
 6 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index d17e6c7427..712aba8313 100644
--- a/packages/examples/packages/browserify-plugin/snap.manifest.json
+++ b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "vr/JCeU5DXN3CeJIeLbZmr44rFnq+BGqQPng7kVxZGY=",
+    "shasum": "zWAvAKOxzUuZWjb75gYJw+izGqyBRcXoy2ocUCKMyGk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
index fe772a5cf5..f7b044698a 100644
--- a/packages/examples/packages/browserify/snap.manifest.json
+++ b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "4diRqHxV2Sr2wHuyoP1dL/WcSbS6HSVzxkDL+Iv0JNM=",
+    "shasum": "i5/9SEgHydVQotkWZ7ErpPhOI2N7Cg3U+lbR5/ApQI4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/Text.test.tsx b/packages/snaps-sdk/src/jsx/components/Text.test.tsx
index 0cf2df8e14..3a66d6e8f8 100644
--- a/packages/snaps-sdk/src/jsx/components/Text.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/Text.test.tsx
@@ -53,7 +53,11 @@ describe('Text', () => {
   });
 
   it('renders text with props', () => {
-    const result = <Text size="sm">Hello world!</Text>;
+    const result = (
+      <Text size="sm" fontWeight="medium">
+        Hello world!
+      </Text>
+    );
 
     expect(result).toStrictEqual({
       type: 'Text',
@@ -61,6 +65,7 @@ describe('Text', () => {
       props: {
         children: 'Hello world!',
         size: 'sm',
+        fontWeight: 'medium',
       },
     });
   });
diff --git a/packages/snaps-sdk/src/jsx/components/Text.ts b/packages/snaps-sdk/src/jsx/components/Text.ts
index 7fb99e4ba3..9994713b2c 100644
--- a/packages/snaps-sdk/src/jsx/components/Text.ts
+++ b/packages/snaps-sdk/src/jsx/components/Text.ts
@@ -29,12 +29,14 @@ export type TextColors =
  * @property alignment - The alignment of the text.
  * @property color - The color of the text.
  * @property size - The size of the text. Defaults to `md`.
+ * @property fontWeight - The font weight of the text. Defaults to `regular`.
  */
 export type TextProps = {
   children: TextChildren;
   alignment?: 'start' | 'center' | 'end' | undefined;
   color?: TextColors | undefined;
   size?: 'sm' | 'md' | undefined;
+  fontWeight?: 'regular' | 'medium' | 'bold' | undefined;
 };
 
 const TYPE = 'Text';
@@ -47,6 +49,7 @@ const TYPE = 'Text';
  * @param props.color - The color of the text.
  * @param props.children - The text to display.
  * @param props.size - The size of the text. Defaults to `md`.
+ * @param props.fontWeight - The font weight of the text. Defaults to `regular`.
  * @returns A text element.
  * @example
  * <Text>
@@ -60,6 +63,10 @@ const TYPE = 'Text';
  * <Text size="sm">
  *   Hello <Bold>world</Bold>!
  * </Text>
+ * @example
+ * <Text fontWeight="medium">
+ *   Hello <Bold>world</Bold>!
+ * </Text>
  */
 export const Text = createSnapComponent<TextProps, typeof TYPE>(TYPE);
 
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index f755a75d70..23bccc91c2 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -1182,6 +1182,7 @@ describe('TextStruct', () => {
       Hello, <Bold>world</Bold>
     </Text>,
     <Text size="sm">foo</Text>,
+    <Text fontWeight="medium">foo</Text>,
   ])('validates a text element', (value) => {
     expect(is(value, TextStruct)).toBe(true);
   });
@@ -1197,6 +1198,8 @@ describe('TextStruct', () => {
     <Text />,
     // @ts-expect-error - Invalid props.
     <Text foo="bar">foo</Text>,
+    // @ts-expect-error - Invalid props.
+    <Text fontWeight="bar">foo</Text>,
     <Box>
       <Text>foo</Text>
     </Box>,
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index be3702912b..99a1ce24fb 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -721,6 +721,9 @@ export const TextStruct: Describe<TextElement> = element('Text', {
     ]),
   ),
   size: optional(nullUnion([literal('sm'), literal('md')])),
+  fontWeight: optional(
+    nullUnion([literal('regular'), literal('medium'), literal('bold')]),
+  ),
 });
 
 /**