Remove `woocommerce/experimental` dependency from `woocommerce/components` (https://github.com/woocommerce/woocommerce-admin/pull/6986)

* Removed the experimental dependency from the components package, and moved stories to experimental package

* Add changelog

* Fix typo

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -10,6 +10,7 @@
 -   Add `controlId` and `name` props to `<SearchListItem>`. #6871
 -   Minor styling tweaks and fixes to `<SearchListcontrol>`. #6871
 -   Fix `autocompleter` for custom Search in `FilterPicker` #6880
+-   Remove `woocommerce/experimental` dependency. #6986
 
 # 6.1.2
 

plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js

@@ -23,13 +23,13 @@ import {
 	getQueryFromActiveFilters,
 	getHistory,
 } from '@woocommerce/navigation';
-import { Text } from '@woocommerce/experimental';
 
 /**
  * Internal dependencies
  */
 import Link from '../link';
 import AdvancedFilterItem from './item';
+import { Text } from '../experimental';
 
 const matches = [
 	{ value: 'all', label: __( 'All', 'woocommerce-admin' ) },

plugins/woocommerce-admin/packages/components/src/compare-filter/index.js

@@ -12,7 +12,6 @@ import {
 } from '@wordpress/components';
 import { isEqual, isFunction } from 'lodash';
 import PropTypes from 'prop-types';
-import { Text } from '@woocommerce/experimental';
 import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
 
 /**
@@ -20,6 +19,7 @@ import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation';
  */
 import CompareButton from './button';
 import Search from '../search';
+import { Text } from '../experimental';
 
 export { default as CompareButton } from './button';
 

plugins/woocommerce-admin/packages/components/src/experimental.js

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import {
+	__experimentalText,
+	Text as TextComponent,
+} from '@wordpress/components';
+
+/**
+ * Export experimental components within the components package to prevent a circular
+ * dependency with woocommerce/experimental. Only for internal use.
+ */
+export const Text = TextComponent || __experimentalText;

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

@@ -4,10 +4,15 @@
 import Gridicon from 'gridicons';
 import { withConsole } from '@storybook/addon-console';
 import {
-	List as ExperimentalList,
+	Title,
-	ListItem as ExperimentalListItem,
+	Subtitle,
-	CollapsibleList as ExperimentalCollapsibleList,
+	Description,
-} from '@woocommerce/experimental';
+	Primary,
+	ArgsTable,
+	Stories,
+	PRIMARY_STORY,
+} from '@storybook/addon-docs/blocks';
+import { withLinks } from '@storybook/addon-links';
 
 /**
  * Internal dependencies
@@ -35,7 +40,32 @@ function logItemClick( event ) {
 export default {
 	title: 'WooCommerce Admin/components/List',
 	component: List,
-	decorators: [ ( storyFn, context ) => withConsole()( storyFn )( context ) ],
+	decorators: [
+		( storyFn, context ) => withConsole()( storyFn )( context ),
+		withLinks,
+	],
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Subtitle />
+					<Description
+						markdown={ `[deprecated] and will be replaced by
+						<a
+							data-sb-kind="woocommerce-admin-experimental-list"
+							data-sb-story="default"
+						>
+							ExperimentalList
+						</a>` }
+					/>
+					<Primary />
+					<ArgsTable story={ PRIMARY_STORY } />
+					<Stories />
+				</>
+			),
+		},
+	},
 };
 
 export const Default = () => {
@@ -146,67 +176,3 @@ export const CustomStyleAndTags = () => {
 };
 
 CustomStyleAndTags.storyName = 'Custom style and tags (deprecated)';
-
-export const ExperimentalListExample = () => {
-	return (
-		<ExperimentalList>
-			<ExperimentalListItem disableGutters onClick={ () => {} }>
-				<div>Without gutters no padding is added to the list item.</div>
-			</ExperimentalListItem>
-			<ExperimentalListItem onClick={ () => {} }>
-				<div>Any markup can go here.</div>
-			</ExperimentalListItem>
-			<ExperimentalListItem onClick={ () => {} }>
-				<div>Any markup can go here.</div>
-			</ExperimentalListItem>
-			<ExperimentalListItem onClick={ () => {} }>
-				<div>Any markup can go here.</div>
-			</ExperimentalListItem>
-		</ExperimentalList>
-	);
-};
-
-ExperimentalListExample.storyName = 'ExperimentalList / ExperimentalListItem.';
-
-export const ExperimentalCollapsibleListExample = () => {
-	return (
-		<ExperimentalCollapsibleList
-			collapseLabel="Show less"
-			expandLabel="Show more items"
-			show={ 2 }
-			onCollapse={ () => {
-				// eslint-disable-next-line no-console
-				console.log( 'collapsed' );
-			} }
-			onExpand={ () => {
-				// eslint-disable-next-line no-console
-				console.log( 'expanded' );
-			} }
-		>
-			<ExperimentalListItem onClick={ () => {} }>
-				<div>Any markup can go here.</div>
-			</ExperimentalListItem>
-			<ExperimentalListItem onClick={ () => {} }>
-				<div>Any markup can go here.</div>
-			</ExperimentalListItem>
-			<ExperimentalListItem onClick={ () => {} }>
-				<div>
-					Any markup can go here.
-					<br />
-					Bigger task item
-					<br />
-					Another line
-				</div>
-			</ExperimentalListItem>
-			<ExperimentalListItem onClick={ () => {} }>
-				<div>Any markup can go here.</div>
-			</ExperimentalListItem>
-			<ExperimentalListItem onClick={ () => {} }>
-				<div>Any markup can go here.</div>
-			</ExperimentalListItem>
-		</ExperimentalCollapsibleList>
-	);
-};
-
-ExperimentalCollapsibleListExample.storyName =
-	'ExperimentalList with ExperimentalCollapsibleListItem.';

plugins/woocommerce-admin/packages/components/src/pill/pill.js

@@ -1,7 +1,7 @@
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { Text } from '@woocommerce/experimental';
+import { Text } from '../experimental';
 
 export function Pill( { children } ) {
 	return (

plugins/woocommerce-admin/packages/components/src/summary/number.js

@@ -7,12 +7,12 @@ import classnames from 'classnames';
 import ChevronDownIcon from 'gridicons/dist/chevron-down';
 import { isNil, noop } from 'lodash';
 import PropTypes from 'prop-types';
-import { Text } from '@woocommerce/experimental';
 
 /**
  * Internal dependencies
  */
 import Link from '../link';
+import { Text } from '../experimental';
 
 /**
  * A component to show a value, label, and optionally a change percentage and children node. Can also act as a link to a specific report focus.

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

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { withConsole } from '@storybook/addon-console';
+/**
+ * Internal dependencies
+ */
+import { List, ListItem, CollapsibleList } from '../../';
+import './style.scss';
+
+export default {
+	title: 'WooCommerce Admin/experimental/List',
+	component: List,
+	decorators: [ ( storyFn, context ) => withConsole()( storyFn )( context ) ],
+};
+
+export const Default = () => {
+	return (
+		<List>
+			<ListItem disableGutters onClick={ () => {} }>
+				<div>Without gutters no padding is added to the list item.</div>
+			</ListItem>
+			<ListItem onClick={ () => {} }>
+				<div>Any markup can go here.</div>
+			</ListItem>
+			<ListItem onClick={ () => {} }>
+				<div>Any markup can go here.</div>
+			</ListItem>
+			<ListItem onClick={ () => {} }>
+				<div>Any markup can go here.</div>
+			</ListItem>
+		</List>
+	);
+};
+
+Default.storyName = 'List / ListItem.';
+
+export const CollapsibleListExample = () => {
+	return (
+		<CollapsibleList
+			collapseLabel="Show less"
+			expandLabel="Show more items"
+			show={ 2 }
+			onCollapse={ () => {
+				// eslint-disable-next-line no-console
+				console.log( 'collapsed' );
+			} }
+			onExpand={ () => {
+				// eslint-disable-next-line no-console
+				console.log( 'expanded' );
+			} }
+		>
+			<ListItem onClick={ () => {} }>
+				<div>Any markup can go here.</div>
+			</ListItem>
+			<ListItem onClick={ () => {} }>
+				<div>Any markup can go here.</div>
+			</ListItem>
+			<ListItem onClick={ () => {} }>
+				<div>
+					Any markup can go here.
+					<br />
+					Bigger task item
+					<br />
+					Another line
+				</div>
+			</ListItem>
+			<ListItem onClick={ () => {} }>
+				<div>Any markup can go here.</div>
+			</ListItem>
+			<ListItem onClick={ () => {} }>
+				<div>Any markup can go here.</div>
+			</ListItem>
+		</CollapsibleList>
+	);
+};
+
+CollapsibleListExample.storyName = 'List with CollapsibleListItem.';

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

@@ -0,0 +1,11 @@
+.storybook-custom-list {
+	border: 1px solid $gray-400;
+	border-radius: 2px;
+	padding: 0;
+
+	.woocommerce-list__item {
+		&:not(:first-child) {
+			border-top: 1px solid $gray-200;
+		}
+	}
+}

plugins/woocommerce-admin/storybook/main.js

@@ -2,6 +2,8 @@ module.exports = {
 	stories: [
 		// WooCommerce Admin / @woocommerce/components components
 		'../packages/components/src/**/stories/*.js',
+		// WooCommerce Admin / @woocommerce/experimental components
+		'../packages/experimental/src/**/stories/*.js',
 		'../client/**/stories/*.js',
 	],
 	addons: [

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

@@ -18,6 +18,7 @@ const wcAdminPackages = [
 	'number',
 	'data',
 	'tracks',
+	'experimental',
 ];
 
 module.exports = ( { config: storybookConfig } ) => {