[Storybook] Add Deprecating banners to Dialog and Tooltip (#4854)

* Add banners to warn about deprecation

* test(vrt): update snapshots

* fix axe violations on Link

* update links for a11y again

* test(vrt): update snapshots

---------

Co-authored-by: tbenning <[email protected]>

packages/react/src/Dialog.stories.tsx

@@ -1,7 +1,8 @@
 import React, {useState, useRef} from 'react'
 import type {Meta} from '@storybook/react'
 import {Button} from './Button'
-import {Box, Text} from '.'
+import {Box, Link, Text} from '.'
+import {Banner} from './Banner'
 import {default as Dialog} from './Dialog'
 
 /* Dialog Version 1*/
@@ -16,6 +17,21 @@ export const Default = () => {
   const returnFocusRef = useRef(null)
   return (
     <div>
+      <Box sx={{mb: 3}}>
+        <Banner
+          title="Planned for deprecation"
+          description={
+            <div data-a11y-link-underlines="true">
+              There are plans to deprecate this component in a future release. We recommend using{' '}
+              <Link inline={true} href="/?path=/story/components-dialog--default">
+                Dialog
+              </Link>{' '}
+              instead.
+            </div>
+          }
+          variant="warning"
+        />
+      </Box>
       <Button data-testid="trigger-button" ref={returnFocusRef} onClick={() => setIsOpen(true)}>
         Show Dialog
       </Button>

packages/react/src/Tooltip/Tooltip.stories.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import type {Meta} from '@storybook/react'
 import {BaseStyles, ThemeProvider, Button} from '..'
 import Box from '../Box'
+import Link from '../Link'
+import {Banner} from '../Banner'
 import Tooltip from './Tooltip'
 
 /* Tooltip v1 */
@@ -24,9 +26,26 @@ export default {
 } as Meta
 
 export const Default = () => (
-  <Box sx={{p: 5}}>
-    <Tooltip aria-label="Hello, Tooltip!">
-      <Button>Hover me</Button>
-    </Tooltip>
-  </Box>
+  <>
+    <Box sx={{mb: 3}}>
+      <Banner
+        title="Planned for deprecation"
+        description={
+          <div data-a11y-link-underlines="true">
+            There are plans to deprecate this component in a future release. We recommend using{' '}
+            <Link inline={true} href="/?path=/story/components-tooltipv2--default">
+              Tooltip
+            </Link>{' '}
+            instead.
+          </div>
+        }
+        variant="warning"
+      />
+    </Box>
+    <Box sx={{p: 5}}>
+      <Tooltip aria-label="Hello, Tooltip!">
+        <Button>Hover me</Button>
+      </Tooltip>
+    </Box>
+  </>
 )