feat: expandable section for use in confirmation pages

.storybook/storybook.requires.js

@@ -123,7 +123,8 @@ const getStories = () => {
     "./app/component-library/base-components/TagBase/TagBase.stories.tsx": require("../app/component-library/base-components/TagBase/TagBase.stories.tsx"),
     "./app/component-library/components-temp/TagColored/TagColored.stories.tsx": require("../app/component-library/components-temp/TagColored/TagColored.stories.tsx"),
     "./app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx": require("../app/component-library/components-temp/KeyValueRow/KeyValueRow.stories.tsx"),
-    "./app/components/UI/InfoRow/InfoRow.stories.tsx": require("../app/components/UI/InfoRow/InfoRow.stories.tsx"),
+    "./app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx": require("../app/components/Views/confirmations/components/UI/InfoRow/InfoRow.stories.tsx"),
+    "./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/Confirm/style.ts → app/components/Views/confirmations/Confirm/Confirm.styles.ts

@@ -1,12 +1,14 @@
 import { StyleSheet } from 'react-native';
 
 import Device from '../../../../util/device';
-import { Colors } from '../../../../util/theme/models';
+import { Theme } from '../../../../util/theme/models';
 
-const createStyles = (colors: Colors) =>
-  StyleSheet.create({
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
     container: {
-      backgroundColor: colors.background.alternative,
+      backgroundColor: theme.colors.background.alternative,
       paddingTop: 24,
       minHeight: '90%',
       borderTopLeftRadius: 20,
@@ -15,5 +17,6 @@ const createStyles = (colors: Colors) =>
       alignItems: 'center',
     },
   });
+};
 
-export default createStyles;
+export default styleSheet;

app/components/Views/confirmations/Confirm/Confirm.tsx

@@ -1,23 +1,21 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import BottomModal from '../../../../components/UI/BottomModal';
-import { useTheme } from '../../../../util/theme';
+import { useStyles } from '../../../../component-library/hooks';
+import BottomModal from '../components/UI/BottomModal';
 import Footer from '../components/Confirm/Footer';
 import Title from '../components/Confirm/Title';
 import useConfirmationRedesignEnabled from '../hooks/useConfirmationRedesignEnabled';
-import createStyles from './style';
+import styleSheet from './Confirm.styles';
 
 const Confirm = () => {
-  const { colors } = useTheme();
   const { isRedesignedEnabled } = useConfirmationRedesignEnabled();
+  const { styles } = useStyles(styleSheet, {});
 
   if (!isRedesignedEnabled) {
     return null;
   }
 
-  const styles = createStyles(colors);
-
   return (
     <BottomModal>
       <View style={styles.container}>

app/components/UI/BottomModal/BottomModal.test.tsx → app/components/Views/confirmations/components/UI/BottomModal/BottomModal.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import renderWithProvider from '../../../util/test/renderWithProvider';
+import renderWithProvider from '../../../../../../util/test/renderWithProvider';
 import BottomModal from '.';
 
 describe('BottomModal', () => {

app/components/UI/BottomModal/BottomModal.tsx → app/components/Views/confirmations/components/UI/BottomModal/BottomModal.tsx

@@ -1,11 +1,11 @@
-import React, { ReactChild } from 'react';
+import React, { ReactNode } from 'react';
 import Modal from 'react-native-modal';
 import { StyleSheet } from 'react-native';
 
-import { useTheme } from '../../../util/theme';
+import { useTheme } from '../../../../../../util/theme';
 
 interface BottomModalProps {
-  children: ReactChild;
+  children: ReactNode;
   onClose?: () => void;
 }
 

app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { Text, View } from 'react-native';
+
+import InfoSection from '../InfoRow/InfoSection';
+import InfoRow from '../InfoRow';
+import ExpandableSection from './ExpandableSection';
+
+storiesOf('Confirmations / ExpandableSection', module)
+  .addDecorator((getStory) => getStory())
+  .add('Default', () => (
+    <ExpandableSection
+      content={
+        <View>
+          <Text>Open</Text>
+        </View>
+      }
+      modalContent={
+        <InfoSection>
+          <InfoRow label="label-Key">Value-Text</InfoRow>
+        </InfoSection>
+      }
+      modalTitle={'Title'}
+    />
+  ));

app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.styles.ts

@@ -0,0 +1,51 @@
+import { StyleSheet } from 'react-native';
+
+import { Theme } from '../../../../../../util/theme/models';
+import { fontStyles } from '../../../../../../styles/common';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+
+  return StyleSheet.create({
+    container: {
+      backgroundColor: theme.colors.background.default,
+      borderColor: theme.colors.border.muted,
+      borderRadius: 8,
+      borderWidth: 1,
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: 16,
+    },
+    // eslint-disable-next-line react-native/no-color-literals
+    modalContainer: {
+      backgroundColor: '#414141',
+      minHeight: '100%',
+    },
+    modalContent: {
+      backgroundColor: theme.colors.background.alternative,
+      paddingTop: 24,
+      paddingBottom: 34,
+      paddingHorizontal: 16,
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+    },
+    modalHeader: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingBottom: 16,
+    },
+    modalTitle: {
+      color: theme.colors.text.default,
+      ...fontStyles.bold,
+      fontSize: 14,
+      fontWeight: '700',
+      width: '90%',
+      textAlign: 'center',
+    },
+  });
+};
+
+export default styleSheet;

app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import InfoSection from '../InfoRow/InfoSection';
+import InfoRow from '../InfoRow';
+import ExpandableSection from './ExpandableSection';
+
+describe('ExpandableSection', () => {
+  it('should match snapshot for simple ExpandableSection', async () => {
+    const container = render(
+      <ExpandableSection
+        content={
+          <View>
+            <Text>Open</Text>
+          </View>
+        }
+        modalContent={
+          <InfoSection>
+            <InfoRow label="label-Key">Value-Text</InfoRow>
+          </InfoSection>
+        }
+        modalTitle={'Title'}
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should display default content', async () => {
+    const { getByText } = render(
+      <ExpandableSection
+        content={
+          <View>
+            <Text>Open</Text>
+          </View>
+        }
+        modalContent={
+          <InfoSection>
+            <InfoRow label="label-Key">Value-Text</InfoRow>
+          </InfoSection>
+        }
+        modalTitle={'Title'}
+      />,
+    );
+    expect(getByText('Open')).toBeDefined();
+  });
+
+  it('should open modal when right icon is pressed', async () => {
+    const { getByTestId, getByText } = render(
+      <ExpandableSection
+        content={
+          <View>
+            <Text>Open</Text>
+          </View>
+        }
+        modalContent={
+          <InfoSection>
+            <InfoRow label="label-Key">Value-Text</InfoRow>
+          </InfoSection>
+        }
+        modalTitle={'Title'}
+      />,
+    );
+    expect(getByText('Open')).toBeDefined();
+    fireEvent.press(getByTestId('openButtonTestId'));
+    expect(getByText('Value-Text')).toBeDefined();
+    fireEvent.press(getByTestId('closeButtonTestId'));
+    expect(getByText('Open')).toBeDefined();
+  });
+});

app/components/Views/confirmations/components/UI/ExpandableSection/ExpandableSection.tsx

@@ -0,0 +1,67 @@
+import React, { ReactNode, useState } from 'react';
+import { Text, View } from 'react-native';
+
+import ButtonIcon, {
+  ButtonIconSizes,
+} from '../../../../../../component-library/components/Buttons/ButtonIcon';
+import {
+  IconColor,
+  IconName,
+} from '../../../../../../component-library/components/Icons/Icon';
+import { useStyles } from '../../../../../../component-library/hooks';
+import BottomModal from '../BottomModal';
+import styleSheet from './ExpandableSection.styles';
+
+interface ExpandableSectionProps {
+  content: ReactNode;
+  modalContent: ReactNode;
+  modalTitle: string;
+  openButtonTestId?: string;
+  closeButtonTestId?: string;
+}
+
+const ExpandableSection = ({
+  content,
+  modalContent,
+  modalTitle,
+  openButtonTestId,
+  closeButtonTestId,
+}: ExpandableSectionProps) => {
+  const { styles } = useStyles(styleSheet, {});
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View>
+      <View style={styles.container}>
+        {content}
+        <ButtonIcon
+          iconColor={IconColor.Muted}
+          size={ButtonIconSizes.Sm}
+          onPress={() => setExpanded(true)}
+          iconName={IconName.ArrowRight}
+          testID={openButtonTestId ?? 'openButtonTestId'}
+        />
+      </View>
+      {expanded && (
+        <BottomModal>
+          <View style={styles.modalContainer}></View>
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <ButtonIcon
+                iconColor={IconColor.Default}
+                size={ButtonIconSizes.Sm}
+                onPress={() => setExpanded(false)}
+                iconName={IconName.ArrowLeft}
+                testID={closeButtonTestId ?? 'closeButtonTestId'}
+              />
+              <Text style={styles.modalTitle}>{modalTitle}</Text>
+            </View>
+            {modalContent}
+          </View>
+        </BottomModal>
+      )}
+    </View>
+  );
+};
+
+export default ExpandableSection;