feat: add section component

ui/components/app/snaps/snap-ui-renderer/components/box.ts

@@ -4,6 +4,7 @@ import { NonEmptyArray } from '@metamask/utils';
 import {
   Display,
   FlexDirection,
+  JustifyContent,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 import { mapToTemplate } from '../utils';
@@ -13,19 +14,19 @@ function generateJustifyContent(alignment?: BoxProps['alignment']) {
   switch (alignment) {
     default:
     case 'start':
-      return 'flex-start';
+      return JustifyContent.flexStart;
 
     case 'center':
-      return 'center';
+      return JustifyContent.center;
 
     case 'end':
-      return 'flex-end';
+      return JustifyContent.flexEnd;
 
     case 'space-between':
-      return 'space-between';
+      return JustifyContent.spaceBetween;
 
     case 'space-around':
-      return 'space-around';
+      return JustifyContent.spaceAround;
   }
 }
 

ui/components/app/snaps/snap-ui-renderer/components/index.ts

@@ -25,6 +25,7 @@ import { footer } from './footer';
 import { container } from './container';
 import { selector } from './selector';
 import { icon } from './icon';
+import { section } from './section';
 
 export const COMPONENT_MAPPING = {
   Box: box,
@@ -54,4 +55,5 @@ export const COMPONENT_MAPPING = {
   Footer: footer,
   Container: container,
   Selector: selector,
+  Section: section,
 };

ui/components/app/snaps/snap-ui-renderer/components/section.ts

@@ -0,0 +1,28 @@
+import { SectionElement, BoxElement } from '@metamask/snaps-sdk/jsx';
+import {
+  BackgroundColor,
+  BorderRadius,
+} from '../../../../../helpers/constants/design-system';
+import { UIComponentFactory, UIComponentParams } from './types';
+import { box } from './box';
+
+export const section: UIComponentFactory<SectionElement> = ({
+  element,
+  ...params
+}) => {
+  const { children, props } = box({
+    element,
+    ...params,
+  } as unknown as UIComponentParams<BoxElement>);
+  return {
+    element: 'Box',
+    children,
+    props: {
+      ...props,
+      className: 'snap-ui-renderer__section',
+      padding: 4,
+      backgroundColor: BackgroundColor.backgroundDefault,
+      borderRadius: BorderRadius.LG,
+    },
+  };
+};