Add List and Link components to Storybook (https://github.com/woocommerce/woocommerce-admin/pull/4219)

plugins/woocommerce-admin/packages/components/src/link/stories/index.js

@@ -0,0 +1,17 @@
+/*
+ * Internal dependencies
+ */
+import Link from '../';
+
+export default {
+	title: 'WooCommerce Admin/components/Link',
+	component: Link,
+};
+
+export const External = () => {
+	return (
+		<Link href="https://woocommerce.com" type="external">
+			WooCommerce.com
+		</Link>
+	);
+};

plugins/woocommerce-admin/packages/components/src/list/stories/index.js

@@ -0,0 +1,106 @@
+/**
+ * External dependencies
+ */
+import Gridicon from 'gridicons';
+
+/**
+ * Internal dependencies
+ */
+import List from '../';
+import './style.scss';
+
+export default {
+	title: 'WooCommerce Admin/components/List',
+	component: List,
+};
+
+export const Default = () => {
+	const listItems = [
+		{
+			title: 'WooCommerce.com',
+			href: 'https://woocommerce.com',
+		},
+		{
+			title: 'WordPress.org',
+			href: 'https://wordpress.org',
+		},
+		{
+			title: 'A list item with no action',
+		},
+		{
+			title: 'Click me!',
+			content: 'An alert will be triggered.',
+			onClick: () => {
+				// eslint-disable-next-line no-alert
+				window.alert( 'List item clicked' );
+			},
+		},
+	];
+
+	return <List items={ listItems } />;
+};
+
+export const BeforeAndAfter = () => {
+	const listItems = [
+		{
+			before: <Gridicon icon="cart" />,
+			after: <Gridicon icon="chevron-right" />,
+			title: 'WooCommerce.com',
+			href: 'https://woocommerce.com',
+		},
+		{
+			before: <Gridicon icon="my-sites" />,
+			after: <Gridicon icon="chevron-right" />,
+			title: 'WordPress.org',
+			href: 'https://wordpress.org',
+		},
+		{
+			before: <Gridicon icon="link-break" />,
+			title: 'A list item with no action',
+			description: 'List item description text',
+		},
+		{
+			before: <Gridicon icon="notice" />,
+			title: 'Click me!',
+			content: 'An alert will be triggered.',
+			onClick: () => {
+				// eslint-disable-next-line no-alert
+				window.alert( 'List item clicked' );
+			},
+		},
+	];
+
+	return <List items={ listItems } />;
+};
+
+export const CustomStyle = () => {
+	const listItems = [
+		{
+			before: <Gridicon icon="cart" />,
+			after: <Gridicon icon="chevron-right" />,
+			title: 'WooCommerce.com',
+			href: 'https://woocommerce.com',
+		},
+		{
+			before: <Gridicon icon="my-sites" />,
+			after: <Gridicon icon="chevron-right" />,
+			title: 'WordPress.org',
+			href: 'https://wordpress.org',
+		},
+		{
+			before: <Gridicon icon="link-break" />,
+			title: 'A list item with no action',
+		},
+		{
+			before: <Gridicon icon="notice" />,
+			title: 'Click me!',
+			content: 'An alert will be triggered.',
+			onClick: () => {
+				// eslint-disable-next-line no-alert
+				window.alert( 'List item clicked' );
+			},
+		},
+	];
+
+	return <List items={ listItems } className="storybook-custom-list" />;
+};

plugins/woocommerce-admin/packages/components/src/list/stories/style.scss

@@ -0,0 +1,21 @@
+.storybook-custom-list {
+	border: 1px solid $core-grey-light-900;
+	border-radius: 2px;
+	padding: 0;
+
+	.woocommerce-list__item {
+		&:not(:first-child) {
+			border-top: 1px solid $core-grey-light-600;
+		}
+
+		.woocommerce-list__item-before {
+			.gridicon {
+				fill: $studio-pink;
+			}
+		}
+
+		.woocommerce-list__item-title {
+			color: $studio-pink;
+		}
+	}
+}

plugins/woocommerce-admin/storybook/webpack.config.js

@@ -2,12 +2,23 @@
  * External dependencies
  */
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+const path = require( 'path' );
 
 /**
  * External dependencies
  */
 const wcAdminWebpackConfig = require( '../webpack.config.js' );
 
+const wcAdminPackages = [
+	'components',
+	'csv-export',
+	'currency',
+	'date',
+	'navigation',
+	'number',
+	'data',
+];
+
 module.exports = ( { config: storybookConfig } ) => {
 	storybookConfig.module.rules.push(
 		{
@@ -20,6 +31,12 @@ module.exports = ( { config: storybookConfig } ) => {
 
 	storybookConfig.resolve.alias = wcAdminWebpackConfig.resolve.alias;
 
+	wcAdminPackages.forEach( ( name ) => {
+		storybookConfig.resolve.alias[
+			`@woocommerce/${ name }`
+		] = path.resolve( __dirname, `../packages/${ name }/src` );
+	} );
+
 	storybookConfig.plugins.push(
 		new MiniCssExtractPlugin( {
 			filename: '[name].css',