@wordpress/components 29.11.0 → 29.13.1-next.719a03cbe.0

package/src/calendar/stories/date-range-calendar.story.tsx

@@ -0,0 +1,230 @@
+/**
+ * External dependencies
+ */
+import { fn } from '@storybook/test';
+import {
+	enUS,
+	fr,
+	es,
+	de,
+	it,
+	he,
+	ru,
+	ja,
+	ptBR,
+	nl,
+	ko,
+	tr,
+	id,
+	zhCN,
+	zhTW,
+	ar,
+	sv,
+} from 'date-fns/locale';
+import type { Meta, StoryObj } from '@storybook/react';
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { DateRangeCalendar, TZDate } from '..';
+
+const meta: Meta< typeof DateRangeCalendar > = {
+	title: 'Components/Selection & Input/Time & Date/DateRangeCalendar',
+	component: DateRangeCalendar,
+	argTypes: {
+		locale: {
+			options: [
+				'English (US)',
+				'French',
+				'Spanish',
+				'German',
+				'Italian',
+				'Hebrew',
+				'Russian',
+				'Japanese',
+				'Portuguese (Brazil)',
+				'Dutch',
+				'Korean',
+				'Turkish',
+				'Indonesian',
+				'Chinese (Simplified)',
+				'Chinese (Traditional)',
+				'Arabic',
+				'Swedish',
+			],
+			mapping: {
+				'English (US)': enUS,
+				French: fr,
+				Spanish: es,
+				German: de,
+				Italian: it,
+				Hebrew: he,
+				Russian: ru,
+				Japanese: ja,
+				'Portuguese (Brazil)': ptBR,
+				Dutch: nl,
+				Korean: ko,
+				Turkish: tr,
+				Indonesian: id,
+				'Chinese (Simplified)': zhCN,
+				'Chinese (Traditional)': zhTW,
+				Arabic: ar,
+				Swedish: sv,
+			},
+			control: 'select',
+		},
+		timeZone: {
+			options: [
+				'Pacific/Honolulu',
+				'America/New_York',
+				'Europe/London',
+				'Asia/Tokyo',
+				'Pacific/Auckland',
+			],
+			control: 'select',
+		},
+		labels: {
+			control: false,
+		},
+		defaultSelected: { control: false },
+		selected: { control: false },
+		onSelect: {
+			control: false,
+		},
+		defaultMonth: { control: 'date' },
+		month: { control: 'date' },
+		onMonthChange: {
+			control: false,
+		},
+		endMonth: { control: 'date' },
+		startMonth: { control: 'date' },
+	},
+	args: {
+		onMonthChange: fn(),
+		onSelect: fn(),
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof DateRangeCalendar >;
+
+export const Default: Story = {};
+
+export const DisabledDates: Story = {
+	args: {
+		disabled: [
+			// Disable tomorrow (single date)
+			new Date( new Date().setDate( new Date().getDate() + 1 ) ),
+			// Disable all dates after Feb 1st of next year
+			{ after: new Date( new Date().getFullYear() + 1, 1, 1 ) },
+			// Disable all dates before Dec 1st of last year
+			{ before: new Date( new Date().getFullYear() - 1, 11, 1 ) },
+			// Disable all dates between 12th and 14th of August of this year
+			{
+				after: new Date( new Date().getFullYear(), 7, 11 ),
+				before: new Date( new Date().getFullYear(), 7, 15 ),
+			},
+			// Disable all dates between 21st and 26th of October of this year
+			{
+				from: new Date( new Date().getFullYear(), 9, 21 ),
+				to: new Date( new Date().getFullYear(), 9, 26 ),
+			},
+			// Disable all Wednesdays
+			{ dayOfWeek: 3 },
+			// Disable all prime day numbers
+			function isPrimeDate( date: Date ) {
+				return [ 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31 ].includes(
+					date.getDate()
+				);
+			},
+		],
+	},
+};
+
+const nextMonth = new Date().getMonth() === 11 ? 0 : new Date().getMonth() + 1;
+const nextMonthYear =
+	new Date().getMonth() === 11
+		? new Date().getFullYear() + 1
+		: new Date().getFullYear();
+const firstDayOfNextMonth = new Date( nextMonthYear, nextMonth, 1 );
+const fourthDayOfNextMonth = new Date( nextMonthYear, nextMonth, 4 );
+export const WithSelectedRangeAndMonth: Story = {
+	args: {
+		defaultSelected: {
+			from: firstDayOfNextMonth,
+			to: fourthDayOfNextMonth,
+		},
+		defaultMonth: firstDayOfNextMonth,
+	},
+};
+
+/**
+ * When working with time zones, use the `TZDate` object exported by this package instead of the native `Date` object.
+ */
+export const WithTimeZone: Story = {
+	render: function DateCalendarWithTimeZone( args ) {
+		const [ range, setRange ] = useState< typeof args.selected | null >(
+			null
+		);
+
+		useEffect( () => {
+			setRange(
+				// Select from one week from today to two weeks from today
+				// every time the timezone changes.
+				{
+					from: new TZDate(
+						new Date().setDate( new Date().getDate() + 7 ),
+						args.timeZone
+					),
+					to: new TZDate(
+						new Date().setDate( new Date().getDate() + 14 ),
+						args.timeZone
+					),
+				}
+			);
+		}, [ args.timeZone ] );
+
+		return (
+			<>
+				<DateRangeCalendar
+					{ ...args }
+					selected={ range }
+					onSelect={ ( selectedDate, ...rest ) => {
+						setRange(
+							// Set controlled state to null if there's no selection
+							! selectedDate ||
+								( selectedDate.from === undefined &&
+									selectedDate.to === undefined )
+								? null
+								: selectedDate
+						);
+						args.onSelect?.( selectedDate, ...rest );
+					} }
+					disabled={ [
+						{
+							// Disable any date before today
+							before: new TZDate( new Date(), args.timeZone ),
+						},
+					] }
+				/>
+				<p>
+					Calendar set to { args.timeZone ?? 'current' } timezone,
+					disabling selection for all dates before today, and starting
+					with a default date range of 1 week from today to 2 weeks
+					from today.
+				</p>
+			</>
+		);
+	},
+	args: {
+		timeZone: 'Pacific/Auckland',
+	},
+	argTypes: {
+		disabled: {
+			control: false,
+		},
+	},
+};

package/src/calendar/style.scss

@@ -0,0 +1,431 @@
+/* Root of the component. */
+// Internal variables
+$wp-components-calendar-outline-focus: var(--wp-admin-border-width-focus) solid $components-color-accent;
+$wp-components-calendar-button-height: 2rem;
+$wp-components-calendar-button-width: 2rem;
+$wp-components-calendar-nav-height: 2rem;
+$wp-components-calendar-range-middle-background-color: color-mix(in srgb, $components-color-accent 4%, transparent);
+$wp-components-calendar-preview-border-color: color-mix(in srgb, $components-color-accent 16%, transparent);
+
+.components-calendar {
+	// TODO: add font family rule when Theme is ready
+
+	position: relative; /* Required to position the navigation toolbar. */
+	box-sizing: border-box;
+	display: inline flow-root;
+	color: $gray-900;
+	background-color: $white;
+	font-size: 13px;
+	font-weight: 400;
+	z-index: 0; // Create a stacking context and render on top of the background.
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+}
+
+.components-calendar__day {
+	padding: 0;
+	position: relative;
+
+	// Setting text color on the day container instead of directly on the
+	// day button to ensure that the color of the dot used to indicate today's
+	// date follows the same color as the button's text, since the button
+	// inherits its text color.
+	&:has(.components-calendar__day-button:disabled) {
+		color: $gray-600;
+	}
+	&:has(.components-calendar__day-button:hover:not(:disabled)),
+	&:has(.components-calendar__day-button:focus-visible) {
+		color: $components-color-accent;
+	}
+}
+
+.components-calendar__day-button {
+	background: none;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	position: relative;
+
+	width: $wp-components-calendar-button-width;
+	height: $wp-components-calendar-button-height;
+
+	border: none;
+	border-radius: 2px;
+
+	font: inherit;
+	font-variant-numeric: tabular-nums;
+	color: inherit;
+
+	// Use the button's ::before to render date's background, which keeps the
+	// border-radius of the button intact. This technique allows the focus ring
+	// to have rounded corners even when the background needs square corners
+	// (eg. in the middle of a date range).
+	&::before {
+		content: "";
+		position: absolute;
+		z-index: -1;
+		inset: 0;
+		border: none; // No default border to avoid polluting high-contrast mode.
+		border-radius: 2px;
+	}
+
+	// Use the button's ::after to show the selection preview.
+	&::after {
+		content: "";
+		position: absolute;
+		z-index: 1;
+		inset: 0;
+		pointer-events: none;
+	}
+
+	&:disabled {
+		cursor: revert;
+
+		@media ( forced-colors: active ) {
+			// As an extra visual cue, show a line-through on disabled days
+			// in forced-colors (high-contrast) mode.
+			text-decoration: line-through;
+		}
+	}
+
+	&:focus-visible {
+		outline: $wp-components-calendar-outline-focus;
+		outline-offset: 1px;
+	}
+}
+
+.components-calendar__caption-label {
+	z-index: 1;
+
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+
+	white-space: nowrap;
+	border: 0;
+
+	text-transform: capitalize;
+}
+
+.components-calendar__button-next,
+.components-calendar__button-previous {
+	border: none;
+	border-radius: 2px;
+	background: none;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	appearance: none;
+
+	width: $wp-components-calendar-button-width;
+	height: $wp-components-calendar-button-height;
+
+	color: inherit;
+
+	&:disabled,
+	&[aria-disabled="true"] {
+		cursor: revert;
+
+		color: $gray-600;
+	}
+
+	&:focus-visible {
+		outline: $wp-components-calendar-outline-focus;
+	}
+}
+
+.components-calendar__chevron {
+	display: inline-block;
+	fill: currentColor;
+	width: 16px;
+	height: 16px;
+}
+
+.components-calendar[dir="rtl"]
+.components-calendar__nav
+.components-calendar__chevron {
+	transform: rotate(180deg);
+	transform-origin: 50%;
+}
+
+.components-calendar__month-caption {
+	display: flex;
+	justify-content: center;
+	align-content: center;
+
+	height: $wp-components-calendar-nav-height;
+	margin-bottom: 12px;
+}
+
+.components-calendar__months {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 1rem;
+	max-width: fit-content;
+}
+
+.components-calendar__month-grid {
+	border-collapse: separate;
+	border-spacing: 0 4px;
+}
+
+.components-calendar__nav {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	inset-inline-end: 0;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	height: $wp-components-calendar-nav-height;
+}
+
+.components-calendar__weekday {
+	width: $wp-components-calendar-button-width;
+	height: $wp-components-calendar-button-height;
+	padding: 0;
+
+	color: $gray-700;
+	text-align: center;
+	text-transform: uppercase;
+}
+
+/* DAY MODIFIERS */
+// Today's date: show a dot in the top-right corner of the button
+.components-calendar__day--today::after {
+	content: "";
+	position: absolute;
+	z-index: 1;
+	inset-block-start: 2px;
+	inset-inline-end: 2px;
+	width: 0;
+	height: 0;
+	border-radius: 50%;
+	border: 2px solid currentColor;
+}
+
+// Selected date button (individual date, range start, and range end)
+.components-calendar__day--selected:not(.components-calendar__range-middle) {
+	&:has(
+	.components-calendar__day-button,
+	.components-calendar__day-button:hover:not(:disabled)
+) {
+		color: $white;
+	}
+
+	.components-calendar__day-button {
+		&::before {
+			background-color: $gray-900;
+			// Render a transparent border to highlight the selected day in
+			// forced-colors (high-contrast) mode, since the background is not
+			// visible.
+			border: 1px solid transparent;
+		}
+
+		&:disabled::before {
+			background-color: $gray-600;
+		}
+
+		&:hover:not(:disabled)::before {
+			background-color: $gray-800;
+		}
+	}
+}
+
+// Hidden button (ie. outside current month but still rendered)
+.components-calendar__day--hidden {
+	visibility: hidden;
+}
+
+// Range start button, but not when start and end are the same day.
+.components-calendar__range-start:not(.components-calendar__range-end)
+.components-calendar__day-button {
+	// Apply border-radius changes to the button itself too, so that the focus
+	// ring follows the same shape as the button's background.
+	&,
+	&::before {
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
+}
+
+// Middle of date range
+.components-calendar__range-middle .components-calendar__day-button {
+	&::before {
+		background-color: $wp-components-calendar-range-middle-background-color;
+		border-radius: 0;
+
+		// Render a top and bottom transparent border to highlight the selected
+		// day in forced-colors (high-contrast) mode, since the background is not
+		// visible.
+		border-width: 1px 0;
+		border-color: transparent;
+		border-style: solid;
+	}
+}
+
+// Range end button, but not when start and end are the same day.
+.components-calendar__range-end:not(.components-calendar__range-start)
+.components-calendar__day-button {
+	// Apply border-radius changes to the button itself too, so that the focus
+	// ring follows the same shape as the button's background.
+	&,
+	&::before {
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
+}
+
+/*
+ * RANGE PREVIEW (range calendar only)
+ *
+ * The preview is rendered in the button's ::after pseudo-element, so that it
+ * can be rendered over the button's contents.
+ * The selection preview is shown with a dashed border. In order to have
+ * control over the dash pattern (especially the seams between days), the
+ * dashed borders are rendered as SVGs via the url() CSS function.
+ * Since SVGs rendered in the url() function don't seem to be able to access
+ * CSS variables, we're using the SVGs as masks, and using `background-color`
+ * to consume the accent color variable.
+ */
+.components-calendar__day--preview svg {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	color: $wp-components-calendar-preview-border-color;
+
+	@media ( forced-colors: active ) {
+		color: inherit;
+	}
+
+	.components-calendar[dir="rtl"] & {
+		transform: scaleX(-1);
+	}
+}
+
+.components-calendar__day--preview.components-calendar__range-middle
+.components-calendar__day-button::before {
+	// Remove the transparent border shown on the middle of the range
+	// in forced-colors (high-contrast) mode, to allow for the dashed border
+	// to be visible.
+	border: none;
+}
+
+/* ANIMATIONS */
+@keyframes slide-in-left {
+	0% {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes slide-in-right {
+	0% {
+		transform: translateX(100%);
+	}
+	100% {
+		transform: translateX(0);
+	}
+}
+
+@keyframes slide-out-left {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-100%);
+	}
+}
+
+@keyframes slide-out-right {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(100%);
+	}
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+.components-calendar__weeks-before-enter,
+.components-calendar__weeks-before-exit,
+.components-calendar__weeks-after-enter,
+.components-calendar__weeks-after-exit,
+.components-calendar__caption-after-enter,
+.components-calendar__caption-after-exit,
+.components-calendar__caption-before-enter,
+.components-calendar__caption-before-exit {
+	animation-duration: 0s;
+	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	animation-fill-mode: forwards;
+
+	@media not ( prefers-reduced-motion ) {
+		animation-duration: 0.3s;
+	}
+}
+
+.components-calendar__weeks-before-enter,
+.components-calendar[dir="rtl"] .components-calendar__weeks-after-enter {
+	animation-name: slide-in-left;
+}
+.components-calendar__weeks-before-exit,
+.components-calendar[dir="rtl"] .components-calendar__weeks-after-exit {
+	animation-name: slide-out-left;
+}
+.components-calendar__weeks-after-enter,
+.components-calendar[dir="rtl"] .components-calendar__weeks-before-enter {
+	animation-name: slide-in-right;
+}
+.components-calendar__weeks-after-exit,
+.components-calendar[dir="rtl"] .components-calendar__weeks-before-exit {
+	animation-name: slide-out-right;
+}
+
+.components-calendar__caption-after-enter {
+	animation-name: fade-in;
+}
+.components-calendar__caption-after-exit {
+	animation-name: fade-out;
+}
+.components-calendar__caption-before-enter {
+	animation-name: fade-in;
+}
+.components-calendar__caption-before-exit {
+	animation-name: fade-out;
+}

package/src/calendar/test/__utils__/index.ts

@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+
+export const monthNameFormatter = ( localeCode: string, timeZone?: string ) =>
+	new Intl.DateTimeFormat( localeCode, {
+		year: 'numeric',
+		month: 'long',
+		timeZone,
+	} );
+
+const fullDateFormatter = ( localeCode: string, timeZone?: string ) =>
+	new Intl.DateTimeFormat( localeCode, {
+		weekday: 'long',
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+		timeZone,
+	} );
+
+export const dateNumberFormatter = ( localeCode: string, timeZone?: string ) =>
+	new Intl.DateTimeFormat( localeCode, {
+		day: 'numeric',
+		timeZone,
+	} );
+
+export const getDateButton = (
+	date: Date,
+	options?: Parameters< typeof screen.getByRole >[ 1 ],
+	locale = 'en-US'
+) =>
+	screen.getByRole( 'button', {
+		name: new RegExp( fullDateFormatter( locale ).format( date ) ),
+		...options,
+	} );
+
+export const getDateCell = (
+	date: Date,
+	options?: Parameters< typeof screen.getByRole >[ 1 ],
+	locale = 'en-US'
+) =>
+	screen.getByRole( 'gridcell', {
+		name: dateNumberFormatter( locale ).format( date ),
+		...options,
+	} );
+
+export const queryDateCell = (
+	date: Date,
+	options?: Parameters< typeof screen.getByRole >[ 1 ],
+	locale = 'en-US'
+) =>
+	screen.queryByRole( 'gridcell', {
+		name: dateNumberFormatter( locale ).format( date ),
+		...options,
+	} );