newspack-components 4.6.2 → 4.7.0-alpha.1

package/src/drawer/context.test.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies.
+ */
+import { DrawerContext, useDrawerContext } from './context';
+
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+
+const Probe = () => {
+	const { title } = useDrawerContext();
+	return <span>{ title ? title.text : 'no title' }</span>;
+};
+
+describe( 'useDrawerContext', () => {
+	it( 'returns the provided value', () => {
+		render(
+			<DrawerContext.Provider value={ { requestClose: () => {}, title: { id: 't1', text: 'Hello' }, setTitle: () => {} } }>
+				<Probe />
+			</DrawerContext.Provider>
+		);
+		expect( screen.getByText( 'Hello' ) ).toBeInTheDocument();
+	} );
+
+	it( 'throws outside Drawer.Root', () => {
+		const consoleError = jest.spyOn( console, 'error' ).mockImplementation( () => {} );
+		expect( () => render( <Probe /> ) ).toThrow( 'Drawer subcomponents must be rendered inside Drawer.Root.' );
+		consoleError.mockRestore();
+	} );
+} );

package/src/drawer/context.ts

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies.
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import type { DrawerTitleInfo } from './types';
+
+type DrawerContextValue = {
+	requestClose: () => void;
+	title: DrawerTitleInfo | null;
+	setTitle: ( title: DrawerTitleInfo | null, forId?: string ) => void;
+};
+
+export const DrawerContext = createContext< DrawerContextValue | null >( null );
+
+export const useDrawerContext = (): DrawerContextValue => {
+	const context = useContext( DrawerContext );
+	if ( ! context ) {
+		throw new Error( 'Drawer subcomponents must be rendered inside Drawer.Root.' );
+	}
+	return context;
+};

package/src/drawer/divider.tsx

@@ -0,0 +1,13 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import type { DrawerDividerProps } from './types';
+
+const Divider = ( { className }: DrawerDividerProps ) => <hr className={ classnames( 'newspack-drawer__divider', className ) } />;
+
+export default Divider;

package/src/drawer/footer.tsx

@@ -0,0 +1,15 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import type { DrawerFooterProps } from './types';
+
+const Footer = ( { className, children }: DrawerFooterProps ) => (
+	<div className={ classnames( 'newspack-drawer__footer', className ) }>{ children }</div>
+);
+
+export default Footer;

package/src/drawer/header.tsx

@@ -0,0 +1,15 @@
+/**
+ * External dependencies.
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import type { DrawerHeaderProps } from './types';
+
+const Header = ( { className, children }: DrawerHeaderProps ) => (
+	<div className={ classnames( 'newspack-drawer__header', className ) }>{ children }</div>
+);
+
+export default Header;