From 229d54b2dff8903e857e380e4320fb0abdee059c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Greg=20Zi=C3=B3=C5=82kowski?= <grzegorz@gziolo.pl>
Date: Fri, 18 Dec 2020 08:39:06 +0100
Subject: [PATCH] Storybook: Fix broken import statements for DateTime
 component (#27794)

---
 .../components/src/date-time/stories/index.js | 37 ++++++++++++-
 .../stories/with-days-highlighted.js          | 52 -------------------
 2 files changed, 35 insertions(+), 54 deletions(-)
 delete mode 100644 packages/components/src/date-time/stories/with-days-highlighted.js

diff --git a/packages/components/src/date-time/stories/index.js b/packages/components/src/date-time/stories/index.js
index 1fa91a6470859..e929e9ab99955 100644
--- a/packages/components/src/date-time/stories/index.js
+++ b/packages/components/src/date-time/stories/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, button } from '@storybook/addon-knobs';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { DateTimePicker } from '../';
+import DateTimePicker from '../';
 
 export default {
 	title: 'Components/DateTimePicker',
@@ -34,3 +34,36 @@ export const _default = () => {
 	const is12Hour = boolean( 'Is 12 hour (shows AM/PM)', false );
 	return <DateTimePickerWithState is12Hour={ is12Hour } />;
 };
+
+// Date utils, for demo purposes.
+const DAY_IN_MS = 24 * 60 * 60 * 1000;
+const aFewDaysAfter = ( date ) => {
+	// eslint-disable-next-line no-restricted-syntax
+	return new Date( date.getTime() + ( 1 + Math.random() * 5 ) * DAY_IN_MS );
+};
+
+const now = new Date();
+
+export const WithDaysHighlighted = () => {
+	const [ date, setDate ] = useState( now );
+
+	const [ highlights, setHighlights ] = useState( [
+		{ date: aFewDaysAfter( now ) },
+	] );
+
+	button( 'Add random highlight', () => {
+		const lastHighlight = highlights[ highlights.length - 1 ];
+		setHighlights( [
+			...highlights,
+			{ date: aFewDaysAfter( lastHighlight.date ) },
+		] );
+	} );
+
+	return (
+		<DateTimePicker
+			currentDate={ date }
+			onChange={ setDate }
+			events={ highlights }
+		/>
+	);
+};
diff --git a/packages/components/src/date-time/stories/with-days-highlighted.js b/packages/components/src/date-time/stories/with-days-highlighted.js
deleted file mode 100644
index 81838bea51838..0000000000000
--- a/packages/components/src/date-time/stories/with-days-highlighted.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { button } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { DateTimePicker } from '..';
-
-export default {
-	title: 'Components/DateTimePicker',
-	component: DateTimePicker,
-};
-
-// Date utils, for demo purposes.
-const DAY_IN_MS = 24 * 60 * 60 * 1000;
-const aFewDaysAfter = ( date ) => {
-	// eslint-disable-next-line no-restricted-syntax
-	return new Date( date.getTime() + ( 1 + Math.random() * 5 ) * DAY_IN_MS );
-};
-
-const now = new Date();
-
-export const WithDaysHighlighted = () => {
-	const [ date, setDate ] = useState( now );
-
-	const [ highlights, setHighlights ] = useState( [
-		{ date: aFewDaysAfter( now ) },
-	] );
-
-	button( 'Add random highlight', () => {
-		const lastHighlight = highlights[ highlights.length - 1 ];
-		setHighlights( [
-			...highlights,
-			{ date: aFewDaysAfter( lastHighlight.date ) },
-		] );
-	} );
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			events={ highlights }
-		/>
-	);
-};