Forms: Add Create Form button to dashboard header

projects/packages/forms/changelog/update-forms-dashboard-create-form-button

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Forms: Add Create Form button to dashboard header

projects/packages/forms/package.json

@@ -77,6 +77,7 @@
 		"@babel/runtime": "7.26.10",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/user-event": "^14.4.3",
+		"@types/lodash": "4.17.16",
 		"@types/react": "18.3.18",
 		"@types/react-dom": "18.3.5",
 		"@wordpress/api-fetch": "7.22.0",

projects/packages/forms/src/dashboard/about/style.scss

@@ -1,6 +1,6 @@
 @mixin mobile {
 
-	@media (max-width: 600px) {
+	@media (max-width: 599px) {
 		@content;
 	}
 }

projects/packages/forms/src/dashboard/components/create-form-button/index.tsx

@@ -10,6 +10,7 @@ import { create } from '@wordpress/icons';
  * Internal dependencies
  */
 import { config } from '../../index';
+import './style.scss';
 
 type CreateFormButtonProps = {
 	label?: string;
@@ -47,7 +48,12 @@ export default function CreateFormButton( {
 	}, [ showPatterns ] );
 
 	return (
-		<Button variant="primary" onClick={ onButtonClickHandler } icon={ create }>
+		<Button
+			variant="primary"
+			onClick={ onButtonClickHandler }
+			icon={ create }
+			className="create-form-button jp-forms__create-form-button--large-green"
+		>
 			{ label }
 		</Button>
 	);

projects/packages/forms/src/dashboard/components/create-form-button/style.scss

@@ -0,0 +1,27 @@
+.jp-forms__create-form-button--large-green.create-form-button:not(:disabled,[aria-disabled="true"]),
+.jp-forms__create-form-button--large-green.create-form-button:active:not(:disabled,[aria-disabled="true"]) {
+	color: var(--jp-white,#fff);
+	background-color: var(--jp-green-50);
+	border-color: var(--jp-green-50);
+	box-shadow: inset 0 0 0 1px var(--jp-green-50), 0 0 0 currentColor;
+	min-width: auto;
+
+	&:hover {
+		background-color: var(--jp-green-60);
+
+		&:focus {
+			box-shadow: inset 0 0 0 1px var(--wp-components-color-background,#fff),0 0 0 var(--wp-admin-border-width-focus) var(--jp-green-60);
+		}
+	}
+
+	&:focus {
+		box-shadow: inset 0 0 0 1px var(--wp-components-color-background,#fff),0 0 0 var(--wp-admin-border-width-focus) var(--jp-green-50);
+	}
+}
+
+.jp-forms__create-form-button--large-green.create-form-button:disabled,
+.jp-forms__create-form-button--large-green.create-form-button[aria-disabled="true"] {
+	background: var(--jp-gray);
+	border-color: var(--jp-gray);
+	color: var(--jp-gray-50);
+}

projects/packages/forms/src/dashboard/components/layout/index.js → projects/packages/forms/src/dashboard/components/layout/index.tsx

@@ -1,19 +1,35 @@
-import { JetpackFooter } from '@automattic/jetpack-components';
+/**
+ * External dependencies
+ */
+import { JetpackFooter, useBreakpointMatch } from '@automattic/jetpack-components';
 import { shouldUseInternalLinks } from '@automattic/jetpack-shared-extension-utils';
 import { TabPanel } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+/**
+ * Internal dependencies
+ */
 import ExportResponsesButton from '../../inbox/export-responses';
 import { config } from '../../index';
+import CreateFormButton from '../create-form-button';
 import JetpackFormsLogo from '../logo';
-
 import './style.scss';
 
-const Layout = ( { className, showFooter } ) => {
+const Layout = ( {
+	className = '',
+	showFooter = false,
+}: {
+	className?: string;
+	showFooter?: boolean;
+} ) => {
 	const location = useLocation();
 	const navigate = useNavigate();
+	const [ isSm ] = useBreakpointMatch( 'sm' );
+	const createSmallLabel = __( 'Create', 'jetpack-forms' );
+	const createLargeLabel = __( 'Create form', 'jetpack-forms' );
+	const createButtonLabel = isSm ? createSmallLabel : createLargeLabel;
 
 	const enableIntegrationsTab = config( 'enableIntegrationsTab' );
 
@@ -41,7 +57,7 @@ const Layout = ( { className, showFooter } ) => {
 	};
 
 	const handleTabSelect = useCallback(
-		tabName => {
+		( tabName: string ) => {
 			if ( ! tabName ) {
 				tabName = config( 'hasFeedback' ) ? 'responses' : 'about';
 			}
@@ -59,7 +75,10 @@ const Layout = ( { className, showFooter } ) => {
 				<div className="jp-forms__logo-wrapper">
 					<JetpackFormsLogo />
 				</div>
-				{ getCurrentTab() === 'responses' && <ExportResponsesButton /> }
+				<div className="jp-forms__layout-header-actions">
+					{ getCurrentTab() === 'responses' && <ExportResponsesButton /> }
+					<CreateFormButton label={ createButtonLabel } />
+				</div>
 			</div>
 			<TabPanel
 				className="jp-forms__dashboard-tabs"

projects/packages/forms/src/dashboard/components/layout/style.scss

@@ -1,3 +1,10 @@
+@mixin mobile {
+
+	@media (max-width: 599px) {
+		@content;
+	}
+}
+
 body.toplevel_page_jetpack-forms,
 body.feedback_page_jetpack-forms,
 body.jetpack_page_jetpack-forms,
@@ -23,6 +30,18 @@ body.admin_page_jetpack-forms {
 		flex: 0 1 auto; /* Flex, but don't grow */
 	}
 
+	.jp-forms__logo-wrapper {
+
+		@include mobile {
+			width: 180px;
+		}
+	}
+
+	.jp-forms__layout-header-actions {
+		display: flex;
+		gap: 8px;
+	}
+
 	.jp-forms__logo {
 		margin: 20px 48px;
 		width: 200px;

projects/packages/forms/src/dashboard/inbox/export-responses/style.scss

@@ -64,10 +64,16 @@
 	}
 }
 
-.jp-forms__export-button--large-green.jp-forms__export-button--large-green,
-.jp-forms__export-button--large-green.jp-forms__export-button--large-green:hover:not(:disabled,[aria-disabled="true"],.is-pressed) {
+.jp-forms__export-button--large-green.export-button,
+.jp-forms__export-button--large-green.export-button:hover:not(:disabled,[aria-disabled="true"]),
+.jp-forms__export-button--large-green.export-button:active:not(:disabled,[aria-disabled="true"]) {
 	color: var(--jp-green-50);
 	border-color: var(--jp-green-50);
 	box-shadow: inset 0 0 0 1px var(--jp-green-50), 0 0 0 currentColor;
 	min-width: auto;
 }
+
+
+.jp-forms__export-button--large-green.export-button:focus:not(:disabled,[aria-disabled="true"]) {
+	box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--jp-green-50);
+}

projects/packages/forms/src/dashboard/index.js → projects/packages/forms/src/dashboard/index.tsx

@@ -17,7 +17,7 @@ import './style.scss';
 
 let settings = {};
 
-export const config = key => get( settings, key );
+export const config = ( key: string ) => get( settings, key );
 
 window.addEventListener( 'load', () => {
 	const container = document.getElementById( 'jp-forms-dashboard' );
@@ -55,6 +55,7 @@ window.addEventListener( 'load', () => {
 	] );
 
 	const root = createRoot( container );
+
 	root.render(
 		<ThemeProvider>
 			<RouterProvider router={ router } />

projects/packages/forms/tools/webpack.config.dashboard.js

@@ -8,7 +8,7 @@ const jetpackWebpackConfig = require( '@automattic/jetpack-webpack-config/webpac
 module.exports = {
 	mode: jetpackWebpackConfig.mode,
 	entry: {
-		'jetpack-forms-dashboard': path.join( __dirname, '..', 'src/dashboard/index.js' ),
+		'jetpack-forms-dashboard': path.join( __dirname, '..', 'src/dashboard/index.tsx' ),
 	},
 	output: {
 		...jetpackWebpackConfig.output,