LG-2963, LG-3170: LiveExample links (#2066)

* add links to story file

* changeset

* valid href

* override link component hover styles

.changeset/three-wasps-double.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/callout': patch
+'@leafygreen-ui/banner': patch
+---
+
+Added links to LiveExample to demonstrate link styles

packages/banner/src/Banner.story.tsx

@@ -10,6 +10,7 @@ import {
   storybookExcludedControlParams,
   StoryMetaType,
 } from '@leafygreen-ui/lib';
+import { Link } from '@leafygreen-ui/typography';
 
 import Banner, { BannerProps, Variant } from '.';
 
@@ -35,12 +36,21 @@ const meta: StoryMetaType<typeof Banner> = {
     },
   },
   args: {
-    children:
-      'To avoid disrupting majority writes, new members are now added to replica sets as priority=0, votes=0 until they reach secondary state, after which Cloud Manager automatically updates the configuration to match the priority and votes value specified in the deployment.',
+    children: (
+      <>
+        To avoid disrupting majority writes, new members are now added to
+        replica sets as priority=0, votes=0 until they reach secondary state,
+        after which Cloud Manager automatically updates the configuration to
+        match the priority and votes value specified in the deployment. &nbsp;
+        <a href="https://mongodb.com">Anchor tag</a>&nbsp;
+        <Link>Link Component</Link>
+      </>
+    ),
     darkMode: false,
     dismissible: false,
   },
   argTypes: {
+    children: storybookArgTypes.children,
     darkMode: storybookArgTypes.darkMode,
     dismissible: {
       control: 'boolean',
@@ -50,7 +60,6 @@ const meta: StoryMetaType<typeof Banner> = {
       control: { type: 'select' },
       defaultValue: Variant.Info,
     },
-    children: storybookArgTypes.children,
     glyph: {
       options: [undefined, ...Object.keys(glyphs)],
       control: { type: 'select' },

packages/callout/src/Callout.story.tsx

@@ -8,7 +8,6 @@ import { Link } from '@leafygreen-ui/typography';
 
 import Callout, { CalloutProps, Variant } from '.';
 
-const loremIpsum = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy children ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`;
 const loremWithLinks = (
   <div>
     <Link href="./">Link component</Link> is simply dummy text of the printing
@@ -51,7 +50,7 @@ export default meta;
 
 export const LiveExample: StoryFn<CalloutProps> = args => <Callout {...args} />;
 LiveExample.args = {
-  children: loremIpsum,
+  children: loremWithLinks,
 };
 LiveExample.parameters = {
   chromatic: {

packages/callout/src/Callout/styles.ts

@@ -260,6 +260,10 @@ export const contentStyles = css`
     &:focus,
     &:focus-visible {
       outline: none;
+      // duplicate these styles to override text-decoration: none in Link component
+      text-decoration: underline;
+      text-underline-offset: 3px;
+      text-decoration-thickness: 2px;
       span {
         &::after {
           display: none;