From 3b90c4b69ff141a500b3018bdb5231f005b3eb87 Mon Sep 17 00:00:00 2001
From: Lucio Giannotta <lucio.giannotta@a8c.com>
Date: Wed, 1 Dec 2021 01:42:15 +0100
Subject: [PATCH] Fix `ExternalLinkCard` story (#5256)

---
 .../external-link-card/index.tsx              | 15 ++++++-----
 .../external-link-card/stories/index.js       | 17 ------------
 .../external-link-card/stories/index.tsx      | 27 +++++++++++++++++++
 3 files changed, 36 insertions(+), 23 deletions(-)
 delete mode 100644 assets/js/editor-components/external-link-card/stories/index.js
 create mode 100644 assets/js/editor-components/external-link-card/stories/index.tsx

diff --git a/assets/js/editor-components/external-link-card/index.tsx b/assets/js/editor-components/external-link-card/index.tsx
index 869089c37f9..a96f0f6e5f0 100644
--- a/assets/js/editor-components/external-link-card/index.tsx
+++ b/assets/js/editor-components/external-link-card/index.tsx
@@ -10,18 +10,21 @@ import { VisuallyHidden } from '@wordpress/components';
  */
 import './editor.scss';
 
+export interface ExternalLinkCardProps {
+	href: string;
+	title: string;
+	description?: string;
+}
+
 /**
- * Show a link that displays a title, description, and optional icon. Links are opened in a new tab.
+ * Show a link that displays a title, description, and an icon showing that the link is external.
+ * Links are opened in a new tab.
  */
 const ExternalLinkCard = ( {
 	href,
 	title,
 	description,
-}: {
-	href: string;
-	title: string;
-	description?: string;
-} ): JSX.Element => {
+}: ExternalLinkCardProps ): JSX.Element => {
 	return (
 		<a
 			href={ href }
diff --git a/assets/js/editor-components/external-link-card/stories/index.js b/assets/js/editor-components/external-link-card/stories/index.js
deleted file mode 100644
index eb1d5cea7cc..00000000000
--- a/assets/js/editor-components/external-link-card/stories/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Internal dependencies
- */
-import ExternalLinkCard from '../';
-
-export default {
-	title: 'WooCommerce Blocks/editor-components/ExternalLinkCard',
-	component: ExternalLinkCard,
-};
-
-export const Default = () => (
-	<ExternalLinkCard
-		href="#link"
-		title="Card Title"
-		description="This is a description of the link."
-	/>
-);
diff --git a/assets/js/editor-components/external-link-card/stories/index.tsx b/assets/js/editor-components/external-link-card/stories/index.tsx
new file mode 100644
index 00000000000..276d916b267
--- /dev/null
+++ b/assets/js/editor-components/external-link-card/stories/index.tsx
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { Story, Meta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ExternalLinkCard, { ExternalLinkCardProps } from '..';
+
+export default {
+	title: 'WooCommerce Blocks/editor-components/ExternalLinkCard',
+	component: ExternalLinkCard,
+} as Meta< ExternalLinkCardProps >;
+
+const Template: Story< ExternalLinkCardProps > = ( args ) => (
+	<ExternalLinkCard { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	description:
+		'This is the description of the link, perhaps a bit of a longer paragraph or a summary of a blog post, or whatever could give more context',
+	href:
+		'https://woocommerce.com/posts/seven-tips-to-extend-holiday-sales-momentum/',
+	title: 'Seven tips to extend holiday sales momentum',
+};