Added README to BannerBase (#6894)

* Added README to BannerBase * Updated README based on comments
MetaMask · Jul 27, 2023 · c53cd08 · c53cd08
1 parent c10d38a
commit c53cd08
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 2 deletions.
diff --git a/...omponent-library/components/Banners/Banner/foundation/BannerBase/BannerBase.constants.tsx b/...omponent-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
@@ -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
@@ -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>;
+```