Add font weight and size props

Author: FrederikBolding

ui/components/app/snaps/snap-ui-button/snap-ui-button.tsx

@@ -10,6 +10,7 @@ import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 
 export type SnapUIButtonProps = {
   name?: string;
+  textVariant: ButtonLinkProps<'button'>['variant'];
 };
 
 const COLORS = {
@@ -27,6 +28,7 @@ export const SnapUIButton: FunctionComponent<
   variant = 'primary',
   disabled = false,
   className = '',
+  textVariant,
   ...props
 }) => {
   const { handleEvent } = useSnapInterfaceContext();
@@ -58,6 +60,7 @@ export const SnapUIButton: FunctionComponent<
       onClick={handleClick}
       color={color}
       disabled={disabled}
+      variant={textVariant}
       {...props}
     >
       {children}

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

@@ -2,6 +2,7 @@ import { ButtonElement, JSXElement } from '@metamask/snaps-sdk/jsx';
 import { getJsxChildren } from '@metamask/snaps-utils';
 import { NonEmptyArray } from '@metamask/utils';
 import { mapTextToTemplate } from '../utils';
+import { TextVariant } from '../../../../../helpers/constants/design-system';
 import { UIComponentFactory } from './types';
 
 export const button: UIComponentFactory<ButtonElement> = ({
@@ -15,6 +16,8 @@ export const button: UIComponentFactory<ButtonElement> = ({
     variant: element.props.variant,
     name: element.props.name,
     disabled: element.props.disabled,
+    textVariant:
+      element.props.size === 'sm' ? TextVariant.bodySm : TextVariant.bodyMd,
   },
   children: mapTextToTemplate(
     getJsxChildren(element) as NonEmptyArray<string | JSXElement>,

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

@@ -6,32 +6,45 @@ import {
   TextVariant,
   OverflowWrap,
   TextColor,
+  FontWeight,
 } from '../../../../../helpers/constants/design-system';
 import { UIComponentFactory } from './types';
 
+function getTextColor(color: TextElement['props']['color']) {
+  switch (color) {
+    case 'default':
+      return TextColor.textDefault;
+    case 'alternative':
+      return TextColor.textAlternative;
+    case 'muted':
+      return TextColor.textMuted;
+    case 'error':
+      return TextColor.errorDefault;
+    case 'success':
+      return TextColor.successDefault;
+    case 'warning':
+      return TextColor.warningDefault;
+    default:
+      return TextColor.inherit;
+  }
+}
+
+function getFontWeight(color: TextElement['props']['fontWeight']) {
+  switch (color) {
+    case 'bold':
+      return FontWeight.Bold;
+    case 'medium':
+      return FontWeight.Medium;
+    case 'regular':
+    default:
+      return FontWeight.Normal;
+  }
+}
+
 export const text: UIComponentFactory<TextElement> = ({
   element,
   ...params
 }) => {
-  const getTextColor = () => {
-    switch (element.props.color) {
-      case 'default':
-        return TextColor.textDefault;
-      case 'alternative':
-        return TextColor.textAlternative;
-      case 'muted':
-        return TextColor.textMuted;
-      case 'error':
-        return TextColor.errorDefault;
-      case 'success':
-        return TextColor.successDefault;
-      case 'warning':
-        return TextColor.warningDefault;
-      default:
-        return TextColor.inherit;
-    }
-  };
-
   return {
     element: 'Text',
     children: mapTextToTemplate(
@@ -41,8 +54,9 @@ export const text: UIComponentFactory<TextElement> = ({
     props: {
       variant:
         element.props.size === 'sm' ? TextVariant.bodySm : TextVariant.bodyMd,
+      fontWeight: getFontWeight(element.props.fontWeight),
       overflowWrap: OverflowWrap.Anywhere,
-      color: getTextColor(),
+      color: getTextColor(element.props.color),
       className: 'snap-ui-renderer__text',
       textAlign: element.props.alignment,
     },