update banner base component (#17582)

* update banner base component

* add description to story controls

ui/components/component-library/banner-base/README.mdx

@@ -5,7 +5,7 @@ import { BannerBase } from './banner-base';
 
 # BannerBase
 
-The `BannerBase` is the base component for banners
+`BannerBase` serves as a base for all banner variants. It contains standard props such as information and related actions.
 
 <Canvas style={{ background: 'var(--color-background-alternative)' }}>
   <Story id="components-componentlibrary-bannerbase--default-story" />
@@ -33,9 +33,28 @@ import { BannerBase } from '../../component-library';
 </BannerBase>;
 ```
 
+### Description
+
+The `description` is the content area of the `BannerBase` that must be a string. Description shouldn't repeat title and only 1-3 lines.
+
+If content requires more than a string, see `children` prop below.
+
+<Canvas style={{ background: 'var(--color-background-alternative)' }}>
+  <Story id="components-componentlibrary-bannerbase--description" />
+</Canvas>
+
+```jsx
+import { BannerBase } from '../../component-library';
+
+<BannerBase
+  title="Description vs children"
+  description="Pass only a string through the description prop or you can use children if the contents require more"
+/>;
+```
+
 ### Children
 
-The `children` is the description area of the `BannerBase` that can be a text or react node. Description shouldn't repeat title and only 1-3 lines.
+The `children` prop is an alternative to `description` for `BannerBase` when more than a string is needed. Children content shouldn't repeat title and only 1-3 lines.
 
 <Canvas style={{ background: 'var(--color-background-alternative)' }}>
   <Story id="components-componentlibrary-bannerbase--children" />
@@ -47,7 +66,7 @@ import { BannerBase } from '../../component-library';
 
 <BannerBase>
   {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
-  <ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
+  <ButtonLink size={Size.inherit} href="https://metamask.io/" target="_blank">
     hyperlink.
   </ButtonLink>
 </BannerBase>;

ui/components/component-library/banner-base/__snapshots__/banner-base.test.js.snap

@@ -3,7 +3,7 @@
 exports[`BannerBase should render bannerbase element correctly 1`] = `
 <div>
   <div
-    class="box mm-banner-base box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm"
+    class="box mm-banner-base box--padding-3 box--display-flex box--gap-2 box--flex-direction-row box--background-color-background-default box--rounded-sm"
     data-testid="banner-base"
   >
     <div>

ui/components/component-library/banner-base/banner-base.js

@@ -18,6 +18,8 @@ export const BannerBase = ({
   className,
   title,
   titleProps,
+  description,
+  descriptionProps,
   children,
   actionButtonLabel,
   actionButtonOnClick,
@@ -35,7 +37,6 @@ export const BannerBase = ({
       backgroundColor={BackgroundColor.backgroundDefault}
       borderRadius={BorderRadius.SM}
       padding={3}
-      paddingLeft={2}
       {...props}
     >
       {startAccessory && <>{startAccessory}</>}
@@ -51,6 +52,7 @@ export const BannerBase = ({
             {title}
           </Text>
         )}
+        {description && <Text {...descriptionProps}>{description}</Text>}
         {children && typeof children === 'object' ? (
           children
         ) : (
@@ -91,7 +93,15 @@ BannerBase.propTypes = {
    */
   titleProps: PropTypes.shape(Text.PropTypes),
   /**
-   * The children is the description area of the BannerBase below the title
+   * The description is the content area below BannerBase title
+   */
+  description: PropTypes.string,
+  /**
+   * Additional props to pass to the `Text` component used for the `description` text
+   */
+  descriptionProps: PropTypes.shape(Text.PropTypes),
+  /**
+   * The children is an alternative to using the description prop for BannerBase content below the title
    */
   children: PropTypes.node,
   /**

ui/components/component-library/banner-base/banner-base.scss

@@ -1,4 +0,0 @@
-.mm-banner-base {
-  border-left: 4px solid var(--color-icon-default);
-}
-

ui/components/component-library/banner-base/banner-base.stories.js

@@ -39,6 +39,9 @@ export default {
     title: {
       control: 'text',
     },
+    description: {
+      control: 'text',
+    },
     children: {
       control: 'text',
     },
@@ -106,11 +109,25 @@ Title.args = {
   children: 'Pass only a string through the title prop',
 };
 
+export const Description = (args) => {
+  return <BannerBase {...args} />;
+};
+
+Description.args = {
+  title: 'Description vs children',
+  description:
+    'Pass only a string through the description prop or you can use children if the contents require more',
+};
+
 export const Children = (args) => {
   return (
     <BannerBase {...args}>
       {`Description shouldn't repeat title. 1-3 lines. Can contain a `}
-      <ButtonLink size={Size.auto} href="https://metamask.io/" target="_blank">
+      <ButtonLink
+        size={Size.inherit}
+        href="https://metamask.io/"
+        target="_blank"
+      >
         hyperlink.
       </ButtonLink>
     </BannerBase>

ui/components/component-library/banner-base/banner-base.test.js

@@ -40,11 +40,18 @@ describe('BannerBase', () => {
 
   it('should render bannerbase description', () => {
     const { getByText } = render(
-      <BannerBase>Bannerbase description test</BannerBase>,
+      <BannerBase description="Bannerbase description test" />,
     );
     expect(getByText('Bannerbase description test')).toBeDefined();
   });
 
+  it('should render bannerbase children', () => {
+    const { getByText } = render(
+      <BannerBase>Bannerbase children test</BannerBase>,
+    );
+    expect(getByText('Bannerbase children test')).toBeDefined();
+  });
+
   it('should render bannerbase action button', () => {
     const { getByTestId } = render(
       <BannerBase

ui/components/component-library/banner/banner.js

@@ -62,6 +62,7 @@ export const Banner = ({
     <BannerBase
       startAccessory={<Icon size={Size.LG} {...severityIcon()} />}
       backgroundColor={severityBackground()}
+      paddingLeft={2}
       className={classnames(
         'mm-banner',
         {

ui/components/component-library/banner/banner.scss

@@ -1,5 +1,5 @@
 .mm-banner {
-  border-left-color: var(--color-primary-default);
+  border-left: 4px solid var(--color-primary-default);
 
   &--severity-danger {
     border-left-color: var(--color-error-default);

ui/components/component-library/component-library-components.scss

@@ -26,5 +26,4 @@
 @import 'text-field-base/text-field-base';
 @import 'text-field-search/text-field-search';
 @import 'form-text-field/form-text-field';
-@import 'banner-base/banner-base';
 @import 'banner/banner';