initial commit

packages/woocommerce-blocks/assets/js/base/components/drawer/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Modal } from '@wordpress/components';
+import { useDebounce } from 'use-debounce';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface DrawerProps {
+	children: JSX.Element;
+	className?: string;
+	isOpen: boolean;
+	onClose: () => void;
+	slideIn?: boolean;
+	slideOut?: boolean;
+	title: string;
+}
+
+const Drawer = ( {
+	children,
+	className,
+	isOpen,
+	onClose,
+	slideIn = true,
+	slideOut = true,
+	title,
+}: DrawerProps ): JSX.Element | null => {
+	const [ debouncedIsOpen ] = useDebounce< boolean >( isOpen, 300 );
+	const isClosing = ! isOpen && debouncedIsOpen;
+
+	if ( ! isOpen && ! isClosing ) {
+		return null;
+	}
+
+	return (
+		<Modal
+			title={ title }
+			focusOnMount={ true }
+			onRequestClose={ onClose }
+			className={ classNames( className, 'wc-block-components-drawer' ) }
+			overlayClassName={ classNames(
+				'wc-block-components-drawer__screen-overlay',
+				{
+					'wc-block-components-drawer__screen-overlay--is-hidden': ! isOpen,
+					'wc-block-components-drawer__screen-overlay--with-slide-in': slideIn,
+					'wc-block-components-drawer__screen-overlay--with-slide-out': slideOut,
+				}
+			) }
+			closeButtonLabel={ __(
+				'Close mini cart',
+				'woo-gutenberg-products-block'
+			) }
+		>
+			{ children }
+		</Modal>
+	);
+};
+
+export default Drawer;

packages/woocommerce-blocks/assets/js/base/components/drawer/style.scss

@@ -0,0 +1,139 @@
+$drawer-animation-duration: 0.3s;
+$drawer-width: 480px;
+$drawer-width-mobile: 100vw;
+
+@keyframes fadein {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes slidein {
+	from {
+		transform: translateX(0);
+	}
+
+	to {
+		transform: translateX(-$drawer-width);
+	}
+}
+
+@media only screen and (max-width: 480px) {
+	@keyframes slidein {
+		from {
+			transform: translateX(0);
+		}
+
+		to {
+			transform: translateX(-$drawer-width-mobile);
+		}
+	}
+}
+
+.wc-block-components-drawer__screen-overlay {
+	background-color: rgba(95, 95, 95, 0.35);
+	bottom: 0;
+	left: 0;
+	position: fixed;
+	right: 0;
+	top: 0;
+	transition: opacity $drawer-animation-duration;
+	z-index: 999;
+	opacity: 1;
+}
+
+.wc-block-components-drawer__screen-overlay--with-slide-out {
+	transition: opacity $drawer-animation-duration;
+}
+
+// We can't use transition for the slide-in animation because the element
+// doesn't exist in the DOM when not open. Instead, use an animation that
+// is triggered when the element is appended to the DOM.
+.wc-block-components-drawer__screen-overlay--with-slide-in {
+	animation-duration: $drawer-animation-duration;
+	animation-name: fadein;
+}
+
+.wc-block-components-drawer__screen-overlay--is-hidden {
+	pointer-events: none;
+	opacity: 0;
+}
+
+.wc-block-components-drawer {
+	@include with-translucent-border(0 0 0 1px);
+	background: #fff;
+	display: block;
+	height: 100%;
+	left: 100%;
+	overflow: auto;
+	position: fixed;
+	right: 0;
+	top: 0;
+	transform: translateX(-$drawer-width);
+	width: $drawer-width;
+
+	@media only screen and (max-width: 480px) {
+		transform: translateX(-$drawer-width-mobile);
+		width: $drawer-width-mobile;
+	}
+}
+
+.wc-block-components-drawer__screen-overlay--with-slide-out .wc-block-components-drawer {
+	transition: transform $drawer-animation-duration;
+}
+
+.wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-components-drawer {
+	animation-duration: $drawer-animation-duration;
+	animation-name: slidein;
+}
+
+.wc-block-components-drawer__screen-overlay--is-hidden .wc-block-components-drawer {
+	transform: translateX(0);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+	.wc-block-components-drawer__screen-overlay {
+		animation-name: none !important;
+		transition: none !important;
+	}
+	.wc-block-components-drawer {
+		animation-name: none !important;
+		transition: none !important;
+	}
+}
+
+.wc-block-components-drawer .components-modal__content {
+	padding: $gap-largest $gap;
+}
+
+.wc-block-components-drawer .components-modal__header {
+	position: relative;
+
+	// Close button.
+	.components-button {
+		@include reset-box();
+		background: transparent;
+		position: absolute;
+		right: 0;
+		top: 0;
+		// Increase clickable area.
+		padding: 1em;
+		margin: -1em;
+
+		> span {
+			@include visually-hidden();
+		}
+	}
+}
+
+// Same styles as `Title` component.
+.wc-block-components-drawer .components-modal__header-heading {
+	@include reset-box();
+	// We need the font size to be in rem so it doesn't change depending on the parent element.
+	@include font-size(large, 1rem);
+	word-break: break-word;
+}