Design Picker: Move the old one into the design picker step under the…

… signup flow

client/signup/steps/design-picker/design-picker-category-filter.scss

@@ -0,0 +1,114 @@
+@import "@automattic/onboarding/styles/mixins";
+@import "@automattic/onboarding/styles/variables";
+@import "@automattic/typography/styles/fonts";
+
+$design-picker-category-filter-text-color: #3c434a;
+$design-picker-category-filter-text-color-active: var(--studio-gray-100);
+
+.design-picker-category-filter {
+	@include break-small {
+		flex: 0 245px;
+		padding-right: 1rem;
+	}
+
+	button.components-button.design-picker-category-filter__menu-item {
+		padding: 0;
+		color: $design-picker-category-filter-text-color;
+		display: block;
+		width: auto;
+		font-size: 1rem;
+
+		&:hover:not(:disabled),
+		&:active:not(:disabled) {
+			box-shadow: none;
+			background: transparent;
+			.design-picker-category-filter__item-name {
+				text-decoration: underline;
+				color: $design-picker-category-filter-text-color-active;
+			}
+		}
+
+		&.is-pressed {
+			.design-picker-category-filter__item-name {
+				text-decoration: underline;
+				font-weight: 500;
+				color: $design-picker-category-filter-text-color-active;
+
+				&:hover:not(:disabled) {
+					color: $design-picker-category-filter-text-color-active;
+				}
+			}
+			background: transparent;
+
+			&:focus:not(:disabled),
+			&:focus-visible:not(:disabled) {
+				box-shadow:
+					inset 0 0 0 1px #fff,
+					0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+
+			&:focus:not(:disabled):not(:focus-visible) {
+				box-shadow: none;
+			}
+		}
+
+		.design-picker-category-filter__recommended-badge {
+			display: inline-block;
+			font-size: 0.75rem;
+			padding: 0 10px;
+			line-height: 20px;
+			margin-left: 12px;
+			background-color: #b8e6bf;
+			color: #00450c;
+			border-radius: 4px;
+		}
+
+		.components-menu-item__item {
+			min-width: auto;
+		}
+	}
+}
+
+.design-picker-category-filter__sidebar {
+	display: none;
+
+	@include break-small {
+		display: block;
+	}
+}
+
+.design-picker-category-filter__dropdown {
+	@include break-small {
+		display: none;
+	}
+
+	font-family: $sans;
+	font-size: $font-body-small;
+	line-height: 24px;
+	font-weight: 500;
+	border-radius: 4px;
+	border: 1px solid #c3c4c7;
+	padding: 0 35px 0 10px;
+	margin-bottom: 32px;
+	min-height: 44px;
+	height: 44px;
+	width: 100%;
+	-webkit-appearance: none;
+	appearance: none;
+	background:
+		transparent
+		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMCIgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PGc+PHBhdGggZmlsbD0iI2MzYzRjNyIgZD0iTTIwIDlsLTggOC04LTggMS40MTQtMS40MTRMMTIgMTQuMTcybDYuNTg2LTYuNTg2eiIvPjwvZz48L3N2Zz4=)
+		no-repeat right 12px top 50%;
+	background-size: 20px;
+
+	&:focus,
+	&:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--color-primary-light);
+	}
+
+	&:focus:not(:focus-visible) {
+		outline: none;
+		box-shadow: none;
+	}
+}

client/signup/steps/design-picker/design-picker-category-filter.tsx

@@ -0,0 +1,91 @@
+import {
+	NavigableMenu,
+	MenuItem as _MenuItem,
+	VisuallyHidden,
+	Button,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { useTranslate } from 'i18n-calypso';
+import type { Category } from '@automattic/design-picker';
+import type { ComponentProps, ComponentType, ReactNode } from 'react';
+import './design-picker-category-filter.scss';
+
+interface Props {
+	categories: Category[];
+	onSelect: ( selectedSlug: string | null ) => void;
+	selectedCategory: string | null;
+	recommendedCategorySlug: string | null;
+	heading?: ReactNode;
+	footer?: ReactNode;
+}
+
+// TODO: Remove this wrapper when MenuItem adds back button prop types
+type MenuItemProps = ComponentProps< typeof _MenuItem >;
+const MenuItem = _MenuItem as ComponentType<
+	MenuItemProps & {
+		variant?: ComponentProps< typeof Button >[ 'variant' ];
+		isPressed?: boolean;
+	}
+>;
+
+export function DesignPickerCategoryFilter( {
+	categories,
+	onSelect,
+	selectedCategory,
+	heading,
+	footer,
+	recommendedCategorySlug,
+}: Props ) {
+	const instanceId = useInstanceId( DesignPickerCategoryFilter );
+	const translate = useTranslate();
+
+	return (
+		<div className="design-picker-category-filter">
+			{ heading }
+			<VisuallyHidden as="h2" id={ `design-picker__category-heading-${ instanceId }` }>
+				{ translate( 'Design categories' ) }
+			</VisuallyHidden>
+
+			{ /* Shown on smaller displays */ }
+			<select
+				className="design-picker-category-filter__dropdown"
+				value={ selectedCategory || '' }
+				onChange={ ( e ) => onSelect( e.currentTarget.value ) }
+			>
+				{ categories.map( ( { slug, name } ) => (
+					<option key={ slug } value={ slug }>
+						{ name }
+					</option>
+				) ) }
+			</select>
+
+			{ /* Shown on larger displays */ }
+			<NavigableMenu
+				aria-labelledby={ `design-picker__category-heading-${ instanceId }` }
+				onNavigate={ ( _index, child ) => onSelect( child.dataset.slug ?? null ) }
+				orientation="vertical"
+				className="design-picker-category-filter__sidebar"
+			>
+				{ categories.map( ( { slug, name } ) => (
+					<MenuItem
+						key={ slug }
+						variant="tertiary"
+						isPressed={ slug === selectedCategory }
+						data-slug={ slug }
+						onClick={ () => onSelect( slug ) }
+						tabIndex={ slug === selectedCategory ? undefined : -1 }
+						className="design-picker-category-filter__menu-item"
+					>
+						<span className="design-picker-category-filter__item-name">{ name }</span>{ ' ' }
+						{ recommendedCategorySlug === slug && (
+							<span className="design-picker-category-filter__recommended-badge">
+								{ translate( 'Recommended' ) }
+							</span>
+						) }
+					</MenuItem>
+				) ) }
+			</NavigableMenu>
+			{ footer }
+		</div>
+	);
+}