Fix ExternalLinkCard story (#5256) (#5292)

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 }

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',
+};