@wordpress/components 38.0.0 → 39.0.0

package/src/calendar/style.scss

@@ -1,440 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "../utils/theme-variables" as *;
-
-/* 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: $grid-unit-40;
-$wp-components-calendar-button-width: $grid-unit-40;
-$wp-components-calendar-nav-height: $grid-unit-40;
-$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: $components-color-foreground;
-	background-color: $components-color-background;
-	font-size: $font-size-medium;
-	font-weight: var(--wpds-typography-font-weight-default);
-	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) {
-		// Use a lighter shade of gray for less visual prominence.
-		color: $components-color-gray-400;
-	}
-	&: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: var(--wpds-cursor-control);
-	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: $radius-small;
-
-	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: $radius-small;
-	}
-
-	// 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: $radius-small;
-	background: none;
-	padding: 0;
-	margin: 0;
-	cursor: var(--wpds-cursor-control);
-	appearance: none;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-
-	width: $wp-components-calendar-button-width;
-	height: $wp-components-calendar-button-height;
-
-	color: inherit;
-
-	&:disabled,
-	&[aria-disabled="true"] {
-		cursor: revert;
-
-		color: $components-color-disabled;
-	}
-
-	&:focus-visible {
-		outline: $wp-components-calendar-outline-focus;
-	}
-}
-
-.components-calendar__chevron {
-	display: inline-block;
-	fill: currentColor;
-	width: $grid-unit-20;
-	height: $grid-unit-20;
-}
-
-.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: $grid-unit-15;
-}
-
-.components-calendar__months {
-	position: relative;
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
-	gap: $grid-unit-20;
-	max-width: fit-content;
-}
-
-.components-calendar__month-grid {
-	border-collapse: separate;
-	border-spacing: 0 $grid-unit-05;
-}
-
-.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: $components-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: $components-color-foreground-inverted;
-	}
-
-	.components-calendar__day-button {
-		&::before {
-			background-color: $components-color-foreground;
-			// 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: $components-color-gray-400;
-		}
-
-		&:hover:not(:disabled)::before {
-			background-color: $components-color-gray-800;
-		}
-	}
-}
-
-// Outside month days (visible when showOutsideDays is true): use a lighter text color.
-.components-calendar__day--outside {
-	color: $components-color-gray-600;
-}
-
-// 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

@@ -1,56 +0,0 @@
-/**
- * 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,
-	} );