@wordpress/components 19.9.0 → 19.12.0

package/src/date-time/date-time/styles.ts

@@ -0,0 +1,8 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+export const CalendarHelp = styled.div`
+	min-width: 260px;
+`;

package/src/date-time/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { default as DatePicker } from './date';
+import { default as TimePicker } from './time';
+import { default as DateTimePicker } from './date-time';
+
+export { DatePicker, TimePicker };
+export default DateTimePicker;

package/src/date-time/stories/date-time.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DateTimePicker from '../date-time';
+import { daysFromNow, isWeekend } from './utils';
+
+const meta: ComponentMeta< typeof DateTimePicker > = {
+	title: 'Components/DateTimePicker',
+	component: DateTimePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof DateTimePicker > = ( {
+	currentDate,
+	onChange,
+	...args
+} ) => {
+	const [ date, setDate ] = useState( currentDate );
+	useEffect( () => {
+		setDate( currentDate );
+	}, [ currentDate ] );
+	return (
+		<DateTimePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
+	{}
+);
+
+export const WithEvents: ComponentStory<
+	typeof DateTimePicker
+> = Template.bind( {} );
+WithEvents.args = {
+	currentDate: new Date(),
+	events: [
+		{ date: daysFromNow( 2 ) },
+		{ date: daysFromNow( 4 ) },
+		{ date: daysFromNow( 6 ) },
+		{ date: daysFromNow( 8 ) },
+	],
+};
+
+export const WithInvalidDates: ComponentStory<
+	typeof DateTimePicker
+> = Template.bind( {} );
+WithInvalidDates.args = {
+	currentDate: new Date(),
+	isInvalidDate: isWeekend,
+};

package/src/date-time/stories/date.tsx

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import DatePicker from '../date';
+import { daysFromNow, isWeekend } from './utils';
+
+const meta: ComponentMeta< typeof DatePicker > = {
+	title: 'Components/DatePicker',
+	component: DatePicker,
+	argTypes: {
+		currentDate: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof DatePicker > = ( {
+	currentDate,
+	onChange,
+	...args
+} ) => {
+	const [ date, setDate ] = useState( currentDate );
+	useEffect( () => {
+		setDate( currentDate );
+	}, [ currentDate ] );
+	return (
+		<DatePicker
+			{ ...args }
+			currentDate={ date }
+			onChange={ ( newDate ) => {
+				setDate( newDate );
+				onChange?.( newDate );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof DatePicker > = Template.bind( {} );
+
+export const WithEvents: ComponentStory< typeof DatePicker > = Template.bind(
+	{}
+);
+WithEvents.args = {
+	currentDate: new Date(),
+	events: [
+		{ date: daysFromNow( 2 ) },
+		{ date: daysFromNow( 4 ) },
+		{ date: daysFromNow( 6 ) },
+		{ date: daysFromNow( 8 ) },
+	],
+};
+
+export const WithInvalidDates: ComponentStory<
+	typeof DatePicker
+> = Template.bind( {} );
+WithInvalidDates.args = {
+	currentDate: new Date(),
+	isInvalidDate: isWeekend,
+};

package/src/date-time/stories/time.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TimePicker from '../time';
+
+const meta: ComponentMeta< typeof TimePicker > = {
+	title: 'Components/TimePicker',
+	component: TimePicker,
+	argTypes: {
+		currentTime: { control: 'date' },
+		onChange: { action: 'onChange', control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof TimePicker > = ( {
+	currentTime,
+	onChange,
+	...args
+} ) => {
+	const [ time, setTime ] = useState( currentTime );
+	useEffect( () => {
+		setTime( currentTime );
+	}, [ currentTime ] );
+	return (
+		<TimePicker
+			{ ...args }
+			currentTime={ time }
+			onChange={ ( newTime ) => {
+				setTime( newTime );
+				onChange?.( newTime );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof TimePicker > = Template.bind( {} );

package/src/date-time/stories/utils.ts

@@ -0,0 +1,9 @@
+export function daysFromNow( days: number ) {
+	const date = new Date();
+	date.setDate( date.getDate() + days );
+	return date;
+}
+
+export function isWeekend( date: Date ) {
+	return date.getDay() === 0 || date.getDay() === 6;
+}

package/src/date-time/style.scss

@@ -1,262 +1 @@
-@import "./datepicker";
-
-.components-datetime {
-	// This padding is leveraged when the component is used alone,
-	// usually inside popovers.
-	padding: $grid-unit-20;
-
-	// This rule removes the padding when used inside a panel.
-	.components-panel__body & {
-		padding: 0;
-	}
-
-	.components-datetime__calendar-help {
-		padding: $grid-unit-20;
-		min-width: 260px;
-
-		h4 {
-			margin: 0;
-		}
-	}
-
-	.components-datetime__buttons {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.components-datetime__date-help-toggle {
-		display: block;
-		margin-left: auto;
-	}
-
-	fieldset {
-		border: 0;
-		padding: 0;
-		margin: 0;
-	}
-
-	select,
-	input {
-		@include input-style__neutral();
-	}
-
-	// Override inherited conflicting styles to be consistent.
-	select,
-	input[type="number"],
-	.components-button {
-		height: 30px;
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-
-	.components-button:focus {
-		z-index: z-index(".components-button {:focus or .is-primary}");
-	}
-}
-
-.components-datetime__date {
-	min-height: 236px;
-	border-top: 1px solid $gray-300;
-
-	// Override external DatePicker styles.
-	.DayPickerNavigation_leftButton__horizontalDefault {
-		/*!rtl:begin:ignore*/
-		left: 13px;
-		/*!rtl:end:ignore*/
-	}
-
-	.CalendarMonth_caption {
-		font-size: $default-font-size;
-	}
-
-	// Seperate borders so that border respect border radius
-	.CalendarMonth_table {
-		border-collapse: separate;
-		border-spacing: 2px;
-	}
-
-	.CalendarDay {
-		font-size: $default-font-size;
-		border: none;
-		border-radius: $radius-round;
-		text-align: center;
-
-		&:focus {
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 #{ $border-width-focus + $border-width } $white;
-			outline: 2px solid transparent; // Shown in Windows 10 high contrast mode.
-		}
-	}
-
-	.CalendarDay__selected {
-		background: var(--wp-admin-theme-color);
-		border: 2px solid transparent; // This indicates selection in Windows 10 high contrast mode.
-
-		&:hover {
-			background: var(--wp-admin-theme-color-darker-20);
-		}
-
-		&:focus {
-			box-shadow: inset 0 0 0 $border-width $white;
-		}
-	}
-
-	.DayPickerNavigation_button__horizontalDefault {
-		padding: 2px 8px;
-		top: 20px;
-
-		&:focus {
-			@include input-style__focus();
-		}
-	}
-
-	.DayPicker_weekHeader {
-		top: 50px;
-		.DayPicker_weekHeader_ul {
-			margin: 1px;
-			padding-left: 0;
-			padding-right: 0;
-		}
-	}
-
-	&.is-description-visible .DayPicker {
-		visibility: hidden;
-	}
-}
-
-.components-datetime__date .CalendarDay .components-datetime__date__day {
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-content: center;
-	flex-direction: column;
-	position: relative;
-
-	&.has-events::before {
-		content: " ";
-		width: 4px;
-		height: 4px;
-		border-radius: 2px;
-		position: absolute;
-		left: 50%;
-		margin-left: -2px;
-		bottom: 0;
-		background-color: $white;
-	}
-}
-
-.components-datetime__date .CalendarDay:not(.CalendarDay__selected) .components-datetime__date__day.has-events::before {
-	background: var(--wp-admin-theme-color);
-}
-
-.components-datetime__time {
-	padding-bottom: $grid-unit-20;
-
-	fieldset {
-		position: relative;
-		margin-bottom: 0.5em;
-	}
-
-	fieldset + fieldset {
-		margin-bottom: 0;
-	}
-
-	.components-datetime__time-field-am-pm fieldset {
-		margin-top: 0;
-	}
-
-	.components-datetime__time-wrapper {
-		display: flex;
-
-		.components-datetime__time-separator {
-			display: inline-block;
-			padding: 0 3px 0 0;
-		}
-
-		.components-datetime__time-field {
-
-			&-time {
-				/*rtl:ignore*/
-				direction: ltr;
-			}
-
-			select {
-				margin-right: $grid-unit-05;
-
-				&:focus {
-					position: relative;
-					z-index: 1;
-				}
-			}
-
-			input[type="number"] {
-				padding: 2px;
-				margin-right: $grid-unit-05;
-				text-align: center;
-				-moz-appearance: textfield;
-
-				&:focus {
-					position: relative;
-					z-index: 1;
-				}
-
-				&::-webkit-inner-spin-button {
-					-webkit-appearance: none;
-					margin: 0;
-				}
-			}
-		}
-	}
-
-	// Makes the month appear before the day if time format uses AM/PM
-	// We are assuming MM-DD-YYY correlates with AM/PM
-	&.is-12-hour {
-		.components-datetime__time-field-day input {
-			margin: 0 -$grid-unit-05 0 0 !important;
-			border-radius: $radius-block-ui 0 0 $radius-block-ui !important;
-		}
-		.components-datetime__time-field-year input {
-			border-radius: 0 $radius-block-ui $radius-block-ui 0 !important;
-		}
-	}
-}
-
-.components-datetime__timezone {
-	line-height: 30px;
-	margin-left: $grid-unit-05;
-	text-decoration: underline dotted;
-}
-
-.components-datetime__time-legend {
-	font-weight: 600;
-	margin-top: 0.5em;
-
-	&.invisible {
-		position: absolute;
-		top: -999em;
-		left: -999em;
-	}
-}
-
-.components-datetime__time-field-integer-field {
-	font-family: inherit;
-}
-
-.components-datetime__time-field-hours-input,
-.components-datetime__time-field-minutes-input,
-.components-datetime__time-field-day-input {
-	width: 35px;
-}
-
-.components-datetime__time-field-year-input {
-	width: 55px;
-}
-
-.components-datetime__time-field-month-select {
-	max-width: 145px;
-}
-
-// Hack to center the datepicker component within the popover.
-// It sets its own styles so centering is tricky.
-.components-popover .components-datetime__date {
-	padding-left: $grid-unit-05;
-}
+@import "./date/style.scss";