initial commit

packages/woocommerce-blocks/assets/js/editor-components/external-link-card/editor.scss

@@ -0,0 +1,33 @@
+.wc-block-editor-components-external-link-card {
+	display: flex;
+	flex-direction: row;
+	text-decoration: none;
+	margin: $gap-large 0;
+	color: inherit;
+	align-items: flex-start;
+
+	& + .wc-block-editor-components-external-link-card {
+		margin-top: -($gap-large - $gap);
+	}
+	.wc-block-editor-components-external-link-card__content {
+		flex: 1 1 0;
+		padding-right: $gap;
+	}
+	.wc-block-editor-components-external-link-card__title {
+		font-weight: 500;
+		display: block;
+	}
+	.wc-block-editor-components-external-link-card__description {
+		color: $gray-700;
+		display: block;
+		@include font-size(small);
+		margin-top: 0.5em;
+	}
+	.wc-block-editor-components-external-link-card__icon {
+		flex: 0 0 24px;
+		margin: 0;
+		text-align: right;
+		color: inherit;
+		vertical-align: top;
+	}
+}

packages/woocommerce-blocks/assets/js/editor-components/external-link-card/index.tsx

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, external } from '@wordpress/icons';
+import { VisuallyHidden } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+/**
+ * Show a link that displays a title, description, and optional icon. Links are opened in a new tab.
+ */
+const ExternalLinkCard = ( {
+	href,
+	title,
+	description,
+}: {
+	href: string;
+	title: string;
+	description?: string;
+} ): JSX.Element => {
+	return (
+		<a
+			href={ href }
+			className="wc-block-editor-components-external-link-card"
+			target="_blank"
+			rel="noreferrer"
+		>
+			<span className="wc-block-editor-components-external-link-card__content">
+				<strong className="wc-block-editor-components-external-link-card__title">
+					{ title }
+				</strong>
+				{ description && (
+					<span className="wc-block-editor-components-external-link-card__description">
+						{ description }
+					</span>
+				) }
+			</span>
+			<VisuallyHidden as="span">
+				{
+					/* translators: accessibility text */
+					__( '(opens in a new tab)', 'woo-gutenberg-products-block' )
+				}
+			</VisuallyHidden>
+			<Icon
+				icon={ external }
+				className="wc-block-editor-components-external-link-card__icon"
+			/>
+		</a>
+	);
+};
+
+export default ExternalLinkCard;

packages/woocommerce-blocks/assets/js/editor-components/external-link-card/stories/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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."
+	/>
+);