feat: Add "link" type

#31

README.md

@@ -115,6 +115,7 @@ For more detailed information, see [type definition file](./packages/storybook-a
 - `figma` ... Embed [Figma Live Embed Kit](https://www.figma.com/developers/embed).
 - `pdf` ... Embed PDF document.
 - `image` ... Embed image.
+- `link` ... Display a link.
 
 ### Utility function
 

packages/examples/stories/examples/link.stories.js

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import { config, withDesign } from 'storybook-addon-designs'
+
+import { Button } from '../Button'
+
+export default {
+  title: 'Examples/link',
+  decorators: [withDesign]
+}
+
+export const showALink = () => <Button>Button</Button>
+
+showALink.story = {
+  parameters: {
+    design: config({
+      type: 'link',
+      url:
+        'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample'
+    })
+  }
+}
+
+export const setALabel = () => <Button>Button</Button>
+
+setALabel.story = {
+  parameters: {
+    design: config({
+      type: 'link',
+      url:
+        'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample',
+      label: 'Open design in new tab'
+    })
+  }
+}
+
+export const hideArrowIcon = () => <Button>Button</Button>
+
+hideArrowIcon.story = {
+  parameters: {
+    design: config({
+      type: 'link',
+      url:
+        'https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample',
+      showArrow: false
+    })
+  }
+}

packages/storybook-addon-designs/src/config.ts

@@ -1,4 +1,9 @@
-export type Config = IFrameConfig | FigmaConfig | PdfConfig | ImageConfig
+export type Config =
+  | IFrameConfig
+  | FigmaConfig
+  | PdfConfig
+  | ImageConfig
+  | LinkConfig
 
 export interface ConfigBase {
   /**
@@ -87,3 +92,38 @@ export interface ImageConfig extends TransformableConfigBase {
    */
   url: string
 }
+
+/**
+ * Display a link.
+ */
+export interface LinkConfig extends ConfigBase {
+  type: 'link'
+
+  /**
+   * An URL to open.
+   */
+  url: string
+
+  /**
+   * Link text. Just shows an url if omitted.
+   */
+  label?: string
+
+  /**
+   * Whether to show a right-arrow at the end of a label.
+   * @default true
+   */
+  showArrow?: boolean
+
+  /**
+   * "target" attribute for the link.
+   * @default "_blank"
+   */
+  target?: string
+
+  /**
+   * "rel" attribute for the link.
+   * @default "noopener"
+   */
+  rel?: string
+}

packages/storybook-addon-designs/src/register/components/LinkPanel.tsx

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { FC } from 'react'
+import { css, jsx } from '@storybook/theming'
+
+import { Link } from '@storybook/components'
+
+import { LinkConfig } from '../../config'
+
+interface Props {
+  config: LinkConfig
+}
+
+export const LinkPanel: FC<Props> = ({ config }) => (
+  <div css={$container}>
+    <Link
+      cancel={false}
+      href={config.url}
+      target={config.target ?? '_blank'}
+      rel={config.rel ?? 'noopener'}
+      withArrow={config.showArrow ?? true}
+    >
+      {config.label || config.url}
+    </Link>
+  </div>
+)
+
+export default LinkPanel
+
+const $container = css`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`

packages/storybook-addon-designs/src/register/components/Wrapper.tsx

@@ -12,6 +12,7 @@ import { Events, ParameterName } from '../../addon'
 import { Figma } from './Figma'
 import { IFrame } from './IFrame'
 import { ImagePreview } from './Image'
+import { LinkPanel } from './LinkPanel'
 import { Pdf } from './Pdf'
 
 interface Props {
@@ -85,6 +86,8 @@ export const Wrapper: SFC<Props> = ({ active, api, channel }) => {
         return [<Pdf config={cfg} />, meta]
       case 'image':
         return [<ImagePreview key={storyId} config={cfg} />, meta]
+      case 'link':
+        return [<LinkPanel config={cfg} />, meta]
     }
 
     return [