feat: Add the size prop to Heading (#2759)

This PR adds an optional `size` prop to the `Heading` component. I can
be `md` or `lg`.

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Rvk4nDRt8bofy5oUtavVGwVB0pnZ7BdsmO9V315Qs+w=",
+    "shasum": "Kn7XJHg0P1YYLU+sZF9pon4NXLadxLmUETLuLAn1qkw=",
     "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": "3LsbiHzT2I8gHJPQCu6JbTiKKCy5XA2VQQdW9Qkn3XU=",
+    "shasum": "xvq90PFxbF6rSf1t2+LeGCP5oeby0u7bobCT2ySxpF0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -41,4 +41,17 @@ describe('Heading', () => {
       },
     });
   });
+
+  it('renders a heading with a `lg` size', () => {
+    const result = <Heading size="lg">Foo</Heading>;
+
+    expect(result).toStrictEqual({
+      type: 'Heading',
+      key: null,
+      props: {
+        children: 'Foo',
+        size: 'lg',
+      },
+    });
+  });
 });

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

@@ -5,9 +5,11 @@ import { createSnapComponent } from '../component';
  * The props of the {@link Heading} component.
  *
  * @property children - The text to display in the heading.
+ * @property size - The size of the heading.
  */
 type HeadingProps = {
   children: StringElement;
+  size?: 'md' | 'lg' | undefined;
 };
 
 const TYPE = 'Heading';
@@ -17,9 +19,12 @@ const TYPE = 'Heading';
  *
  * @param props - The props of the component.
  * @param props.children - The text to display in the heading.
+ * @param props.size - The size of the heading.
  * @returns A heading element.
  * @example
  * <Heading>Hello world!</Heading>
+ * @example
+ * <Heading size="lg">Hello world!</Heading>
  */
 export const Heading = createSnapComponent<HeadingProps, typeof TYPE>(TYPE);
 

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

@@ -26,6 +26,8 @@ export type TextColors =
  * The props of the {@link Text} component.
  *
  * @property children - The text to display.
+ * @property alignment - The alignment of the text.
+ * @property color - The color of the text.
  */
 export type TextProps = {
   children: TextChildren;
@@ -39,6 +41,8 @@ const TYPE = 'Text';
  * A text component, which is used to display text.
  *
  * @param props - The props of the component.
+ * @param props.alignment - The alignment of the text.
+ * @param props.color - The color of the text.
  * @param props.children - The text to display.
  * @returns A text element.
  * @example

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

@@ -1010,7 +1010,7 @@ describe('SelectorStruct', () => {
 });
 
 describe('HeadingStruct', () => {
-  it.each([<Heading>Hello</Heading>])(
+  it.each([<Heading>Hello</Heading>, <Heading size="lg">Hello</Heading>])(
     'validates a heading element',
     (value) => {
       expect(is(value, HeadingStruct)).toBe(true);

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

@@ -605,6 +605,7 @@ export const ValueStruct: Describe<ValueElement> = element('Value', {
  */
 export const HeadingStruct: Describe<HeadingElement> = element('Heading', {
   children: StringElementStruct,
+  size: optional(nullUnion([literal('md'), literal('lg')])),
 });
 
 /**