[SAGE-517] Banner: Add storybook examples and update logic to pass active state through components

packages/sage-react/lib/Banner/Banner.jsx

@@ -6,20 +6,32 @@ import { BannerWrapper } from './BannerWrapper';
 import { BANNER_TYPES } from './configs';
 
 export const Banner = ({
+  active,
   bannerContext,
   ...rest
 }) => (
   (bannerContext !== null)
-    ? <BannerWrapper bannerContext={bannerContext} {...rest} />
-    : <BannerContent bannerContext={bannerContext} {...rest} />
+    ? <BannerWrapper bannerContext={bannerContext} active={active} {...rest} />
+    : <BannerContent bannerContext={bannerContext} active={active} {...rest} />
 );
 
 Banner.TYPES = BANNER_TYPES;
 
+// Defining all default props and prop types explicitly to populate story table
 Banner.defaultProps = {
-  bannerContext: null
+  active: false,
+  bannerContext: null,
+  dismissable: true,
+  link: null,
+  text: null,
+  type: Banner.TYPES.DEFAULT,
 };
 
 Banner.propTypes = {
-  bannerContext: PropTypes.string
+  active: PropTypes.bool,
+  bannerContext: PropTypes.string,
+  dismissable: PropTypes.bool,
+  link: PropTypes.string,
+  text: PropTypes.string,
+  type: PropTypes.oneOf(Object.values(BANNER_TYPES)),
 };

packages/sage-react/lib/Banner/Banner.story.jsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { selectArgs } from '../story-support/helpers';
 import { Banner } from './Banner';
+import { Button } from '../Button';
 
 export default {
   title: 'Sage/Banner',
@@ -15,14 +16,53 @@ export default {
     dismissable: true,
     link: '#',
     text: 'Alert description text',
-    type: Banner.TYPES.DEFAULT
+    type: Banner.TYPES.DEFAULT,
   },
 };
 
 const Template = (args) => <Banner {...args} />;
 export const Default = Template.bind({});
 
-export const InlineBanner = Template.bind({});
-InlineBanner.args = {
+export const DefaultInlineBanner = Template.bind({});
+DefaultInlineBanner.args = {
   bannerContext: 'sage-demo'
 };
+
+export const SecondaryInlineBanner = Template.bind({});
+SecondaryInlineBanner.args = {
+  bannerContext: 'sage-demo',
+  type: Banner.TYPES.SECONDARY
+};
+
+export const WarningInlineBanner = Template.bind({});
+WarningInlineBanner.args = {
+  bannerContext: 'sage-demo',
+  type: Banner.TYPES.WARNING
+};
+
+export const DangerInlineBanner = Template.bind({});
+DangerInlineBanner.args = {
+  bannerContext: 'sage-demo',
+  type: Banner.TYPES.DANGER
+};
+
+export const DefaultFixedBanner = (args) => {
+  const [active, setActive] = useState(false);
+
+  const onClick = () => {
+    setActive(true);
+  };
+
+  return (
+    <>
+      <Button
+        color={Button.COLORS.PRIMARY}
+        onClick={onClick}
+      >
+        Display Banner
+      </Button>
+
+      <Banner {...args} active={active} />
+    </>
+  );
+};

packages/sage-react/lib/Banner/BannerContent.jsx

@@ -66,7 +66,7 @@ export const BannerContent = ({
 BannerContent.TYPES = BANNER_TYPES;
 
 BannerContent.defaultProps = {
-  active: null,
+  active: false,
   bannerContext: null,
   children: null,
   className: null,

packages/sage-react/lib/Banner/BannerWrapper.jsx

@@ -4,7 +4,15 @@ import classnames from 'classnames';
 import { BannerContent } from './BannerContent';
 
 export const BannerWrapper = ({
+  active,
   bannerContext,
+  children,
+  className,
+  dismissable,
+  id,
+  link,
+  text,
+  type,
   ...rest
 }) => {
   const classNames = classnames(
@@ -16,13 +24,25 @@ export const BannerWrapper = ({
 
   return (
     <div className={classNames}>
-      <BannerContent {...rest} />
+      <BannerContent
+        active={active}
+        bannerContext={bannerContext}
+        className={className}
+        dismissable={dismissable}
+        id={id}
+        link={link}
+        text={text}
+        type={type}
+        {...rest}
+      >
+        {children}
+      </BannerContent>
     </div>
   );
 };
 
 BannerWrapper.defaultProps = {
-  active: null,
+  active: false,
   bannerContext: null,
   children: null,
   className: null,