From a7f218ded5e952e805d7fd214020580fac2ddb58 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 31 Aug 2022 03:27:44 +0900
Subject: [PATCH] Storybook: Support dashicons for testing

---
 packages/components/src/icon/stories/index.js | 18 ++++++++++++++++++
 storybook/decorators/with-global-css.js       |  2 ++
 storybook/preview.js                          |  5 ++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/icon/stories/index.js b/packages/components/src/icon/stories/index.js
index e33a158e14cd46..824b091c2e0cdb 100644
--- a/packages/components/src/icon/stories/index.js
+++ b/packages/components/src/icon/stories/index.js
@@ -13,6 +13,7 @@ import { wordpress } from '@wordpress/icons';
  * Internal dependencies
  */
 import Icon from '../';
+import { VStack } from '../../v-stack';
 
 export default {
 	title: 'Components/Icon',
@@ -108,3 +109,20 @@ export const withAnSVG = () => {
 		/>
 	);
 };
+
+/**
+ * Although it's preferred to use icons from the `@wordpress/icons` package, Dashicons are still supported,
+ * as long as you are in a context where the Dashicons stylesheet is loaded. To simulate that here,
+ * use the Global CSS Injector in the Storybook toolbar at the top and select the "WordPress" preset.
+ */
+export const withADashicon = () => {
+	return (
+		<VStack>
+			<Icon icon="wordpress" />
+			<small>
+				This won’t show an icon if the Dashicons stylesheet isn’t
+				loaded.
+			</small>
+		</VStack>
+	);
+};
diff --git a/storybook/decorators/with-global-css.js b/storybook/decorators/with-global-css.js
index c18e55fdcf9830..680f3359e0aadc 100644
--- a/storybook/decorators/with-global-css.js
+++ b/storybook/decorators/with-global-css.js
@@ -39,6 +39,8 @@ const config = {
 			// that affect wp-components
 			'https://wordpress.org/gutenberg/wp-admin/css/common.min.css',
 			'https://wordpress.org/gutenberg/wp-admin/css/forms.min.css',
+			// Icon components need to support dashicons for backwards compatibility
+			'https://wordpress.org/gutenberg/wp-includes/css/dashicons.min.css',
 		],
 		// In wp-admin, these classes are added to the body element,
 		// which is used as a class scope for some relevant styles in the external
diff --git a/storybook/preview.js b/storybook/preview.js
index a8f3f4f0e867c6..43e36fdc8782fc 100644
--- a/storybook/preview.js
+++ b/storybook/preview.js
@@ -29,7 +29,10 @@ export const globalTypes = {
 			items: [
 				{ value: 'none', title: 'None' },
 				{ value: 'basic', title: 'Font only' },
-				{ value: 'wordpress', title: 'WordPress (common/forms)' },
+				{
+					value: 'wordpress',
+					title: 'WordPress (common, forms, dashicons)',
+				},
 			],
 		},
 	},