Add backgroundColor property to Container component

Author: david0xd

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

@@ -21,6 +21,7 @@ export type BoxProps = {
     | 'space-around'
     | undefined;
   center?: boolean | undefined;
+  backgroundColor?: string | undefined;
 };
 
 const TYPE = 'Box';

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

@@ -7,7 +7,7 @@ import { Text } from './Text';
 describe('Container', () => {
   it('renders a container element with a box', () => {
     const result = (
-      <Container>
+      <Container backgroundColor="alternative">
         <Box>
           <Text>Hello world!</Text>
         </Box>
@@ -18,6 +18,7 @@ describe('Container', () => {
       type: 'Container',
       key: null,
       props: {
+        backgroundColor: 'alternative',
         children: {
           type: 'Box',
           key: null,

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

@@ -2,13 +2,19 @@ import type { GenericSnapElement } from '../component';
 import { createSnapComponent } from '../component';
 import type { FooterElement } from './Footer';
 
+/**
+ * Definition of container background colors.
+ */
+export type ContainerBackgroundColor = 'default' | 'alternative';
+
 /**
  * The props of the {@link Container} component.
  *
  * @property children - The Box and the Footer or the Box element.
  */
 export type ContainerProps = {
   children: [GenericSnapElement, FooterElement] | GenericSnapElement;
+  backgroundColor?: ContainerBackgroundColor | undefined;
 };
 
 const TYPE = 'Container';
@@ -17,10 +23,11 @@ const TYPE = 'Container';
  * A container component, which is used to create a container with a box and a footer.
  *
  * @param props - The props of the component.
+ * @param props.backgroundColor - The color of the background.
  * @param props.children - The Box and the Footer or the Box element.
  * @returns A container element.
  * @example
- * <Container>
+ * <Container backgroundColor="ContainerBackgroundColor.Alternative">
  *   <Box>
  *     <Text>Hello world!</Text>
  *   </Box>

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

@@ -756,6 +756,12 @@ describe('ContainerStruct', () => {
     <Container>
       <Text>Hello world!</Text>
     </Container>,
+    <Container backgroundColor="default">
+      <Text>Hello world!</Text>
+    </Container>,
+    <Container backgroundColor="alternative">
+      <Text>Hello world!</Text>
+    </Container>,
     <Container>
       <Text>Hello world!</Text>
       <Footer>

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

@@ -837,6 +837,9 @@ export const ContainerStruct: Describe<ContainerElement> = element(
       [GenericSnapElement, FooterElement] | GenericSnapElement,
       null
     >,
+    backgroundColor: optional(
+      nullUnion([literal('default'), literal('alternative')]),
+    ),
   },
 );