Merge branch 'main' into feat/783-trigger-modal-using-approval-contro…

…ller-on-qr-signing

app/component-library/components/Banners/Banner/Banner.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+import Banner from './Banner';
+import Text from '../../Texts/Text/Text';
+import { BannerAlertSeverity } from './variants/BannerAlert/BannerAlert.types';
+import { BannerVariant } from './Banner.types';
+import { ButtonVariants } from '../../Buttons/Button';
+import { IconName } from '../../Icons/Icon';
+import { ButtonIconSizes, ButtonIconVariants } from '../../Buttons/ButtonIcon';
+import { TESTID_BANNER_CLOSE_BUTTON_ICON } from './foundation/BannerBase/BannerBase.constants';
+
+describe('Banner', () => {
+  it('should render correctly', () => {
+    const wrapper = render(
+      <Banner
+        severity={BannerAlertSeverity.Error}
+        variant={BannerVariant.Alert}
+        title="Hello Error Banner World"
+        description={
+          'This is nothing but a test of the emergency broadcast system.'
+        }
+      />,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render correctly with a start accessory', async () => {
+    const wrapper = render(
+      <Banner
+        severity={BannerAlertSeverity.Error}
+        variant={BannerVariant.Alert}
+        title="Hello Error Banner World"
+        description={
+          'This is nothing but a test of the emergency broadcast system.'
+        }
+        startAccessory={<Text>Test Start accessory</Text>}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Start accessory')).toBeDefined();
+  });
+
+  it('should render correctly with an action button', async () => {
+    const wrapper = render(
+      <Banner
+        severity={BannerAlertSeverity.Error}
+        variant={BannerVariant.Alert}
+        title="Hello Error Banner World"
+        description={
+          'This is nothing but a test of the emergency broadcast system.'
+        }
+        actionButtonProps={{
+          label: 'Test Action Button',
+          onPress: () => jest.fn(),
+          variant: ButtonVariants.Secondary,
+        }}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Action Button')).toBeDefined();
+  });
+
+  it('should render correctly with a close button', async () => {
+    const wrapper = render(
+      <Banner
+        severity={BannerAlertSeverity.Error}
+        variant={BannerVariant.Alert}
+        title="Hello Error Banner World"
+        description={
+          'This is nothing but a test of the emergency broadcast system.'
+        }
+        actionButtonProps={{
+          label: 'Test Action Button',
+          onPress: () => jest.fn(),
+          variant: ButtonVariants.Secondary,
+        }}
+        closeButtonProps={{
+          onPress: () => jest.fn(),
+          iconName: IconName.Close,
+          variant: ButtonIconVariants.Primary,
+          size: ButtonIconSizes.Sm,
+        }}
+      />,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(await wrapper.findByText('Test Action Button')).toBeDefined();
+    expect(
+      await wrapper.queryByTestId(TESTID_BANNER_CLOSE_BUTTON_ICON),
+    ).toBeDefined();
+  });
+});

app/component-library/components/Banners/Banner/README.md

@@ -114,6 +114,14 @@ Optional prop to control the close button's props.
 | :-------------------------------------------------- | :------------------------------------------------------ |
 | [ButtonIconProps](../../../../Buttons/ButtonIcon/ButtonIcon.types.ts)                                  | No                                                     |
 
+### `children`
+
+Optional prop to add children components to the Banner
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| React.ReactNode                                     | No                                                     |
+
 ## Usage
 
 ```javascript