feat(stories): add story for AlertLink (#62269)

also fixed some wording in the alert story

static/app/components/alert.stories.tsx

@@ -58,7 +58,7 @@ export default storyBook(Alert, story => {
           This is an error alert. Something went wrong.
         </Alert>
         <Alert type="info" showIcon>
-          Info alerts. Put some exciting info here.
+          Info alert. Put some exciting info here.
         </Alert>
         <Alert type="muted" showIcon>
           Muted alerts look like this.
@@ -78,7 +78,7 @@ export default storyBook(Alert, story => {
       <Fragment>
         <p>
           The <JSXProperty name="icon" value /> prop can be changed if you want to
-          customize default icon. Just directly pass in the icon, like{' '}
+          customize the default icon. Just directly pass in the icon, like{' '}
           <JSXNode name="IconDelete" /> for example, to the prop.
         </p>
         <Alert type="warning" showIcon icon={<IconDelete />}>

static/app/components/alertLink.stories.tsx

@@ -0,0 +1,148 @@
+import {Fragment, useState} from 'react';
+
+import AlertLink from 'sentry/components/alertLink';
+import JSXNode from 'sentry/components/stories/jsxNode';
+import JSXProperty from 'sentry/components/stories/jsxProperty';
+import {IconSentry} from 'sentry/icons';
+import storyBook from 'sentry/stories/storyBook';
+
+export default storyBook(AlertLink, story => {
+  story('Default', () => {
+    return (
+      <Fragment>
+        <p>
+          The <JSXNode name="AlertLink" /> component is a highlighted banner that links to
+          some other page (or component). Depending on the{' '}
+          <JSXProperty name="priority" value /> prop specified, it can be used as a
+          success alert, an error or warning alert, and for various other use cases.
+        </p>
+        <p>
+          The default <JSXNode name="AlertLink" /> looks like this:
+        </p>
+        <AlertLink href="https://sentry.io/welcome">
+          Clicking this link will not open in a new tab!
+        </AlertLink>
+        <p>
+          The default props are <JSXProperty name="size" value="normal" />,{' '}
+          <JSXProperty name="priority" value="warning" />,{' '}
+          <JSXProperty name="withoutMarginBottom" value="false" />, and{' '}
+          <JSXProperty name="openInNewTab" value="false" />.
+        </p>
+        <p>
+          This alert below has <JSXProperty name="openInNewTab" value="true" />:
+        </p>
+        <AlertLink href="https://sentry.io/welcome" openInNewTab>
+          Clicking this link WILL open in a new tab!
+        </AlertLink>
+      </Fragment>
+    );
+  });
+
+  story('priority', () => {
+    return (
+      <Fragment>
+        <p>
+          The <JSXProperty name="priority" value /> prop specifies the alert category, and
+          changes the color of the alert.
+        </p>
+        <AlertLink priority="error">
+          This is an error alert. Something went wrong.
+        </AlertLink>
+        <AlertLink priority="info">Info alert. Put some exciting info here.</AlertLink>
+        <AlertLink priority="muted">Muted alerts look like this.</AlertLink>
+        <AlertLink priority="success">Success alert. Yay!</AlertLink>
+        <AlertLink priority="warning">
+          Warning alert. Something is about to go wrong, probably.
+        </AlertLink>
+      </Fragment>
+    );
+  });
+
+  story('icon', () => {
+    return (
+      <Fragment>
+        <p>
+          The <JSXProperty name="icon" value /> prop can be specified if you want to add
+          an icon to the alert. Just directly pass in the icon, like{' '}
+          <JSXNode name="IconSentry" /> for example, to the prop.
+        </p>
+        <AlertLink priority="warning" icon={<IconSentry />}>
+          Read the docs.
+        </AlertLink>
+      </Fragment>
+    );
+  });
+
+  story('withoutMarginBottom', () => {
+    return (
+      <Fragment>
+        <p>
+          The <JSXProperty name="withoutMarginBottom" value /> prop is a boolean that's{' '}
+          <code>false</code> by default.
+        </p>
+        <AlertLink withoutMarginBottom>This one has no bottom margin.</AlertLink>
+        <AlertLink>This one has bottom margin by default.</AlertLink>
+        <AlertLink withoutMarginBottom>This one has no margin bottom.</AlertLink>
+      </Fragment>
+    );
+  });
+
+  story('size', () => {
+    return (
+      <Fragment>
+        <p>
+          The <JSXProperty name="size" value /> prop can be either <code>"small"</code> or{' '}
+          <code>"normal"</code>.{' '}
+        </p>
+        <AlertLink priority="info" size="normal">
+          Normal
+        </AlertLink>
+        <AlertLink priority="info" size="small">
+          Small
+        </AlertLink>
+      </Fragment>
+    );
+  });
+
+  story('to vs href vs onClick', () => {
+    const [count, setCount] = useState(0);
+    return (
+      <Fragment>
+        <p>
+          There are three ways to specify what should happen when the{' '}
+          <JSXNode name="AlertLink" /> is clicked.{' '}
+        </p>
+        <p>
+          The <JSXProperty name="to" value /> prop should be used for internal links.
+          Note: links specified with this prop will never open in a new tab, even if you
+          set
+          <JSXProperty name="openInNewTab" value="true" /> .
+        </p>
+        <AlertLink
+          priority="info"
+          size="normal"
+          to="stories/?name=app/components/badge.stories.tsx"
+        >
+          View the badge story page
+        </AlertLink>
+        <p>
+          The <JSXProperty name="href" value /> prop should be used for external links.
+        </p>
+        <AlertLink
+          priority="info"
+          size="normal"
+          href="https://sentry.io/for/session-replay/"
+          openInNewTab
+        >
+          Learn more about Session Replay
+        </AlertLink>
+        <p>
+          Lastly, you can get creative with the <JSXProperty name="onClick" value /> prop.
+        </p>
+        <AlertLink priority="info" size="normal" onClick={() => setCount(count + 1)}>
+          You clicked this {count} times.
+        </AlertLink>
+      </Fragment>
+    );
+  });
+});