Add size prop to Text (#2908)

This adds a new optional prop to `Text` called `size`.

It allows two values, `sm` and `md` that relates to `bodySm` and
`bodyMd` in extension.

It should default to `md`.

Fixes: #2905

---------

Co-authored-by: Maarten Zuidhoorn <[email protected]>

Author: GuillaumeRx

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "IdAFrQlUYgQaMo/lbXgEJOMKTFbB9RYylXwPvUFT6As=",
+    "shasum": "ecGX3duI1nyJ8BOjkIPLze204JXMQKL8Eq1ir8Mm/dg=",
     "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": "bzhrHkJoo2dRz2utZ10KRNL2X2mgRxkur3DrGXHbNOc=",
+    "shasum": "KSkMBlnuET6wdxlrTCFlg6h1GDiCK8ShQoTbKPse0Ek=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -51,4 +51,17 @@ describe('Text', () => {
       },
     });
   });
+
+  it('renders text with props', () => {
+    const result = <Text size="sm">Hello world!</Text>;
+
+    expect(result).toStrictEqual({
+      type: 'Text',
+      key: null,
+      props: {
+        children: 'Hello world!',
+        size: 'sm',
+      },
+    });
+  });
 });

packages/snaps-sdk/src/jsx/components/Text.ts

@@ -28,11 +28,13 @@ export type TextColors =
  * @property children - The text to display.
  * @property alignment - The alignment of the text.
  * @property color - The color of the text.
+ * @property size - The size of the text. Defaults to `md`.
  */
 export type TextProps = {
   children: TextChildren;
   alignment?: 'start' | 'center' | 'end' | undefined;
   color?: TextColors | undefined;
+  size?: 'sm' | 'md' | undefined;
 };
 
 const TYPE = 'Text';
@@ -44,6 +46,7 @@ const TYPE = 'Text';
  * @param props.alignment - The alignment of the 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`.
  * @returns A text element.
  * @example
  * <Text>
@@ -53,6 +56,10 @@ const TYPE = 'Text';
  * <Text alignment="end">
  *   Hello <Bold>world</Bold>!
  * </Text>
+ * @example
+ * <Text size="sm">
+ *   Hello <Bold>world</Bold>!
+ * </Text>
  */
 export const Text = createSnapComponent<TextProps, typeof TYPE>(TYPE);
 

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -1177,6 +1177,7 @@ describe('TextStruct', () => {
     <Text>
       Hello, <Bold>world</Bold>
     </Text>,
+    <Text size="sm">foo</Text>,
   ])('validates a text element', (value) => {
     expect(is(value, TextStruct)).toBe(true);
   });

packages/snaps-sdk/src/jsx/validation.ts

@@ -713,6 +713,7 @@ export const TextStruct: Describe<TextElement> = element('Text', {
       literal('warning'),
     ]),
   ),
+  size: optional(nullUnion([literal('sm'), literal('md')])),
 });
 
 /**