diff --git a/projects/packages/forms/changelog/update-forms-empty-state b/projects/packages/forms/changelog/update-forms-empty-state new file mode 100644 index 000000000000..6d19ae2de444 --- /dev/null +++ b/projects/packages/forms/changelog/update-forms-empty-state @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Update empty state to use component from wp-ui. diff --git a/projects/packages/forms/routes/forms/stage.tsx b/projects/packages/forms/routes/forms/stage.tsx index ffe36fe84bf7..9eeb16e1fc2c 100644 --- a/projects/packages/forms/routes/forms/stage.tsx +++ b/projects/packages/forms/routes/forms/stage.tsx @@ -14,14 +14,15 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date'; import { useEffect, useMemo, useState, useCallback } from '@wordpress/element'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useSearch, useNavigate } from '@wordpress/route'; -import { Badge } from '@wordpress/ui'; +import { Badge, EmptyState } from '@wordpress/ui'; import * as React from 'react'; /** * Internal dependencies */ import IntegrationsModal from '../../src/blocks/contact-form/components/jetpack-integrations-modal'; +import { icon as formBlockIcon } from '../../src/blocks/contact-form/icon.jsx'; import CreateFormButton from '../../src/dashboard/components/create-form-button/index.tsx'; -import { EmptyWrapper, NoResults } from '../../src/dashboard/components/empty-responses/index.tsx'; +import { NoResults } from '../../src/dashboard/components/empty-responses/index.tsx'; import { FormNameModal } from '../../src/dashboard/components/form-name-modal'; import { FORM_STATUSES, @@ -612,13 +613,15 @@ function StageInner() { hasActiveFilters ? ( ) : ( - + + + { __( "You're set up. No forms yet.", 'jetpack-forms' ) } + + + { __( 'Create a form to manage and reuse it across your site.', 'jetpack-forms' ) } + + ) } - } - /> + + ) } view={ view } diff --git a/projects/packages/forms/src/blocks/contact-form/icon.jsx b/projects/packages/forms/src/blocks/contact-form/icon.jsx new file mode 100644 index 000000000000..e21407299aa3 --- /dev/null +++ b/projects/packages/forms/src/blocks/contact-form/icon.jsx @@ -0,0 +1,23 @@ +import { SVG, Path } from '@wordpress/primitives'; + +export const icon = ( + + + + + + + +); diff --git a/projects/packages/forms/src/blocks/contact-form/index.js b/projects/packages/forms/src/blocks/contact-form/index.js index 55f0b37a3e22..90dfe79bdcec 100644 --- a/projects/packages/forms/src/blocks/contact-form/index.js +++ b/projects/packages/forms/src/blocks/contact-form/index.js @@ -1,16 +1,15 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; -import { Path } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { select } from '@wordpress/data'; import { decodeEntities } from '@wordpress/html-entities'; import { __, _x } from '@wordpress/i18n'; import './editor.scss'; -import renderMaterialIcon from '../shared/components/render-material-icon.jsx'; import { FORM_POST_TYPE } from '../shared/util/constants.js'; import defaultAttributes from './attributes.ts'; import blockMetadata from './block.json'; import deprecated from './deprecated.js'; import edit from './edit.tsx'; +import { icon } from './icon.jsx'; import transforms from './transforms.js'; import { DEFAULT_FORM_LABEL, extractTitleText, formatFormLabel } from './util/form-label.js'; import variations from './variations.js'; @@ -48,28 +47,6 @@ export const getFormLabel = ( { ref } ) => { } ); }; -const icon = renderMaterialIcon( - <> - - - - - - -); - // Extract only valid block registration properties from block.json // Exclude file-based properties like editorScript, style, etc. const { editorScript, style, name: blockName, $schema, ...validBlockMetadata } = blockMetadata; diff --git a/projects/packages/forms/src/dashboard/components/empty-responses/index.tsx b/projects/packages/forms/src/dashboard/components/empty-responses/index.tsx index ef149822654a..146c96f7d99c 100644 --- a/projects/packages/forms/src/dashboard/components/empty-responses/index.tsx +++ b/projects/packages/forms/src/dashboard/components/empty-responses/index.tsx @@ -2,15 +2,11 @@ * External dependencies */ import { isSimpleSite } from '@automattic/jetpack-script-data'; -import { - Button, - __experimentalText as Text, // eslint-disable-line @wordpress/no-unsafe-wp-apis - __experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis -} from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { createInterpolateElement, useCallback, useMemo } from '@wordpress/element'; import { __, _n, sprintf } from '@wordpress/i18n'; -import { Link } from '@wordpress/ui'; +import { page, search, shield, trash } from '@wordpress/icons'; +import { Button, EmptyState, Link } from '@wordpress/ui'; /** * Internal dependencies */ @@ -44,12 +40,6 @@ type EmptyResponsesProps = { status: string; }; -type EmptyWrapperProps = { - heading?: string; - body?: string | ReactNode; - actions?: ReactNode; -}; - /** * Hook to handle Akismet installation and activation. * @@ -152,26 +142,17 @@ const useInstallAkismet = (): UseInstallAkismetReturn => { }; }; -export const EmptyWrapper = ( { heading = '', body = '', actions = null }: EmptyWrapperProps ) => ( - - { heading && ( - - { heading } - - ) } - { body && { body } } - { actions && { actions } } - -); - export const NoResults = () => ( - + + + { __( 'No results found', 'jetpack-forms' ) } + + { __( + "Try adjusting your search or filters to find what you're looking for.", + 'jetpack-forms' + ) } + + ); const EmptyResponses = ( { @@ -209,7 +190,13 @@ const EmptyResponses = ( { ); if ( status === 'trash' ) { return ( - 0 && noTrashMessage } /> + + + { noTrashHeading } + { emptyTrashDays > 0 && ( + { noTrashMessage } + ) } + ); } @@ -222,44 +209,55 @@ const EmptyResponses = ( { if ( status === 'spam' ) { if ( shouldShowAkismetCta ) { return ( - + + { noSpamHeading } + { wrapperBody } + - } - /> + + ); } - return ; + return ( + + + { noSpamHeading } + { noSpamMessage } + + ); } return ( - + + + { __( "You're set up. No responses yet.", 'jetpack-forms' ) } + + + { __( + 'Share your form to start collecting responses. New items will appear here.', + 'jetpack-forms' + ) } + + { ! isSingleFormView && ( + - ) - } - /> + + ) } + ); }; diff --git a/projects/packages/forms/src/dashboard/forms/index.tsx b/projects/packages/forms/src/dashboard/forms/index.tsx index 52c0c9cb3647..01f7e4bee918 100644 --- a/projects/packages/forms/src/dashboard/forms/index.tsx +++ b/projects/packages/forms/src/dashboard/forms/index.tsx @@ -14,15 +14,16 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date'; import { useCallback, useEffect, useMemo, useState } from '@wordpress/element'; import { __, _n, sprintf } from '@wordpress/i18n'; import { store as noticesStore } from '@wordpress/notices'; +import { EmptyState } from '@wordpress/ui'; import { useNavigate } from 'react-router'; /** * Internal dependencies */ +import { icon as formBlockIcon } from '../../blocks/contact-form/icon.jsx'; import { getEmbedCode, getShortcode } from '../../blocks/shared/util/embed-codes'; import useConfigValue from '../../hooks/use-config-value.ts'; import CreateFormButton from '../components/create-form-button/index.tsx'; import DataViewsHeaderRow from '../components/dataviews-header-row/index.tsx'; -import { EmptyWrapper } from '../components/empty-responses/index.tsx'; import Page from '../components/page/index.tsx'; import { NON_TRASH_FORM_STATUSES } from '../constants.ts'; import useDeleteForm from '../hooks/use-delete-form.ts'; @@ -442,13 +443,15 @@ export default function FormsDashboardForms(): JSX.Element | null { data={ records || [] } isLoading={ isLoading } empty={ - + + + { __( "You're set up. No forms yet.", 'jetpack-forms' ) } + + + { __( 'Create a form to manage and reuse it across your site.', 'jetpack-forms' ) } + + ) } - } - /> + + } view={ view } onChangeView={ onChangeView } diff --git a/projects/packages/forms/src/form-editor/plugins/form-pre-publish-panel.tsx b/projects/packages/forms/src/form-editor/plugins/form-pre-publish-panel.tsx index 04d5188a37f5..2c7fd8289c00 100644 --- a/projects/packages/forms/src/form-editor/plugins/form-pre-publish-panel.tsx +++ b/projects/packages/forms/src/form-editor/plugins/form-pre-publish-panel.tsx @@ -277,9 +277,7 @@ export const FormPrePublishPanel = () => { return (
- - { formBlockSettings.icon.src() } - + { formBlockSettings.icon.src } { decodeEntities( postTitle ) || __( 'Untitled Form', 'jetpack-forms' ) }