feat: add section component (#26718)

## **Description**


Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change? Adding in the `section` snaps
component.
2. What is the improvement/solution? Allows developers to group their
components in sections to provide a richer UI.


## **Related issues**

Fixes: MetaMask/MetaMask-planning#3068

## **Screenshots/Recordings**



## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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,
+    },
+  };
+};