feat(3800): settings drawer redesign

.storybook/storybook.requires.js

@@ -127,6 +127,7 @@ const getStories = () => {
     "./app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx": require("../app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx"),
     "./app/components/Views/confirmations/components/UI/Tooltip/Tooltip.stories.tsx": require("../app/components/Views/confirmations/components/UI/Tooltip/Tooltip.stories.tsx"),
     "./app/component-library/components/Texts/SensitiveText/SensitiveText.stories.tsx": require("../app/component-library/components/Texts/SensitiveText/SensitiveText.stories.tsx"),
+    "./app/components/UI/SettingsDrawer/index.stories.tsx": require("../app/components/UI/SettingsDrawer/index.stories.tsx"),
   };
 };
 

app/components/UI/SettingsDrawer/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SettingsDrawer SettingsDrawer should render correctly 1`] = `
+<TouchableOpacity
+  onPress={[MockFunction]}
+>
+  <View
+    accessibilityRole="none"
+    accessible={true}
+    style={
+      {
+        "backgroundColor": "#ffffff",
+        "borderTopColor": "#ffffff",
+        "borderTopWidth": 1,
+        "padding": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "flex": 1,
+          }
+        }
+        testID="listitemcolumn"
+      >
+        <Text
+          accessibilityRole="text"
+          style={
+            {
+              "color": "#141618",
+              "fontFamily": "EuclidCircularB-Medium",
+              "fontSize": 16,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 24,
+            }
+          }
+        >
+          Test Title
+        </Text>
+        <Text
+          accessibilityRole="text"
+          style={
+            {
+              "color": "#6a737d",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 22,
+            }
+          }
+        >
+          Test Description
+        </Text>
+      </View>
+      <View
+        accessible={false}
+        style={
+          {
+            "width": 16,
+          }
+        }
+        testID="listitem-gap"
+      />
+      <View
+        style={
+          {
+            "flex": -1,
+          }
+        }
+        testID="listitemcolumn"
+      >
+        <SvgMock
+          color="#141618"
+          height={20}
+          name="ArrowRight"
+          style={
+            {
+              "height": 20,
+              "paddingLeft": 16,
+              "width": 20,
+            }
+          }
+          width={20}
+        />
+      </View>
+    </View>
+  </View>
+</TouchableOpacity>
+`;
+
+exports[`SettingsDrawer SettingsDrawer should render with redesign enabled 1`] = `
+<TouchableOpacity
+  onPress={[MockFunction]}
+>
+  <View
+    accessibilityRole="none"
+    accessible={true}
+    style={
+      {
+        "backgroundColor": "#ffffff",
+        "borderTopColor": "#ffffff",
+        "borderTopWidth": 1,
+        "padding": 16,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "flex": 1,
+          }
+        }
+        testID="listitemcolumn"
+      >
+        <Text
+          accessibilityRole="text"
+          style={
+            {
+              "color": "#141618",
+              "fontFamily": "EuclidCircularB-Medium",
+              "fontSize": 16,
+              "fontWeight": "500",
+              "letterSpacing": 0,
+              "lineHeight": 24,
+            }
+          }
+        >
+          Test Title
+        </Text>
+        <Text
+          accessibilityRole="text"
+          style={
+            {
+              "color": "#6a737d",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": 22,
+            }
+          }
+        >
+          Test Description
+        </Text>
+      </View>
+      <View
+        accessible={false}
+        style={
+          {
+            "width": 16,
+          }
+        }
+        testID="listitem-gap"
+      />
+      <View
+        style={
+          {
+            "flex": -1,
+          }
+        }
+        testID="listitemcolumn"
+      >
+        <SvgMock
+          color="#141618"
+          height={20}
+          name="ArrowRight"
+          style={
+            {
+              "height": 20,
+              "paddingLeft": 16,
+              "width": 20,
+            }
+          }
+          width={20}
+        />
+      </View>
+    </View>
+  </View>
+</TouchableOpacity>
+`;

app/components/UI/SettingsDrawer/index.stories.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable no-alert */
+// Third party dependencies.
+import React from 'react';
+import { View } from 'react-native';
+
+// External dependencies.
+import { IconName } from '../../../component-library/components/Icons/Icon';
+import { TextColor } from '../../../component-library/components/Texts/Text';
+import { mockTheme } from '../../../util/theme';
+
+// Internal dependencies.
+import { default as SettingsDrawerComponent } from './';
+import { SettingsDrawerProps } from './index.types';
+
+const SettingsDrawerMeta = {
+  title: 'Settings / Settings Drawers',
+  component: SettingsDrawerComponent,
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Settings Option',
+    },
+    description: {
+      control: { type: 'text' },
+      defaultValue: 'This is a description of the settings option',
+    },
+    warning: {
+      control: { type: 'text' },
+    },
+    iconName: {
+      options: Object.values(IconName),
+      control: {
+        type: 'select',
+      },
+    },
+    iconColor: {
+      control: { type: 'color' },
+    },
+    renderArrowRight: {
+      control: { type: 'boolean' },
+      defaultValue: true,
+    },
+    isFirst: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    isLast: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
+    titleColor: {
+      options: Object.values(TextColor),
+      control: {
+        type: 'select',
+      },
+      defaultValue: TextColor.Default,
+    },
+  },
+  decorators: [
+    (Story: any) => (
+      <View
+        style={{
+          backgroundColor: mockTheme.colors.background.default,
+          padding: 16,
+        }}
+      >
+        <Story />
+      </View>
+    ),
+  ],
+};
+
+export default SettingsDrawerMeta;
+
+export const SettingsDrawer = {
+  render: (
+    args: JSX.IntrinsicAttributes &
+      SettingsDrawerProps & { children?: React.ReactNode },
+  ) => <SettingsDrawerComponent {...args} onPress={() => alert('Pressed!')} />,
+};
+
+// Variant Stories
+export const WithWarning = {
+  ...SettingsDrawer,
+  args: {
+    title: 'Settings with Warning',
+    description: 'This setting needs attention',
+    warning: 'Important warning message',
+  },
+};
+
+export const WithIcon = {
+  ...SettingsDrawer,
+  args: {
+    title: 'Settings with Icon',
+    description: 'This setting has an icon',
+    iconName: IconName.Setting,
+    iconColor: mockTheme.colors.primary.default,
+  },
+};
+
+export const WithoutArrow = {
+  ...SettingsDrawer,
+  args: {
+    title: 'Settings without Arrow',
+    description: 'This setting has no arrow',
+    renderArrowRight: false,
+  },
+};
+
+export const FirstAndLastItem = {
+  ...SettingsDrawer,
+  args: {
+    title: 'First and Last Item',
+    description: 'This is both first and last item',
+    isFirst: true,
+    isLast: true,
+  },
+};
+
+export const LongContent = {
+  ...SettingsDrawer,
+  args: {
+    title:
+      'Very Long Settings Option Title That Might Need to Wrap to Multiple Lines',
+    description:
+      'This is a very long description that contains a lot of text to demonstrate how the component handles long content and wrapping behavior in real-world scenarios.',
+  },
+};
+
+export const WarningWithIcon = {
+  ...SettingsDrawer,
+  args: {
+    title: 'Warning with Icon',
+    description: 'This setting has both warning and icon',
+    warning: 'Important warning message',
+    iconName: IconName.Danger,
+    iconColor: mockTheme.colors.error.default,
+  },
+};

app/components/UI/SettingsDrawer/index.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import SettingsDrawer from './';
+import { IconName } from '../../../component-library/components/Icons/Icon';
+
+const originalEnv = process.env;
+
+describe('SettingsDrawer', () => {
+  const originalProps = {
+    title: 'Test Title',
+    onPress: jest.fn(),
+    description: 'Test Description',
+    renderArrowRight: true,
+  };
+  const redesignProps = {
+    ...originalProps,
+    iconName: IconName.Setting,
+    iconColor: 'red',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    process.env = { ...originalEnv };
+  });
+
+  afterAll(() => {
+    process.env = originalEnv;
+  });
+
+  describe('SettingsDrawer', () => {
+    it('should render correctly', () => {
+      process.env.MM_SETTINGS_REDESIGN_ENABLED = 'false';
+      const { toJSON } = render(<SettingsDrawer {...originalProps} />);
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should render with redesign enabled', () => {
+      process.env.MM_SETTINGS_REDESIGN_ENABLED = 'true';
+      const { toJSON } = render(<SettingsDrawer {...redesignProps} />);
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});