refactor(app): refactor externallink stories (#14895)

* refactor(app): refactor externallink stories

app/src/atoms/Link/ExternalLink.stories.tsx

@@ -1,22 +1,26 @@
 import * as React from 'react'
-import { Flex, COLORS } from '@opentrons/components'
-import { ExternalLink } from './ExternalLink'
+import { COLORS, Flex, SPACING } from '@opentrons/components'
+import { ExternalLink as ExternalLinkComponent } from './ExternalLink'
 
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof ExternalLinkComponent> = {
   title: 'App/Atoms/ExternalLink',
-  component: ExternalLink,
-} as Meta
-
-const Template: Story<React.ComponentProps<typeof ExternalLink>> = args => (
-  <Flex backgroundColor={COLORS.grey10}>
-    <ExternalLink {...args} />
-  </Flex>
-)
+  component: ExternalLinkComponent,
+  decorators: [
+    Story => (
+      <Flex backgroundColor={COLORS.grey10} padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+export default meta
+type Story = StoryObj<typeof ExternalLinkComponent>
 
-export const Primary = Template.bind({})
-Primary.args = {
-  href: 'https://www.opentrons.com',
-  children: 'Open the link',
+export const ExternalLink: Story = {
+  args: {
+    href: 'https://www.opentrons.com',
+    children: 'Open the link',
+  },
 }

app/src/atoms/Link/ExternalLink.tsx

@@ -1,12 +1,7 @@
 import * as React from 'react'
 
-import {
-  Link,
-  LinkProps,
-  Icon,
-  TYPOGRAPHY,
-  SPACING,
-} from '@opentrons/components'
+import { Link, Icon, TYPOGRAPHY, SPACING } from '@opentrons/components'
+import type { LinkProps } from '@opentrons/components'
 
 export interface ExternalLinkProps extends LinkProps {
   href: string