STCOM-1408: Add marginTop0 class to MessageBanner component

CHANGELOG.md

@@ -23,6 +23,7 @@
 * Paneset - deduplicate panes via `id` prior to registration. Refs STCOM-1386.
 * Calendar - improved color contrast of edge month days, as per WCAG standards. Changed hover bg color of edge/month days. Increased weight of day numbers overall. Refs STCOM-1390.
 * *BREAKING* Update `react-intl` to `^7`. Refs STCOM-1406.
+* Add marginTop0 prop to the MessageBanner component. Refs STCOM-1408.
 
 ## [12.2.0](https://github.com/folio-org/stripes-components/tree/v12.2.0) (2024-10-11)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.1.0...v12.2.0)

lib/MessageBanner/MessageBanner.js

@@ -46,6 +46,7 @@ const MessageBanner = forwardRef(
       onExited,
       show = true,
       type = TYPES.DEFAULT,
+      marginTop0 = false,
       ...rest
     },
     ref
@@ -79,8 +80,13 @@ const MessageBanner = forwardRef(
       );
     };
 
+    const getMessageBannerClass = () => classnames(
+      css.root,
+      { [css.marginTop0]: marginTop0 },
+    );
+
     return (
-      <div role="alert" aria-live={ariaLive} className={css.root}>
+      <div role="alert" aria-live={ariaLive} className={getMessageBannerClass()}>
         <CSSTransition
           in={visible}
           timeout={200}
@@ -153,6 +159,7 @@ MessageBanner.propTypes = {
   onExited: PropTypes.func,
   show: PropTypes.bool,
   type: PropTypes.oneOf(Object.keys(TYPES).map(key => TYPES[key])),
+  marginTop0: PropTypes.bool,
 };
 
 MessageBanner.displayName = 'MessageBanner';

lib/MessageBanner/MessageBanner.module.css

@@ -28,6 +28,10 @@
 
 .root + .root {
   margin-top: var(--message-banner-stacked-margin-top);
+
+  &.marginTop0 {
+    margin-top: 0;
+  }
 }
 
 .inner {

lib/MessageBanner/readme.md

@@ -85,6 +85,7 @@ className | string | Adds a custom class name for the `<MessageBanner>` | |
 contentClassName | string | Adds a custom class name for the content element inside the `<MessageBanner>` | |
 element | string, element, func | Changes the root element of the `<MessageBanner>` | | div |
 show | boolean | Control the visiblity externally. Using the show-prop will enable the `<MessageBanner>` to transition in and out. | true/false | |
+marginTop0 | boolean | Removes the default top margin | true/false | false
 
 
 The remaining props passed to `<MessageBanner>` will be spread onto the root element of the component. This component also accepts a `ref`.

lib/MessageBanner/tests/MessageBanner-test.js

@@ -35,6 +35,7 @@ describe('MessageBanner', () => {
           dismissButtonProps={{
             className: 'my-dismiss-button-class'
           }}
+          marginTop0={true}
           dismissible
         >
           Test
@@ -64,6 +65,10 @@ describe('MessageBanner', () => {
     messageBanner.has({ className: including('my-class') });
   });
 
+  it('Should have the marginTop0 class if passed to the prop', () => {
+    messageBanner.has({ className: including('marginTop0') });
+  });
+
   it('Should have a root element of <span> if passed via. the element prop', () => {
     messageBanner.has({ tagName: 'SPAN' });
   });