docs: Create some stories for PageBanner (#56519)

We've got stories with with content, dismissable & resizable banners,
and a story to explain adding color to the text.


![SCR-20230919-ogaw](https://github.com/getsentry/sentry/assets/187460/b0a4aca9-63ab-4914-a066-8a0d5d834155)


I updated the styles inside the banner itself, so that inline content,
like the "See Stories" link render inline:

![SCR-20230919-ofxu](https://github.com/getsentry/sentry/assets/187460/5b7a156e-0e30-4380-be37-b982070ad28d)

static/app/components/replays/pageBanner.stories.tsx

@@ -0,0 +1,127 @@
+import {Fragment, useState} from 'react';
+import styled from '@emotion/styled';
+
+import replaysDeadRageBackground from 'sentry-images/spot/replay-dead-rage-changelog.svg';
+
+import {Button, LinkButton} from 'sentry/components/button';
+import ExternalLink from 'sentry/components/links/externalLink';
+import PageBanner from 'sentry/components/replays/pageBanner';
+import SizingWindow from 'sentry/components/stories/sizingWindow';
+import {IconBroadcast} from 'sentry/icons';
+import storyBook from 'sentry/stories/storyBook';
+
+export default storyBook('PageBanner', story => {
+  const storiesButton = (
+    <LinkButton
+      external
+      href="https://sentry.io/orgredirect/organizations/:orgslug/stories"
+      priority="primary"
+    >
+      View Stories
+    </LinkButton>
+  );
+
+  story('Example', () => (
+    <Fragment>
+      <p>Here's an example Banner announcing this UI Component Library:</p>
+      <PageBanner
+        button={storiesButton}
+        description="Build new products faster by exploring reusable the UI components available inside Sentry."
+        heading="Introducing the UI Component Library"
+        icon={<IconBroadcast size="sm" />}
+        image={replaysDeadRageBackground}
+        title="UI Library Available"
+      />
+    </Fragment>
+  ));
+
+  story('Example with dismiss', () => {
+    const [isDismissed, setIsDismissed] = useState(false);
+
+    return (
+      <Fragment>
+        <p>
+          This example renders an X in the top-right corner. You can wire it up with
+          something like <kbd>useDismissAlert()</kbd>.
+        </p>
+        <p>
+          Is Dismissed? <var>{String(isDismissed)}</var>
+        </p>
+        {isDismissed ? (
+          <Button size="sm" onClick={() => setIsDismissed(false)}>
+            Show banner
+          </Button>
+        ) : (
+          <PageBanner
+            button={storiesButton}
+            description="Build new products faster by exploring reusable the UI components available inside Sentry."
+            heading="Introducing the UI Component Library"
+            icon={<IconBroadcast size="sm" />}
+            image={replaysDeadRageBackground}
+            title="UI Library Available"
+            onDismiss={() => setIsDismissed(true)}
+          />
+        )}
+      </Fragment>
+    );
+  });
+
+  story('Resizable', () => {
+    const [flexGrow, setFlexGrow] = useState(false);
+    return (
+      <Fragment>
+        <p>
+          The banner will resize if it's shrunk really narrow. To make it expand inside a
+          flex parent set <kbd>flex-grow:1</kbd>.
+        </p>
+        <p>
+          <Button size="sm" onClick={() => setFlexGrow(!flexGrow)}>
+            flexGrow: <var>{flexGrow ? 1 : 0}</var>
+          </Button>
+        </p>
+        <SizingWindow>
+          <PageBanner
+            style={{flexGrow: flexGrow ? 1 : 0}}
+            button={storiesButton}
+            description="Build new products faster by exploring reusable the UI components available inside Sentry."
+            heading="Introducing the UI Component Library"
+            icon={<IconBroadcast size="sm" />}
+            image={replaysDeadRageBackground}
+            title="UI Library Available"
+          />
+        </SizingWindow>
+      </Fragment>
+    );
+  });
+
+  story('More variations', () => (
+    <Fragment>
+      <p>There are some examples where we change out the colors and mix things up:</p>
+      <PageBanner
+        button={storiesButton}
+        description={
+          <Fragment>
+            Build new products faster by exploring reusable the UI components available
+            inside Sentry.{' '}
+            <ExternalLink href="https://sentry.io/orgredirect/organizations/:orgslug/stories">
+              See stories
+            </ExternalLink>
+          </Fragment>
+        }
+        heading="Introducing the UI Component Library"
+        icon={<IconBroadcast size="sm" />}
+        image={replaysDeadRageBackground}
+        title={
+          <Fragment>
+            UI Library Available at <Green>https://sentry.io/stories</Green>
+          </Fragment>
+        }
+      />
+    </Fragment>
+  ));
+});
+
+const Green = styled('span')`
+  color: ${p => p.theme.green400};
+  font-weight: bold;
+`;

static/app/components/replays/pageBanner.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type {CSSProperties, ReactNode} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/button';
@@ -15,6 +15,7 @@ interface Props {
   title: ReactNode;
   button?: ReactNode;
   onDismiss?: () => void;
+  style?: CSSProperties;
 }
 
 export default function PageBanner({
@@ -25,9 +26,10 @@ export default function PageBanner({
   image,
   onDismiss,
   title,
+  style,
 }: Props) {
   return (
-    <Wrapper>
+    <Wrapper style={style}>
       {onDismiss && (
         <CloseButton
           onClick={onDismiss}
@@ -106,15 +108,15 @@ const TextContainer = styled('div')`
 `;
 
 const SubText = styled('div')`
-  display: flex;
   color: ${p => p.theme.subText};
-  line-height: ${p => p.theme.fontSizeMedium};
   font-size: ${p => p.theme.fontSizeMedium};
-  align-items: center;
-  gap: ${space(0.5)};
+  line-height: ${p => p.theme.fontSizeMedium};
 `;
 
 const TypeText = styled(SubText)`
-  text-transform: uppercase;
+  align-items: center;
+  display: flex;
   font-weight: 500;
+  gap: ${space(0.5)};
+  text-transform: uppercase;
 `;