From c53cd0844ba8677261240af7a320b7c61f7a1e25 Mon Sep 17 00:00:00 2001
From: Brian August Nguyen <brianacnguyen@gmail.com>
Date: Wed, 26 Jul 2023 18:29:37 -0700
Subject: [PATCH] Added README to BannerBase (#6894)

* Added README to BannerBase

* Updated README based on comments
---
 .../BannerBase/BannerBase.constants.tsx       |  1 +
 .../foundation/BannerBase/BannerBase.tsx      |  2 -
 .../Banner/foundation/BannerBase/README.md    | 89 +++++++++++++++++++
 3 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 app/component-library/components/Banners/Banner/foundation/BannerBase/README.md

diff --git a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx
index b1ae89b3eaa..75701786a67 100644
--- a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx
+++ b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx
@@ -35,6 +35,7 @@ const SAMPLE_BANNERBASE_STARTACCESSORY = <Icon {...SAMPLE_ICON_PROPS} />;
 const SAMPLE_BANNERBASE_TITLE = 'Sample Banner Title';
 const SAMPLE_BANNERBASE_DESCRIPTION = 'Sample Banner Description';
 const SAMPLE_BANNERBASE_ACTIONBUTTON_PROPS: ButtonProps = {
+  variant: ButtonVariants.Secondary,
   label: 'Action Label',
   onPress: () => {
     console.log('clicked');
diff --git a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx
index ea46b42f796..5001646778f 100644
--- a/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx
+++ b/app/component-library/components/Banners/Banner/foundation/BannerBase/BannerBase.tsx
@@ -17,7 +17,6 @@ import { BannerBaseProps } from './BannerBase.types';
 import {
   DEFAULT_BANNERBASE_TITLE_TEXTVARIANT,
   DEFAULT_BANNERBASE_DESCRIPTION_TEXTVARIANT,
-  DEFAULT_BANNERBASE_ACTIONBUTTON_VARIANT,
   DEFAULT_BANNERBASE_ACTIONBUTTON_SIZE,
   DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONVARIANT,
   DEFAULT_BANNERBASE_CLOSEBUTTON_BUTTONICONSIZE,
@@ -60,7 +59,6 @@ const BannerBase: React.FC<BannerBaseProps> = ({
         {renderDescription()}
         {actionButtonProps && (
           <Button
-            variant={DEFAULT_BANNERBASE_ACTIONBUTTON_VARIANT}
             size={DEFAULT_BANNERBASE_ACTIONBUTTON_SIZE}
             {...actionButtonProps}
           />
diff --git a/app/component-library/components/Banners/Banner/foundation/BannerBase/README.md b/app/component-library/components/Banners/Banner/foundation/BannerBase/README.md
new file mode 100644
index 00000000000..0a0f6775908
--- /dev/null
+++ b/app/component-library/components/Banners/Banner/foundation/BannerBase/README.md
@@ -0,0 +1,89 @@
+# BannerBase
+
+BannerBase serves as a base for all banner variants. It contains  standard props such as information and related actions. 
+
+## BannerBase Props
+
+This component extends React Native's [ViewProps](https://reactnative.dev/docs/view) component.
+
+### `variant`
+
+Variant of Banner.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| [BannerVariant](../../Banner.types.ts)               | No                                                     |
+
+### `startAccessory`
+
+Optional content to be displayed before the info section.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| React.ReactNode                                           | No                                                     |
+
+### `title`
+
+Optional prop for title of the Banner.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string or ReactNode                                   | No                                                     |
+
+### `description`
+
+Optional description below the title.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| string or ReactNode                                   | No                                                     |
+
+
+### `actionButtonProps`
+
+Optional prop to control the action button's props.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| [ButtonProps](../../../../Buttons/Button/Button.types.ts)                                  | No                                                     |
+
+### `onClose`
+
+Optional function to trigger when pressing the action button.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| Function                                            | No                                                     |
+
+### `closeButtonProps`
+
+Optional prop to control the close button's props.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| [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
+<BannerBase
+  startAccessory={SAMPLE_BANNERBASE_ACCESSORY}
+  title={SAMPLE_BANNERBASE_TITLE}
+  description={SAMPLE_BANNERBASE_DESCRIPTION}
+  actionButtonProps={{
+    label: SAMPLE_BANNERBASE_ACTIONBUTTONLABEL,
+    onPress: () => {}
+  }}
+  onClose={() => {}}
+>
+  {SAMPLE_ADDITIONAL_ACCESSORY}
+</BannerBase>;
+```