feat: Support fontWeight prop on Text (#2959)

Add support for specifying the `fontWeight` prop on the `Text`
component.

Author: FrederikBolding

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",

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",

packages/snaps-sdk/src/jsx/components/Text.test.tsx

@@ -53,14 +53,19 @@ 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',
       key: null,
       props: {
         children: 'Hello world!',
         size: 'sm',
+        fontWeight: 'medium',
       },
     });
   });

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);
 

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>,

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')]),
+  ),
 });
 
 /**