feat: Add crossAlignment to Box (#3115)

This PR adds a new prop to `Box` called `crossAlignment` which should
bind to `align-items`.

Fixes: #3114

Author: GuillaumeRx

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "t/mItLdi/miIU7FWJjijmmaFT/5svN1dK4Ik+1LMbqw=",
+    "shasum": "d0Rvxg6jxAfVxcrMdk2xdJOL7oDh74YKzhvRD2/Gs/s=",
     "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": "3kC/z0z6RjjarArtxcs+iltJRQgvZNIPBueMP0cLQJw=",
+    "shasum": "Oy5sCDh6f5WVjosPyzy5U70omD4/SI1WHwOBSmH6Zr8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -58,7 +58,11 @@ describe('Box', () => {
 
   it('renders a box with props', () => {
     const result = (
-      <Box direction="horizontal" alignment="space-between">
+      <Box
+        direction="horizontal"
+        alignment="space-between"
+        crossAlignment="center"
+      >
         <Text>Hello</Text>
         <Text>World</Text>
       </Box>
@@ -70,6 +74,7 @@ describe('Box', () => {
       props: {
         direction: 'horizontal',
         alignment: 'space-between',
+        crossAlignment: 'center',
         children: [
           {
             type: 'Text',

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

@@ -7,6 +7,7 @@ import { createSnapComponent } from '../component';
  * @property children - The children of the box.
  * @property direction - The direction to stack the components within the box. Defaults to `vertical`.
  * @property alignment - The alignment mode to use within the box. Defaults to `start`.
+ * @property crossAlignment - The cross alignment mode to use within the box. Defaults to `start`.
  * @property center - Whether to center the children within the box. Defaults to `false`.
  */
 export type BoxProps = {
@@ -20,6 +21,7 @@ export type BoxProps = {
     | 'space-between'
     | 'space-around'
     | undefined;
+  crossAlignment?: 'start' | 'center' | 'end';
   center?: boolean | undefined;
 };
 

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

@@ -589,7 +589,7 @@ describe('BoxStruct', () => {
         <Image src="<svg />" alt="alt" />
       </Row>
     </Box>,
-    <Box direction="horizontal" alignment="space-between">
+    <Box direction="horizontal" alignment="space-between" crossAlignment="end">
       <Text>foo</Text>
       <Row label="label">
         <Image src="<svg />" alt="alt" />
@@ -636,6 +636,10 @@ describe('BoxStruct', () => {
         <Image src="<svg />" alt="alt" />
       </Row>
     </Box>,
+    // @ts-expect-error - Invalid props.
+    <Box crossAlignment="bar">
+      <Text>foo</Text>
+    </Box>,
     <Box>
       <Value extra="foo" value="bar" />
     </Box>,

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

@@ -596,6 +596,9 @@ export const BoxStruct: Describe<BoxElement> = element('Box', {
       literal('space-around'),
     ]),
   ),
+  crossAlignment: optional(
+    nullUnion([literal('start'), literal('center'), literal('end')]),
+  ),
   center: optional(boolean()),
 });